@extends('layouts.admin.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <!-- Period Filter -->
    <div class="mb-6">
        <div class="flex justify-end gap-2">
            <a href="{{ route('admin.dashboard', ['period' => 'daily']) }}" 
               class="px-4 py-2 rounded-lg text-sm font-medium {{ $period === 'daily' ? 'bg-red-100 text-[#8B0000]' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}">
                Hari Ini
            </a>
            <a href="{{ route('admin.dashboard', ['period' => 'weekly']) }}" 
               class="px-4 py-2 rounded-lg text-sm font-medium {{ $period === 'weekly' ? 'bg-red-100 text-[#8B0000]' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}">
                Minggu Ini
            </a>
            <a href="{{ route('admin.dashboard', ['period' => 'monthly']) }}" 
               class="px-4 py-2 rounded-lg text-sm font-medium {{ $period === 'monthly' ? 'bg-red-100 text-[#8B0000]' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}">
                Bulan Ini
            </a>
            <a href="{{ route('admin.dashboard', ['period' => 'yearly']) }}" 
               class="px-4 py-2 rounded-lg text-sm font-medium {{ $period === 'yearly' ? 'bg-red-100 text-[#8B0000]' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}">
                Tahun Ini
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <!-- Total Reservasi -->
        <div class="bg-white rounded-lg shadow-lg p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-600">Total Reservasi </p>
                    <h3 class="text-2xl font-bold text-[#8B0000]">{{ $totalReservasi }}</h3>
                </div>
                <div class="bg-red-100 p-3 rounded-full">
                    <i class="fas fa-calendar-check text-[#8B0000] text-xl"></i>
                </div>
            </div>
        </div>

        <!-- Total Pendapatan -->
        <div class="bg-white rounded-lg shadow-lg p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-600">Total Pendapatan</p>
                    <h3 class="text-2xl font-bold text-[#8B0000]">Rp {{ number_format($totalPendapatan, 0, ',', '.') }}</h3>
                </div>
                <div class="bg-red-100 p-3 rounded-full">
                    <i class="fas fa-money-bill-wave text-[#8B0000] text-xl"></i>
                </div>
            </div>
        </div>

        <!-- Meja Kosong -->
        <div class="bg-white rounded-lg shadow-lg p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-600">Meja Tersedia</p>
                    <h3 class="text-2xl font-bold text-[#8B0000]">{{ $mejaKosong }}</h3>
                </div>
                <div class="bg-red-100 p-3 rounded-full">
                    <i class="fas fa-chair text-[#8B0000] text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Chart dan Statistik Row -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
        <!-- Grafik Pendapatan -->
        <div class="bg-white rounded-lg shadow-lg p-6">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-semibold">Grafik Pendapatan </h2>
            </div>
            <div class="w-full h-[300px]">
                <canvas id="revenueChart"></canvas>
            </div>
        </div>

        <!-- Statistik Reservasi -->
        <div class="bg-white rounded-lg shadow-lg p-6">
            <h2 class="text-xl font-semibold mb-4">Statistik Reservasi </h2>
            <div class="space-y-4">
                <!-- Reservasi Berhasil -->
                <div class="bg-green-50 rounded-lg p-4">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-green-600">Reservasi Berhasil</p>
                            <h3 class="text-2xl font-bold text-green-700">{{ $reservasiSuccess }}</h3>
                        </div>
                        <div class="bg-green-100 p-3 rounded-full">
                            <i class="fas fa-check-circle text-green-600 text-xl"></i>
                        </div>
                    </div>
                </div>

                <!-- Reservasi Pending -->
                <div class="bg-yellow-50 rounded-lg p-4">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-yellow-600">Reservasi Pending</p>
                            <h3 class="text-2xl font-bold text-yellow-700">{{ $reservasiPending }}</h3>
                        </div>
                        <div class="bg-yellow-100 p-3 rounded-full">
                            <i class="fas fa-clock text-yellow-600 text-xl"></i>
                        </div>
                    </div>
                </div>

                <!-- Reservasi Dibatalkan -->
                <div class="bg-red-50 rounded-lg p-4">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-red-600">Reservasi Dibatalkan</p>
                            <h3 class="text-2xl font-bold text-red-700">{{ $reservasiCancelled }}</h3>
                        </div>
                        <div class="bg-red-100 p-3 rounded-full">
                            <i class="fas fa-times-circle text-red-600 text-xl"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Menu Cepat dan Informasi Row -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-white rounded-lg shadow-lg p-6">
            <h2 class="text-xl font-semibold mb-4">Menu Cepat</h2>
            <div class="space-y-4">
                <a href="{{ route('admin.reservations') }}" 
                   class="block p-4 bg-red-50 text-[#8B0000] rounded-lg hover:bg-red-100 transition">
                    <i class="fas fa-list-ul mr-2"></i>
                    Lihat Daftar Reservasi
                </a>
                <a href="{{ route('admin.tables') }}" 
                   class="block p-4 bg-red-50 text-[#8B0000] rounded-lg hover:bg-red-100 transition">
                    <i class="fas fa-chair mr-2"></i>
                    Kelola Meja
                </a>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-lg p-6">
            <h2 class="text-xl font-semibold mb-4">Informasi Sistem</h2>
            <div class="space-y-2">
                <p class="text-gray-600">
                    <i class="fas fa-clock mr-2"></i>
                    Waktu Server: {{ now()->format('d M Y, H:i') }}
                </p>
                <p class="text-gray-600">
                    <i class="fas fa-user mr-2"></i>
                    Login sebagai: {{ Auth::user()->name }}
                </p>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
let revenueChart;
const chartColors = {
    primary: '#8B0000',
    background: '#FEE2E2'
};

// Inisialisasi chart
function initChart(data) {
    const ctx = document.getElementById('revenueChart').getContext('2d');
    
    if (revenueChart) {
        revenueChart.destroy();
    }

    revenueChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: data.labels,
            datasets: [{
                label: 'Pendapatan',
                data: data.values,
                backgroundColor: chartColors.background,
                borderColor: chartColors.primary,
                borderWidth: 2
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return 'Rp ' + new Intl.NumberFormat('id-ID').format(value);
                        }
                    }
                }
            }
        }
    });
}

// Inisialisasi chart dengan data awal
document.addEventListener('DOMContentLoaded', () => {
    initChart(@json($chartData));
});
</script>
@endpush

<style>
.period-btn.active {
    background-color: #FEE2E2;
    font-weight: 600;
}
</style>
@endsection