<x-app-layout>
    <div class="py-12">
        <div class="max-w-5xl mx-auto sm:px-6 lg:px-8 space-y-6">
            
            <!-- Header Section -->
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between bg-white p-6 rounded-2xl border border-gray-100 shadow-sm gap-4">
                <div>
                    <h2 class="text-2xl font-black text-gray-800 tracking-tight">Daftar Pesanan</h2>
                    <p class="text-sm text-gray-400 font-medium mt-0.5">Pantau status pesanan dan kelola transaksi Anda.</p>
                </div>
                <div>
                    <a href="{{ route('customer.pesanan.create') }}" class="inline-flex items-center gap-2 bg-green-700 hover:bg-green-800 text-white px-6 py-3 rounded-xl font-black text-xs uppercase tracking-widest shadow-sm transition-all active:scale-95">
                        + Pesan Baru
                    </a>
                </div>
            </div>

            <!-- Table Card -->
            <div class="bg-white shadow-sm rounded-2xl border border-gray-100 overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="w-full text-left">
                        <thead class="bg-gray-50 border-b border-gray-100 text-gray-400">
                            <tr>
                                <th class="px-6 py-4 text-[10px] font-black uppercase tracking-widest">ID Pesanan</th>
                                <th class="px-6 py-4 text-[10px] font-black uppercase tracking-widest">Tgl Kirim</th>
                                <th class="px-6 py-4 text-[10px] font-black uppercase tracking-widest">Total</th>
                                <th class="px-6 py-4 text-[10px] font-black uppercase tracking-widest">Status</th>
                                <th class="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            @forelse($pesanans as $p)
                                @php
                                    $status = strtolower($p->status);
                                    $badgeClass = match($status) {
                                        'pending' => 'bg-red-50 text-red-600 border border-red-100',
                                        'dijadwalkan' => 'bg-blue-50 text-blue-600 border border-blue-100',
                                        'dikirim' => 'bg-yellow-50 text-yellow-600 border border-yellow-100',
                                        default => 'bg-gray-50 text-gray-600 border border-gray-100'
                                    };
                                @endphp
                                <tr class="hover:bg-gray-50/50 transition-colors">
                                    <td class="px-6 py-4 font-black text-gray-800 text-sm">
                                        {{ $p->kode_pesanan ?? 'ORD-' . str_pad($p->id, 2, '0', STR_PAD_LEFT) }}
                                    </td>
                                    <td class="px-6 py-4 text-sm font-medium text-gray-600">
                                        {{ $p->tanggal_kirim ? \Carbon\Carbon::parse($p->tanggal_kirim)->format('d M Y') : '-' }}
                                    </td>
                                    <td class="px-6 py-4 text-sm font-black text-gray-800">
                                        Rp {{ number_format($p->total_harga, 0, ',', '.') }}
                                    </td>
                                    <td class="px-6 py-4">
                                        <span class="px-3 py-1 {{ $badgeClass }} rounded-lg text-[10px] font-black uppercase tracking-widest">
                                            {{ $p->status }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 text-center">
                                        <div class="flex justify-center gap-4">
                                            <a href="{{ route('customer.pesanan.show', $p->id) }}" class="text-green-700 font-black text-xs hover:underline uppercase tracking-widest">Detail</a>
                                            
                                            @if($status == 'pending')
                                                <a href="{{ route('customer.pesanan.edit', $p->id) }}" class="text-blue-600 font-black text-xs hover:underline uppercase tracking-widest">Edit</a>
                                                <button type="button" onclick="openDeleteModal('{{ $p->id }}', 'Pesanan {{ $p->kode_pesanan }}')" class="text-red-500 font-black text-xs hover:underline uppercase tracking-widest">Hapus</button>
                                                <form id="form-delete-{{ $p->id }}" action="{{ route('customer.pesanan.destroy', $p->id) }}" method="POST" class="hidden">
                                                    @csrf @method('DELETE')
                                                </form>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="p-12 text-center text-gray-400 font-medium italic">Belum ada pesanan aktif.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <x-delete-confirmation />
</x-app-layout>