@extends('admin.layouts.master')

@section('title', 'لوحة التحكم')

@section('content')
<div class="pc-container"><div class="pc-content">
    <h4 class="mb-3">لوحة التحكم - مؤشرات الأرباح والخسائر</h4>

    <div class="row g-3 mb-3">
        <div class="col-md-3"><div class="card"><div class="card-body"><small>إجمالي المبيعات</small><h5 id="kpi-sales" class="mb-0">0.00</h5></div></div></div>
        <div class="col-md-3"><div class="card"><div class="card-body"><small>إجمالي المشتريات</small><h5 id="kpi-purchases" class="mb-0">0.00</h5></div></div></div>
        <div class="col-md-3"><div class="card"><div class="card-body"><small>إجمالي المصروفات</small><h5 id="kpi-expenses" class="mb-0">0.00</h5></div></div></div>
        <div class="col-md-3"><div class="card"><div class="card-body"><small>صافي الربح/الخسارة</small><h5 id="kpi-profit" class="mb-0">0.00</h5></div></div></div>
    </div>

    <div class="row g-3">
        <div class="col-md-6"><div class="card"><div class="card-body"><h6 class="mb-3">اتجاه المبيعات الشهري</h6><div id="chart-sales"></div></div></div></div>
        <div class="col-md-6"><div class="card"><div class="card-body"><h6 class="mb-3">اتجاه المصروفات الشهري</h6><div id="chart-expenses"></div></div></div></div>
    </div>
</div></div>
@endsection

@section('js')
<script>
$(function () {
    $.get('{{ route('admin.reports.dashboard_data') }}', function (res) {
        $('#kpi-sales').text((res.kpis && res.kpis.sales ? Number(res.kpis.sales) : 0).toFixed(2));
        $('#kpi-purchases').text((res.kpis && res.kpis.purchases ? Number(res.kpis.purchases) : 0).toFixed(2));
        $('#kpi-expenses').text((res.kpis && res.kpis.expenses ? Number(res.kpis.expenses) : 0).toFixed(2));
        $('#kpi-profit').text((res.kpis && res.kpis.profit ? Number(res.kpis.profit) : 0).toFixed(2));

        new ApexCharts(document.querySelector('#chart-sales'), {
            chart: { type: 'line', height: 320 },
            series: [{ name: 'المبيعات', data: (res.monthly_sales && res.monthly_sales.values) || [] }],
            xaxis: { categories: (res.monthly_sales && res.monthly_sales.labels) || [] }
        }).render();

        new ApexCharts(document.querySelector('#chart-expenses'), {
            chart: { type: 'bar', height: 320 },
            series: [{ name: 'المصروفات', data: (res.monthly_expenses && res.monthly_expenses.values) || [] }],
            xaxis: { categories: (res.monthly_expenses && res.monthly_expenses.labels) || [] }
        }).render();
    });
});
</script>
@endsection