@include('admin.include.header')
@include('admin.include.sidebar')

<style>
    .kpi-card {
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        padding: 1rem 1.25rem;
        margin-bottom: 1rem;
        border: none;
        height: 100%;
    }
    .kpi-card.kpi-light-primary { background: #64b5f6; }
    .kpi-card.kpi-light-danger { background: #e57373; }
    .kpi-card.kpi-light-warning { background: #ffb74d; }
    .kpi-card.kpi-light-primary .kpi-label,
    .kpi-card.kpi-light-danger .kpi-label,
    .kpi-card.kpi-light-warning .kpi-label { color: rgba(0, 0, 0, 0.75); }
    .kpi-card.kpi-light-primary .kpi-value { color: #0d47a1; }
    .kpi-card.kpi-light-danger .kpi-value { color: #b71c1c; }
    .kpi-card.kpi-light-warning .kpi-value { color: #e65100; }
    .kpi-card.kpi-light-primary small,
    .kpi-card.kpi-light-danger small,
    .kpi-card.kpi-light-warning small { color: rgba(0, 0, 0, 0.7); }
    .kpi-label { font-size: 0.85rem; color: #6c757d; margin-bottom: 0.25rem; }
    .kpi-value { font-size: 1.5rem; font-weight: 700; }
    .badge-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
    .status-compliant { background: #28a745; }
    .status-due-soon { background: #ffc107; }
    .status-overdue { background: #dc3545; }
    .status-none { background: #6c757d; }
</style>

<div class="d-flex flex-row flex-column-fluid px-10">
    <div class="main d-flex flex-column flex-row-fluid">
        <div class="content flex-column-fluid" id="kt_content">

            <div class="card card-custom gutter-b">
                <div class="card-header border-0 pt-6 pb-0">
                    <div class="card-title">
                        <h3 class="card-label">Monthly Compliance Tracking</h3>
                    </div>
                    <div class="card-toolbar">
                        <form method="get" action="{{ route('compliance.index') }}" class="d-inline">
                            <label class="mr-2 text-muted small">View:</label>
                            <select name="view_type" class="form-control form-control-sm d-inline-block" style="width:auto;" onchange="this.form.submit()">
                                <option value="all" {{ ($viewType ?? '') === 'all' ? 'selected' : '' }}>All Vehicles</option>
                                <option value="overdue" {{ ($viewType ?? '') === 'overdue' ? 'selected' : '' }}>Overdue Only</option>
                                <option value="due_soon" {{ ($viewType ?? '') === 'due_soon' ? 'selected' : '' }}>Due This Week</option>
                                <option value="compliant" {{ ($viewType ?? '') === 'compliant' ? 'selected' : '' }}>Compliant Only</option>
                            </select>
                        </form>
                        <span class="text-muted small ml-2">Due soon = {{ $dueSoonDays }} days | Next due = +{{ $intervalDays }} days</span>
                    </div>
                </div>
                <div class="card-body">

                    {{-- KPIs --}}
                    <div class="row mb-4 d-flex">
                        <div class="col-md-4 d-flex">
                            <div class="kpi-card kpi-light-primary w-100">
                                <div class="kpi-label">Completion % This Month</div>
                                <div class="kpi-value">{{ $completionPercent }}%</div>
                                <small>{{ $inspectedThisMonth }} of {{ $totalVehicles }} vehicles inspected this month</small>
                            </div>
                        </div>
                        <div class="col-md-4 d-flex">
                            <div class="kpi-card kpi-light-danger w-100">
                                <div class="kpi-label">Overdue Vehicles</div>
                                <div class="kpi-value">{{ count($overdueVehicles) }}</div>
                            </div>
                        </div>
                        <div class="col-md-4 d-flex">
                            <div class="kpi-card kpi-light-warning w-100">
                                <div class="kpi-label">Due This Week</div>
                                <div class="kpi-value">{{ count($dueThisWeekVehicles) }}</div>
                            </div>
                        </div>
                    </div>

                    {{-- Overdue vehicles list --}}
                    <div class="mb-4">
                        <h5 class="text-dark mb-3">Overdue Vehicles List</h5>
                        <div class="table-responsive">
                            <table class="table table-bordered table-sm">
                                <thead class="thead-light">
                                    <tr>
                                        <th>Vehicle #</th>
                                        <th>VIN</th>
                                        <th>Type</th>
                                        <th>Last Inspection</th>
                                        <th>Next Due Date</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($overdueVehicles as $row)
                                        <tr>
                                            <td>{{ $row['vehicle']->unit_number }}</td>
                                            <td>{{ $row['vehicle']->vin }}</td>
                                            <td>{{ ucfirst($row['vehicle']->type ?? '') }}</td>
                                            <td>{{ $row['last_inspection_date'] ? $row['last_inspection_date']->format('M d, Y') : '—' }}</td>
                                            <td>{{ $row['next_due_date'] ? $row['next_due_date']->format('M d, Y') : 'Never' }}</td>
                                            <td><span class="badge-dot status-overdue"></span> Overdue</td>
                                        </tr>
                                    @empty
                                        <tr><td colspan="6" class="text-center text-muted">No overdue vehicles</td></tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {{-- Due this week list --}}
                    <div class="mb-4">
                        <h5 class="text-dark mb-3">Due This Week</h5>
                        <div class="table-responsive">
                            <table class="table table-bordered table-sm">
                                <thead class="thead-light">
                                    <tr>
                                        <th>Vehicle #</th>
                                        <th>VIN</th>
                                        <th>Type</th>
                                        <th>Last Inspection</th>
                                        <th>Next Due Date</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($dueThisWeekVehicles as $row)
                                        <tr>
                                            <td>{{ $row['vehicle']->unit_number }}</td>
                                            <td>{{ $row['vehicle']->vin }}</td>
                                            <td>{{ ucfirst($row['vehicle']->type ?? '') }}</td>
                                            <td>{{ $row['last_inspection_date'] ? $row['last_inspection_date']->format('M d, Y') : '—' }}</td>
                                            <td>{{ $row['next_due_date'] ? $row['next_due_date']->format('M d, Y') : '—' }}</td>
                                            <td><span class="badge-dot status-due-soon"></span> Due soon</td>
                                        </tr>
                                    @empty
                                        <tr><td colspan="6" class="text-center text-muted">No vehicles due this week</td></tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {{-- All vehicles: last inspection, next due, indicator --}}
                    <div>
                        <h5 class="text-dark mb-3">All Vehicles – Last Inspection & Next Due Date</h5>
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead class="thead-light">
                                    <tr>
                                        <th>Vehicle #</th>
                                        <th>VIN</th>
                                        <th>Type</th>
                                        <th>Last Inspection Date</th>
                                        <th>Next Due Date (+{{ $intervalDays }} days)</th>
                                        <th>Due Indicator</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($vehicleCompliance as $row)
                                        <tr>
                                            <td>{{ $row['vehicle']->unit_number }}</td>
                                            <td>{{ $row['vehicle']->vin }}</td>
                                            <td>{{ ucfirst($row['vehicle']->type ?? '') }}</td>
                                            <td>{{ $row['last_inspection_date'] ? $row['last_inspection_date']->format('M d, Y') : '—' }}</td>
                                            <td>{{ $row['next_due_date'] ? $row['next_due_date']->format('M d, Y') : '—' }}</td>
                                            <td>
                                                @if($row['status'] === 'compliant')
                                                    <span class="badge-dot status-compliant"></span> <span class="text-success font-weight-bold">Compliant</span>
                                                @elseif($row['status'] === 'due_soon')
                                                    <span class="badge-dot status-due-soon"></span> <span class="text-warning font-weight-bold">Due soon</span>
                                                @else
                                                    <span class="badge-dot status-overdue"></span> <span class="text-danger font-weight-bold">Overdue</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>

@include('admin.include.footer')