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

    <div class="space-y-6">
        

        <!-- Filters -->
        <x-card class="p-6">
            <form method="GET" action="{{ route('laporan.index') }}" class="grid grid-cols-4 gap-4">
                <div>
                    <label class="block text-sm font-medium text-[#2F347A] mb-1">Jenis Laporan</label>
                    <select name="jenis" 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="masuk" {{ request('jenis', 'masuk') == 'masuk' ? 'selected' : '' }}>Obat Masuk</option>
                        <option value="keluar" {{ request('jenis') == 'keluar' ? 'selected' : '' }}>Obat Keluar</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-[#2F347A] mb-1">Tanggal Mulai</label>
                    <input type="date" name="tanggal_mulai" value="{{ request('tanggal_mulai', now()->startOfMonth()->format('Y-m-d')) }}" 
                           class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] text-[#2F347A]">
                </div>
                <div>
                    <label class="block text-sm font-medium text-[#2F347A] mb-1">Tanggal Akhir</label>
                    <input type="date" name="tanggal_akhir" value="{{ request('tanggal_akhir', now()->format('Y-m-d')) }}" 
                           class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] text-[#2F347A]">
                </div>
                <div class="flex items-end gap-2">
                    <button type="submit" class="flex-1 px-4 py-2.5 bg-[#4A538F] text-white rounded-lg hover:bg-[#424B84] transition-colors">
                        Filter
                    </button>
                </div>
            </form>
        </x-card>

        <!-- Export Buttons -->
        <div class="flex gap-4">
            <a href="{{ route('laporan.export-pdf', request()->query()) }}" 
               class="inline-flex items-center gap-2 px-5 py-2.5 bg-[#C0392B] text-white rounded-lg hover:bg-[#a93226] transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
                Export PDF
            </a>
            <a href="{{ route('laporan.export-excel', request()->query()) }}" 
               class="inline-flex items-center gap-2 px-5 py-2.5 bg-[#1F9254] text-white rounded-lg hover:bg-[#177a45] transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
                Export Excel
            </a>
        </div>

        <!-- Table -->
        <x-card class="overflow-hidden">
            <div class="px-6 py-4 table-header-custom">
                <h2 class="text-lg font-semibold">{{ request('jenis', 'masuk') == 'masuk' ? 'Laporan Obat Masuk' : 'Laporan Obat Keluar' }}</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">Tanggal</th>
                            <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">Jumlah</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-[#E5E7F2]">
                        @forelse($data as $item)
                            <tr class="hover:bg-[#F4F6FF]">
                                @if(request('jenis', 'masuk') == 'masuk')
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-[#7A7FAE]">{{ $item->tanggal_penerimaan->format('d M Y') }}</td>
                                    <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->stok }}</td>
                                @else
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-[#7A7FAE]">{{ $item->tanggal_pengeluaran->format('d M Y') }}</td>
                                    <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->jumlah }}</td>
                                @endif
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="px-6 py-12 text-center text-[#7A7FAE]">
                                    Tidak ada data untuk periode yang dipilih
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="px-6 py-4 border-t border-[#E5E7F2]">
                {{ $data->withQueryString()->links() }}
            </div>
        </x-card>
    </div>
</x-app-layout>
