<x-layouts.tenant pageTitle="Reportes">
    <x-page-header title="Informes y análisis de datos" subtitle="Accede a todos tus informes de reservas, ventas, clientes y servicios.">
        <form method="GET" class="flex flex-wrap items-center gap-2">
            <input type="date" name="from" value="{{ $from->toDateString() }}" class="fresha-field text-sm px-4 py-2.5">
            <input type="date" name="to" value="{{ $to->toDateString() }}" class="fresha-field text-sm px-4 py-2.5">
            <x-btn type="submit" variant="secondary">Filtrar</x-btn>
        </form>
    </x-page-header>

    <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
        <x-card title="Reservas e ingresos" class="xl:col-span-2">
            <div id="daily-chart" class="min-h-[320px]"></div>
        </x-card>

        <x-card title="Estados">
            <div id="status-chart" class="min-h-[320px]"></div>
        </x-card>
    </div>

    <div class="mt-6">
        <x-card title="Servicios más reservados">
            <div id="services-chart" class="min-h-[320px]"></div>
        </x-card>
    </div>

    @push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
        <script>
            const money = new Intl.NumberFormat('es-CO', { style: 'currency', currency: 'COP', maximumFractionDigits: 0 });

            new ApexCharts(document.querySelector('#daily-chart'), {
                chart: { type: 'line', height: 320, toolbar: { show: false }, foreColor: '#64748b', background: 'transparent' },
                grid: { borderColor: '#e2e8f0' },
                stroke: { width: [0, 3], curve: 'smooth' },
                colors: ['#6d5dfc', '#10b981'],
                series: [
                    { name: 'Reservas', type: 'column', data: @json($dailyBookings) },
                    { name: 'Ingresos', type: 'line', data: @json($dailyRevenue) },
                ],
                labels: @json($dailyLabels),
                yaxis: [
                    { title: { text: 'Reservas', style: { color: '#64748b' } } },
                    { opposite: true, labels: { formatter: (value) => money.format(value) }, title: { text: 'Ingresos', style: { color: '#64748b' } } },
                ],
                theme: { mode: 'light' },
                tooltip: { y: [{ formatter: (value) => value }, { formatter: (value) => money.format(value) }] },
            }).render();

            new ApexCharts(document.querySelector('#status-chart'), {
                chart: { type: 'donut', height: 320, foreColor: '#64748b', background: 'transparent' },
                labels: @json($statusLabels),
                series: @json($statusData),
                colors: ['#e7f34a', '#6d5dfc', '#55c783', '#ef4444', '#5fb7d6'],
                legend: { position: 'bottom' },
                theme: { mode: 'light' },
            }).render();

            new ApexCharts(document.querySelector('#services-chart'), {
                chart: { type: 'bar', height: 320, toolbar: { show: false }, foreColor: '#64748b', background: 'transparent' },
                series: [{ name: 'Reservas', data: @json($serviceData) }],
                xaxis: { categories: @json($serviceLabels) },
                colors: ['#55c783'],
                grid: { borderColor: '#e2e8f0' },
                plotOptions: { bar: { borderRadius: 6, horizontal: true } },
                theme: { mode: 'light' },
            }).render();
        </script>
    @endpush
</x-layouts.tenant>
