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

    <div class="space-y-6">
        <!-- Statistics Cards -->
        <div class="grid grid-cols-4 gap-6">
            <x-stat-card 
                label="Total Obat Masuk" 
                :value="$totalJenisObat"
                color="indigo">
                <x-slot name="icon">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/>
                    </svg>
                </x-slot>
            </x-stat-card>

            <x-stat-card 
                label="Obat Masuk (Bulan Ini)" 
                :value="$obatMasukBulanIni"
                color="green">
                <x-slot name="icon">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                    </svg>
                </x-slot>
            </x-stat-card>

            <x-stat-card 
                label="Obat Keluar (Bulan Ini)" 
                :value="$obatKeluarBulanIni"
                color="blue">
                <x-slot name="icon">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"/>
                    </svg>
                </x-slot>
            </x-stat-card>

            <x-stat-card 
                label="Kadaluarsa Dekat" 
                :value="$kadaluarsaDekat"
                color="red">
                <x-slot name="icon">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </x-slot>
            </x-stat-card>
        </div>

        <!-- Charts Row -->
        <div class="grid grid-cols-1 gap-6">
            <!-- Line Chart -->
            <x-card class="p-6">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-lg font-semibold text-[#2F347A]">Tren Obat Keluar Masuk {{ $selectedDate->translatedFormat('F Y') }}</h2>
                    <form method="GET" action="{{ route('dashboard') }}" class="flex items-center gap-2">
                        <select name="chart_month" onchange="updateChartYear(this); this.form.submit();" 
                                class="px-3 py-1.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] bg-white text-[#2F347A] text-sm">
                            @foreach($monthOptions as $option)
                                <option value="{{ $option['month'] }}" 
                                        data-year="{{ $option['year'] }}"
                                        {{ $filterMonth == $option['month'] && $filterYear == $option['year'] ? 'selected' : '' }}>
                                    {{ $option['label'] }}
                                </option>
                            @endforeach
                        </select>
                        <input type="hidden" name="chart_year" id="chartYearInput" value="{{ $filterYear }}">
                    </form>
                </div>
                <div class="h-80">
                    <canvas id="trendChart"></canvas>
                </div>
            </x-card>
        </div>

        <!-- Expiring Medicines Table -->
        <x-card class="overflow-hidden">
            <div class="px-6 py-4 table-header-custom">
                <h2 class="text-lg font-semibold">Obat Kadaluarsa / Mendekati Kadaluarsa (≤ 120 Hari)</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">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">
                                    <div class="font-medium text-[#2F347A]">{{ $item->nama_obat ?? 'N/A' }}</div>
                                </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>
                                <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="6" 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>
        </x-card>
    </div>

    @push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Line Chart
            const ctx = document.getElementById('trendChart').getContext('2d');
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: @json($labels),
                    datasets: [
                        {
                            label: 'Obat Masuk',
                            data: @json($obatMasukData),
                            borderColor: '#7B7AFD',
                            backgroundColor: 'rgba(123, 122, 253, 0.3)',
                            fill: true,
                            tension: 0.4
                        },
                        {
                            label: 'Obat Keluar',
                            data: @json($obatKeluarData),
                            borderColor: '#FF8A80',
                            backgroundColor: 'rgba(255, 138, 128, 0.3)',
                            fill: true,
                            tension: 0.4
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                            align: 'center'
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                stepSize: 1
                            },
                            grid: {
                                color: 'rgba(229, 231, 242, 0.5)'
                            }
                        },
                        x: {
                            grid: {
                                color: 'rgba(229, 231, 242, 0.5)'
                            }
                        }
                    }
                }
            });

            // Update chart year when month changes
            window.updateChartYear = function(select) {
                const selectedOption = select.options[select.selectedIndex];
                document.getElementById('chartYearInput').value = selectedOption.dataset.year;
            };
        });
    </script>
    @endpush
</x-app-layout>
