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

@section('content')
@php
    $formattedStart  = $startDate->format('Y-m-d');
    $formattedEnd    = $endDate->format('Y-m-d');
    $isProfit        = $netProfit >= 0;
    $operationsTotal = $customersCount + $reservationsCount + $salesCount + $laundryCount;
@endphp

@include('dashboard.statistics.partials.nav')

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

{{-- Net profit banner --}}
<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);padding:1.5rem;margin-bottom:1.25rem;display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center">
    <div style="flex:1 1 280px;min-width:0">
        <div style="font-size:.72rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.5rem">{{ $formattedStart }} — {{ $formattedEnd }}</div>
        <div style="font-size:2.5rem;font-weight:900;line-height:1;margin-bottom:.35rem;color:{{ $isProfit ? '#16a34a' : '#dc2626' }}">{{ number_format($netProfit, 2) }}</div>
        <div style="font-size:.85rem;font-weight:700;color:var(--text-muted);margin-bottom:1rem">{{ __('dashboard.Net Profit') }} — {{ $isProfit ? 'ربح' : 'عجز' }}</div>
        <div style="display:flex;flex-wrap:wrap;gap:.5rem">
            <span style="display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .75rem;border-radius:999px;font-size:.75rem;font-weight:700;background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0"><i class="fa-solid fa-chart-column"></i> الإيرادات {{ number_format($totalRevenue,2) }}</span>
            <span style="display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .75rem;border-radius:999px;font-size:.75rem;font-weight:700;background:#fef2f2;color:#dc2626;border:1px solid #fecaca"><i class="fa-solid fa-arrow-trend-down"></i> الإنفاق {{ number_format($totalExpenditure,2) }}</span>
            <span style="display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .75rem;border-radius:999px;font-size:.75rem;font-weight:700;background:var(--border-subtle);color:var(--text-muted);border:1px solid var(--border)"><i class="fa-solid fa-layer-group"></i> العمليات {{ number_format($operationsTotal) }}</span>
        </div>
    </div>
    <div class="kpi-grid-2" style="flex-shrink:0">
        @foreach([[__('dashboard.Customers'),$customersCount],[__('dashboard.Reservations'),$reservationsCount],[__('dashboard.Sales'),$salesCount],[__('dashboard.Laundry'),$laundryCount]] as [$lbl,$val])
        <div style="background:var(--surface-50);border:1px solid var(--border);border-radius:12px;padding:.85rem 1rem;text-align:center">
            <div style="font-size:1.35rem;font-weight:900;color:var(--text-primary);line-height:1">{{ number_format($val) }}</div>
            <div style="font-size:.72rem;font-weight:600;color:var(--text-muted);margin-top:.2rem">{{ $lbl }}</div>
        </div>
        @endforeach
    </div>
</div>

{{-- Revenue & Expenditure --}}
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:1.25rem">
    @foreach([
        [__('dashboard.revenues_returns'),'fa-solid fa-arrow-trend-up',[
            ['fa-solid fa-money-bill-transfer','#f0fdf4','#16a34a',__('dashboard.Total Revenue'),$totalRevenue,'العائد الكلي من المبيعات والحجوزات'],
            ['fa-solid fa-cart-plus','#eff6ff','#2563eb',__('dashboard.Sales Gross Value'),$salesGrossValue,__('dashboard.sales_gross_label')],
            ['fa-solid fa-building-columns','#fffbeb','#d97706',__('dashboard.Renting Gross Value'),$rentingGrossValue,__('dashboard.renting_gross_label')],
            ['fa-solid fa-coins','#f0fdf4','#16a34a',__('dashboard.Renting (Net)'),$rentingValue,__('dashboard.renting_net_label')],
        ]],
        [__('dashboard.discounts_spending'),'fa-solid fa-arrow-trend-down',[
            ['fa-solid fa-arrow-trend-down','#fef2f2','#dc2626',__('dashboard.Total Expenditure'),$totalExpenditure,__('dashboard.total_expenditure_label')],
            ['fa-solid fa-rotate','#fffbeb','#d97706',__('dashboard.Returns Value'),$returnsValue,__('dashboard.returns_value_label')],
            ['fa-solid fa-circle-xmark','#fef2f2','#dc2626',__('dashboard.Canceled (Refunded)'),$canceledValue,__('dashboard.canceled_value_label')],
            ['fa-solid fa-wallet','#f8fafc','#64748b',__('dashboard.Total Expenses'),$totalExpenses,__('dashboard.total_expenses_label')],
        ]],
    ] as [$title,$icon,$rows])
    <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);overflow:hidden">
        <div style="display:flex;align-items:center;gap:.5rem;padding:.875rem 1.25rem;border-bottom:1px solid var(--border-subtle);font-size:.875rem;font-weight:800;color:var(--text-primary)">
            <i class="{{ $icon }}" style="color:var(--c-primary)"></i>{{ $title }}
        </div>
        @foreach($rows as [$ico,$bg,$color,$lbl,$val,$sub])
        <div style="display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.875rem 1.25rem;{{ !$loop->last ? 'border-bottom:1px solid var(--border-subtle)' : '' }}">
            <div style="display:flex;align-items:center;gap:.75rem;flex:1;min-width:0">
                <div style="width:32px;height:32px;border-radius:var(--radius-sm);flex-shrink:0;background:{{ $bg }};color:{{ $color }};display:flex;align-items:center;justify-content:center;font-size:.85rem"><i class="{{ $ico }}"></i></div>
                <div>
                    <div style="font-size:.86rem;font-weight:800;color:var(--text-primary)">{{ $lbl }}</div>
                    <div style="font-size:.73rem;color:var(--text-muted)">{{ $sub }}</div>
                </div>
            </div>
            <div style="font-size:.92rem;font-weight:900;color:var(--text-primary);white-space:nowrap">{{ number_format($val,2) }}</div>
        </div>
        @endforeach
    </div>
    @endforeach
</div>

{{-- Purchases + Quick compare --}}
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1.25rem">
    @foreach([
        [__('dashboard.purchases_operations'),'fa-solid fa-bag-shopping',[
            [__('dashboard.Total Purchases'),$totalPurchases,__('dashboard.total_purchases_label')],
            [__('dashboard.Total Purchase Returns'),$totalPurchaseReturns,__('dashboard.purchase_returns_label')],
            [__('dashboard.Net Purchases'),$netPurchases,__('dashboard.net_purchases_label')],
            [__('dashboard.Laundry Total Value'),$laundryTotalValue,__('dashboard.laundry_value_label')],
        ]],
        [__('dashboard.quick_comparison'),'fa-solid fa-chart-bar',[
            [__('dashboard.Sales Value'),$salesValue,__('dashboard.net_sales_label')],
            [__('dashboard.Returns'),$returnsCount,__('dashboard.returns_count_label')],
            [__('dashboard.Canceled Reservations'),$canceledReservationsCount,__('dashboard.canceled_reservations_label')],
            [__('dashboard.Net Profit'),$netProfit,__('dashboard.net_profit_label')],
        ]],
    ] as [$title,$icon,$rows])
    <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);overflow:hidden">
        <div style="display:flex;align-items:center;gap:.5rem;padding:.875rem 1.25rem;border-bottom:1px solid var(--border-subtle);font-size:.875rem;font-weight:800;color:var(--text-primary)">
            <i class="{{ $icon }}" style="color:var(--c-primary)"></i>{{ $title }}
        </div>
        <div style="overflow-x:auto">
            <table style="width:100%;border-collapse: collapse;font-size:.83rem">
                <thead><tr style="background:var(--border-subtle)">
                    <th style="padding:.65rem 1.25rem;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);text-align:start">المؤشر</th>
                    <th style="padding:.65rem 1.25rem;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);text-align:start">القيمة</th>
                    <th style="padding:.65rem 1.25rem;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);text-align:start">الوصف</th>
                </tr></thead>
                <tbody>
                    @foreach($rows as [$lbl,$val,$desc])
                    <tr style="border-top:1px solid var(--border-subtle)">
                        <td style="padding:.75rem 1.25rem;color:var(--text-secondary)">{{ $lbl }}</td>
                        <td style="padding:.75rem 1.25rem;font-weight:800;color:{{ $loop->last && isset($isProfit) ? ($isProfit?'#16a34a':'#dc2626') : 'var(--text-primary)' }}">{{ is_float($val)||is_int($val) ? number_format($val,2) : $val }}</td>
                        <td style="padding:.75rem 1.25rem;font-size:.78rem;color:var(--text-muted)">{{ $desc }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endforeach
</div>
@endsection