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

@push('styles')
<style>
    .dashboard-gradient {
        background: linear-gradient(135deg, #4361ee 0%, #7b9cff 100%);
        border-radius: 18px;
        color: #fff;
    }
    .dashboard-kpi-card {
        border: 0;
        border-radius: 14px;
        box-shadow: 0 6px 20px rgba(22, 34, 78, 0.06);
    }
    .dashboard-kpi-icon {
        width: 46px;
        height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
    }
    .dashboard-sub-card {
        border: 0;
        border-radius: 14px;
        box-shadow: 0 4px 14px rgba(22, 34, 78, 0.05);
        height: 100%;
    }
    .dashboard-module-card {
        border: 1px solid #eef1f7;
        border-radius: 12px;
        transition: all .2s ease;
        color: inherit;
        text-decoration: none;
        display: block;
        height: 100%;
    }
    .dashboard-module-card:hover {
        border-color: #4361ee;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(67, 97, 238, 0.12);
    }
    .dashboard-table th,
    .dashboard-table td {
        white-space: nowrap;
    }
</style>
@endpush

@section('content')
<div class="page-content-wrapper">
<div class="content-container">
<div class="page-content">

    <div class="dashboard-gradient p-4 mb-4">
        <div class="d-flex flex-wrap gap-3 justify-content-between align-items-center">
            <div>
                <h4 class="mb-1 text-white"><i class="ti ti-layout-dashboard me-2"></i>لوحة التحكم التنفيذية</h4>
                <p class="mb-0 text-white-50">متابعة المبيعات والمخزون والعمليات من شاشة واحدة — {{ now()->format('l، d F Y') }}</p>
            </div>
            <div class="d-flex flex-wrap gap-2">
                @can('pos.access')
                <a href="{{ route('admin.pos.index') }}" class="btn btn-light text-primary">
                    <i class="ti ti-cash me-1"></i> فتح نقطة البيع
                </a>
                @endcan
                @can('reports.view')
                <a href="{{ route('admin.reports.index') }}" class="btn btn-outline-light">
                    <i class="ti ti-report-analytics me-1"></i> مركز التقارير
                </a>
                @endcan
            </div>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-xxl-3 col-xl-4 col-md-6">
            <div class="card dashboard-kpi-card h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <span class="dashboard-kpi-icon bg-light-primary text-primary"><i class="ti ti-report-money fs-4"></i></span>
                    <div>
                        <small class="text-muted d-block">مبيعات اليوم</small>
                        <h5 class="mb-0">{{ number_format($stats['today_sales'], 2) }}</h5>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-xl-4 col-md-6">
            <div class="card dashboard-kpi-card h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <span class="dashboard-kpi-icon bg-light-success text-success"><i class="ti ti-file-invoice fs-4"></i></span>
                    <div>
                        <small class="text-muted d-block">فواتير اليوم</small>
                        <h5 class="mb-0">{{ number_format($stats['today_invoices']) }}</h5>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-xl-4 col-md-6">
            <div class="card dashboard-kpi-card h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <span class="dashboard-kpi-icon bg-light-info text-info"><i class="ti ti-wallet fs-4"></i></span>
                    <div>
                        <small class="text-muted d-block">التحصيل اليوم</small>
                        <h5 class="mb-0">{{ number_format($stats['today_paid'], 2) }}</h5>
                        <small class="text-muted">{{ number_format($stats['collection_rate'], 1) }}%</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-xl-4 col-md-6">
            <div class="card dashboard-kpi-card h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <span class="dashboard-kpi-icon bg-light-warning text-warning"><i class="ti ti-hourglass fs-4"></i></span>
                    <div>
                        <small class="text-muted d-block">مستحقات اليوم</small>
                        <h5 class="mb-0">{{ number_format($stats['today_due'], 2) }}</h5>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-xl-4 col-md-6">
            <div class="card dashboard-kpi-card h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <span class="dashboard-kpi-icon bg-light-danger text-danger"><i class="ti ti-arrow-back-up fs-4"></i></span>
                    <div>
                        <small class="text-muted d-block">مرتجعات اليوم</small>
                        <h5 class="mb-0">{{ number_format($stats['today_returns'], 2) }}</h5>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-xl-4 col-md-6">
            <div class="card dashboard-kpi-card h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <span class="dashboard-kpi-icon bg-light-primary text-primary"><i class="ti ti-calendar-stats fs-4"></i></span>
                    <div>
                        <small class="text-muted d-block">مبيعات الشهر</small>
                        <h5 class="mb-0">{{ number_format($stats['month_sales'], 2) }}</h5>
                        <small class="text-muted">{{ number_format($stats['month_invoices']) }} فاتورة</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-xl-4 col-md-6">
            <div class="card dashboard-kpi-card h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <span class="dashboard-kpi-icon bg-light-success text-success"><i class="ti ti-chart-arcs fs-4"></i></span>
                    <div>
                        <small class="text-muted d-block">متوسط الفاتورة اليوم</small>
                        <h5 class="mb-0">{{ number_format($stats['today_avg_invoice'], 2) }}</h5>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-xl-4 col-md-6">
            <div class="card dashboard-kpi-card h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <span class="dashboard-kpi-icon bg-light-dark text-dark"><i class="ti ti-database fs-4"></i></span>
                    <div>
                        <small class="text-muted d-block">إجمالي مبيعات النظام</small>
                        <h5 class="mb-0">{{ number_format($stats['total_sales'], 2) }}</h5>
                        <small class="text-muted">{{ number_format($stats['total_invoices']) }} فاتورة</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-xl-3 col-md-6">
            <div class="card dashboard-sub-card">
                <div class="card-body">
                    <small class="text-muted d-block mb-2">حالة التشغيل</small>
                    <h5 class="mb-1">{{ $stats['open_shifts'] }} شفت مفتوح</h5>
                    @if($stats['open_shifts'] > 0)
                        <span class="badge bg-success">النظام يعمل حالياً</span>
                    @else
                        <span class="badge bg-warning text-dark">لا يوجد شفت مفتوح</span>
                    @endif
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card dashboard-sub-card">
                <div class="card-body">
                    <small class="text-muted d-block mb-2">حالة المخزون</small>
                    <h5 class="mb-1">{{ $stats['products_count'] }} منتج</h5>
                    @if($stats['low_stock_count'] > 0)
                        <a href="{{ route('admin.reports.low-stock') }}" class="badge bg-danger text-decoration-none">
                            {{ $stats['low_stock_count'] }} منتج منخفض
                        </a>
                    @else
                        <span class="badge bg-success">لا يوجد نقص حالي</span>
                    @endif
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card dashboard-sub-card">
                <div class="card-body">
                    <small class="text-muted d-block mb-2">المستحقات الكلية</small>
                    <h5 class="mb-1">{{ number_format($stats['pending_due_total'], 2) }}</h5>
                    <small class="text-muted">إجمالي مبالغ غير محصلة</small>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card dashboard-sub-card">
                <div class="card-body">
                    <small class="text-muted d-block mb-2">دليل الكيانات</small>
                    <div class="d-flex flex-wrap gap-2">
                        <span class="badge bg-light text-dark">عملاء {{ $stats['customers_count'] }}</span>
                        <span class="badge bg-light text-dark">موردون {{ $stats['suppliers_count'] }}</span>
                        <span class="badge bg-light text-dark">مخازن {{ $stats['warehouses_count'] }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-xl-8">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-transparent border-0 pt-3 pb-0 d-flex justify-content-between align-items-center">
                    <h6 class="mb-0"><i class="ti ti-chart-line me-2 text-primary"></i>اتجاه المبيعات - آخر 30 يوم</h6>
                    <span class="badge bg-light text-dark">قراءة يومية</span>
                </div>
                <div class="card-body">
                    <div id="chart-daily-sales"></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 pt-3 pb-0">
                    <h6 class="mb-0"><i class="ti ti-chart-donut me-2 text-info"></i>قنوات الدفع (اليوم)</h6>
                </div>
                <div class="card-body d-flex align-items-center justify-content-center">
                    @if(count($paymentMethods) > 0)
                        <div id="chart-payment-methods" class="w-100"></div>
                    @else
                        <div class="text-center text-muted">
                            <i class="ti ti-info-circle fs-2"></i>
                            <p class="mt-2 mb-0">لا توجد مدفوعات اليوم</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-xl-8">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-transparent border-0 pt-3 d-flex justify-content-between align-items-center">
                    <h6 class="mb-0"><i class="ti ti-file-invoice me-2 text-primary"></i>آخر الفواتير</h6>
                    <a href="{{ route('admin.sales-invoices.index') }}" class="btn btn-sm btn-outline-primary">عرض الكل</a>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0 dashboard-table">
                            <thead class="table-light">
                                <tr>
                                    <th>رقم الفاتورة</th>
                                    <th>العميل</th>
                                    <th>الكاشير</th>
                                    <th>الإجمالي</th>
                                    <th>الحالة</th>
                                    <th>التاريخ</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($recentInvoices as $invoice)
                                <tr>
                                    <td>
                                        <a href="{{ route('admin.sales-invoices.show', $invoice) }}" class="fw-600 text-primary">
                                            {{ $invoice->invoice_number }}
                                        </a>
                                    </td>
                                    <td>{{ $invoice->customer?->name ?? 'Walk-in' }}</td>
                                    <td>{{ $invoice->user?->name ?? '—' }}</td>
                                    <td>{{ number_format((float) $invoice->grand_total, 2) }}</td>
                                    <td>
                                        @php $status = $invoice->payment_status; @endphp
                                        @if($status === 'paid')
                                            <span class="badge bg-success">مدفوع</span>
                                        @elseif($status === 'partial')
                                            <span class="badge bg-warning text-dark">جزئي</span>
                                        @else
                                            <span class="badge bg-danger">غير مدفوع</span>
                                        @endif
                                    </td>
                                    <td>{{ $invoice->invoice_date?->format('d/m/Y H:i') }}</td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="6" class="text-center text-muted py-4">لا توجد فواتير حديثة</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </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 pt-3 d-flex justify-content-between align-items-center">
                    <h6 class="mb-0 text-danger"><i class="ti ti-alert-triangle me-2"></i>تنبيهات المخزون</h6>
                    <a href="{{ route('admin.reports.low-stock') }}" class="btn btn-sm btn-outline-danger">عرض الكل</a>
                </div>
                <div class="card-body p-0">
                    @forelse($lowStockItems as $stock)
                    <div class="d-flex align-items-center px-3 py-2 border-bottom">
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="mb-0 fw-600 small text-truncate">{{ $stock->product?->name }}</p>
                            <small class="text-muted">{{ $stock->warehouse?->name }}</small>
                        </div>
                        <div class="text-end ms-2">
                            @if((float) $stock->quantity <= 0)
                                <span class="badge bg-danger">نفد</span>
                            @else
                                <span class="badge bg-warning text-dark">{{ number_format((float) $stock->quantity, 1) }}</span>
                            @endif
                        </div>
                    </div>
                    @empty
                    <div class="text-center text-muted py-4">
                        <i class="ti ti-check-circle text-success fs-1"></i>
                        <p class="mt-2 mb-0">المخزون بمستوى ممتاز</p>
                    </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-xl-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-transparent border-0 pt-3 d-flex justify-content-between align-items-center">
                    <h6 class="mb-0"><i class="ti ti-trophy me-2 text-warning"></i>أكثر المنتجات مبيعاً (الشهر)</h6>
                    <a href="{{ route('admin.reports.top-products') }}" class="btn btn-sm btn-outline-secondary">الكل</a>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0 dashboard-table">
                            <thead class="table-light">
                                <tr><th>#</th><th>المنتج</th><th>الكمية</th><th>الإيرادات</th></tr>
                            </thead>
                            <tbody>
                                @forelse($topProducts as $i => $product)
                                <tr>
                                    <td><span class="badge bg-light text-dark">{{ $i + 1 }}</span></td>
                                    <td>{{ $product->name }}</td>
                                    <td>{{ number_format((float) $product->sold_qty, 1) }}</td>
                                    <td>{{ number_format((float) $product->revenue, 2) }}</td>
                                </tr>
                                @empty
                                <tr><td colspan="4" class="text-center text-muted py-4">لا توجد بيانات حالياً</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-transparent border-0 pt-3 d-flex justify-content-between align-items-center">
                    <h6 class="mb-0"><i class="ti ti-user-check me-2 text-info"></i>أداء الكاشير (اليوم)</h6>
                    <a href="{{ route('admin.reports.sales-by-cashier') }}" class="btn btn-sm btn-outline-secondary">الكل</a>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0 dashboard-table">
                            <thead class="table-light">
                                <tr><th>الكاشير</th><th>عدد الفواتير</th><th>إجمالي المبيعات</th></tr>
                            </thead>
                            <tbody>
                                @forelse($cashierPerformance as $cashier)
                                <tr>
                                    <td>{{ $cashier->name }}</td>
                                    <td>{{ number_format($cashier->invoices_count) }}</td>
                                    <td>{{ number_format((float) $cashier->total_sales, 2) }}</td>
                                </tr>
                                @empty
                                <tr><td colspan="3" class="text-center text-muted py-4">لا توجد مبيعات اليوم</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-transparent border-0 pt-3 pb-0">
            <h6 class="mb-0"><i class="ti ti-apps me-2 text-primary"></i>خريطة المشروع - كل الأقسام الأساسية</h6>
        </div>
        <div class="card-body">
            <div class="row g-3">
                @foreach($moduleCards as $module)
                    @can($module['permission'])
                    <div class="col-xxl-2 col-xl-3 col-lg-4 col-md-6">
                        <a href="{{ route($module['route']) }}" class="dashboard-module-card p-3">
                            <div class="d-flex align-items-center justify-content-between mb-3">
                                <span class="dashboard-kpi-icon bg-light-{{ $module['tone'] }} text-{{ $module['tone'] }}">
                                    <i class="{{ $module['icon'] }}"></i>
                                </span>
                                @if(!is_null($module['count']))
                                    <span class="badge bg-light text-dark">{{ number_format((float) $module['count']) }}</span>
                                @endif
                            </div>
                            <h6 class="mb-1">{{ $module['label'] }}</h6>
                            <small class="text-muted">الانتقال إلى القسم</small>
                        </a>
                    </div>
                    @endcan
                @endforeach
            </div>
        </div>
    </div>

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

@push('scripts')
<script>
(function () {
    const salesElement = document.getElementById('chart-daily-sales');
    if (!salesElement) {
        return;
    }

    const dates = @json($chartDates);
    const totals = @json($chartTotals);

    new ApexCharts(salesElement, {
        series: [{ name: 'المبيعات', data: totals }],
        chart: { type: 'area', height: 280, toolbar: { show: false }, fontFamily: 'inherit' },
        stroke: { curve: 'smooth', width: 2 },
        fill: { type: 'gradient', gradient: { opacityFrom: 0.3, opacityTo: 0.05 } },
        xaxis: { categories: dates, labels: { style: { fontSize: '11px' }, rotate: -30 } },
        yaxis: { labels: { formatter: (v) => v.toFixed(0) } },
        tooltip: { y: { formatter: (v) => v.toFixed(2) } },
        colors: ['#4361ee'],
        dataLabels: { enabled: false },
        grid: { borderColor: '#f0f2f7' }
    }).render();
})();

@if(count($paymentMethods) > 0)
(function () {
    const paymentElement = document.getElementById('chart-payment-methods');
    if (!paymentElement) {
        return;
    }

    const methods = @json($paymentMethods);
    const labelMap = {
        cash: 'نقدي',
        card: 'بطاقة',
        bank_transfer: 'تحويل بنكي',
        wallet: 'محفظة',
        mixed: 'متعدد'
    };

    const labels = Object.keys(methods).map((key) => labelMap[key] ?? key);
    const series = Object.values(methods).map(Number);

    new ApexCharts(paymentElement, {
        series: series,
        labels: labels,
        chart: { type: 'donut', height: 260, fontFamily: 'inherit' },
        legend: { position: 'bottom', fontSize: '12px' },
        dataLabels: { formatter: (val) => val.toFixed(1) + '%' },
        colors: ['#4361ee', '#3bc9db', '#f59f00', '#51cf66', '#868e96']
    }).render();
})();
@endif
</script>
@endpush