@extends('admin.layouts.master')
@section('title', 'لوحة التحكم')

@push('styles')
<style>
.dash-card { transition: all .25s; border:none; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.dash-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.1); }
.kpi-icon { width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.kpi-trend { font-size: 0.85rem; }
.quick-action { transition: all .2s; cursor:pointer; border:1px solid #e9ecef; border-radius:10px; padding:14px 12px; text-align:center; text-decoration:none; color:inherit; height:100%; }
.quick-action:hover { border-color:#0d6efd; background:#f8f9fa; color:#0d6efd; transform: translateY(-2px); }
.quick-action i { font-size: 28px; display:block; margin-bottom: 6px; }
.machine-status { padding:12px; border-radius:10px; border:1px solid #e9ecef; }
.machine-status .machine-led { width:12px; height:12px; border-radius:50%; display:inline-block; margin-left:6px; }
.alert-card { border-right:4px solid; padding:12px 16px; border-radius:6px; margin-bottom:10px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.06); }
.alert-card.danger { border-color:#dc3545; } .alert-card.danger i { color:#dc3545; }
.alert-card.warning { border-color:#ffc107; } .alert-card.warning i { color:#ffc107; }
.alert-card.info { border-color:#0dcaf0; } .alert-card.info i { color:#0dcaf0; }
.stat-circle { position:relative; display:inline-block; }
.stat-circle svg { transform: rotate(-90deg); }
.stat-circle .stat-value { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-weight:bold; font-size:1.5rem; }
.section-title { border-bottom: 2px solid #0d6efd; padding-bottom:8px; margin-bottom:16px; }
</style>
@endpush

@section('page-header')
<div class="row align-items-center">
    <div class="col">
        <div class="page-pretitle">{{ now()->translatedFormat('l - j F Y') }}</div>
        <h2 class="page-title">
            <i class="ti ti-home ms-1"></i> مرحباً، {{ auth()->user()->name }}
        </h2>
    </div>
    <div class="col-auto">
        <span class="badge bg-primary fs-3 px-3 py-2"><i class="ti ti-clock ms-1"></i> <span id="clock"></span></span>
    </div>
</div>
@endsection

@section('content')

{{-- ╔═══ Quick Actions Bar ═══╗ --}}
<div class="card dash-card mb-3">
    <div class="card-body py-3">
        <h4 class="mb-3"><i class="ti ti-bolt ms-1 text-warning"></i> الإجراءات السريعة</h4>
        <div class="row g-2">
            <div class="col-6 col-md-3 col-lg-2"><a href="{{ route('admin.orders.create') }}" class="quick-action d-block"><i class="ti ti-plus text-primary"></i><strong>طلب جديد</strong></a></div>
            <div class="col-6 col-md-3 col-lg-2"><a href="{{ route('admin.quotations.create') }}" class="quick-action d-block"><i class="ti ti-file-invoice text-info"></i><strong>عرض سعر</strong></a></div>
            <div class="col-6 col-md-3 col-lg-2"><a href="{{ route('admin.invoices.create') }}" class="quick-action d-block"><i class="ti ti-receipt text-success"></i><strong>فاتورة</strong></a></div>
            <div class="col-6 col-md-3 col-lg-2"><a href="{{ route('admin.pos.cashier') }}" class="quick-action d-block"><i class="ti ti-cash-register text-warning"></i><strong>نقطة بيع</strong></a></div>
            <div class="col-6 col-md-3 col-lg-2"><a href="{{ route('admin.pricing-calculator') }}" class="quick-action d-block"><i class="ti ti-calculator text-danger"></i><strong>حاسبة التسعير</strong></a></div>
            <div class="col-6 col-md-3 col-lg-2"><a href="{{ route('admin.job-tickets.create') }}" class="quick-action d-block"><i class="ti ti-clipboard-list text-purple" style="color:#6610f2"></i><strong>بطاقة تشغيل</strong></a></div>
        </div>
    </div>
</div>

{{-- ╔═══ Top KPIs Row ═══╗ --}}
<div class="row row-cards mb-3">
    {{-- مبيعات اليوم --}}
    <div class="col-md-6 col-lg-3">
        <div class="card dash-card h-100">
            <div class="card-body">
                <div class="d-flex align-items-center mb-2">
                    <div class="kpi-icon bg-primary text-white"><i class="ti ti-cash"></i></div>
                    <div class="ms-3 flex-grow-1">
                        <div class="text-muted small">مبيعات اليوم</div>
                        <h2 class="m-0 fw-bold">{{ number_format($kpis['sales_today'], 0) }}</h2>
                    </div>
                </div>
                <div class="text-muted small"><strong>الشهر:</strong> {{ number_format($kpis['sales_month'], 2) }} ج.م</div>
                @if($kpis['sales_growth'] != 0)
                <div class="kpi-trend mt-1 {{ $kpis['sales_growth'] >= 0 ? 'text-success' : 'text-danger' }}">
                    <i class="ti ti-trending-{{ $kpis['sales_growth'] >= 0 ? 'up' : 'down' }} ms-1"></i>
                    {{ abs($kpis['sales_growth']) }}% مقارنة بالشهر الماضي
                </div>
                @endif
            </div>
        </div>
    </div>

    {{-- صافي الربح --}}
    <div class="col-md-6 col-lg-3">
        <div class="card dash-card h-100">
            <div class="card-body">
                <div class="d-flex align-items-center mb-2">
                    <div class="kpi-icon bg-success text-white"><i class="ti ti-trending-up"></i></div>
                    <div class="ms-3 flex-grow-1">
                        <div class="text-muted small">صافي الربح (الشهر)</div>
                        <h2 class="m-0 fw-bold {{ $kpis['profit_month'] >= 0 ? 'text-success' : 'text-danger' }}">{{ number_format($kpis['profit_month'], 0) }}</h2>
                    </div>
                </div>
                <div class="text-muted small"><strong>هامش:</strong> {{ $kpis['profit_margin'] }}%</div>
                <div class="kpi-trend mt-1 text-muted">
                    مصروفات: {{ number_format($kpis['expenses_month'], 0) }} | مشتريات: {{ number_format($kpis['purchases_month'], 0) }}
                </div>
            </div>
        </div>
    </div>

    {{-- طلبات قيد التنفيذ --}}
    <div class="col-md-6 col-lg-3">
        <div class="card dash-card h-100">
            <div class="card-body">
                <div class="d-flex align-items-center mb-2">
                    <div class="kpi-icon bg-warning text-white"><i class="ti ti-package"></i></div>
                    <div class="ms-3 flex-grow-1">
                        <div class="text-muted small">قيد التنفيذ</div>
                        <h2 class="m-0 fw-bold">{{ $kpis['orders_in_prod'] }}</h2>
                    </div>
                </div>
                <div class="text-muted small">
                    <span class="badge bg-secondary-lt">معلق: {{ $kpis['orders_pending'] }}</span>
                    <span class="badge bg-success-lt">جاهز: {{ $kpis['orders_ready'] }}</span>
                </div>
                <div class="kpi-trend mt-1 text-info">
                    <i class="ti ti-clipboard-list ms-1"></i> {{ $kpis['tickets_active'] }} بطاقة تشغيل نشطة
                </div>
            </div>
        </div>
    </div>

    {{-- مديونيات --}}
    <div class="col-md-6 col-lg-3">
        <div class="card dash-card h-100">
            <div class="card-body">
                <div class="d-flex align-items-center mb-2">
                    <div class="kpi-icon bg-danger text-white"><i class="ti ti-receipt"></i></div>
                    <div class="ms-3 flex-grow-1">
                        <div class="text-muted small">فواتير غير مدفوعة</div>
                        <h2 class="m-0 fw-bold text-danger">{{ number_format($kpis['pending_invoices'], 0) }}</h2>
                    </div>
                </div>
                <div class="text-muted small">
                    <strong>متأخر:</strong> {{ $kpis['overdue_invoices'] }} فاتورة
                </div>
                <div class="kpi-trend mt-1 text-danger">
                    <i class="ti ti-alert-circle ms-1"></i> مديونيات العملاء: {{ number_format($kpis['customers_debt'], 0) }} ج.م
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ╔═══ Production & Quality Metrics ═══╗ --}}
<h3 class="section-title"><i class="ti ti-chart-arcs ms-1"></i> مؤشرات الإنتاج والجودة (KPIs)</h3>
<div class="row row-cards mb-3">
    {{-- نسبة الجودة --}}
    <div class="col-md-6 col-lg-3">
        <div class="card dash-card text-center h-100">
            <div class="card-body">
                <div class="stat-circle my-2">
                    <svg width="120" height="120">
                        <circle cx="60" cy="60" r="50" fill="none" stroke="#e9ecef" stroke-width="10"/>
                        <circle cx="60" cy="60" r="50" fill="none" stroke="#198754" stroke-width="10"
                            stroke-dasharray="{{ $kpis['quality_rate'] * 3.14 }} 314"
                            stroke-linecap="round"/>
                    </svg>
                    <div class="stat-value text-success">{{ $kpis['quality_rate'] }}%</div>
                </div>
                <h5 class="mt-2">نسبة الجودة</h5>
                <small class="text-muted">جودة الإنتاج المطابق</small>
            </div>
        </div>
    </div>

    {{-- نسبة الفاقد --}}
    <div class="col-md-6 col-lg-3">
        <div class="card dash-card text-center h-100">
            <div class="card-body">
                <div class="stat-circle my-2">
                    <svg width="120" height="120">
                        <circle cx="60" cy="60" r="50" fill="none" stroke="#e9ecef" stroke-width="10"/>
                        <circle cx="60" cy="60" r="50" fill="none" stroke="#dc3545" stroke-width="10"
                            stroke-dasharray="{{ min($kpis['waste_rate'] * 30, 314) }} 314"
                            stroke-linecap="round"/>
                    </svg>
                    <div class="stat-value text-danger">{{ $kpis['waste_rate'] }}%</div>
                </div>
                <h5 class="mt-2">نسبة الفاقد</h5>
                <small class="text-muted">من إجمالي الإنتاج</small>
            </div>
        </div>
    </div>

    {{-- التسليم في الموعد --}}
    <div class="col-md-6 col-lg-3">
        <div class="card dash-card text-center h-100">
            <div class="card-body">
                <div class="stat-circle my-2">
                    <svg width="120" height="120">
                        <circle cx="60" cy="60" r="50" fill="none" stroke="#e9ecef" stroke-width="10"/>
                        <circle cx="60" cy="60" r="50" fill="none" stroke="#0dcaf0" stroke-width="10"
                            stroke-dasharray="{{ $kpis['ontime_rate'] * 3.14 }} 314"
                            stroke-linecap="round"/>
                    </svg>
                    <div class="stat-value text-info">{{ $kpis['ontime_rate'] }}%</div>
                </div>
                <h5 class="mt-2">التسليم في الموعد</h5>
                <small class="text-muted">معدل الالتزام بالمواعيد</small>
            </div>
        </div>
    </div>

    {{-- استغلال الماكينات --}}
    <div class="col-md-6 col-lg-3">
        <div class="card dash-card text-center h-100">
            <div class="card-body">
                @php $util = $kpis['machines_total'] > 0 ? round($kpis['machines_active'] / $kpis['machines_total'] * 100) : 0; @endphp
                <div class="stat-circle my-2">
                    <svg width="120" height="120">
                        <circle cx="60" cy="60" r="50" fill="none" stroke="#e9ecef" stroke-width="10"/>
                        <circle cx="60" cy="60" r="50" fill="none" stroke="#0d6efd" stroke-width="10"
                            stroke-dasharray="{{ $util * 3.14 }} 314"
                            stroke-linecap="round"/>
                    </svg>
                    <div class="stat-value text-primary">{{ $util }}%</div>
                </div>
                <h5 class="mt-2">حالة الماكينات</h5>
                <small class="text-muted">{{ $kpis['machines_active'] }} يعمل / {{ $kpis['machines_total'] }} إجمالي</small>
            </div>
        </div>
    </div>
</div>

{{-- ╔═══ Alerts + Sales Chart ═══╗ --}}
<div class="row row-cards mb-3">
    {{-- Live Alerts --}}
    <div class="col-lg-4">
        <div class="card dash-card h-100">
            <div class="card-header">
                <h3 class="card-title"><i class="ti ti-bell-ringing ms-1 text-warning"></i> تنبيهات هامة</h3>
                @if(count($alerts) > 0)
                    <span class="card-actions"><span class="badge bg-danger">{{ count($alerts) }}</span></span>
                @endif
            </div>
            <div class="card-body" style="max-height:380px;overflow-y:auto">
                @forelse($alerts as $alert)
                <a href="{{ $alert['link'] }}" class="alert-card {{ $alert['type'] }} d-block text-decoration-none text-dark">
                    <div class="d-flex align-items-start">
                        <i class="ti {{ $alert['icon'] }} fs-2 ms-2"></i>
                        <div class="flex-grow-1">
                            <strong>{{ $alert['title'] }}</strong>
                            <div class="small text-muted">{{ $alert['message'] }}</div>
                        </div>
                        <i class="ti ti-chevron-left text-muted"></i>
                    </div>
                </a>
                @empty
                <div class="text-center py-4">
                    <i class="ti ti-check-circle text-success" style="font-size:48px"></i>
                    <p class="mt-2 text-muted">كل شيء على ما يرام — لا توجد تنبيهات</p>
                </div>
                @endforelse
            </div>
        </div>
    </div>

    {{-- Sales Trend Chart --}}
    <div class="col-lg-8">
        <div class="card dash-card h-100">
            <div class="card-header">
                <h3 class="card-title"><i class="ti ti-chart-line ms-1 text-primary"></i> اتجاه المبيعات - آخر 30 يوم</h3>
                <div class="card-actions">
                    <span class="badge bg-primary-lt">فواتير</span>
                    <span class="badge bg-success-lt">نقطة بيع</span>
                </div>
            </div>
            <div class="card-body">
                <div id="salesChart"></div>
            </div>
        </div>
    </div>
</div>

{{-- ╔═══ Sales by Type + Machine Utilization ═══╗ --}}
<div class="row row-cards mb-3">
    {{-- مبيعات حسب نوع الطباعة --}}
    <div class="col-lg-5">
        <div class="card dash-card h-100">
            <div class="card-header">
                <h3 class="card-title"><i class="ti ti-pie-chart ms-1"></i> توزيع المبيعات حسب نوع الطباعة</h3>
            </div>
            <div class="card-body">
                @if($salesByType->count() > 0)
                    <div id="typeChart"></div>
                @else
                    <div class="empty py-4">
                        <p class="empty-title text-muted">لا توجد بيانات</p>
                    </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Machine Utilization --}}
    <div class="col-lg-7">
        <div class="card dash-card h-100">
            <div class="card-header">
                <h3 class="card-title"><i class="ti ti-cpu ms-1"></i> أكثر الماكينات إنتاجاً (الشهر)</h3>
                <div class="card-actions"><a href="{{ route('admin.machines.index') }}" class="btn btn-sm btn-outline-primary">عرض الكل</a></div>
            </div>
            <div class="card-body p-0">
                <table class="table table-vcenter card-table mb-0">
                    <thead><tr>
                        <th>الماكينة</th><th>النوع</th>
                        <th class="text-center">المراحل</th>
                        <th class="text-center">ساعات التشغيل</th>
                        <th class="text-center">الحالة</th>
                    </tr></thead>
                    <tbody>
                        @forelse($machineUtilization as $m)
                        <tr>
                            <td><strong>{{ $m->name }}</strong><br><small class="text-muted">{{ $m->code }}</small></td>
                            <td>{{ $m->machineType?->name ?? '-' }}</td>
                            <td class="text-center"><span class="badge bg-primary">{{ $m->completed_stages_count }}</span></td>
                            <td class="text-center">{{ round(($m->total_minutes ?? 0) / 60, 1) }} س</td>
                            <td class="text-center">
                                <span class="badge bg-{{ ['active'=>'success','maintenance'=>'warning','broken'=>'danger','retired'=>'secondary'][$m->status] ?? 'secondary' }}">
                                    {{ $m->status_label }}
                                </span>
                            </td>
                        </tr>
                        @empty
                        <tr><td colspan="5" class="text-center text-muted py-4">لا توجد بيانات</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- ╔═══ Latest Orders + Top Customers + Top Defects ═══╗ --}}
<div class="row row-cards mb-3">
    {{-- آخر الطلبات --}}
    <div class="col-lg-6">
        <div class="card dash-card h-100">
            <div class="card-header">
                <h3 class="card-title"><i class="ti ti-package ms-1"></i> آخر الطلبات</h3>
                <div class="card-actions"><a href="{{ route('admin.orders.index') }}" class="btn btn-sm btn-outline-primary">الكل</a></div>
            </div>
            <div class="card-body p-0">
                <table class="table table-vcenter card-table mb-0">
                    <thead><tr><th>الرقم</th><th>العميل</th><th>المبلغ</th><th>الحالة</th></tr></thead>
                    <tbody>
                        @foreach($latestOrders as $o)
                        <tr>
                            <td><a href="{{ route('admin.orders.show', $o) }}" class="fw-bold">{{ $o->order_no }}</a><br><small class="text-muted">{{ $o->order_date?->diffForHumans() }}</small></td>
                            <td>{{ $o->customer?->name }}</td>
                            <td class="fw-bold">{{ number_format($o->total_amount, 0) }}</td>
                            <td><span class="badge bg-{{ $o->status_color }}">{{ $o->status_label }}</span></td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- أعلى العملاء --}}
    <div class="col-lg-3">
        <div class="card dash-card h-100">
            <div class="card-header"><h3 class="card-title"><i class="ti ti-crown ms-1 text-warning"></i> أعلى العملاء</h3></div>
            <div class="list-group list-group-flush">
                @forelse($topCustomers as $i => $c)
                <div class="list-group-item">
                    <div class="d-flex align-items-center">
                        <div class="me-2 fw-bold text-warning">#{{ $i + 1 }}</div>
                        <div class="flex-grow-1">
                            <a href="{{ route('admin.customers.show', $c) }}" class="fw-bold text-dark text-decoration-none">{{ $c->name }}</a>
                            <div class="small text-success">{{ number_format($c->month_sales, 0) }} ج.م</div>
                        </div>
                    </div>
                </div>
                @empty
                <div class="list-group-item text-center text-muted py-3">لا توجد مبيعات هذا الشهر</div>
                @endforelse
            </div>
        </div>
    </div>

    {{-- أعلى المنتجات مبيعاً --}}
    <div class="col-lg-3">
        <div class="card dash-card h-100">
            <div class="card-header"><h3 class="card-title"><i class="ti ti-trophy ms-1 text-warning"></i> الأكثر مبيعاً</h3></div>
            <div class="list-group list-group-flush">
                @forelse($topProducts as $i => $p)
                <div class="list-group-item">
                    <div class="d-flex align-items-center">
                        <div class="me-2 fw-bold text-info">#{{ $i + 1 }}</div>
                        <div class="flex-grow-1">
                            <div class="small fw-bold" style="line-height:1.2">{{ Str::limit($p->description, 40) }}</div>
                            <div class="small text-muted">{{ number_format($p->total_qty) }} وحدة | {{ number_format($p->total_revenue, 0) }} ج</div>
                        </div>
                    </div>
                </div>
                @empty
                <div class="list-group-item text-center text-muted py-3">لا توجد بيانات</div>
                @endforelse
            </div>
        </div>
    </div>
</div>

{{-- ╔═══ Low Stock + Top Defects ═══╗ --}}
<div class="row row-cards mb-3">
    {{-- مخزون منخفض --}}
    <div class="col-lg-7">
        <div class="card dash-card h-100">
            <div class="card-header">
                <h3 class="card-title"><i class="ti ti-alert-triangle ms-1 text-danger"></i> أصناف تحتاج إعادة طلب</h3>
                <div class="card-actions"><a href="{{ route('admin.purchase-orders.create') }}" class="btn btn-sm btn-warning"><i class="ti ti-shopping-bag ms-1"></i> أمر شراء</a></div>
            </div>
            <div class="card-body p-0">
                <table class="table table-vcenter card-table mb-0">
                    <thead><tr><th>الكود</th><th>الصنف</th><th>الرصيد</th><th>نقطة الطلب</th><th>الحالة</th></tr></thead>
                    <tbody>
                        @forelse($lowStockItems as $item)
                        <tr>
                            <td><code>{{ $item->code }}</code></td>
                            <td><strong>{{ $item->name }}</strong><br><small class="text-muted">{{ $item->category?->name }}</small></td>
                            <td class="text-danger fw-bold">{{ number_format($item->totalStock(), 2) }} {{ $item->unit?->short_name }}</td>
                            <td>{{ number_format($item->reorder_point, 2) }}</td>
                            <td>
                                @if($item->totalStock() <= 0)
                                    <span class="badge bg-danger">نفذ</span>
                                @else
                                    <span class="badge bg-warning">منخفض</span>
                                @endif
                            </td>
                        </tr>
                        @empty
                        <tr><td colspan="5" class="text-center text-success py-4"><i class="ti ti-check"></i> كل الأصناف بمستوى آمن</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- أعلى أنواع العيوب --}}
    <div class="col-lg-5">
        <div class="card dash-card h-100">
            <div class="card-header"><h3 class="card-title"><i class="ti ti-bug ms-1 text-danger"></i> أكثر العيوب تكراراً (الشهر)</h3></div>
            <div class="card-body p-0">
                <table class="table table-vcenter card-table mb-0">
                    <thead><tr><th>العيب</th><th>الفئة</th><th class="text-center">عدد</th></tr></thead>
                    <tbody>
                        @forelse($topDefects as $d)
                        <tr>
                            <td><strong>{{ $d->name }}</strong></td>
                            <td>
                                @php $cats=['paper'=>'ورق','ink'=>'حبر','machine'=>'ماكينة','operator'=>'عامل','design'=>'تصميم','finishing'=>'تشطيب','other'=>'أخرى']; @endphp
                                <span class="badge bg-secondary-lt">{{ $cats[$d->category] ?? $d->category }}</span>
                            </td>
                            <td class="text-center"><span class="badge bg-danger">{{ $d->total }}</span></td>
                        </tr>
                        @empty
                        <tr><td colspan="3" class="text-center text-success py-4">لا توجد عيوب مسجلة</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- ╔═══ System Status Footer ═══╗ --}}
<div class="card dash-card">
    <div class="card-body">
        <div class="row text-center">
            <div class="col-6 col-md-2">
                <i class="ti ti-users text-primary fs-2"></i>
                <div class="fw-bold">{{ $kpis['customers_count'] }}</div>
                <small class="text-muted">عميل نشط</small>
            </div>
            <div class="col-6 col-md-2">
                <i class="ti ti-truck text-info fs-2"></i>
                <div class="fw-bold">{{ $kpis['suppliers_count'] }}</div>
                <small class="text-muted">مورد</small>
            </div>
            <div class="col-6 col-md-2">
                <i class="ti ti-cpu text-success fs-2"></i>
                <div class="fw-bold">{{ $kpis['machines_active'] }} / {{ $kpis['machines_total'] }}</div>
                <small class="text-muted">ماكينة تعمل</small>
            </div>
            <div class="col-6 col-md-2">
                <i class="ti ti-building-warehouse text-warning fs-2"></i>
                <div class="fw-bold">{{ number_format($kpis['inventory_value'], 0) }}</div>
                <small class="text-muted">قيمة المخزون (ج)</small>
            </div>
            <div class="col-6 col-md-2">
                <i class="ti ti-clipboard-list text-danger fs-2"></i>
                <div class="fw-bold">{{ $kpis['tickets_active'] + $kpis['tickets_pending'] }}</div>
                <small class="text-muted">بطاقة تشغيل</small>
            </div>
            <div class="col-6 col-md-2">
                <i class="ti ti-shopping-cart text-purple fs-2" style="color:#6610f2"></i>
                <div class="fw-bold">{{ $kpis['orders_today'] }}</div>
                <small class="text-muted">طلب اليوم</small>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
// Live Clock
function updateClock() {
    const now = new Date();
    document.getElementById('clock').textContent = now.toLocaleTimeString('ar-EG', { hour:'2-digit', minute:'2-digit', second:'2-digit' });
}
setInterval(updateClock, 1000); updateClock();

// Sales Chart - 30 days
const salesData = @json($salesChart);
new ApexCharts(document.querySelector('#salesChart'), {
    chart: { type: 'area', height: 320, fontFamily: 'Cairo', toolbar: { show: false }, stacked: false },
    series: [
        { name: 'فواتير', data: salesData.map(d => d.invoices) },
        { name: 'نقطة بيع', data: salesData.map(d => d.pos) },
    ],
    xaxis: { categories: salesData.map(d => d.label), labels: { style: { fontFamily:'Cairo' } } },
    colors: ['#0d6efd', '#198754'],
    stroke: { curve: 'smooth', width: 2 },
    fill: { type: 'gradient', gradient: { shadeIntensity: 0.6, opacityFrom: 0.4, opacityTo: 0.05 } },
    dataLabels: { enabled: false },
    legend: { fontFamily: 'Cairo', position: 'top' },
    tooltip: { y: { formatter: v => new Intl.NumberFormat('ar-EG').format(v) + ' ج.م' } },
    grid: { borderColor: '#e9ecef' },
}).render();

// Sales by Type - Donut
@if($salesByType->count() > 0)
const typeData = @json($salesByType);
new ApexCharts(document.querySelector('#typeChart'), {
    chart: { type: 'donut', height: 320, fontFamily: 'Cairo' },
    series: typeData.map(t => t.total),
    labels: typeData.map(t => t.type),
    colors: ['#0d6efd', '#198754', '#ffc107', '#dc3545'],
    legend: { position: 'bottom', fontFamily: 'Cairo' },
    plotOptions: { pie: { donut: { labels: {
        show: true,
        total: { show: true, label: 'الإجمالي', fontFamily: 'Cairo', formatter: w => new Intl.NumberFormat('ar-EG').format(w.globals.seriesTotals.reduce((a,b)=>a+b,0))+' ج' }
    } } } },
    dataLabels: { enabled: true, formatter: (v, opts) => Math.round(v) + '%', style: { fontFamily: 'Cairo' } },
}).render();
@endif
</script>
@endpush