@extends('garage.layouts.app')

@section('title', $reportTitle)

@push('styles')
<style>
    .jtr-box { border:1px solid #e2e8f0; border-radius:14px; background:#fff; box-shadow:0 8px 24px rgba(15,23,42,.06); }
    .jtr-head { padding:.9rem 1rem; border-bottom:1px solid #e2e8f0; background:linear-gradient(135deg,#eef2ff,#f0f9ff); }
    .jtr-filter { padding:.8rem 1rem; border-bottom:1px solid #eef2f7; background:#f8fafc; }
    .jtr-grid { display:grid; gap:.55rem; grid-template-columns:repeat(5,minmax(0,1fr)); }
    .jtr-grid label { font-size:.72rem; color:#64748b; font-weight:700; margin-bottom:.12rem; }
    .jtr-grid input,.jtr-grid select { width:100%; border:1px solid #dbe3ee; border-radius:9px; padding:.38rem .52rem; font-size:.8rem; background:#fff; }
    .jtr-actions { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-top:.65rem; }
    .jtr-badges { margin-left:auto; display:flex; gap:.4rem; flex-wrap:wrap; }
    .jtr-badge { font-size:.72rem; font-weight:700; border:1px solid #dbe3ee; border-radius:999px; padding:.2rem .58rem; background:#fff; color:#334155; }
    .jtr-table thead th { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:#64748b; background:#f8fafc; }
    .jtr-table td { font-size:.82rem; }
</style>
@endpush

@section('content')
<div class="container-fluid px-2 px-lg-3 py-3">
    <div class="jtr-box">
        <div class="jtr-head d-flex justify-content-between align-items-start flex-wrap gap-2">
            <div>
                <h1 class="h5 mb-0"><i class="bi bi-stopwatch me-1 text-primary"></i>{{ $reportTitle }}</h1>
                <div class="small text-muted mt-1">Job card task-level timing analytics for mechanics and delays.</div>
            </div>
            <a href="{{ route('garage.reports.index') }}" class="btn btn-sm btn-outline-secondary">All reports</a>
        </div>

        <form method="GET" class="jtr-filter">
            <div class="jtr-grid">
                <div><label>Date from</label><input type="date" name="date_from" value="{{ $filters['date_from'] }}"></div>
                <div><label>Date to</label><input type="date" name="date_to" value="{{ $filters['date_to'] }}"></div>
                <div><label>Job card no</label><input type="text" name="job_card_no" value="{{ $filters['job_card_no'] }}"></div>
                <div>
                    <label>Customer</label>
                    <select name="customer_id">
                        <option value="">All</option>
                        @foreach(($options['customers'] ?? []) as $c)
                            <option value="{{ $c->id }}" {{ (string)$filters['customer_id'] === (string)$c->id ? 'selected' : '' }}>{{ $c->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label>Vehicle</label>
                    <select name="vehicle_id">
                        <option value="">All</option>
                        @foreach(($options['vehicles'] ?? []) as $v)
                            <option value="{{ $v->id }}" {{ (string)$filters['vehicle_id'] === (string)$v->id ? 'selected' : '' }}>{{ $v->registration_number }}</option>
                        @endforeach
                    </select>
                </div>

                <div><label>Registration no</label><input type="text" name="registration_no" value="{{ $filters['registration_no'] }}"></div>
                <div>
                    <label>Mechanic/Staff</label>
                    <select name="mechanic_id">
                        <option value="">All</option>
                        @foreach(($options['mechanics'] ?? []) as $m)
                            <option value="{{ $m->id }}" {{ (string)$filters['mechanic_id'] === (string)$m->id ? 'selected' : '' }}>{{ $m->name }}{{ $m->employee_code ? ' · '.$m->employee_code : '' }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label>Task status</label>
                    <select name="task_status">
                        <option value="">All</option>
                        @foreach(['pending','assigned','in_progress','paused','completed','cancelled'] as $st)
                            <option value="{{ $st }}" {{ $filters['task_status'] === $st ? 'selected' : '' }}>{{ ucfirst(str_replace('_',' ',$st)) }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label>Job card status</label>
                    <select name="job_card_status">
                        <option value="">All</option>
                        @foreach(['draft','in_progress','on_hold','completed','cancelled'] as $st)
                            <option value="{{ $st }}" {{ $filters['job_card_status'] === $st ? 'selected' : '' }}>{{ ucfirst(str_replace('_',' ',$st)) }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="jtr-actions">
                <button type="submit" class="btn btn-sm btn-primary"><i class="bi bi-funnel me-1"></i>Apply filters</button>
                <a href="{{ route('garage.reports.job-card-tasks.show', ['slug' => $reportSlug]) }}" class="btn btn-sm btn-outline-secondary">Clear</a>
                <a href="{{ request()->fullUrlWithQuery(['export' => 'excel']) }}" class="btn btn-sm btn-outline-success"><i class="bi bi-file-earmark-excel me-1"></i>Excel</a>
                <a href="{{ request()->fullUrlWithQuery(['export' => 'pdf']) }}" class="btn btn-sm btn-outline-danger" target="_blank" rel="noopener noreferrer"><i class="bi bi-file-earmark-pdf me-1"></i>PDF</a>
                <a href="{{ request()->fullUrlWithQuery(['print' => 1]) }}" class="btn btn-sm btn-outline-dark" target="_blank" rel="noopener noreferrer"><i class="bi bi-printer me-1"></i>Print</a>
                <div class="jtr-badges">
                    <span class="jtr-badge">Rows: {{ number_format((int)($totals['rows'] ?? 0)) }}</span>
                    @if(isset($totals['estimated_minutes']))<span class="jtr-badge">Estimated: {{ number_format((int)$totals['estimated_minutes']) }}m</span>@endif
                    @if(isset($totals['actual_minutes']))<span class="jtr-badge">Actual: {{ number_format((int)$totals['actual_minutes']) }}m</span>@endif
                    @if(isset($totals['pending_minutes']))<span class="jtr-badge">Pending: {{ number_format((int)$totals['pending_minutes']) }}m</span>@endif
                    @if(isset($totals['delay_minutes']))<span class="jtr-badge">Delay: {{ number_format((int)$totals['delay_minutes']) }}m</span>@endif
                </div>
            </div>
        </form>

        <div class="table-responsive">
            <table class="table table-sm table-hover mb-0 jtr-table">
                <thead>
                <tr>
                    @foreach($columns as $c)
                        <th>{{ $c }}</th>
                    @endforeach
                </tr>
                </thead>
                <tbody>
                @forelse($rows as $r)
                    <tr>
                        @foreach($r as $v)
                            <td>{{ is_numeric($v) ? number_format((float)$v, 2) : $v }}</td>
                        @endforeach
                    </tr>
                @empty
                    <tr><td colspan="{{ count($columns) }}" class="text-center text-muted py-4">No records found.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
        @if(!empty($printMode))
            <script>window.addEventListener('load', function () { window.print(); });</script>
        @endif
    </div>
</div>
@endsection