{% extends "base.html" %}

{% block title %}Dashboard - ELD Parser{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <h1><i class="fas fa-dashboard"></i> ELD Dashboard</h1>
        <p class="text-muted">Electronic Logging Device data overview and management</p>
    </div>
</div>

<!-- Statistics Cards -->
<div class="row">
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-value">{{ stats.total_logs or 0 }}</div>
            <div class="stat-label">Total Log Entries</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-value">{{ '{:,}'.format(stats.total_km or 0) }}</div>
            <div class="stat-label">Total Kilometers</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-value">{{ '{:,.1f}'.format(stats.total_work_hours or 0) }}</div>
            <div class="stat-label">Total Work Hours</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-value">{{ '{:,.1f}'.format(stats.avg_km_per_day or 0) }}</div>
            <div class="stat-label">Avg KM/Day</div>
        </div>
    </div>
</div>

<!-- Action Buttons -->
<div class="row mb-4">
    <div class="col-md-12">
        <a href="{{ url_for('upload_file') }}" class="btn btn-primary btn-lg">
            <i class="fas fa-upload"></i> Upload New ELD File
        </a>
        <a href="{{ url_for('api_logs') }}" class="btn btn-secondary">
            <i class="fas fa-download"></i> Export JSON
        </a>
        <a href="{{ url_for('test_connection') }}" class="btn btn-info">
            <i class="fas fa-database"></i> Test DB Connection
        </a>
    </div>
</div>

<!-- Data Table -->
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5><i class="fas fa-table"></i> Daily Log Entries ({{ logs|length }} records)</h5>
            </div>
            <div class="card-body">
                {% if logs %}
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead class="table-dark">
                            <tr>
                                <th>Date</th>
                                <th>Driver</th>
                                <th>Distance (km)</th>
                                <th>Distance (mi)</th>
                                <th>Work Hours</th>
                                <th>Cycle Hours</th>
                                <th>Location</th>
                                <th>Power Unit</th>
                                <th>Notes</th>
                                <th>Source File</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for log in logs %}
                            <tr>
                                <td>{{ log[1] }}</td>
                                <td>{{ log[8] or 'N/A' }}</td>
                                <td>{{ '{:,}'.format(log[2]) if log[2] else '0' }}</td>
                                <td>{{ '{:,.1f}'.format(log[3]) if log[3] else '0.0' }}</td>
                                <td>{{ '{:.1f}'.format(log[4]) if log[4] else '0.0' }}h</td>
                                <td>{{ '{:.1f}'.format(log[5]) if log[5] else '0.0' }}h</td>
                                <td class="text-truncate" style="max-width: 150px;" title="{{ log[6] or 'N/A' }}">
                                    {{ log[6] or 'N/A' }}
                                </td>
                                <td>{{ log[9] or 'N/A' }}</td>
                                <td class="notes-cell">
                                    <!-- Notes Display -->
                                    <div id="notes-display-{{ log[0] }}">
                                        <span class="text-muted">
                                            {{ log[11][:50] + '...' if log[11] and log[11]|length > 50 else (log[11] or 'No notes') }}
                                        </span>
                                        <button type="button" class="btn btn-sm btn-outline-primary ms-1" 
                                                onclick="editNotes({{ log[0] }})">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                    </div>
                                    
                                    <!-- Notes Edit Form -->
                                    <div id="notes-form-{{ log[0] }}" class="notes-form">
                                        <form method="post" action="{{ url_for('edit_notes', log_id=log[0]) }}">
                                            <textarea name="notes" class="form-control form-control-sm mb-2" 
                                                      rows="2" placeholder="Add notes...">{{ log[11] or '' }}</textarea>
                                            <button type="submit" class="btn btn-sm btn-success">
                                                <i class="fas fa-save"></i> Save
                                            </button>
                                            <button type="button" class="btn btn-sm btn-secondary ms-1" 
                                                    onclick="cancelEdit({{ log[0] }})">
                                                Cancel
                                            </button>
                                        </form>
                                    </div>
                                </td>
                                <td class="text-truncate" style="max-width: 120px;" title="{{ log[10] or 'N/A' }}">
                                    {{ log[10] or 'N/A' }}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-5">
                    <i class="fas fa-file-alt fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">No ELD data found</h5>
                    <p class="text-muted">Upload your first ELD file to get started</p>
                    <a href="{{ url_for('upload_file') }}" class="btn btn-primary">
                        <i class="fas fa-upload"></i> Upload ELD File
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Additional Statistics Row -->
{% if logs %}
<div class="row mt-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h6><i class="fas fa-chart-bar"></i> Quick Stats</h6>
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-4">
                        <h5 class="text-primary">{{ '{:,}'.format(stats.total_miles or 0) }}</h5>
                        <small class="text-muted">Total Miles</small>
                    </div>
                    <div class="col-4">
                        <h5 class="text-success">{{ '{:.1f}'.format(stats.total_cycle_hours or 0) }}</h5>
                        <small class="text-muted">Cycle Hours</small>
                    </div>
                    <div class="col-4">
                        <h5 class="text-info">{{ '{:.1f}'.format(stats.avg_miles_per_day or 0) }}</h5>
                        <small class="text-muted">Avg Miles/Day</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h6><i class="fas fa-info-circle"></i> Recent Activity</h6>
            </div>
            <div class="card-body">
                {% if logs %}
                <p class="mb-1"><strong>Latest Entry:</strong> {{ logs[0][1] }}</p>
                <p class="mb-1"><strong>Latest Distance:</strong> {{ logs[0][2] or 0 }} km</p>
                <p class="mb-0"><strong>Latest Hours:</strong> {{ logs[0][4] or 0 }}h work</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}