@extends('admin.layouts.master')

@section('title', 'لوحة التحكم الرئيسية')

@section('css')
<style>
    .dashboard-kpi-card { border: 1px solid rgba(0, 0, 0, .06); border-radius: 14px; }
    .dashboard-kpi-label { font-size: .86rem; color: #6c757d; margin-bottom: 6px; }
    .dashboard-kpi-value { font-size: 1.2rem; font-weight: 700; margin-bottom: 0; }
    .dashboard-mini-value { font-size: 1.05rem; font-weight: 700; }
    .dashboard-section-title { font-size: 1rem; font-weight: 700; }
    .dashboard-note { font-size: .82rem; color: #6c757d; }
    .dashboard-loading { min-height: 120px; display: grid; place-items: center; color: #6c757d; }
    .dashboard-status-badge { font-size: .75rem; padding: .32rem .5rem; border-radius: 999px; }
    .dashboard-table thead th { white-space: nowrap; }
</style>
@endsection

@section('content')
<div class="pc-container"><div class="pc-content">
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <div>
            <h4 class="mb-1">لوحة التحكم الرئيسية</h4>
            <small class="text-muted">تقرير تشغيلي ومالي مباشر من بيانات النظام الفعلية</small>
        </div>
        <div class="d-flex align-items-center gap-2">
            <small id="dashboard-last-update" class="text-muted">آخر تحديث: --</small>
            <button type="button" id="btn-refresh-dashboard" class="btn btn-sm btn-primary">تحديث البيانات</button>
        </div>
    </div>

    <div id="dashboard-alert" class="alert alert-danger d-none mb-3"></div>

    <div class="row g-3 mb-3">
        <div class="col-xl-3 col-md-6"><div class="card dashboard-kpi-card h-100"><div class="card-body"><div class="dashboard-kpi-label">مبيعات اليوم</div><h5 id="kpi-sales-today" class="dashboard-kpi-value">0.00</h5></div></div></div>
        <div class="col-xl-3 col-md-6"><div class="card dashboard-kpi-card h-100"><div class="card-body"><div class="dashboard-kpi-label">مبيعات الشهر</div><h5 id="kpi-sales-month" class="dashboard-kpi-value">0.00</h5></div></div></div>
        <div class="col-xl-3 col-md-6"><div class="card dashboard-kpi-card h-100"><div class="card-body"><div class="dashboard-kpi-label">مشتريات اليوم</div><h5 id="kpi-purchases-today" class="dashboard-kpi-value">0.00</h5></div></div></div>
        <div class="col-xl-3 col-md-6"><div class="card dashboard-kpi-card h-100"><div class="card-body"><div class="dashboard-kpi-label">مشتريات الشهر</div><h5 id="kpi-purchases-month" class="dashboard-kpi-value">0.00</h5></div></div></div>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-xl-3 col-md-6"><div class="card dashboard-kpi-card h-100"><div class="card-body"><div class="dashboard-kpi-label">تحصيلات الشهر</div><h5 id="kpi-collections" class="dashboard-kpi-value">0.00</h5></div></div></div>
        <div class="col-xl-3 col-md-6"><div class="card dashboard-kpi-card h-100"><div class="card-body"><div class="dashboard-kpi-label">مدفوعات الموردين</div><h5 id="kpi-payments" class="dashboard-kpi-value">0.00</h5></div></div></div>
        <div class="col-xl-3 col-md-6"><div class="card dashboard-kpi-card h-100"><div class="card-body"><div class="dashboard-kpi-label">مصروفات الفترة</div><h5 id="kpi-expenses" class="dashboard-kpi-value">0.00</h5></div></div></div>
        <div class="col-xl-3 col-md-6"><div class="card dashboard-kpi-card border-primary h-100"><div class="card-body"><div class="dashboard-kpi-label">صافي الربح</div><h5 id="kpi-profit" class="dashboard-kpi-value text-primary">0.00</h5></div></div></div>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-xl-2 col-md-4 col-6"><div class="card h-100"><div class="card-body"><div class="dashboard-kpi-label">إجمالي الفواتير</div><h5 id="kpi-invoices" class="dashboard-mini-value mb-0">0</h5></div></div></div>
        <div class="col-xl-2 col-md-4 col-6"><div class="card h-100"><div class="card-body"><div class="dashboard-kpi-label">فواتير البيع</div><h5 id="kpi-sales-invoices" class="dashboard-mini-value mb-0">0</h5></div></div></div>
        <div class="col-xl-2 col-md-4 col-6"><div class="card h-100"><div class="card-body"><div class="dashboard-kpi-label">فواتير الشراء</div><h5 id="kpi-purchase-invoices" class="dashboard-mini-value mb-0">0</h5></div></div></div>
        <div class="col-xl-2 col-md-4 col-6"><div class="card h-100"><div class="card-body"><div class="dashboard-kpi-label">عملاء متأخرون</div><h5 id="kpi-late-customers" class="dashboard-mini-value mb-0 text-danger">0</h5></div></div></div>
        <div class="col-xl-2 col-md-4 col-6"><div class="card h-100"><div class="card-body"><div class="dashboard-kpi-label">موردون مستحقون</div><h5 id="kpi-due-suppliers" class="dashboard-mini-value mb-0 text-warning">0</h5></div></div></div>
        <div class="col-xl-2 col-md-4 col-6"><div class="card h-100"><div class="card-body"><div class="dashboard-kpi-label">منتجات تحت الحد</div><h5 id="kpi-low-stock" class="dashboard-mini-value mb-0 text-info">0</h5></div></div></div>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-lg-8">
            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="dashboard-section-title mb-0">اتجاه الأداء الشهري</h6>
                        <small class="dashboard-note">مبيعات - مشتريات - مصروفات</small>
                    </div>
                    <div id="chart-trends" class="dashboard-loading">جار تحميل الرسم البياني...</div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card h-100">
                <div class="card-body">
                    <h6 class="dashboard-section-title mb-2">ملخص سريع للفترة الحالية</h6>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between"><span class="dashboard-note">هامش الربحية</span><strong id="metric-profit-margin">0%</strong></div>
                        <div class="progress" style="height: 8px;"><div id="metric-profit-margin-bar" class="progress-bar bg-primary" style="width: 0%"></div></div>
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between"><span class="dashboard-note">معدل التحصيل</span><strong id="metric-collection-rate">0%</strong></div>
                        <div class="progress" style="height: 8px;"><div id="metric-collection-rate-bar" class="progress-bar bg-success" style="width: 0%"></div></div>
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between"><span class="dashboard-note">نسبة المصروفات إلى المبيعات</span><strong id="metric-expense-rate">0%</strong></div>
                        <div class="progress" style="height: 8px;"><div id="metric-expense-rate-bar" class="progress-bar bg-warning" style="width: 0%"></div></div>
                    </div>
                    <div class="pt-1 border-top">
                        <div class="dashboard-note">صافي التدفق النقدي للشهر</div>
                        <h5 id="metric-net-cash" class="mb-0">0.00</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-lg-4"><div class="card"><div class="card-body"><h6 class="dashboard-section-title mb-3">المبيعات الشهرية</h6><div id="chart-sales" class="dashboard-loading">جار تحميل الرسم البياني...</div></div></div></div>
        <div class="col-lg-4"><div class="card"><div class="card-body"><h6 class="dashboard-section-title mb-3">المشتريات الشهرية</h6><div id="chart-purchases" class="dashboard-loading">جار تحميل الرسم البياني...</div></div></div></div>
        <div class="col-lg-4"><div class="card"><div class="card-body"><h6 class="dashboard-section-title mb-3">المصروفات الشهرية</h6><div id="chart-expenses" class="dashboard-loading">جار تحميل الرسم البياني...</div></div></div></div>
    </div>

    <div class="row g-3">
        <div class="col-xl-6"><div class="card h-100"><div class="card-header"><h6 class="mb-0">آخر أوامر التجهيز</h6></div><div class="card-body p-0"><div class="table-responsive"><table class="table table-sm table-striped table-hover dashboard-table mb-0"><thead class="table-light"><tr><th>رقم الأمر</th><th>المرجع</th><th>الحالة</th><th>التاريخ</th></tr></thead><tbody id="latest-orders"><tr><td colspan="4" class="text-center text-muted py-3">جار تحميل البيانات...</td></tr></tbody></table></div></div></div></div>
        <div class="col-xl-6"><div class="card h-100"><div class="card-header"><h6 class="mb-0">آخر الشحنات</h6></div><div class="card-body p-0"><div class="table-responsive"><table class="table table-sm table-striped table-hover dashboard-table mb-0"><thead class="table-light"><tr><th>رقم الشحنة</th><th>الحالة</th><th>التاريخ</th></tr></thead><tbody id="latest-shipments"><tr><td colspan="3" class="text-center text-muted py-3">جار تحميل البيانات...</td></tr></tbody></table></div></div></div></div>
        <div class="col-xl-6"><div class="card h-100"><div class="card-header"><h6 class="mb-0">آخر التحصيلات</h6></div><div class="card-body p-0"><div class="table-responsive"><table class="table table-sm table-striped table-hover dashboard-table mb-0"><thead class="table-light"><tr><th>رقم السند</th><th>العميل</th><th>المبلغ</th><th>التاريخ</th></tr></thead><tbody id="latest-collections"><tr><td colspan="4" class="text-center text-muted py-3">جار تحميل البيانات...</td></tr></tbody></table></div></div></div></div>
        <div class="col-xl-6"><div class="card h-100"><div class="card-header"><h6 class="mb-0">المنتجات منخفضة المخزون</h6></div><div class="card-body p-0"><div class="table-responsive"><table class="table table-sm table-striped table-hover dashboard-table mb-0"><thead class="table-light"><tr><th>الكود</th><th>المنتج</th><th>الرصيد</th><th>الحد الأدنى</th></tr></thead><tbody id="low-stock-items"><tr><td colspan="4" class="text-center text-muted py-3">جار تحميل البيانات...</td></tr></tbody></table></div></div></div></div>
    </div>
</div></div>
@endsection

@section('js')
<script>
$(function () {
    const dashboardEndpoint = "{{ route('admin.reports.dashboard_data') }}";
    const charts = {};

    function formatMoney(value) {
        return Number(value || 0).toLocaleString('ar-EG', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }

    function formatCount(value) {
        return Number(value || 0).toLocaleString('ar-EG');
    }

    function formatPercent(value) {
        return Number(value || 0).toLocaleString('ar-EG', { minimumFractionDigits: 1, maximumFractionDigits: 1 }) + '%';
    }

    function safeRate(part, whole) {
        if (!whole || Number(whole) <= 0) {
            return 0;
        }
        return (Number(part || 0) / Number(whole)) * 100;
    }

    function statusBadge(text) {
        const value = String(text || '-');
        const lowered = value.toLowerCase();
        let cls = 'bg-secondary-subtle text-secondary';
        if (lowered.includes('تم') || lowered.includes('مكتمل') || lowered.includes('delivered') || lowered.includes('completed')) {
            cls = 'bg-success-subtle text-success';
        } else if (lowered.includes('انتظار') || lowered.includes('pending') || lowered.includes('processing')) {
            cls = 'bg-warning-subtle text-warning';
        } else if (lowered.includes('ملغي') || lowered.includes('cancel') || lowered.includes('مرفوض')) {
            cls = 'bg-danger-subtle text-danger';
        }
        return '<span class="dashboard-status-badge ' + cls + '">' + value + '</span>';
    }

    function buildRows(target, rows, cols, renderer) {
        const body = $(target);
        if (!rows || rows.length === 0) {
            body.html('<tr><td colspan="' + cols + '" class="text-center text-muted py-3">لا توجد بيانات</td></tr>');
            return;
        }

        body.empty();
        rows.forEach(function (row) {
            body.append(renderer(row));
        });
    }

    function mergeSeries(monthlySales, monthlyPurchases, monthlyExpenses) {
        const allLabels = [];
        [monthlySales, monthlyPurchases, monthlyExpenses].forEach(function (group) {
            (group.labels || []).forEach(function (label) {
                if (allLabels.indexOf(label) === -1) {
                    allLabels.push(label);
                }
            });
        });

        function valuesFor(group) {
            return allLabels.map(function (label) {
                const idx = (group.labels || []).indexOf(label);
                return idx >= 0 ? Number((group.values || [])[idx] || 0) : 0;
            });
        }

        return {
            labels: allLabels,
            sales: valuesFor(monthlySales),
            purchases: valuesFor(monthlyPurchases),
            expenses: valuesFor(monthlyExpenses)
        };
    }

    function renderOrUpdateChart(key, selector, options) {
        if (charts[key]) {
            charts[key].updateOptions(options, true, true);
            return;
        }
        charts[key] = new ApexCharts(document.querySelector(selector), options);
        charts[key].render();
    }

    function setLastUpdate() {
        $('#dashboard-last-update').text('آخر تحديث: ' + new Date().toLocaleString('ar-EG'));
    }

    function updateInsights(k) {
        const profitMargin = safeRate(k.profit, k.sales_month);
        const collectionRate = safeRate(k.collections, k.sales_month);
        const expenseRate = safeRate(k.expenses, k.sales_month);
        const netCash = Number(k.collections || 0) - Number(k.payments || 0) - Number(k.expenses || 0);

        $('#metric-profit-margin').text(formatPercent(profitMargin));
        $('#metric-profit-margin-bar').css('width', Math.max(0, Math.min(100, profitMargin)) + '%');

        $('#metric-collection-rate').text(formatPercent(collectionRate));
        $('#metric-collection-rate-bar').css('width', Math.max(0, Math.min(100, collectionRate)) + '%');

        $('#metric-expense-rate').text(formatPercent(expenseRate));
        $('#metric-expense-rate-bar').css('width', Math.max(0, Math.min(100, expenseRate)) + '%');

        $('#metric-net-cash').text(formatMoney(netCash));
    }

    function paintDashboard(res) {
        const k = res.kpis || {};
        const monthlySales = res.monthly_sales || { labels: [], values: [] };
        const monthlyPurchases = res.monthly_purchases || { labels: [], values: [] };
        const monthlyExpenses = res.monthly_expenses || { labels: [], values: [] };
        const combined = mergeSeries(monthlySales, monthlyPurchases, monthlyExpenses);

        $('#kpi-sales-today').text(formatMoney(k.sales_today));
        $('#kpi-sales-month').text(formatMoney(k.sales_month));
        $('#kpi-purchases-today').text(formatMoney(k.purchases_today));
        $('#kpi-purchases-month').text(formatMoney(k.purchases_month));
        $('#kpi-collections').text(formatMoney(k.collections));
        $('#kpi-payments').text(formatMoney(k.payments));
        $('#kpi-expenses').text(formatMoney(k.expenses));
        $('#kpi-profit').text(formatMoney(k.profit));
        $('#kpi-invoices').text(formatCount(k.invoices_count));
        $('#kpi-sales-invoices').text(formatCount(k.sales_invoices_count));
        $('#kpi-purchase-invoices').text(formatCount(k.purchase_invoices_count));
        $('#kpi-late-customers').text(formatCount(k.late_customers));
        $('#kpi-due-suppliers').text(formatCount(k.due_suppliers));
        $('#kpi-low-stock').text(formatCount(k.low_stock_products));

        updateInsights(k);

        const axisOptions = {
            labels: { style: { fontFamily: 'inherit' } }
        };

        renderOrUpdateChart('trends', '#chart-trends', {
            chart: { type: 'line', height: 320, toolbar: { show: false } },
            series: [
                { name: 'المبيعات', data: combined.sales },
                { name: 'المشتريات', data: combined.purchases },
                { name: 'المصروفات', data: combined.expenses }
            ],
            colors: ['#3f51b5', '#00acc1', '#ff7043'],
            stroke: { width: 3, curve: 'smooth' },
            markers: { size: 3 },
            grid: { borderColor: '#eceff5' },
            dataLabels: { enabled: false },
            xaxis: Object.assign({ categories: combined.labels }, axisOptions),
            yaxis: { labels: { formatter: function (v) { return formatMoney(v); } } },
            tooltip: { y: { formatter: function (v) { return formatMoney(v); } } },
            legend: { position: 'top', horizontalAlign: 'right' }
        });

        renderOrUpdateChart('sales', '#chart-sales', {
            chart: { type: 'area', height: 250, toolbar: { show: false } },
            series: [{ name: 'المبيعات', data: monthlySales.values || [] }],
            colors: ['#3f51b5'],
            dataLabels: { enabled: false },
            stroke: { curve: 'smooth', width: 2 },
            fill: { type: 'gradient', gradient: { opacityFrom: 0.35, opacityTo: 0.05 } },
            xaxis: Object.assign({ categories: monthlySales.labels || [] }, axisOptions),
            yaxis: { labels: { formatter: function (v) { return formatMoney(v); } } },
            tooltip: { y: { formatter: function (v) { return formatMoney(v); } } }
        });

        renderOrUpdateChart('purchases', '#chart-purchases', {
            chart: { type: 'line', height: 250, toolbar: { show: false } },
            series: [{ name: 'المشتريات', data: monthlyPurchases.values || [] }],
            colors: ['#00acc1'],
            stroke: { curve: 'smooth', width: 3 },
            dataLabels: { enabled: false },
            xaxis: Object.assign({ categories: monthlyPurchases.labels || [] }, axisOptions),
            yaxis: { labels: { formatter: function (v) { return formatMoney(v); } } },
            tooltip: { y: { formatter: function (v) { return formatMoney(v); } } }
        });

        renderOrUpdateChart('expenses', '#chart-expenses', {
            chart: { type: 'bar', height: 250, toolbar: { show: false } },
            series: [{ name: 'المصروفات', data: monthlyExpenses.values || [] }],
            colors: ['#ff7043'],
            plotOptions: { bar: { borderRadius: 6, columnWidth: '42%' } },
            dataLabels: { enabled: false },
            xaxis: Object.assign({ categories: monthlyExpenses.labels || [] }, axisOptions),
            yaxis: { labels: { formatter: function (v) { return formatMoney(v); } } },
            tooltip: { y: { formatter: function (v) { return formatMoney(v); } } }
        });

        buildRows('#latest-orders', res.latest_orders || [], 4, function (row) {
            return '<tr>' +
                '<td>' + (row.number || '-') + '</td>' +
                '<td>' + (row.reference || '-') + '</td>' +
                '<td>' + statusBadge(row.status) + '</td>' +
                '<td>' + (row.date || '-') + '</td>' +
                '</tr>';
        });

        buildRows('#latest-shipments', res.latest_shipments || [], 3, function (row) {
            return '<tr>' +
                '<td>' + (row.number || '-') + '</td>' +
                '<td>' + statusBadge(row.status) + '</td>' +
                '<td>' + (row.date || '-') + '</td>' +
                '</tr>';
        });

        buildRows('#latest-collections', res.latest_collections || [], 4, function (row) {
            return '<tr>' +
                '<td>' + (row.number || '-') + '</td>' +
                '<td>' + (row.customer || '-') + '</td>' +
                '<td>' + formatMoney(row.amount) + '</td>' +
                '<td>' + (row.date || '-') + '</td>' +
                '</tr>';
        });

        buildRows('#low-stock-items', res.low_stock_items || [], 4, function (row) {
            return '<tr>' +
                '<td>' + (row.sku || '-') + '</td>' +
                '<td>' + (row.product || '-') + '</td>' +
                '<td class="text-danger fw-semibold">' + formatMoney(row.balance) + '</td>' +
                '<td>' + formatMoney(row.minimum) + '</td>' +
                '</tr>';
        });

        setLastUpdate();
    }

    function loadDashboard() {
        $('#dashboard-alert').addClass('d-none').text('');
        $('#btn-refresh-dashboard').prop('disabled', true).text('جار التحديث...');

        $.get(dashboardEndpoint)
            .done(function (res) {
                paintDashboard(res || {});
            })
            .fail(function () {
                $('#dashboard-alert').removeClass('d-none').text('تعذر تحميل بيانات لوحة التحكم حاليا، برجاء المحاولة مرة أخرى.');
            })
            .always(function () {
                $('#btn-refresh-dashboard').prop('disabled', false).text('تحديث البيانات');
            });
    }

    $('#btn-refresh-dashboard').on('click', loadDashboard);
    loadDashboard();
});
</script>
@endsection