@extends('layouts.technician')
@section('title', 'List Service')

@section('content')
<div class="py-4 space-y-4">
    <div class="flex items-center justify-between gap-3">
        <div>
            <h1 class="text-lg font-bold text-gray-800">List Service</h1>
            <p class="text-xs text-gray-500">Daftar tiket aktif untuk fallback jika kamera bermasalah.</p>
        </div>
        <a href="{{ route('technician.scanner') }}"
           class="inline-flex items-center gap-1.5 rounded-lg border border-emerald-200 bg-emerald-50 text-emerald-700 px-3 py-2 text-[11px] font-semibold hover:bg-emerald-100 transition">
            Buka Scanner
        </a>
    </div>

    <form method="GET" action="{{ route('technician.tickets.index') }}" class="grid grid-cols-1 sm:grid-cols-3 gap-2">
        <input type="text" name="search" value="{{ $search }}" placeholder="Cari kode, pelanggan, perangkat"
               class="sm:col-span-2 rounded-xl border border-gray-300 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent">
        <select name="status" class="rounded-xl border border-gray-300 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent">
            <option value="">Semua status aktif</option>
            <option value="Pending" @selected($status === 'Pending')>Menunggu</option>
            <option value="Checking" @selected($status === 'Checking')>Sedang Diperiksa</option>
            <option value="Repairing" @selected($status === 'Repairing')>Sedang Dalam Perbaikan</option>
            <option value="Ready" @selected($status === 'Ready')>Siap Diambil</option>
        </select>
        <div class="sm:col-span-3 flex gap-2">
            <button type="submit" class="rounded-xl bg-emerald-600 text-white text-sm font-semibold px-4 py-2.5 hover:bg-emerald-700 transition">Filter</button>
            <a href="{{ route('technician.tickets.index') }}" class="rounded-xl border border-gray-300 text-gray-700 text-sm font-medium px-4 py-2.5 hover:bg-gray-50 transition">Reset</a>
        </div>
    </form>

    @php
        $statusMap = [
            'Pending' => ['Menunggu', 'bg-yellow-100 text-yellow-700 border-yellow-200'],
            'Checking' => ['Sedang Diperiksa', 'bg-sky-100 text-sky-700 border-sky-200'],
            'Repairing' => ['Sedang Dalam Perbaikan', 'bg-blue-100 text-blue-700 border-blue-200'],
            'Ready' => ['Siap Diambil', 'bg-green-100 text-green-700 border-green-200'],
        ];
    @endphp

    @if($tickets->isEmpty())
    <div class="rounded-xl bg-white border border-gray-200 p-6 text-center text-sm text-gray-500">
        Tidak ada tiket aktif sesuai filter.
    </div>
    @else
    <div class="space-y-2.5">
        @foreach($tickets as $ticket)
        @php
            [$statusLabel, $statusClass] = $statusMap[$ticket->status] ?? [$ticket->status, 'bg-gray-100 text-gray-700 border-gray-200'];
        @endphp
        <a href="{{ route('technician.book', $ticket) }}" class="block rounded-xl border border-gray-200 bg-white p-4 shadow-sm hover:border-emerald-300 hover:shadow transition">
            <div class="flex items-start justify-between gap-3">
                <div class="min-w-0">
                    <p class="font-mono font-semibold text-emerald-700 text-xs">{{ $ticket->ticket_code }}</p>
                    <p class="text-xs font-semibold text-gray-800 truncate">{{ $ticket->customer->name }}</p>
                    <p class="text-[11px] text-gray-500 truncate">{{ $ticket->brand }} {{ $ticket->model }} • {{ $ticket->device_type }}</p>
                    <div class="mt-2 flex gap-1.5 flex-wrap">
                        <span class="inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] font-semibold {{ $ticket->diagnosis_completed_at ? 'bg-sky-50 text-sky-700 border-sky-200' : 'bg-gray-50 text-gray-500 border-gray-200' }}">
                            {{ $ticket->diagnosis_completed_at ? 'Diagnosa OK' : 'Diagnosa -' }}
                        </span>
                        <span class="inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] font-semibold {{ $ticket->final_check_passed_at ? 'bg-emerald-50 text-emerald-700 border-emerald-200' : 'bg-gray-50 text-gray-500 border-gray-200' }}">
                            {{ $ticket->final_check_passed_at ? 'Final QC PASS' : 'Final QC -' }}
                        </span>
                    </div>
                </div>
                <span class="inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-semibold {{ $statusClass }}">
                    {{ $statusLabel }}
                </span>
            </div>
            @if($ticket->repair_approved_at)
            <p class="mt-2 text-[10px] text-emerald-700">Perbaikan disetujui admin: {{ $ticket->repair_approved_at->format('d M Y H:i') }}</p>
            @endif
        </a>
        @endforeach
    </div>

    <div>
        {{ $tickets->links() }}
    </div>
    @endif
</div>
@endsection
