@extends('admin.layouts.master')
@section('title', $pageTitle)

@section('content')
<div class="page-content-wrapper"><div class="content-container"><div class="page-content">
    <div class="content-header d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0"><i class="ti {{ $pageIcon }} me-2 text-primary"></i>{{ $pageTitle }}</h4>
    </div>

    <div class="card border-0 shadow-sm mb-3">
        <div class="card-body py-2">
            <div class="d-flex flex-wrap gap-2">
                @foreach($sectionNavigation as $nav)
                    @php
                        $navUrl = Route::has($nav['route']) ? route($nav['route']) : '#';
                        $navPattern = str_ends_with($nav['route'], '.index') ? str_replace('.index', '.*', $nav['route']) : $nav['route'];
                    @endphp
                    <a href="{{ $navUrl }}" class="btn btn-sm {{ request()->routeIs($navPattern) ? 'btn-primary' : 'btn-outline-primary' }}">
                        <i class="ti {{ $nav['icon'] }} me-1"></i>{{ $nav['label'] }}
                    </a>
                @endforeach
            </div>
        </div>
    </div>

    @php
        $summaryCards = [
            ['label' => 'إجمالي المبيعات', 'value' => number_format($summary['total_sales'], 2), 'icon' => 'ti-report-money', 'color' => 'primary'],
            ['label' => 'إجمالي المرتجعات', 'value' => number_format($summary['total_returns'], 2), 'icon' => 'ti-arrow-back-up', 'color' => 'danger'],
            ['label' => 'صافي المبيعات', 'value' => number_format($summary['net_sales'], 2), 'icon' => 'ti-chart-line', 'color' => 'info'],
            ['label' => 'تكلفة البضاعة', 'value' => number_format($summary['total_cogs'], 2), 'icon' => 'ti-package', 'color' => 'warning'],
            ['label' => 'الربح الإجمالي', 'value' => number_format($summary['gross_profit'], 2), 'icon' => 'ti-chart-bar', 'color' => 'success'],
            ['label' => 'المصروفات', 'value' => number_format($summary['total_expenses'], 2), 'icon' => 'ti-receipt', 'color' => 'secondary'],
            ['label' => $summary['net_profit_label'], 'value' => number_format($summary['net_profit'], 2), 'icon' => 'ti-scale', 'color' => $summary['net_profit'] < 0 ? 'danger' : 'success'],
            ['label' => 'إجمالي الفواتير', 'value' => number_format($summary['total_invoices']), 'icon' => 'ti-file-invoice', 'color' => 'primary'],
            ['label' => 'متوسط الفاتورة', 'value' => number_format($summary['average_invoice_value'], 2), 'icon' => 'ti-calculator', 'color' => 'info'],
            ['label' => 'إجمالي التحصيل', 'value' => number_format($summary['total_collected_payments'], 2), 'icon' => 'ti-wallet', 'color' => 'success'],
            ['label' => 'الأصناف منخفضة المخزون', 'value' => number_format($summary['low_stock_products_count']), 'icon' => 'ti-alert-triangle', 'color' => 'warning'],
            ['label' => 'الشفتات المفتوحة', 'value' => number_format($summary['open_shifts_count']), 'icon' => 'ti-clock-play', 'color' => 'danger'],
        ];
    @endphp
    @include('admin.reports.partials.summary-cards', ['summaryCards' => $summaryCards])

    <div class="row g-3 mb-3">
        <div class="col-xl-8">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-transparent border-0"><h6 class="mb-0">اتجاهات صافي المبيعات والربح</h6></div>
                <div class="card-body"><div id="reports-dashboard-sales-chart" style="min-height:280px"></div></div>
            </div>
        </div>
        <div class="col-xl-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-transparent border-0"><h6 class="mb-0">ملخص طرق الدفع</h6></div>
                <div class="card-body"><div id="reports-dashboard-payment-chart" style="min-height:280px"></div></div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-xl-8">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-transparent border-0"><h6 class="mb-0">آخر الفواتير</h6></div>
                <div class="card-body p-0">
                    <table class="table table-hover mb-0">
                        <thead class="table-light"><tr><th>رقم الفاتورة</th><th>التاريخ</th><th>العميل</th><th>الكاشير</th><th>الإجمالي</th></tr></thead>
                        <tbody>
                        @forelse($recentInvoices as $invoice)
                            <tr><td>{{ $invoice->invoice_number }}</td><td>{{ $invoice->invoice_date?->format('Y-m-d H:i') }}</td><td>{{ $invoice->customer?->name ?? 'Walk-in' }}</td><td>{{ $invoice->user?->name ?? '—' }}</td><td class="text-end">{{ number_format((float)$invoice->grand_total, 2) }}</td></tr>
                        @empty
                            <tr><td colspan="5" class="text-center text-muted">لا توجد بيانات</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-xl-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-transparent border-0"><h6 class="mb-0">تنبيهات المخزون المنخفض</h6></div>
                <div class="card-body p-0">
                    @forelse($lowStockItems as $item)
                    <div class="d-flex justify-content-between align-items-center border-bottom px-3 py-2">
                        <div><div class="fw-600">{{ $item->product?->name }}</div><small class="text-muted">{{ $item->warehouse?->name }}</small></div>
                        <span class="badge bg-warning text-dark">{{ number_format((float)$item->quantity, 2) }}</span>
                    </div>
                    @empty
                    <div class="text-center text-muted py-4">لا توجد تنبيهات</div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

</div></div></div>
@endsection

@push('scripts')
<script>
(function () {
    const salesTrend = @json($salesTrend);
    const paymentMethodSummary = @json($paymentMethodSummary);

    new ApexCharts(document.querySelector('#reports-dashboard-sales-chart'), {
        chart: { type: 'line', height: 280, toolbar: { show: false } },
        series: salesTrend.series || [],
        xaxis: { categories: salesTrend.labels || [] },
        stroke: { curve: 'smooth', width: 2 },
        dataLabels: { enabled: false },
        legend: { position: 'top' }
    }).render();

    new ApexCharts(document.querySelector('#reports-dashboard-payment-chart'), {
        chart: { type: 'donut', height: 280, toolbar: { show: false } },
        series: paymentMethodSummary.series || [],
        labels: paymentMethodSummary.labels || [],
        dataLabels: { enabled: false },
        legend: { position: 'bottom' }
    }).render();
})();
</script>
@endpush