<x-app-layout>
    @section('title', 'Obat Kadaluarsa')

    <div class="space-y-6">
        <!-- Header -->
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold text-[#2F347A]">Daftar Obat Kadaluarsa</h1>
                <p class="text-sm text-[#7A7FAE] mt-1">Menampilkan obat yang sudah kadaluarsa atau mendekati kadaluarsa (≤ 120 hari)</p>
            </div>
        </div>

        <!-- Filters -->
        <x-card class="p-6">
            <form method="GET" action="{{ route('kadaluarsa.index') }}" class="flex gap-4 items-end">
                <div class="flex-1">
                    <label class="block text-sm font-medium text-[#2F347A] mb-1">Filter Status</label>
                    <select name="filter" class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] bg-white text-[#2F347A]">
                        <option value="all" {{ $filter === 'all' ? 'selected' : '' }}>Semua (Kadaluarsa + Awas + Waspada)</option>
                        <option value="expired" {{ $filter === 'expired' ? 'selected' : '' }}>Sudah Kadaluarsa</option>
                        <option value="30" {{ $filter === '30' ? 'selected' : '' }}>Awas (≤ 30 hari)</option>
                        <option value="120" {{ $filter === '120' ? 'selected' : '' }}>Waspada (≤ 120 hari)</option>
                    </select>
                </div>
                <button type="submit" class="px-6 py-2.5 bg-[#4A538F] text-white rounded-lg hover:bg-[#424B84] transition-colors">
                    Filter
                </button>
            </form>
        </x-card>

        <!-- Table -->
        <x-card class="overflow-hidden">
            <div class="px-6 py-4 table-header-custom">
                <h2 class="text-lg font-semibold">Daftar Obat Kadaluarsa</h2>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-[#F4F6FF] border-b border-[#E5E7F2]">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-[#7A7FAE] uppercase tracking-wider">Nama Obat</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-[#7A7FAE] uppercase tracking-wider">Kode Batch</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-[#7A7FAE] uppercase tracking-wider">Kategori</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-[#7A7FAE] uppercase tracking-wider">Stok</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-[#7A7FAE] uppercase tracking-wider">Tanggal Kadaluarsa</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-[#7A7FAE] uppercase tracking-wider">Sisa Hari</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-[#7A7FAE] uppercase tracking-wider">Status</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-[#E5E7F2]">
                        @forelse($obatKadaluarsa as $item)
                            @php
                                $sisaHari = (int) now()->diffInDays($item->tanggal_kadaluarsa, false);
                                if ($sisaHari <= 0) {
                                    $status = 'danger';
                                    $statusLabel = 'Kadaluarsa';
                                } elseif ($sisaHari <= 30) {
                                    $status = 'awas';
                                    $statusLabel = 'Awas';
                                } else {
                                    $status = 'waspada';
                                    $statusLabel = 'Waspada';
                                }
                            @endphp
                            <tr class="hover:bg-[#F4F6FF]">
                                <td class="px-6 py-4 whitespace-nowrap font-medium text-[#2F347A]">{{ $item->nama_obat ?? 'N/A' }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-[#7A7FAE]">{{ $item->kode_batch }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-[#7A7FAE]">{{ $item->kategori->nama ?? 'N/A' }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-[#7A7FAE]">{{ $item->stok }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-[#7A7FAE]">{{ $item->tanggal_kadaluarsa->format('d M Y') }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium {{ $sisaHari <= 0 ? 'text-[#DC2626]' : ($sisaHari <= 30 ? 'text-[#C2410C]' : 'text-[#A16207]') }}">
                                    {{ $sisaHari <= 0 ? $sisaHari . ' hari (lewat)' : $sisaHari . ' hari' }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <x-badge :type="$status">{{ $statusLabel }}</x-badge>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="px-6 py-12 text-center text-[#7A7FAE]">
                                    <svg class="w-12 h-12 mx-auto mb-4 text-[#E5E7F2]" 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>
                                    Tidak ada obat yang kadaluarsa atau mendekati kadaluarsa
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="px-6 py-4 border-t border-[#E5E7F2]">
                {{ $obatKadaluarsa->withQueryString()->links() }}
            </div>
        </x-card>
    </div>
</x-app-layout>
