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

@section('styles')
<style>
.sales-stats { display: grid; gap: 1.25rem; }
.sales-filter,
.sales-kpi,
.sales-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
}
.sales-filter { border-radius: var(--radius-xl); padding: 1rem; }
.sales-filter__form { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .75rem; align-items: end; }
.sales-filter__group { display: flex; flex-direction: column; gap: .28rem; grid-column: span 3; min-width: 0; }
.sales-filter__actions { grid-column: span 6; display: flex; gap: .45rem; flex-wrap: wrap; align-items: end; }
.sales-label { color: var(--text-muted); font-size: .7rem; font-weight: 800; }
.sales-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
.sales-kpi { border-radius: 18px; padding: 1rem; display: flex; align-items: center; gap: .85rem; min-width: 0; }
.sales-kpi__icon { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--kpi-bg); color: var(--kpi-color); }
.sales-kpi__value { color: var(--text-primary); font-size: 1.2rem; font-weight: 900; line-height: 1.1; overflow-wrap: anywhere; }
.sales-kpi__label { margin-top: .15rem; color: var(--text-secondary); font-size: .74rem; font-weight: 800; }
.sales-kpi__meta { margin-top: .1rem; color: var(--text-muted); font-size: .68rem; font-weight: 700; }
.sales-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr); gap: 1.25rem; align-items: start; }
.sales-card { border-radius: var(--radius-xl); overflow: hidden; min-width: 0; }
.sales-card__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem 1.15rem; border-bottom: 1px solid var(--border-subtle); background: linear-gradient(180deg, var(--surface-50), var(--bg-card)); flex-wrap: wrap; }
.sales-card__title { display: inline-flex; align-items: center; gap: .5rem; margin: 0; color: var(--text-primary); font-size: .9rem; font-weight: 900; }
.sales-card__title i { color: var(--c-primary); }
.sales-card__meta,
.sales-pill { display: inline-flex; align-items: center; border-radius: 999px; background: var(--c-primary-bg); color: var(--c-primary); font-size: .7rem; font-weight: 800; white-space: nowrap; }
.sales-card__meta { padding: .18rem .6rem; }
.sales-chart { min-height: 320px; padding: 1.15rem; }
.sales-insights { display: grid; gap: .65rem; padding: 1rem; }
.sales-insight { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem .9rem; border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--surface-50); }
.sales-insight__label { color: var(--text-secondary); font-size: .8rem; font-weight: 800; }
.sales-insight__value { color: var(--text-primary); font-size: .9rem; font-weight: 900; white-space: nowrap; }
.sales-table-wrap { overflow-x: auto; }
.sales-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.sales-table thead tr { background: var(--surface-50); }
.sales-table th { padding: .7rem 1rem; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: .68rem; font-weight: 900; letter-spacing: .04em; text-align: start; text-transform: uppercase; white-space: nowrap; }
.sales-table td { padding: .78rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); vertical-align: middle; white-space: nowrap; }
.sales-table tbody tr:last-child td { border-bottom: 0; }
.sales-table tbody tr:hover { background: var(--surface-50); }
.sales-table tfoot tr { background: var(--surface-50); border-top: 2px solid var(--border); }
.sales-table tfoot td { padding: .8rem 1rem; color: var(--text-primary); font-size: .84rem; font-weight: 900; }
.sales-muted { color: var(--text-muted); font-size: .76rem; font-weight: 800; }
.sales-amount { color: var(--text-primary); font-weight: 900; }
.sales-positive { color: #16a34a !important; }
.sales-danger { color: #dc2626 !important; }
.sales-rate { display: grid; grid-template-columns: minmax(64px, 1fr) auto; gap: .5rem; align-items: center; min-width: 140px; }
.sales-rate__track { height: 6px; border-radius: 999px; overflow: hidden; background: var(--border-subtle); }
.sales-rate__fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f97316, #dc2626); }
.sales-empty { padding: 2.5rem 1rem; text-align: center; }
.dark .sales-card__head { background: var(--bg-card); }
.dark .sales-insight { background: rgba(255,255,255,.025); }
@media (max-width: 1100px) {
    .sales-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sales-grid { grid-template-columns: 1fr; }
    .sales-filter__group { grid-column: span 6; }
    .sales-filter__actions { grid-column: span 12; }
}
@media (max-width: 700px) {
    .sales-filter__form,
    .sales-kpis { grid-template-columns: 1fr; }
    .sales-filter__group,
    .sales-filter__actions { grid-column: auto; }
    .sales-filter__actions .app-btn { flex: 1 1 auto; justify-content: center; }
    .sales-card__head { align-items: flex-start; }
}
</style>
@endsection

@section('content')
@php
    $formattedStart = $startDate->format('Y-m-d');
    $formattedEnd = $endDate->format('Y-m-d');
    $labels = $chartData['labels'] ?? [];
    $salesSeries = $chartData['sales'] ?? [];
    $returnsSeries = $chartData['returns'] ?? [];

    $totalSales = collect($salesSeries)->sum();
    $totalReturns = collect($returnsSeries)->sum();
    $netSales = $totalSales - $totalReturns;
    $daysCount = max(count($labels), 1);
    $avgPerDay = $totalSales / $daysCount;
    $returnRate = $totalSales > 0 ? ($totalReturns / $totalSales * 100) : 0;
    $bestSalesAmount = collect($salesSeries)->max() ?? 0;
    $bestSalesIndex = array_search($bestSalesAmount, $salesSeries, true);
    $bestSalesDay = $bestSalesIndex !== false && isset($labels[$bestSalesIndex]) ? $labels[$bestSalesIndex] : '-';
    $activeDaysCount = collect($salesSeries)->filter(fn ($value) => $value > 0)->count();

    $exportParams = ['range' => $range];
    if ($range === 'custom') {
        $exportParams['custom_start'] = request('custom_start', $formattedStart);
        $exportParams['custom_end'] = request('custom_end', $formattedEnd);
    }
    $exportCsvRoute = route('dashboard.statistics.sales.export', $exportParams);
    $exportXlsRoute = route('dashboard.statistics.sales.export', array_merge($exportParams, ['format' => 'xls']));
@endphp

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

<div class="sales-stats">
    <section class="sales-filter">
        <form class="sales-filter__form" method="GET" action="{{ route('dashboard.statistics.sales') }}">
            <label class="sales-filter__group">
                <span class="sales-label">{{ __('dashboard.Range') }}</span>
                <select name="range" id="sales_range" class="app-input app-select app-input--sm">
                    @foreach([
                        'today' => __('dashboard.Today'),
                        'last_week' => __('dashboard.Last Week'),
                        'last_month' => __('dashboard.Last Month'),
                        'last_3_months' => __('dashboard.Last 3 Months'),
                        'last_6_months' => __('dashboard.Last 6 Months'),
                        'last_9_months' => __('dashboard.Last 9 Months'),
                        'last_year' => __('dashboard.Last Year'),
                        'custom' => __('dashboard.Custom Range'),
                    ] as $value => $label)
                        <option value="{{ $value }}" @selected($range === $value)>{{ $label }}</option>
                    @endforeach
                </select>
            </label>
            <label class="sales-filter__group" id="sales_start_wrap">
                <span class="sales-label">{{ __('dashboard.From Date') }}</span>
                <input type="date" name="custom_start" class="app-input app-input--sm" value="{{ request('custom_start', $formattedStart) }}">
            </label>
            <label class="sales-filter__group" id="sales_end_wrap">
                <span class="sales-label">{{ __('dashboard.To Date') }}</span>
                <input type="date" name="custom_end" class="app-input app-input--sm" value="{{ request('custom_end', $formattedEnd) }}">
            </label>
            <div class="sales-filter__actions">
                <button type="submit" class="app-btn app-btn--primary app-btn--sm">
                    <i class="fa-solid fa-filter"></i>
                    {{ __('dashboard.filter') }}
                </button>
                <a href="{{ route('dashboard.statistics.sales') }}" class="app-btn app-btn--secondary app-btn--sm">
                    <i class="fa-solid fa-xmark"></i>
                </a>
                <a href="{{ $exportCsvRoute }}" class="app-btn app-btn--secondary app-btn--sm">
                    <i class="fa-solid fa-file-csv"></i>
                    CSV
                </a>
                <a href="{{ $exportXlsRoute }}" class="app-btn app-btn--secondary app-btn--sm">
                    <i class="fa-solid fa-file-excel"></i>
                    Excel
                </a>
            </div>
        </form>
    </section>

    <section class="sales-kpis">
        @foreach([
            ['fa-solid fa-cart-shopping', '#eff6ff', '#2563eb', number_format($totalSales, 2), 'إجمالي المبيعات', $formattedStart . ' - ' . $formattedEnd],
            ['fa-solid fa-rotate-left', '#fef2f2', '#dc2626', number_format($totalReturns, 2), 'إجمالي المرتجعات', number_format($returnRate, 1) . '% من المبيعات'],
            ['fa-solid fa-coins', '#f0fdf4', '#16a34a', number_format($netSales, 2), __('dashboard.net_sales_label'), 'بعد خصم المرتجعات'],
            ['fa-solid fa-calendar-days', '#fffbeb', '#d97706', number_format($avgPerDay, 2), 'متوسط يومي', 'على مدار ' . $daysCount . ' يوم'],
        ] as [$icon, $bg, $color, $value, $label, $meta])
            <article class="sales-kpi" style="--kpi-bg: {{ $bg }}; --kpi-color: {{ $color }}">
                <span class="sales-kpi__icon"><i class="{{ $icon }}"></i></span>
                <div>
                    <div class="sales-kpi__value">{{ $value }}</div>
                    <div class="sales-kpi__label">{{ $label }}</div>
                    <div class="sales-kpi__meta">{{ $meta }}</div>
                </div>
            </article>
        @endforeach
    </section>

    <section class="sales-grid">
        <article class="sales-card">
            <div class="sales-card__head">
                <h3 class="sales-card__title">
                    <i class="fa-solid fa-chart-area"></i>
                    {{ __('dashboard.Sales Statistics') }}
                </h3>
                <span class="sales-card__meta">{{ count($labels) }} يوم</span>
            </div>
            <div class="sales-chart">
                <div id="salesChart"></div>
            </div>
        </article>

        <aside class="sales-card">
            <div class="sales-card__head">
                <h3 class="sales-card__title">
                    <i class="fa-solid fa-signal"></i>
                    مؤشرات سريعة
                </h3>
                <span class="sales-card__meta">{{ $formattedStart }} - {{ $formattedEnd }}</span>
            </div>
            <div class="sales-insights">
                @foreach([
                    ['أفضل يوم مبيعات', $bestSalesDay],
                    ['قيمة أفضل يوم', number_format($bestSalesAmount, 2)],
                    ['أيام بها مبيعات', $activeDaysCount . ' / ' . count($labels)],
                    ['صافي الفترة', number_format($netSales, 2)],
                ] as [$label, $value])
                    <div class="sales-insight">
                        <span class="sales-insight__label">{{ $label }}</span>
                        <span class="sales-insight__value">{{ $value }}</span>
                    </div>
                @endforeach
            </div>
        </aside>
    </section>

    <article class="sales-card">
        <div class="sales-card__head">
            <h3 class="sales-card__title">
                <i class="fa-solid fa-table-list"></i>
                تفاصيل يومية
            </h3>
            <span class="sales-card__meta">{{ count($labels) }} سجل</span>
        </div>

        @if(empty($labels))
            <div class="sales-empty">
                @include('layouts.partials.index-empty-state', [
                    'icon' => 'fa-solid fa-cart-shopping',
                    'title' => 'لا توجد بيانات مبيعات',
                    'message' => 'جرّب تغيير نطاق التاريخ',
                ])
            </div>
        @else
            <div class="sales-table-wrap">
                <table class="sales-table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>{{ __('dashboard.Date') }}</th>
                            <th>{{ __('dashboard.Sales') }}</th>
                            <th>{{ __('dashboard.Returns') }}</th>
                            <th>الصافي</th>
                            <th>نسبة المرتجعات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($labels as $index => $date)
                            @php
                                $saleAmount = $salesSeries[$index] ?? 0;
                                $returnAmount = $returnsSeries[$index] ?? 0;
                                $dailyNet = $saleAmount - $returnAmount;
                                $dailyReturnRate = $saleAmount > 0 ? ($returnAmount / $saleAmount * 100) : 0;
                            @endphp
                            <tr>
                                <td class="sales-muted">{{ $index + 1 }}</td>
                                <td class="sales-amount">{{ $date }}</td>
                                <td class="sales-amount">{{ number_format($saleAmount, 2) }}</td>
                                <td class="sales-danger">{{ number_format($returnAmount, 2) }}</td>
                                <td class="{{ $dailyNet >= 0 ? 'sales-positive' : 'sales-danger' }}">{{ number_format($dailyNet, 2) }}</td>
                                <td>
                                    <div class="sales-rate">
                                        <div class="sales-rate__track">
                                            <div class="sales-rate__fill" style="width: {{ min($dailyReturnRate, 100) }}%"></div>
                                        </div>
                                        <span class="sales-muted">{{ number_format($dailyReturnRate, 1) }}%</span>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="2" class="sales-muted">الإجمالي</td>
                            <td>{{ number_format($totalSales, 2) }}</td>
                            <td class="sales-danger">{{ number_format($totalReturns, 2) }}</td>
                            <td class="{{ $netSales >= 0 ? 'sales-positive' : 'sales-danger' }}">{{ number_format($netSales, 2) }}</td>
                            <td class="sales-muted">{{ number_format($returnRate, 1) }}%</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        @endif
    </article>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
(function () {
    const rangeSelect = document.getElementById('sales_range');
    const startWrap = document.getElementById('sales_start_wrap');
    const endWrap = document.getElementById('sales_end_wrap');

    function toggleCustomRange() {
        const isCustom = rangeSelect?.value === 'custom';
        if (startWrap) startWrap.hidden = !isCustom;
        if (endWrap) endWrap.hidden = !isCustom;
    }

    toggleCustomRange();
    rangeSelect?.addEventListener('change', function () {
        toggleCustomRange();
        if (this.value !== 'custom') this.form.submit();
    });

    const chartEl = document.querySelector('#salesChart');
    if (!chartEl || typeof ApexCharts === 'undefined') return;

    const isDark = document.documentElement.classList.contains('dark');
    const gridColor = isDark ? 'rgba(148,163,184,.12)' : '#e2e8f0';
    const labelColor = isDark ? '#94a3b8' : '#64748b';

    new ApexCharts(chartEl, {
        series: [
            { name: @json(__('dashboard.Sales')), data: @json($salesSeries) },
            { name: @json(__('dashboard.Returns')), data: @json($returnsSeries) },
        ],
        chart: {
            type: 'area',
            height: 320,
            toolbar: { show: false },
            fontFamily: 'Cairo, sans-serif',
            background: 'transparent',
            zoom: { enabled: false },
        },
        colors: ['#2563eb', '#dc2626'],
        dataLabels: { enabled: false },
        stroke: { curve: 'smooth', width: 3 },
        fill: { type: 'gradient', gradient: { opacityFrom: .18, opacityTo: .025 } },
        markers: { size: 0, hover: { size: 5 } },
        xaxis: {
            categories: @json($labels),
            labels: { style: { colors: labelColor, fontSize: '11px' }, rotate: -25, maxHeight: 70 },
            axisBorder: { show: false },
            axisTicks: { show: false },
        },
        yaxis: {
            labels: {
                style: { colors: labelColor, fontSize: '11px' },
                formatter: value => Number(value).toLocaleString('ar-EG'),
            },
        },
        grid: { borderColor: gridColor, strokeDashArray: 4, padding: { left: 0, right: 0 } },
        legend: { position: 'top', horizontalAlign: 'start', fontSize: '12px', fontWeight: 800, labels: { colors: labelColor } },
        tooltip: {
            theme: isDark ? 'dark' : 'light',
            y: { formatter: value => Number(value).toLocaleString('ar-EG', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) },
        },
    }).render();
})();
</script>
@endsection