@extends('layouts.app')
@section('title', __('dashboard.stats_reservations_title'))
@section('page_heading', __('dashboard.stats_reservations_title'))

@section('content')
@php
    $formattedStart = $startDate->format('Y-m-d');
    $formattedEnd = $endDate->format('Y-m-d');
    $totalCount = collect($chartData['reservations'])->sum();
    $totalCanceled = collect($chartData['canceled_reservations'])->sum();
    $totalGross = collect($chartData['amount'])->sum();
    $totalNet = collect($chartData['net_amount'])->sum();
    $totalRefunded = collect($chartData['refunded'])->sum();
    $cancelRate = $totalCount > 0 ? ($totalCanceled / $totalCount * 100) : 0;
@endphp

@include('dashboard.statistics.partials.nav')
@include('dashboard.statistics.partials.filter', [
    'filterAction' => route('dashboard.statistics.reservations'),
    'range' => $range,
    'formattedStart' => $formattedStart,
    'formattedEnd' => $formattedEnd,
    'exportRoute' => route('dashboard.statistics.reservations.export', ['custom_start'=>$formattedStart,'custom_end'=>$formattedEnd,'range'=>$range]),
    'exportXlsRoute' => route('dashboard.statistics.reservations.export', ['custom_start'=>$formattedStart,'custom_end'=>$formattedEnd,'range'=>$range,'format'=>'xls']),
])

{{-- KPIs --}}
<div class="kpi-grid-5">
    @foreach([
        ['fa-solid fa-calendar-check','#eff6ff','#2563eb',number_format($totalCount),'إجمالي الحجوزات',$formattedStart.' — '.$formattedEnd],
        ['fa-solid fa-ban','#fef2f2','#dc2626',number_format($totalCanceled),__('dashboard.canceled_reservations_label'),number_format($cancelRate,1).'% من الإجمالي'],
        ['fa-solid fa-money-bills','#f0fdf4','#16a34a',number_format($totalGross,2),'الإيراد الإجمالي','قبل المسترد'],
        ['fa-solid fa-coins','#fffbeb','#d97706',number_format($totalNet,2),'صافي الإيراد','بعد خصم المسترد'],
        ['fa-solid fa-rotate-left','#faf5ff','#7c3aed',number_format($totalRefunded,2),'المبالغ المستردة','من الحجوزات الملغاة'],
    ] as [$ic,$bg,$cl,$val,$lbl,$meta])
    <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:1.1rem 1.25rem;box-shadow:var(--shadow-card)">
        <div style="width:38px;height:38px;border-radius:10px;background:{{ $bg }};color:{{ $cl }};display:flex;align-items:center;justify-content:center;font-size:.95rem;margin-bottom:.75rem">
            <i class="{{ $ic }}"></i>
        </div>
        <div style="font-size:1.25rem;font-weight:900;color:var(--text-primary);line-height:1;margin-bottom:.2rem">{{ $val }}</div>
        <div style="font-size:.75rem;font-weight:800;color:var(--text-primary);margin-bottom:.15rem">{{ $lbl }}</div>
        <div style="font-size:.68rem;font-weight:600;color:var(--text-muted)">{{ $meta }}</div>
    </div>
    @endforeach
</div>

@if(empty($chartData['labels']))
<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-card);padding:3rem;text-align:center">
    <i class="fa-solid fa-calendar-check" style="font-size:3rem;color:var(--text-muted);opacity:.3;margin-bottom:1rem"></i>
    <div style="font-size:.95rem;font-weight:800;color:var(--text-primary);margin-bottom:.25rem">لا توجد بيانات حجوزات</div>
    <div style="font-size:.8rem;color:var(--text-muted)">لا توجد حجوزات في الفترة المحددة</div>
</div>
@else

{{-- Charts --}}
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:1.25rem">
    {{-- Count Chart --}}
    <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-card);overflow:hidden">
        <div style="padding:.875rem 1.25rem;border-bottom:1px solid var(--border-subtle)">
            <div style="font-size:.85rem;font-weight:800;color:var(--text-primary)">عدد الحجوزات مقابل الملغاة</div>
            <div style="font-size:.7rem;font-weight:600;color:var(--text-muted);margin-top:.15rem">{{ count($chartData['labels']) }} يوم</div>
        </div>
        <div style="padding:1.25rem">
            <div id="countChart" style="min-height:280px"></div>
        </div>
    </div>

    {{-- Amount Chart --}}
    <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-card);overflow:hidden">
        <div style="padding:.875rem 1.25rem;border-bottom:1px solid var(--border-subtle)">
            <div style="font-size:.85rem;font-weight:800;color:var(--text-primary)">الإيراد الإجمالي / الصافي / المسترد</div>
            <div style="font-size:.7rem;font-weight:600;color:var(--text-muted);margin-top:.15rem">بالجنيه المصري</div>
        </div>
        <div style="padding:1.25rem">
            <div id="amountChart" style="min-height:280px"></div>
        </div>
    </div>
</div>

{{-- Table --}}
<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-card);overflow:hidden">
    <div style="padding:.875rem 1.25rem;border-bottom:1px solid var(--border-subtle)">
        <div style="font-size:.85rem;font-weight:800;color:var(--text-primary)">تفاصيل البيانات اليومية</div>
    </div>
    <div style="overflow-x:auto">
        <style>.page-table tbody tr{border-bottom:1px solid var(--border-subtle);transition:background .12s}.page-table tbody tr:hover{background:var(--surface-50)}.page-th{padding:.65rem 1.1rem;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);text-align:start;border-bottom:1px solid var(--border);white-space:nowrap}</style>
        <table class="page-table" style="width:100%;border-collapse:collapse;font-size:.83rem">
            <thead>
                <tr style="background:var(--border-subtle)">
                    @foreach(['#','التاريخ','عدد الحجوزات',__('dashboard.canceled_reservations_label'),'الإيراد الإجمالي','صافي الإيراد','المبالغ المستردة'] as $h)
                    <th class="page-th">{{ $h }}</th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                @foreach($chartData['labels'] as $i => $date)
                <tr>
                    <td style="padding:.875rem 1.25rem;font-weight:700;color:var(--text-muted);font-size:.78rem">{{ $i+1 }}</td>
                    <td style="padding:.875rem 1.25rem;font-weight:700;color:var(--text-secondary)">{{ $date }}</td>
                    <td style="padding:.875rem 1.25rem;font-weight:800;color:var(--text-primary)">{{ number_format($chartData['reservations'][$i]) }}</td>
                    <td style="padding:.875rem 1.25rem;font-weight:800;color:#dc2626">{{ number_format($chartData['canceled_reservations'][$i]) }}</td>
                    <td style="padding:.875rem 1.25rem">
                        <div style="font-weight:800;color:var(--text-primary)">{{ number_format($chartData['amount'][$i],2) }}</div>
                        <div style="font-size:.68rem;font-weight:600;color:var(--text-muted)">ج.م</div>
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        <div style="font-weight:800;color:#16a34a">{{ number_format($chartData['net_amount'][$i],2) }}</div>
                        <div style="font-size:.68rem;font-weight:600;color:var(--text-muted)">ج.م</div>
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        <div style="font-weight:800;color:#d97706">{{ number_format($chartData['refunded'][$i],2) }}</div>
                        <div style="font-size:.68rem;font-weight:600;color:var(--text-muted)">ج.م</div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endif

@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
const data = @json($chartData);
const labels = data.labels;

if(labels && labels.length > 0) {
    new ApexCharts(document.querySelector('#countChart'), {
        series: [
            { name: 'عدد الحجوزات', data: data.reservations },
            { name: __('dashboard.canceled_reservations_label'), data: data.canceled_reservations }
        ],
        chart: { type: 'area', height: 280, toolbar: { show: false }, fontFamily: 'inherit' },
        colors: ['#2563eb', '#dc2626'],
        dataLabels: { enabled: false },
        stroke: { curve: 'smooth', width: 2.5 },
        fill: { type: 'gradient', gradient: { opacityFrom: .18, opacityTo: .02 } },
        xaxis: { categories: labels, labels: { style: { colors: '#94a3b8', fontSize: '11px' }, rotate: -30 } },
        yaxis: { labels: { style: { colors: '#94a3b8', fontSize: '11px' } } },
        grid: { borderColor: '#e2e8f0', strokeDashArray: 4 },
        legend: { position: 'top', horizontalAlign: 'left', fontSize: '12px', fontWeight: 700 },
        tooltip: { y: { formatter: v => Number(v).toLocaleString() } }
    }).render();

    new ApexCharts(document.querySelector('#amountChart'), {
        series: [
            { name: 'الإيراد الإجمالي', data: data.amount.map(v => parseFloat(v)) },
            { name: 'صافي الإيراد', data: data.net_amount.map(v => parseFloat(v)) },
            { name: 'المبالغ المستردة', data: data.refunded.map(v => parseFloat(v)) }
        ],
        chart: { type: 'bar', height: 280, toolbar: { show: false }, fontFamily: 'inherit' },
        colors: ['#2563eb', '#16a34a', '#d97706'],
        plotOptions: { bar: { borderRadius: 4, columnWidth: '55%' } },
        dataLabels: { enabled: false },
        xaxis: { categories: labels, labels: { style: { colors: '#94a3b8', fontSize: '11px' }, rotate: -30 } },
        yaxis: { labels: { style: { colors: '#94a3b8', fontSize: '11px' } } },
        grid: { borderColor: '#e2e8f0', strokeDashArray: 4 },
        legend: { position: 'top', horizontalAlign: 'left', fontSize: '12px', fontWeight: 700 },
        tooltip: { y: { formatter: v => Number(v).toLocaleString() + ' ج.م' } }
    }).render();
}
</script>
@endsection