@extends('garage.layouts.app')

@section('title', 'Job Card Queue')

@push('styles')
<style>
    .woq-hero{
        background: rgba(var(--bs-primary-rgb), .06);
        border: 1px solid rgba(var(--bs-primary-rgb), .22);
        border-radius: 14px;
        padding: .9rem 1rem;
    }
    .woq-sub{ color:#64748b; font-size:.82rem; margin-top:.15rem; }
    .woq-muted{ color:#667085; }
    .woq-mono{ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
    .woq-kpi{
        border: 1px solid #e9edf5;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 6px 18px rgba(16, 24, 40, 0.05);
        position: relative;
        overflow: hidden;
    }
    .woq-kpi .small{ color:#667085; }
    .woq-kpi .woq-num{ font-weight: 800; letter-spacing: -0.01em; }
    .woq-kpi::before{
        content:"";
        position:absolute;
        left:0; top:0; bottom:0;
        width:4px;
        background: var(--bs-primary);
        opacity:.9;
    }
    .woq-kpi.kpi-danger::before{ background: var(--bs-primary); }
    .woq-kpi.kpi-info::before{ background: var(--bs-primary); }
    .woq-table-wrap{
        border: 1px solid #e9edf5;
        border-radius: 12px;
        overflow: hidden;
        background:#fff;
        box-shadow: 0 10px 28px rgba(16, 24, 40, 0.06);
    }
    .woq-head{ background: #fff; border-bottom: 1px solid #e9edf5; }
    .woq-table thead th{
        text-transform: uppercase;
        font-size: 0.76rem;
        letter-spacing: 0.02em;
        background: #f8fafc;
        border-bottom: 1px solid #e9edf5;
        color: #475467;
    }
    .woq-table tbody td{ vertical-align: middle; }
    .woq-table tbody tr:hover{ background: #f8fbff; }
    .woq-table .text-end{ font-variant-numeric: tabular-nums; }
    .woq-chip{
        display:inline-flex;
        align-items:center;
        gap:.35rem;
        padding:.15rem .5rem;
        border-radius: 999px;
        font-size: .78rem;
        border: 1px solid #e5e7eb;
        background: #fff;
        color:#111827;
        white-space:nowrap;
    }
    .woq-chip.danger{ border-color: rgba(var(--bs-primary-rgb), .28); background: rgba(var(--bs-primary-rgb), .08); color: var(--bs-primary); }
    .woq-chip.ok{ border-color: rgba(var(--bs-primary-rgb), .28); background: rgba(var(--bs-primary-rgb), .08); color: var(--bs-primary); }
    .woq-chip.warn{ border-color: rgba(var(--bs-primary-rgb), .28); background: rgba(var(--bs-primary-rgb), .08); color: var(--bs-primary); }
    .woq-chip.run{ border-color: rgba(var(--bs-primary-rgb), .28); background: rgba(var(--bs-primary-rgb), .08); color: var(--bs-primary); }
    .woq-chip.soft{ border-color:#e2e8f0; background:#f8fafc; color:#334155; }
    .woq-progress{
        height: 6px;
        background: #eef2ff;
        border-radius: 999px;
        overflow: hidden;
        border: 1px solid #e9edf5;
    }
    .woq-progress > span{
        display:block;
        height:100%;
        background: var(--bs-primary);
        width: 0%;
    }
    .woq-badge{
        border-radius: 999px;
        padding: .25rem .55rem;
        font-size: .75rem;
        font-weight: 700;
        border: 1px solid rgba(148,163,184,.55);
        background: rgba(248,250,252,.9);
        color:#334155;
        text-transform: capitalize;
    }
    .woq-badge.completed{ border-color: rgba(var(--bs-primary-rgb), .28); background: rgba(var(--bs-primary-rgb), .08); color: var(--bs-primary); }
    .woq-badge.in_progress{ border-color: rgba(var(--bs-primary-rgb), .28); background: rgba(var(--bs-primary-rgb), .08); color: var(--bs-primary); }
    .woq-badge.on_hold{ border-color: rgba(var(--bs-primary-rgb), .28); background: rgba(var(--bs-primary-rgb), .08); color: var(--bs-primary); }
    .woq-badge.draft{ border-color: rgba(var(--bs-primary-rgb), .28); background: rgba(var(--bs-primary-rgb), .08); color: var(--bs-primary); }
    .woq-badge.cancelled{ border-color: rgba(var(--bs-primary-rgb), .28); background: rgba(var(--bs-primary-rgb), .08); color: var(--bs-primary); }
</style>
@endpush

@section('content')
@php
    $minutesToText = function ($minutes) {
        $m = (int) $minutes;
        $h = intdiv($m, 60);
        $r = $m % 60;
        if ($h <= 0) return $r . 'm';
        if ($r <= 0) return $h . 'h';
        return $h . 'h ' . $r . 'm';
    };
@endphp

<div class="container-fluid px-2 px-lg-3 py-3">
    <div class="woq-hero d-flex flex-wrap justify-content-between align-items-start gap-2 mb-3">
        <div>
            <h1 class="h5 mb-0"><i class="bi bi-kanban me-2 text-primary"></i>Job Card Queue & Timing</h1>
            <div class="woq-sub">Shows what’s running, what’s late, and how much time is left.</div>
        </div>
        <div class="d-flex flex-wrap gap-2">
            <a href="{{ route('garage.work-orders.index') }}" class="btn btn-sm btn-outline-secondary">Back to job cards</a>
        </div>
    </div>

    <form method="GET" action="{{ route('garage.work-orders.queue') }}" class="row g-2 mb-3">
        <div class="col-12 col-lg-3">
            <input class="form-control form-control-sm" name="search" value="{{ $search }}" placeholder="Search job card/customer/vehicle/task…">
        </div>
        <div class="col-6 col-lg-2">
            <select class="form-select form-select-sm" name="status">
                <option value="">All status</option>
                @foreach(['draft'=>'Draft','in_progress'=>'In progress','on_hold'=>'On hold','completed'=>'Completed','cancelled'=>'Cancelled'] as $k=>$lbl)
                    <option value="{{ $k }}" @selected($status===$k)>{{ $lbl }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-6 col-lg-2">
            <select class="form-select form-select-sm" name="timing">
                <option value="" @selected($timing==='')>All timing</option>
                <option value="out_of_time" @selected($timing==='out_of_time')>Out of time</option>
                <option value="on_time" @selected($timing==='on_time')>On time</option>
                <option value="completed" @selected($timing==='completed')>Completed</option>
            </select>
        </div>
        <div class="col-6 col-lg-2">
            <input type="date" class="form-control form-control-sm" name="from_date" value="{{ $fromDate }}">
        </div>
        <div class="col-6 col-lg-2">
            <input type="date" class="form-control form-control-sm" name="to_date" value="{{ $toDate }}">
        </div>
        <div class="col-12 col-lg-1 d-grid">
            <button class="btn btn-sm btn-primary">Filter</button>
        </div>
    </form>

    <div class="row g-2 mb-3">
        <div class="col-6 col-lg-2"><div class="woq-kpi kpi-info"><div class="p-2 ps-3"><div class="small">Job cards</div><div class="woq-num woq-mono">{{ number_format((int)($kpis['count_total'] ?? 0)) }}</div></div></div></div>
        <div class="col-6 col-lg-2"><div class="woq-kpi kpi-info"><div class="p-2 ps-3"><div class="small">Running tasks</div><div class="woq-num woq-mono">{{ number_format((int)($kpis['count_running'] ?? 0)) }}</div></div></div></div>
        <div class="col-6 col-lg-2"><div class="woq-kpi kpi-danger"><div class="p-2 ps-3"><div class="small">Out of time</div><div class="woq-num woq-mono text-danger">{{ number_format((int)($kpis['count_out_of_time'] ?? 0)) }}</div></div></div></div>
        <div class="col-6 col-lg-2"><div class="woq-kpi"><div class="p-2 ps-3"><div class="small">Estimated</div><div class="woq-num woq-mono">{{ $minutesToText((int)($kpis['sum_estimated'] ?? 0)) }}</div></div></div></div>
        <div class="col-6 col-lg-2"><div class="woq-kpi"><div class="p-2 ps-3"><div class="small">Left</div><div class="woq-num woq-mono">{{ $minutesToText((int)($kpis['sum_pending'] ?? 0)) }}</div></div></div></div>
        <div class="col-6 col-lg-2"><div class="woq-kpi kpi-danger"><div class="p-2 ps-3"><div class="small">Delay</div><div class="woq-num woq-mono text-danger">{{ $minutesToText((int)($kpis['sum_delay'] ?? 0)) }}</div></div></div></div>
    </div>

    <div class="woq-table-wrap mb-3">
        <div class="p-2 woq-head d-flex align-items-center justify-content-between flex-wrap gap-2">
            <div class="fw-semibold">Job cards</div>
            <div class="small text-muted">Shows totals from tasks table (updates when you update time)</div>
        </div>
        <div class="table-responsive">
            <table class="table table-sm table-hover mb-0 align-middle woq-table">
                <thead>
                <tr>
                    <th>Job card</th>
                    <th>Date</th>
                    <th>Customer / Vehicle</th>
                    <th>Slot</th>
                    <th>Status</th>
                    <th>Tasks</th>
                    <th class="text-end">Est.</th>
                    <th class="text-end">Actual</th>
                    <th class="text-end">Left</th>
                    <th class="text-end">Delay</th>
                    <th class="text-end">Open</th>
                </tr>
                </thead>
                <tbody>
                @forelse($workOrders as $wo)
                    @php
                        $open = (int)($wo->tasks_open ?? 0);
                        $delay = (int)($wo->total_delay_minutes ?? 0);
                        $chip = ($open > 0 && $delay > 0 && (string)$wo->status !== 'completed') ? 'danger' : (($open > 0) ? 'ok' : 'warn');
                        $chipText = ($open <= 0) ? 'No open tasks' : (($delay > 0) ? 'Out of time' : 'On time');
                        $total = max(0, (int)($wo->tasks_total ?? 0));
                        $done = max(0, (int)($wo->tasks_completed ?? 0));
                        $pct = $total > 0 ? min(100, (int) round(($done / max(1,$total)) * 100)) : 0;
                    @endphp
                    <tr>
                        <td class="font-monospace fw-semibold">
                            <a href="{{ route('garage.work-orders.show', $wo->id) }}" class="text-decoration-none">{{ $wo->work_order_number }}</a>
                            <div class="mt-1"><span class="woq-chip {{ $chip }}">{{ $chipText }}</span></div>
                        </td>
                        <td class="text-muted">{{ $wo->work_order_date }}</td>
                        <td>
                            <div class="fw-semibold">{{ $wo->customer_name ?? '—' }}</div>
                            <div class="small text-muted">
                                {{ $wo->vehicle_registration ?? '—' }}
                                @if($wo->vehicle_make || $wo->vehicle_model)
                                    ({{ trim(($wo->vehicle_make ?? '').' '.($wo->vehicle_model ?? '')) }})
                                @endif
                            </div>
                        </td>
                        <td class="small">{{ $wo->slot_name ?? '—' }}</td>
                        @php $st = (string)($wo->status ?? ''); @endphp
                        <td><span class="woq-badge {{ $st }}">{{ str_replace('_',' ', $st) }}</span></td>
                        <td class="small">
                            <span class="woq-chip soft">{{ (int)($wo->tasks_completed ?? 0) }}/{{ (int)($wo->tasks_total ?? 0) }} done</span>
                            @if((int)($wo->tasks_running ?? 0) > 0)
                                <span class="woq-chip run"><i class="bi bi-play-fill"></i>Running {{ (int)($wo->tasks_running ?? 0) }}</span>
                            @endif
                            <div class="mt-1 woq-progress" title="{{ $pct }}% complete"><span style="width: {{ $pct }}%"></span></div>
                        </td>
                        <td class="text-end woq-mono">{{ $minutesToText((int)($wo->total_estimated_minutes ?? 0)) }}</td>
                        <td class="text-end woq-mono">{{ $minutesToText((int)($wo->total_actual_minutes ?? 0)) }}</td>
                        <td class="text-end woq-mono fw-semibold">{{ $minutesToText((int)($wo->total_pending_minutes ?? 0)) }}</td>
                        <td class="text-end {{ $delay>0 ? 'text-danger fw-semibold':'' }}">{{ $minutesToText($delay) }}</td>
                        <td class="text-end">{{ $open }}</td>
                    </tr>
                @empty
                    <tr><td colspan="11" class="text-center text-muted py-4">No job cards found.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
        @if($workOrders->hasPages())
            <div class="p-2">{{ $workOrders->links() }}</div>
        @endif
    </div>

    <div class="woq-table-wrap">
        <div class="p-2 woq-head d-flex align-items-center justify-content-between flex-wrap gap-2">
            <div class="fw-semibold">Task queue (latest 200)</div>
            <div class="small text-muted">Sorted: running → paused → assigned → pending</div>
        </div>
        <div class="table-responsive">
            <table class="table table-sm table-hover mb-0 align-middle woq-table">
                <thead>
                <tr>
                    <th>Job card</th>
                    <th>Task</th>
                    <th>Assigned</th>
                    <th>Status</th>
                    <th class="text-end">Est.</th>
                    <th class="text-end">Actual</th>
                    <th class="text-end">Left</th>
                    <th class="text-end">Delay</th>
                </tr>
                </thead>
                <tbody>
                @forelse($tasks as $t)
                    @php
                        $delay = (int)($t->delay_minutes ?? 0);
                        $left = (int)($t->pending_minutes ?? max(0, (int)($t->estimated_minutes ?? 0) - (int)($t->actual_minutes ?? 0)));
                    @endphp
                    <tr>
                        <td class="font-monospace">
                            <a class="text-decoration-none" href="{{ route('garage.work-orders.show', $t->job_card_id) }}">{{ $t->work_order_number }}</a>
                        </td>
                        <td>
                            <div class="fw-semibold">{{ $t->task_name }}</div>
                            @if(!empty($t->source_item_type))
                                <span class="badge bg-light text-dark border text-uppercase">{{ str_replace('_',' ', $t->source_item_type) }}</span>
                            @endif
                        </td>
                        <td class="small">{{ $t->assigned_to_name ?: '—' }}</td>
                        @php $ts = (string)($t->status ?? ''); @endphp
                        <td><span class="woq-badge {{ $ts }}">{{ str_replace('_',' ', $ts) }}</span></td>
                        <td class="text-end woq-mono">{{ $minutesToText((int)($t->estimated_minutes ?? 0)) }}</td>
                        <td class="text-end woq-mono">{{ $minutesToText((int)($t->actual_minutes ?? 0)) }}</td>
                        <td class="text-end woq-mono fw-semibold">{{ $minutesToText($left) }}</td>
                        <td class="text-end woq-mono {{ $delay>0 ? 'text-danger fw-semibold':'' }}">{{ $minutesToText($delay) }}</td>
                    </tr>
                @empty
                    <tr><td colspan="8" class="text-center text-muted py-4">No tasks found.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection