{{--
    Partial: admin/tickets/_list.blade.php
    Dirender oleh halaman index (full load) dan AJAX live-search.
    Semua variabel diteruskan dari TicketController::index().
--}}
@php
$statusConfig = [
    'Pickup Requested' => ['bg'=>'bg-purple-100','text'=>'text-purple-800','dot'=>'bg-purple-400','border'=>'border-purple-200','bar'=>'bg-purple-400'],
    'Pending'   => ['bg'=>'bg-yellow-100','text'=>'text-yellow-800','dot'=>'bg-yellow-400','border'=>'border-yellow-200','bar'=>'bg-yellow-400'],
    'Checking'  => ['bg'=>'bg-sky-100',   'text'=>'text-sky-800',   'dot'=>'bg-sky-400',   'border'=>'border-sky-200',   'bar'=>'bg-sky-400'],
    'Repairing' => ['bg'=>'bg-blue-100',  'text'=>'text-blue-800',  'dot'=>'bg-blue-400',  'border'=>'border-blue-200',  'bar'=>'bg-blue-400'],
    'Ready'     => ['bg'=>'bg-green-100', 'text'=>'text-green-800', 'dot'=>'bg-green-400', 'border'=>'border-green-200', 'bar'=>'bg-green-400'],
    'Picked Up' => ['bg'=>'bg-gray-100',  'text'=>'text-gray-700',  'dot'=>'bg-gray-400',  'border'=>'border-gray-200',  'bar'=>'bg-gray-400'],
    'Cancelled' => ['bg'=>'bg-red-100',   'text'=>'text-red-800',   'dot'=>'bg-red-400',   'border'=>'border-red-200',   'bar'=>'bg-red-400'],
];
$nextStatuses = [
    'Pending'   => 'Checking',
    'Checking'  => 'Repairing',
    'Repairing' => 'Ready',
    // 'Ready' → 'Picked Up' hanya boleh lewat form serah terima + invoice issued
];

$invoiceStatusLabel = [
    'draft'     => ['label' => 'Draft',    'cls' => 'bg-amber-50 text-amber-700 border-amber-200'],
    'review'    => ['label' => 'Review',   'cls' => 'bg-indigo-50 text-indigo-700 border-indigo-200'],
    'issued'    => ['label' => 'Issued',   'cls' => 'bg-emerald-50 text-emerald-700 border-emerald-200'],
    'cancelled' => ['label' => 'Batal',    'cls' => 'bg-red-50 text-red-600 border-red-200'],
];

$formatMinutes = function (?int $minutes): string {
    if ($minutes === null) {
        return '-';
    }

    if ($minutes < 60) {
        return $minutes . 'm';
    }

    $hours = intdiv($minutes, 60);
    $remain = $minutes % 60;

    return $hours . 'j ' . $remain . 'm';
};
@endphp

@if($tickets->isEmpty())

<div class="rounded-2xl bg-white border border-gray-100 shadow-sm flex flex-col items-center
            justify-center py-20 text-center px-4">
    <svg class="w-14 h-14 text-gray-200 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414
                 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
    </svg>
    <p class="text-gray-500 font-medium">Tidak ada tiket ditemukan</p>
    <p class="text-gray-400 text-sm mt-1">Coba ubah filter atau kata kunci pencarian</p>
</div>

@else

{{-- ════════════════════════════════════════════════
     MOBILE: Card View  (< md)
════════════════════════════════════════════════ --}}
<div class="md:hidden space-y-3">
    @foreach($tickets as $ticket)
    @php
        $cfg     = $statusConfig[$ticket->status] ?? ['bg'=>'bg-gray-100','text'=>'text-gray-700','dot'=>'bg-gray-400','border'=>'border-gray-200','bar'=>'bg-gray-400'];
        $isFinal = in_array($ticket->status, ['Cancelled','Picked Up']);
        $next    = $nextStatuses[$ticket->status] ?? null;
        $canApproveRepair = in_array($ticket->status, ['Pending', 'Checking'], true) && ! $ticket->repair_approved_at;
        if ($ticket->status === 'Checking' && ! $ticket->repair_approved_at) {
            $next = null;
        }
        // Invoice status untuk gate serah terima & tombol
        $activeInvoice   = $ticket->invoices->whereNotIn('status', ['cancelled'])->first();
        $hasIssuedInvoice = $ticket->invoices->contains('status', 'issued');
        $invStatusInfo   = $activeInvoice ? ($invoiceStatusLabel[$activeInvoice->status] ?? null) : null;
    @endphp
    <div class="bg-white rounded-2xl border {{ $cfg['border'] }} shadow-sm overflow-hidden">

        {{-- Status colour bar --}}
        <div class="h-1.5 {{ $cfg['bar'] }}"></div>

        <div class="p-4 space-y-3">

            {{-- Header row: ticket code + date --}}
            <div class="flex items-start justify-between gap-2">
                <div>
                    <p class="font-mono font-bold text-brand-600 text-base tracking-wide">
                        {{ $ticket->ticket_code }}
                    </p>
                    <span class="inline-flex items-center gap-1.5 mt-1.5 px-2.5 py-1 rounded-full
                                 text-xs font-semibold {{ $cfg['bg'] }} {{ $cfg['text'] }}">
                        <span class="w-1.5 h-1.5 rounded-full {{ $cfg['dot'] }}"></span>
                        {{ $ticket->status }}
                    </span>
                </div>
                <div class="text-right text-xs text-gray-400 flex-shrink-0 pt-0.5">
                    <p>{{ $ticket->created_at->format('d M Y') }}</p>
                    <p>{{ $ticket->created_at->format('H:i') }}</p>
                </div>
            </div>

            {{-- Info grid: pelanggan + perangkat --}}
            <div class="grid grid-cols-2 gap-3 border-t border-gray-50 pt-3 text-sm">
                <div class="min-w-0">
                    <p class="text-[10px] font-semibold text-gray-400 uppercase tracking-wider mb-0.5">
                        Pelanggan
                    </p>
                    <p class="font-semibold text-gray-800 truncate">{{ $ticket->customer->name }}</p>
                    @if($ticket->customer->whatsapp)
                    <p class="text-xs text-gray-400 truncate">{{ $ticket->customer->whatsapp }}</p>
                    @endif
                </div>
                <div class="min-w-0">
                    <p class="text-[10px] font-semibold text-gray-400 uppercase tracking-wider mb-0.5">
                        Perangkat
                    </p>
                    <p class="font-medium text-gray-800 truncate">{{ $ticket->brand ? $ticket->brand.' '.$ticket->model : '—' }}</p>
                    <p class="text-xs text-gray-400">{{ $ticket->device_type ?? 'Belum diisi' }}</p>
                </div>
            </div>

            {{-- Cancel reason (if cancelled) --}}
            @if($ticket->status === 'Cancelled' && $ticket->cancel_reason)
            <div class="rounded-lg bg-red-50 border border-red-100 px-3 py-2 text-xs text-red-700">
                <span class="font-semibold">Alasan: </span>{{ $ticket->cancel_reason }}
            </div>
            @endif

            @if($ticket->repair_approved_at)
            <div class="rounded-lg bg-emerald-50 border border-emerald-100 px-3 py-2 text-xs text-emerald-700">
                <span class="font-semibold">Approval Perbaikan:</span>
                {{ $ticket->repair_approved_at->format('d M Y H:i') }}
            </div>
            @endif

            <div class="rounded-lg bg-sky-50 border border-sky-100 px-3 py-2 text-xs text-sky-700">
                <p><span class="font-semibold">Diagnosa:</span> {{ $ticket->initial_diagnosis ? \Illuminate\Support\Str::limit($ticket->initial_diagnosis, 90) : 'Belum diisi' }}</p>
                <p class="mt-1"><span class="font-semibold">Rekomendasi:</span> {{ $ticket->recommended_action ? \Illuminate\Support\Str::limit($ticket->recommended_action, 90) : 'Belum diisi' }}</p>
            </div>

            <div class="rounded-lg bg-emerald-50 border border-emerald-100 px-3 py-2 text-xs text-emerald-700">
                <p><span class="font-semibold">Final QC:</span> {{ $ticket->final_check_notes ? \Illuminate\Support\Str::limit($ticket->final_check_notes, 90) : 'Belum diisi' }}</p>
                @if(!empty($ticket->final_check_items))
                <p class="mt-1"><span class="font-semibold">Checklist PASS:</span> {{ count($ticket->final_check_items) }} item</p>
                @endif
            </div>

            <div class="rounded-lg bg-indigo-50 border border-indigo-100 px-3 py-2 text-[11px] text-indigo-700">
                <p class="font-semibold mb-1">SLA Monitor</p>
                <p>Diagnosa → Approval: {{ $formatMinutes($ticket->sla['diag_to_approval'] ?? null) }}</p>
                <p>Approval → Final QC: {{ $formatMinutes($ticket->sla['approval_to_qc'] ?? null) }}</p>
                <p>Final QC → Ready: {{ $formatMinutes($ticket->sla['qc_to_ready'] ?? null) }}</p>
                <p class="font-semibold mt-1">Diagnosa → Ready: {{ $formatMinutes($ticket->sla['diag_to_ready'] ?? null) }}</p>
            </div>

            {{-- ── Action Buttons ──────────────────────── --}}
            <div class="border-t border-gray-50 pt-3 space-y-2">

                {{-- PRIMARY action (full-width, min 48px) --}}
                @if($ticket->status === 'Ready')
                    <a href="{{ route('handover.show', $ticket->id) }}"
                       class="flex items-center justify-center gap-2 w-full h-12 rounded-xl
                              bg-green-600 hover:bg-green-700 active:bg-green-800
                              text-white font-semibold text-sm transition shadow-sm">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        Serah Terima
                    </a>
                @elseif($next)
                    <form method="POST" action="{{ route('admin.tickets.status', $ticket->id) }}">
                        @csrf @method('PATCH')
                        <input type="hidden" name="status" value="{{ $next }}">
                        <button type="submit"
                                class="flex items-center justify-center gap-2 w-full h-12 rounded-xl
                                       bg-brand-600 hover:bg-brand-700 active:bg-brand-800
                                       text-white font-semibold text-sm transition shadow-sm">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M9 5l7 7-7 7"/>
                            </svg>
                            Tandai: {{ $next }}
                        </button>
                    </form>
                @endif

                @if($canApproveRepair)
                    <form method="POST" action="{{ route('admin.tickets.approve-repair', $ticket->id) }}">
                        @csrf @method('PATCH')
                        <button type="submit"
                                class="flex items-center justify-center gap-2 w-full h-11 rounded-xl
                                       bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800
                                       text-white font-semibold text-sm transition shadow-sm">
                            Setujui Perbaikan
                        </button>
                    </form>
                @endif

                {{-- SECONDARY actions: 2-column grid --}}
                <div class="grid grid-cols-2 gap-2">

                    {{-- Detail --}}
                    <a href="{{ route('tickets.show', $ticket->id) }}"
                       class="flex items-center justify-center gap-1.5 h-11 rounded-xl
                              border border-gray-200 text-sm font-medium text-gray-700
                              hover:bg-gray-50 active:bg-gray-100 transition">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0zM2.458 12C3.732 7.943 7.523 5
                                     12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542
                                     7-4.477 0-8.268-2.943-9.542-7z"/>
                        </svg>
                        Detail
                    </a>

                    {{-- Invoice / Buat Invoice --}}
                    @if(in_array($ticket->status, ['Ready', 'Cancelled']) && ! $hasIssuedInvoice)
                        <a href="{{ route('admin.invoices.create', ['service_ticket_id' => $ticket->id]) }}"
                           class="flex items-center justify-center gap-1.5 h-11 rounded-xl
                                  border border-emerald-200 text-sm font-medium text-emerald-700
                                  hover:bg-emerald-50 active:bg-emerald-100 transition">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M12 4v16m8-8H4"/>
                            </svg>
                            {{ $ticket->status === 'Cancelled' ? 'Invoice Pembatalan' : 'Buat Invoice' }}
                        </a>
                    @elseif($activeInvoice && $invStatusInfo)
                        <a href="{{ route('admin.invoices.show', $activeInvoice->id) }}"
                           class="flex items-center justify-center gap-1.5 h-11 rounded-xl
                                  border text-sm font-medium transition {{ $invStatusInfo['cls'] }}">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586
                                         a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                            </svg>
                            Inv. {{ $invStatusInfo['label'] }}
                        </a>
                    @elseif(! $isFinal)
                        {{-- Batalkan --}}
                        <button type="button"
                                onclick="Alpine.store('cancelModal').open({{ $ticket->id }}, '{{ $ticket->ticket_code }}')"
                                class="flex items-center justify-center gap-1.5 h-11 rounded-xl
                                       border border-red-200 text-sm font-medium text-red-600
                                       hover:bg-red-50 active:bg-red-100 transition">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M6 18L18 6M6 6l12 12"/>
                            </svg>
                            Batalkan
                        </button>
                    @else
                        <a href="{{ route('nota.show', $ticket->ticket_code) }}"
                           class="flex items-center justify-center gap-1.5 h-11 rounded-xl
                                  border border-gray-200 text-sm font-medium text-gray-600
                                  hover:bg-gray-50 active:bg-gray-100 transition">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586
                                         a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                            </svg>
                            Nota
                        </a>
                    @endif

                </div>

            </div>
        </div>
    </div>
    @endforeach
</div>

{{-- ════════════════════════════════════════════════
     DESKTOP: Table  (>= md)
════════════════════════════════════════════════ --}}
<div class="hidden md:block bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">

    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="bg-gray-50 border-b border-gray-100 text-left">
                    <th class="px-4 py-3 font-semibold text-gray-600 whitespace-nowrap">No. Tiket</th>
                    <th class="px-4 py-3 font-semibold text-gray-600 whitespace-nowrap">Pelanggan</th>
                    <th class="px-4 py-3 font-semibold text-gray-600 whitespace-nowrap">Perangkat</th>
                    <th class="px-4 py-3 font-semibold text-gray-600 whitespace-nowrap">Status</th>
                    <th class="px-4 py-3 font-semibold text-gray-600 whitespace-nowrap">Masuk</th>
                    <th class="px-4 py-3 font-semibold text-gray-600 whitespace-nowrap text-right">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @foreach($tickets as $ticket)
                @php
                    $cfg     = $statusConfig[$ticket->status] ?? ['bg'=>'bg-gray-100','text'=>'text-gray-700','dot'=>'bg-gray-400'];
                    $isFinal = in_array($ticket->status, ['Cancelled','Picked Up']);
                    $next    = $nextStatuses[$ticket->status] ?? null;
                    $canApproveRepair = in_array($ticket->status, ['Pending', 'Checking'], true) && ! $ticket->repair_approved_at;
                    if ($ticket->status === 'Checking' && ! $ticket->repair_approved_at) {
                        $next = null;
                    }
                    $activeInvoice    = $ticket->invoices->whereNotIn('status', ['cancelled'])->first();
                    $hasIssuedInvoice = $ticket->invoices->contains('status', 'issued');
                    $invStatusInfo    = $activeInvoice ? ($invoiceStatusLabel[$activeInvoice->status] ?? null) : null;
                @endphp
                <tr class="hover:bg-gray-50/60 transition">

                    <td class="px-4 py-3.5 whitespace-nowrap">
                        <a href="{{ route('tickets.show', $ticket->id) }}"
                           class="font-mono font-semibold text-brand-600 hover:text-brand-800
                                  hover:underline text-xs tracking-wide">
                            {{ $ticket->ticket_code }}
                        </a>
                    </td>

                    <td class="px-4 py-3.5 max-w-[160px]">
                        <p class="font-medium text-gray-800 truncate">{{ $ticket->customer->name }}</p>
                        @if($ticket->customer->whatsapp)
                        <p class="text-xs text-gray-400 truncate">{{ $ticket->customer->whatsapp }}</p>
                        @endif
                    </td>

                    <td class="px-4 py-3.5 max-w-[180px]">
                        <p class="text-gray-800 truncate">{{ $ticket->brand ? $ticket->brand.' '.$ticket->model : '—' }}</p>
                        <p class="text-xs text-gray-400">{{ $ticket->device_type ?? 'Belum diisi' }}</p>
                    </td>

                    <td class="px-4 py-3.5 whitespace-nowrap">
                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full
                                     text-xs font-semibold {{ $cfg['bg'] }} {{ $cfg['text'] }}">
                            <span class="w-1.5 h-1.5 rounded-full {{ $cfg['dot'] }}"></span>
                            {{ $ticket->status }}
                        </span>
                        @if($ticket->repair_approved_at)
                        <p class="text-xs text-emerald-600 mt-0.5">Perbaikan disetujui admin</p>
                        @endif
                        @if($ticket->status === 'Cancelled' && $ticket->cancel_reason)
                        <p class="text-xs text-gray-400 mt-0.5 max-w-[160px] truncate"
                           title="{{ $ticket->cancel_reason }}">
                            {{ $ticket->cancel_reason }}
                        </p>
                        @endif

                        <div class="mt-1.5 space-y-1">
                            <p class="text-[11px] text-sky-700">
                                <span class="font-semibold">Dx:</span>
                                {{ $ticket->initial_diagnosis ? \Illuminate\Support\Str::limit($ticket->initial_diagnosis, 45) : '-' }}
                            </p>
                            <p class="text-[11px] text-emerald-700">
                                <span class="font-semibold">QC:</span>
                                {{ $ticket->final_check_notes ? \Illuminate\Support\Str::limit($ticket->final_check_notes, 45) : '-' }}
                            </p>
                            <p class="text-[11px] text-indigo-700">
                                <span class="font-semibold">SLA Dx→Ready:</span>
                                {{ $formatMinutes($ticket->sla['diag_to_ready'] ?? null) }}
                            </p>
                        </div>
                    </td>

                    <td class="px-4 py-3.5 whitespace-nowrap text-xs text-gray-500">
                        <p>{{ $ticket->created_at->format('d M Y') }}</p>
                        <p class="text-gray-400">{{ $ticket->created_at->format('H:i') }}</p>
                    </td>

                    <td class="px-4 py-3.5 whitespace-nowrap text-right">
                        <div class="flex items-center justify-end gap-2">

                            @if($next)
                            <form method="POST" action="{{ route('admin.tickets.status', $ticket->id) }}">
                                @csrf @method('PATCH')
                                <input type="hidden" name="status" value="{{ $next }}">
                                <button type="submit"
                                        class="inline-flex items-center gap-1 text-xs font-medium
                                               px-2.5 py-1.5 rounded-lg border border-brand-200
                                               text-brand-700 hover:bg-brand-50 transition">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                              stroke-width="2" d="M9 5l7 7-7 7"/>
                                    </svg>
                                    {{ $next }}
                                </button>
                            </form>
                            @endif

                            @if($canApproveRepair)
                            <form method="POST" action="{{ route('admin.tickets.approve-repair', $ticket->id) }}">
                                @csrf @method('PATCH')
                                <button type="submit"
                                        class="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1.5
                                               rounded-lg border border-indigo-200 text-indigo-700
                                               hover:bg-indigo-50 transition">
                                    Setujui Perbaikan
                                </button>
                            </form>
                            @endif

                            {{-- Serah Terima: hanya jika Ready DAN invoice sudah Issued --}}
                            @if($ticket->status === 'Ready' && $hasIssuedInvoice)
                            <a href="{{ route('handover.show', $ticket->id) }}"
                               class="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1.5
                                      rounded-lg border border-green-300 text-green-700
                                      hover:bg-green-50 transition">
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                                Serah Terima
                            </a>
                            @elseif($ticket->status === 'Cancelled' && $hasIssuedInvoice && ! $ticket->asset?->sig_exit)
                            <a href="{{ route('handover.show', $ticket->id) }}"
                               class="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1.5
                                      rounded-lg border border-orange-300 text-orange-700
                                      hover:bg-orange-50 transition">
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
                                </svg>
                                Kembalikan
                            </a>
                            @endif

                            {{-- Invoice: buat baru jika belum ada, atau lihat yang ada --}}
                            @if(in_array($ticket->status, ['Ready', 'Cancelled']) && ! $hasIssuedInvoice && ! $activeInvoice)
                            <a href="{{ route('admin.invoices.create', ['service_ticket_id' => $ticket->id]) }}"
                               class="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1.5
                                      rounded-lg border border-emerald-200 text-emerald-700
                                      hover:bg-emerald-50 transition">
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                                </svg>
                                {{ $ticket->status === 'Cancelled' ? 'Inv. Batal' : 'Buat Invoice' }}
                            </a>
                            @elseif($activeInvoice && $invStatusInfo && ! $hasIssuedInvoice)
                            <a href="{{ route('admin.invoices.show', $activeInvoice->id) }}"
                               class="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1.5
                                      rounded-lg border transition {{ $invStatusInfo['cls'] }}">
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586
                                             a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                                </svg>
                                Inv. {{ $invStatusInfo['label'] }}
                            </a>
                            @endif

                            <a href="{{ route('tickets.show', $ticket->id) }}"
                               class="inline-flex items-center justify-center w-7 h-7 rounded-lg
                                      text-gray-400 hover:text-brand-600 hover:bg-brand-50 transition">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M15 12a3 3 0 11-6 0 3 3 0 016 0zM2.458 12C3.732 7.943 7.523 5
                                             12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542
                                             7-4.477 0-8.268-2.943-9.542-7z"/>
                                </svg>
                            </a>

                            @if(! $isFinal)
                            <button type="button"
                                    onclick="Alpine.store('cancelModal').open({{ $ticket->id }}, '{{ $ticket->ticket_code }}')"
                                    class="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1.5
                                           rounded-lg border border-red-200 text-red-600
                                           hover:bg-red-50 transition">
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M6 18L18 6M6 6l12 12"/>
                                </svg>
                                Batal
                            </button>
                            @endif

                            @if($ticket->status === 'Picked Up')
                            <a href="{{ route('nota.show', $ticket->ticket_code) }}"
                               class="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1.5
                                      rounded-lg border border-gray-300 text-gray-600
                                      hover:bg-gray-50 transition">
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586
                                             a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                                </svg>
                                Nota
                            </a>
                            @endif

                        </div>
                    </td>

                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

</div>

{{-- ════════ Pagination (mobile + desktop) ════════ --}}
@if($tickets->hasPages())
<div class="mt-3 px-1 flex items-center justify-between text-sm flex-wrap gap-2">
    <p class="text-gray-500 text-xs">
        Menampilkan {{ $tickets->firstItem() }}–{{ $tickets->lastItem() }}
        dari {{ $tickets->total() }}
    </p>
    <div class="flex gap-1 flex-wrap">
        @if($tickets->onFirstPage())
            <span class="px-3 py-1.5 rounded-lg text-gray-300 cursor-not-allowed select-none">‹</span>
        @else
            <a href="{{ $tickets->previousPageUrl() }}"
               class="px-3 py-1.5 rounded-lg text-gray-600 hover:bg-white transition">‹</a>
        @endif

        @foreach($tickets->getUrlRange(1, $tickets->lastPage()) as $page => $url)
        <a href="{{ $url }}"
           class="px-3 py-1.5 rounded-lg transition text-xs font-medium
                  {{ $page == $tickets->currentPage()
                      ? 'bg-brand-600 text-white shadow-sm'
                      : 'text-gray-600 hover:bg-white' }}">
            {{ $page }}
        </a>
        @endforeach

        @if($tickets->hasMorePages())
            <a href="{{ $tickets->nextPageUrl() }}"
               class="px-3 py-1.5 rounded-lg text-gray-600 hover:bg-white transition">›</a>
        @else
            <span class="px-3 py-1.5 rounded-lg text-gray-300 cursor-not-allowed select-none">›</span>
        @endif
    </div>
</div>
@endif

@endif {{-- end $tickets->isEmpty() --}}
