@extends('layouts.courier')
@section('title', 'Delivery Barang')

@section('content')
<div class="py-2">

	<div class="mb-5">
		<h1 class="text-xl font-bold text-gray-800">Delivery Barang</h1>
		<p class="text-sm text-gray-500 mt-0.5">{{ $tickets->total() }} tiket menunggu pengantaran ke customer</p>
	</div>

	<form method="GET" class="mb-4">
		<input type="text" name="search" value="{{ $search ?? '' }}" placeholder="Cari kode/pelanggan/perangkat"
			   class="w-full rounded-xl border border-gray-300 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent">
	</form>

	@if($tickets->isEmpty())
	<div class="rounded-2xl bg-white border border-gray-200 shadow-sm p-12 text-center">
		<svg class="w-14 h-14 mx-auto mb-3 text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
				  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
		</svg>
		<p class="text-gray-500 font-medium">Tidak ada tiket untuk delivery saat ini.</p>
	</div>
	@else
	<div class="space-y-3">
		@foreach($tickets as $ticket)
		<div class="rounded-2xl bg-white border border-green-100 shadow-sm overflow-hidden">
			<div class="h-1 bg-green-500"></div>
			<div class="p-4 flex items-center justify-between gap-4 flex-wrap">
				<div>
					<p class="font-mono font-bold text-gray-800 text-base">{{ $ticket->ticket_code }}</p>
					<p class="text-sm font-semibold text-gray-700 mt-0.5">{{ $ticket->customer->name }}</p>
					<p class="text-xs text-gray-400">{{ $ticket->brand }} {{ $ticket->model }}
						&middot; {{ $ticket->device_type }}</p>
					@if($ticket->status === 'Cancelled')
						<span class="inline-flex items-center mt-2 px-2 py-0.5 rounded-full text-[11px] font-semibold bg-red-50 text-red-700 border border-red-200">Batal - Delivery Pembatalan</span>
					@else
						<span class="inline-flex items-center mt-2 px-2 py-0.5 rounded-full text-[11px] font-semibold bg-green-50 text-green-700 border border-green-200">Selesai - Delivery</span>
					@endif
				</div>
				<a href="{{ route('handover.show', $ticket->id) }}"
				   class="flex-shrink-0 inline-flex items-center gap-1.5 bg-green-600 text-white
						  text-sm font-semibold rounded-xl px-4 py-2.5 hover:bg-green-700 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
					</svg>
					Proses Delivery
				</a>
			</div>
		</div>
		@endforeach
	</div>
	@endif

	<div class="mt-4">
		{{ $tickets->links() }}
	</div>

</div>
@endsection
