@extends('layouts.restaurant')
@php
    $currencySymbol = App\Models\AppSetting::sanitizedCurrencySymbol();
    $currencyDecimals = App\Models\AppSetting::currencyDecimals();
    $salesLabels = $salesData->pluck('date')->map(fn($date) => \Carbon\Carbon::parse($date)->format('d M'));
    $statusColors = ['pending'=>'#f59e0b','confirmed'=>'#3b82f6','preparing'=>'#8b5cf6','ready'=>'#06b6d4','out_for_delivery'=>'#f97316','delivered'=>'#10b981','cancelled'=>'#ef4444'];
@endphp

@section('title', 'Analytics & Reports')

@section('styles')
<style>
    .insights-page { --ink:#0f172a; --muted:#64748b; }
    .insights-head { background:linear-gradient(125deg,#0f172a,#1e293b 58%,#334155); color:#fff; border-radius:22px; padding:24px 26px; position:relative; overflow:hidden; }
    .insights-head:after { content:""; position:absolute; width:230px; height:230px; border-radius:50%; right:-70px; top:-120px; background:rgba(255,107,53,.2); }
    .insights-head p { color:#cbd5e1; margin:5px 0 0; }
    .range-panel { border:1px solid #e2e8f0; border-radius:17px; background:#fff; padding:15px; box-shadow:0 8px 25px rgba(15,23,42,.04); }
    .insight-kpi { height:100%; background:#fff; border:1px solid #e5e7eb; border-radius:18px; padding:18px; box-shadow:0 10px 30px rgba(15,23,42,.05); position:relative; overflow:hidden; }
    .insight-kpi:after { content:""; position:absolute; width:70px; height:70px; border-radius:50%; right:-20px; bottom:-28px; background:var(--wash); }
    .kpi-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; color:var(--tone); background:var(--wash); }
    .kpi-label { color:var(--muted); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; margin-top:14px; }
    .kpi-value { color:var(--ink); font-size:25px; font-weight:850; margin-top:3px; }
    .chart-card { background:#fff; border:1px solid #e5e7eb; border-radius:20px; padding:20px; box-shadow:0 12px 34px rgba(15,23,42,.05); height:100%; }
    .chart-card h5 { color:var(--ink); font-weight:800; }
    .chart-wrap { position:relative; height:285px; }
    .rank-row { display:grid; grid-template-columns:36px 48px 1fr auto; gap:11px; align-items:center; padding:10px 0; border-bottom:1px solid #f1f5f9; }
    .rank-row:last-child { border:0; }
    .rank-number { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; background:#fff3ed; color:var(--primary); font-weight:800; }
    .rank-image { width:46px; height:46px; border-radius:11px; object-fit:cover; background:#f1f5f9; }
</style>
@endsection

@section('content')
<div class="insights-page">
    <section class="insights-head mb-4">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 position-relative" style="z-index:1">
            <div><div class="small text-uppercase fw-bold text-warning mb-1">Business intelligence</div><h1 class="h2 fw-bold mb-0">Analytics & Reports</h1><p>Clear revenue, order and product insights for better daily decisions.</p></div>
            <form action="{{ route('restaurant.analytics.export') }}" method="GET"><input type="hidden" name="start_date" value="{{ $startDate instanceof \Carbon\Carbon ? $startDate->format('Y-m-d') : $startDate }}"><input type="hidden" name="end_date" value="{{ $endDate instanceof \Carbon\Carbon ? $endDate->format('Y-m-d') : $endDate }}"><button class="btn btn-light"><i class="fas fa-file-excel me-2 text-success"></i>Export report</button></form>
        </div>
    </section>

    <form action="{{ route('restaurant.analytics.index') }}" method="GET" class="range-panel mb-4">
        <div class="row g-3 align-items-end">
            <div class="col-md-4"><label class="form-label small fw-bold">FROM</label><input type="date" name="start_date" class="form-control" value="{{ $startDate instanceof \Carbon\Carbon ? $startDate->format('Y-m-d') : $startDate }}"></div>
            <div class="col-md-4"><label class="form-label small fw-bold">TO</label><input type="date" name="end_date" class="form-control" value="{{ $endDate instanceof \Carbon\Carbon ? $endDate->format('Y-m-d') : $endDate }}"></div>
            <div class="col-md-4 d-flex gap-2"><button class="btn btn-primary flex-grow-1"><i class="fas fa-chart-line me-2"></i>Refresh insights</button><a href="{{ route('restaurant.analytics.index') }}" class="btn btn-light">Reset</a></div>
        </div>
    </form>

    <div class="row g-3 mb-4">
        @foreach([
            ['Revenue', $currencySymbol.number_format($summary['total_revenue'] ?? 0,$currencyDecimals),'fa-indian-rupee-sign','#10b981','rgba(16,185,129,.12)'],
            ['Orders', number_format($summary['total_orders'] ?? 0),'fa-bag-shopping','#3b82f6','rgba(59,130,246,.12)'],
            ['Average order', $currencySymbol.number_format($summary['avg_order_value'] ?? 0,$currencyDecimals),'fa-receipt','#8b5cf6','rgba(139,92,246,.12)'],
            ['Customers', number_format($summary['total_customers'] ?? 0),'fa-users','#f97316','rgba(249,115,22,.12)'],
            ['Cancellation', number_format($summary['cancellation_rate'] ?? 0,1).'%','fa-arrow-trend-down','#ef4444','rgba(239,68,68,.11)'],
        ] as [$label,$value,$icon,$tone,$wash])
            <div class="col-xl col-md-4 col-6"><div class="insight-kpi" style="--tone:{{ $tone }};--wash:{{ $wash }}"><div class="kpi-icon"><i class="fas {{ $icon }}"></i></div><div class="kpi-label">{{ $label }}</div><div class="kpi-value">{{ $value }}</div></div></div>
        @endforeach
    </div>

    <div class="row g-4 mb-4">
        <div class="col-xl-8"><div class="chart-card"><div class="d-flex justify-content-between align-items-center mb-3"><div><h5 class="mb-1">Revenue and order trend</h5><small class="text-muted">Daily performance across the selected period</small></div><span class="badge bg-success bg-opacity-10 text-success">Live data</span></div><div class="chart-wrap"><canvas id="salesChart"></canvas></div></div></div>
        <div class="col-xl-4"><div class="chart-card"><h5 class="mb-1">Order health</h5><small class="text-muted">Status mix for selected dates</small><div class="chart-wrap mt-3"><canvas id="statusChart"></canvas></div></div></div>
    </div>

    <div class="row g-4">
        <div class="col-xl-7"><div class="chart-card"><h5 class="mb-1">Peak order hours</h5><small class="text-muted">Use demand patterns to plan staffing and stock</small><div class="chart-wrap mt-3"><canvas id="hourlyChart"></canvas></div></div></div>
        <div class="col-xl-5"><div class="chart-card"><div class="d-flex justify-content-between mb-3"><div><h5 class="mb-1">Popular items</h5><small class="text-muted">Ranked by total orders</small></div><i class="fas fa-trophy text-warning fa-lg"></i></div>
            @forelse($topItems->take(7) as $index => $item)
                @php($itemImage = $item->image ? App\Services\MediaStorage::url($item->image) : null)
                <div class="rank-row"><div class="rank-number">{{ $index+1 }}</div>@if($itemImage)<img class="rank-image" src="{{ $itemImage }}" alt="">@else<div class="rank-image d-grid align-items-center text-center text-muted"><i class="fas fa-box"></i></div>@endif<div><div class="fw-bold text-dark">{{ $item->name }}</div><small class="text-muted">{{ number_format($item->total_orders ?? 0) }} orders</small></div><div class="fw-bold">{{ $currencySymbol }}{{ number_format($item->final_price,$currencyDecimals) }}</div></div>
            @empty<div class="text-center text-muted py-5">No item sales yet.</div>@endforelse
        </div></div>
    </div>
</div>
@endsection

@section('scripts')
<script>
const common={responsive:true,maintainAspectRatio:false,plugins:{legend:{labels:{usePointStyle:true,boxWidth:8,font:{family:'Plus Jakarta Sans'}}}},scales:{x:{grid:{display:false}},y:{beginAtZero:true,grid:{color:'rgba(148,163,184,.16)'}}}};
new Chart(document.getElementById('salesChart'),{type:'line',data:{labels:@json($salesLabels),datasets:[{label:'Revenue',data:@json($salesData->pluck('revenue')),borderColor:'#f97316',backgroundColor:'rgba(249,115,22,.10)',fill:true,tension:.38,pointRadius:2,yAxisID:'y'},{label:'Orders',data:@json($salesData->pluck('orders')),borderColor:'#3b82f6',backgroundColor:'transparent',tension:.38,pointRadius:2,yAxisID:'y1'}]},options:{...common,interaction:{mode:'index',intersect:false},scales:{...common.scales,y:{...common.scales.y,ticks:{callback:v=>'{{ $currencySymbol }}'+v}},y1:{beginAtZero:true,position:'right',grid:{display:false}}}}});
const statuses=@json($statusBreakdown); const statusColors=@json($statusColors);
new Chart(document.getElementById('statusChart'),{type:'doughnut',data:{labels:statuses.map(x=>String(x.status).replaceAll('_',' ')),datasets:[{data:statuses.map(x=>x.count),backgroundColor:statuses.map(x=>statusColors[x.status]||'#94a3b8'),borderWidth:0,hoverOffset:5}]},options:{responsive:true,maintainAspectRatio:false,cutout:'68%',plugins:{legend:{position:'bottom',labels:{usePointStyle:true,boxWidth:8}}}}});
const hours=@json($hourlyData);
new Chart(document.getElementById('hourlyChart'),{type:'bar',data:{labels:hours.map(x=>String(x.hour).padStart(2,'0')+':00'),datasets:[{label:'Orders',data:hours.map(x=>x.orders),backgroundColor:'rgba(59,130,246,.78)',borderRadius:7,borderSkipped:false}]},options:common});
</script>
@endsection