@extends('admin.layouts.master')
@section('title', 'تقرير المصروفات الشهري')

@section('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
<style>
.filter-card { background:linear-gradient(135deg,#f0f4ff,#fff); border:1px solid #c8d8ff; border-radius:14px; }
.kpi-val { font-size:1.5rem; font-weight:800; }
.pct-bar { height:8px; border-radius:4px; background:#e9ecef; overflow:hidden; min-width:80px; }
.pct-bar-fill { height:100%; border-radius:4px; background:linear-gradient(90deg,#0d6efd,#6ea8fe); }
.table thead th { background:#eef2ff; color:#1a3a6c; font-weight:700; white-space:nowrap; }
.table tbody tr:hover td { background:#f5f8ff !important; }
.page-header-blue { background:linear-gradient(135deg,#0d6efd 0%,#0048b5 100%); border-radius:16px; padding:1.5rem; color:#fff; }
.rank-badge { width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem; }
</style>
@endsection

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

    <div class="page-header-blue mb-4 d-flex flex-wrap justify-content-between align-items-center gap-3">
        <div>
            <h4 class="mb-1 fw-bold text-white"><i class="ti ti-calendar-month me-2"></i>تقرير المصروفات الشهري</h4>
            <div class="opacity-75 small">مقارنة الأشهر وتحليل الاتجاهات الزمنية</div>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.expense_reports.index') }}" class="btn btn-light btn-sm"><i class="ti ti-arrow-right me-1"></i> لوحة التقارير</a>
            <a href="{{ route('admin.expense_reports.daily') }}" class="btn btn-primary btn-sm">اليومي</a>
            <a href="{{ route('admin.expense_reports.by_category') }}" class="btn btn-primary btn-sm">حسب الفئة</a>
        </div>
    </div>

    <div class="card filter-card mb-4 shadow-sm">
        <div class="card-body">
            <div class="row g-3 align-items-end">
                <div class="col-md-3">
                    <label class="form-label fw-semibold mb-1"><i class="ti ti-calendar-event text-primary me-1"></i> من تاريخ</label>
                    <input type="date" id="from_date" class="form-control" value="{{ now()->startOfYear()->format('Y-m-d') }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-semibold mb-1"><i class="ti ti-calendar-event text-primary me-1"></i> إلى تاريخ</label>
                    <input type="date" id="to_date" class="form-control" value="{{ now()->format('Y-m-d') }}">
                </div>
                <div class="col-md-2">
                    <button id="btn-filter" class="btn btn-primary w-100 fw-bold"><i class="ti ti-filter me-1"></i> تطبيق</button>
                </div>
                <div class="col-md-4 text-md-end">
                    <div class="btn-group btn-group-sm">
                        <button class="btn btn-outline-primary quick-m active" data-range="year">هذا العام</button>
                        <button class="btn btn-outline-primary quick-m" data-range="prev_year">العام الماضي</button>
                        <button class="btn btn-outline-primary quick-m" data-range="last6">6 أشهر</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-sm-3">
            <div class="card shadow-sm" style="border-right:4px solid #0d6efd">
                <div class="card-body text-center">
                    <div class="kpi-val text-primary" id="sum-total">--</div>
                    <div class="text-muted small">إجمالي الفترة</div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="card shadow-sm" style="border-right:4px solid #fd7e14">
                <div class="card-body text-center">
                    <div class="kpi-val text-warning" id="sum-months">--</div>
                    <div class="text-muted small">أشهر بها مصروفات</div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="card shadow-sm" style="border-right:4px solid #198754">
                <div class="card-body text-center">
                    <div class="kpi-val text-success" id="sum-avg">--</div>
                    <div class="text-muted small">متوسط شهري</div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="card shadow-sm" style="border-right:4px solid #6f42c1">
                <div class="card-body text-center">
                    <div class="kpi-val text-purple" id="sum-best" style="color:#6f42c1">--</div>
                    <div class="text-muted small">أعلى شهر</div>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm mb-4">
        <div class="card-header bg-transparent border-0 pt-3">
            <h6 class="mb-0 fw-bold"><i class="ti ti-chart-bar me-2 text-primary"></i>مسار المصروفات الشهري</h6>
        </div>
        <div class="card-body"><div id="chart-monthly" style="min-height:240px;"></div></div>
    </div>

    <div class="card shadow-sm">
        <div class="card-header bg-transparent border-0 pt-3 d-flex justify-content-between align-items-center">
            <h6 class="mb-0 fw-bold"><i class="ti ti-table me-2 text-primary"></i>تفصيل شهري</h6>
            <button class="btn btn-sm btn-outline-success" id="btn-export-csv">
                <i class="ti ti-file-spreadsheet me-1"></i> تصدير CSV
            </button>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="monthly-report-table" class="table table-hover table-bordered align-middle w-100">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>الشهر</th>
                            <th>عدد المصروفات</th>
                            <th>إجمالي القيمة (ج.م)</th>
                            <th>النسبة من الإجمالي</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

</div></div>
@endsection

@section('js')
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>
<script>
$(function () {
    let monthlyChart = null, tableData = [];
    let rowIdx = 0;

    function getRange(type) {
        const today = new Date(), fmt = d => d.toISOString().slice(0,10);
        if (type==='year')      return {from:fmt(new Date(today.getFullYear(),0,1)),to:fmt(today)};
        if (type==='prev_year') return {from:`${today.getFullYear()-1}-01-01`,to:`${today.getFullYear()-1}-12-31`};
        if (type==='last6')     { const f=new Date(today); f.setMonth(f.getMonth()-5); f.setDate(1); return {from:fmt(f),to:fmt(today)}; }
    }

    $('.quick-m').on('click', function () {
        $('.quick-m').removeClass('active'); $(this).addClass('active');
        const r=getRange($(this).data('range'));
        if (r){$('#from_date').val(r.from);$('#to_date').val(r.to);}
        table.ajax.reload();
    });

    const table = $('#monthly-report-table').DataTable({
        ajax: {
            url: '{{ route('admin.expense_reports.monthly_data') }}',
            data: d => { d.from_date=$('#from_date').val(); d.to_date=$('#to_date').val(); },
            dataSrc: function (json) {
                tableData = json.data || [];
                rowIdx = 0;
                const total = json.grand_total || '0';
                const months = tableData.length;
                const avgVal = months>0?(parseFloat(total.replace(/,/g,''))/months).toLocaleString('ar-EG',{maximumFractionDigits:2}):'0';
                const best   = months>0?tableData[tableData.length-1]?.month_name??'-':'-';
                $('#sum-total').text(total+' ج.م');
                $('#sum-months').text(months+' شهر');
                $('#sum-avg').text(avgVal+' ج.م');
                // best is highest: sort by raw
                const sorted = [...tableData].sort((a,b)=>b.total_raw-a.total_raw);
                $('#sum-best').text(sorted[0]?.month_name??'-');
                buildChart(tableData);
                return tableData;
            },
        },
        serverSide: false,
        columns: [
            { data: null, render: (_,__,___, meta) => {
                rowIdx++;
                const colors=['#0d6efd','#fd7e14','#198754','#6f42c1','#dc3545','#20c997'];
                const c=colors[(rowIdx-1)%colors.length];
                return `<span class="rank-badge text-white" style="background:${c}">${rowIdx}</span>`;
            }},
            { data:'month_name', render: v=>`<span class="fw-semibold">${v}</span>` },
            { data:'expenses_count', render: v=>`<span class="badge bg-primary-subtle text-primary fs-6 px-3">${v}</span>` },
            { data:'total_amount', render: v=>`<span class="fw-bold text-primary">${v}</span>` },
            { data:'percentage', render: v=>`<div class="d-flex align-items-center gap-2"><div class="pct-bar flex-grow-1"><div class="pct-bar-fill" style="width:${v}%"></div></div><span class="fw-semibold small">${v}%</span></div>` },
        ],
        order: [[0,'asc']],
        language: { url:'//cdn.datatables.net/plug-ins/1.13.8/i18n/ar.json' },
        pageLength: 12, lengthMenu: [[12,24,-1],[12,24,'الكل']],
        dom: "<'row align-items-center mb-2'<'col-md-6'l><'col-md-6'f>>rt<'row align-items-center mt-2'<'col-md-5'i><'col-md-7'p>>",
    });

    $('#btn-filter').on('click', ()=>{rowIdx=0;table.ajax.reload();});

    function buildChart(rows) {
        const sorted=[...rows].sort((a,b)=>a.month_key.localeCompare(b.month_key));
        const labels=sorted.map(r=>r.month_name);
        const values=sorted.map(r=>r.total_raw);
        if (monthlyChart) monthlyChart.destroy();
        monthlyChart = new ApexCharts(document.querySelector('#chart-monthly'),{
            series:[{name:'المصروفات الشهرية',data:values}],
            chart:{type:'bar',height:240,toolbar:{show:false},fontFamily:'Cairo,sans-serif'},
            colors:['#0d6efd'],
            plotOptions:{bar:{borderRadius:6,columnWidth:'50%',dataLabels:{position:'top'}}},
            dataLabels:{enabled:true,formatter:v=>v.toLocaleString('ar-EG'),offsetY:-18,style:{fontSize:'11px',colors:['#344563']}},
            xaxis:{categories:labels,labels:{style:{fontSize:'11px'}}},
            yaxis:{labels:{formatter:v=>v.toLocaleString('ar-EG')}},
            tooltip:{y:{formatter:v=>v.toLocaleString('ar-EG')+' ج.م'}},
            grid:{borderColor:'#f5f5f5'},
        });
        monthlyChart.render();
    }

    $('#btn-export-csv').on('click',function(){
        if(!tableData.length) return;
        const h=['الشهر','عدد المصروفات','الإجمالي','النسبة'];
        const csv='\uFEFF'+h.join(',')+'\n'+tableData.map(r=>[r.month_name,r.expenses_count,r.total_amount,r.percentage].join(',')).join('\n');
        const a=document.createElement('a'); a.href=URL.createObjectURL(new Blob([csv],{type:'text/csv;charset=utf-8;'}));
        a.download='تقرير-المصروفات-الشهري.csv'; a.click();
    });
});
</script>
@endsection