@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,#f5f0ff,#fff); border:1px solid #d8c8ff; border-radius:14px; }
.kpi-val { font-size:1.5rem; font-weight:800; }
.pct-bar { height:10px; border-radius:5px; background:#e9ecef; overflow:hidden; min-width:80px; }
.pct-bar-fill { height:100%; border-radius:5px; background:linear-gradient(90deg,#6f42c1,#a67fe8); }
.table thead th { background:#f0eaff; color:#3d0080; font-weight:700; white-space:nowrap; }
.table tbody tr:hover td { background:#faf5ff !important; }
.page-header-purple { background:linear-gradient(135deg,#6f42c1 0%,#4b1fa3 100%); border-radius:16px; padding:1.5rem; color:#fff; }
.rank-gold   { background:#ffd700; color:#5a3e00; }
.rank-silver { background:#c0c0c0; color:#333; }
.rank-bronze { background:#cd7f32; color:#fff; }
.rank-other  { background:#6c757d; color:#fff; }
.rank-badge  { width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem; }
</style>
@endsection

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

    <div class="page-header-purple 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-chart-donut 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-light btn-sm">اليومي</a>
            <a href="{{ route('admin.expense_reports.monthly') }}" class="btn btn-light 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-purple me-1" style="color:#6f42c1"></i> من تاريخ</label>
                    <input type="date" id="from_date" class="form-control" value="{{ now()->startOfMonth()->format('Y-m-d') }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-semibold mb-1"><i class="ti ti-calendar-event me-1" style="color:#6f42c1"></i> إلى تاريخ</label>
                    <input type="date" id="to_date" class="form-control" value="{{ now()->format('Y-m-d') }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-semibold mb-1"><i class="ti ti-tag me-1" style="color:#6f42c1"></i> الفئة</label>
                    <select id="expense_category_id" class="form-select">
                        <option value="">كل الفئات</option>
                        @foreach($categories as $cat)
                            <option value="{{ $cat->id }}">{{ $cat->name_ar }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <button id="btn-filter" class="btn w-100 fw-bold" style="background:#6f42c1;color:#fff;">
                        <i class="ti ti-filter me-1"></i> تطبيق
                    </button>
                </div>
                <div class="col-md-1 text-md-end">
                    <button id="btn-reset" class="btn btn-outline-secondary btn-sm w-100" title="إعادة تعيين"><i class="ti ti-refresh"></i></button>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-sm-4">
            <div class="card shadow-sm" style="border-right:4px solid #6f42c1">
                <div class="card-body text-center">
                    <div class="kpi-val" style="color:#6f42c1" id="sum-total">--</div>
                    <div class="text-muted small">إجمالي المصروفات</div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <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-cats">--</div>
                    <div class="text-muted small">عدد الفئات</div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <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-top">--</div>
                    <div class="text-muted small">أعلى فئة مصروفات</div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-xl-5">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-transparent border-0 pt-3">
                    <h6 class="mb-0 fw-bold"><i class="ti ti-chart-donut me-2" style="color:#6f42c1"></i>توزيع المصروفات</h6>
                </div>
                <div class="card-body d-flex align-items-center justify-content-center">
                    <div id="chart-category" style="min-height:280px;width:100%;"></div>
                </div>
            </div>
        </div>
        <div class="col-xl-7">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-transparent border-0 pt-3">
                    <h6 class="mb-0 fw-bold"><i class="ti ti-chart-bar me-2" style="color:#6f42c1"></i>مقارنة الفئات</h6>
                </div>
                <div class="card-body">
                    <div id="chart-bar-cat" style="min-height:280px;"></div>
                </div>
            </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" style="color:#6f42c1"></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="category-report-table" class="table table-hover table-bordered align-middle w-100">
                    <thead>
                        <tr>
                            <th>الترتيب</th>
                            <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 donutChart = null, barChart = null, tableData = [];
    const COLORS = ['#6f42c1','#fd7e14','#0d6efd','#198754','#dc3545','#20c997','#ffc107','#e91e63','#00bcd4','#8bc34a'];

    function getRankClass(r){return r===1?'rank-gold':r===2?'rank-silver':r===3?'rank-bronze':'rank-other';}

    const table = $('#category-report-table').DataTable({
        ajax: {
            url: '{{ route('admin.expense_reports.by_category_data') }}',
            data: d=>{d.from_date=$('#from_date').val();d.to_date=$('#to_date').val();d.expense_category_id=$('#expense_category_id').val();},
            dataSrc: function (json) {
                tableData = json.data || [];
                const total = json.grand_total||'0';
                const cats  = tableData.length;
                const top   = cats>0?tableData[0].category_name:'-';
                $('#sum-total').text(total+' ج.م');
                $('#sum-cats').text(cats+' فئة');
                $('#sum-top').text(top);
                buildCharts(json.chart_labels||[], json.chart_values||[]);
                return tableData;
            },
        },
        serverSide: false,
        columns: [
            { data:'rank', render: v=>`<span class="rank-badge ${getRankClass(v)}">${v}</span>` },
            { data:'category_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" style="color:#6f42c1">${v}</span>` },
            { data:'max_single' },
            { 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: 10, lengthMenu: [[10,25,50,-1],[10,25,50,'الكل']],
        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', ()=>table.ajax.reload());
    $('#btn-reset').on('click', function(){
        $('#from_date').val('{{ now()->startOfMonth()->format('Y-m-d') }}');
        $('#to_date').val('{{ now()->format('Y-m-d') }}');
        $('#expense_category_id').val('');
        table.ajax.reload();
    });

    function buildCharts(labels, values) {
        /* Donut */
        if (donutChart) donutChart.destroy();
        if (labels.length) {
            donutChart = new ApexCharts(document.querySelector('#chart-category'),{
                series: values,
                labels: labels,
                chart:{type:'donut',height:280,fontFamily:'Cairo,sans-serif'},
                colors: COLORS,
                legend:{position:'bottom',fontSize:'13px'},
                plotOptions:{pie:{donut:{labels:{show:true,total:{show:true,label:'الإجمالي',formatter:function(w){return w.globals.seriesTotals.reduce((a,b)=>a+b,0).toLocaleString('ar-EG');}}}}}} ,
                tooltip:{y:{formatter:v=>v.toLocaleString('ar-EG')+' ج.م'}},
                dataLabels:{formatter:(v)=>v.toFixed(1)+'%'},
            });
            donutChart.render();
        }

        /* Bar */
        if (barChart) barChart.destroy();
        if (labels.length) {
            barChart = new ApexCharts(document.querySelector('#chart-bar-cat'),{
                series:[{name:'المصروفات',data:values}],
                chart:{type:'bar',height:280,toolbar:{show:false},fontFamily:'Cairo,sans-serif'},
                colors: COLORS,
                plotOptions:{bar:{distributed:true,borderRadius:6,horizontal:true,barHeight:'60%'}},
                legend:{show:false},
                xaxis:{categories:labels,labels:{formatter:v=>v.toLocaleString('ar-EG')}},
                tooltip:{y:{formatter:v=>v.toLocaleString('ar-EG')+' ج.م'}},
                grid:{borderColor:'#f0f0f0'},dataLabels:{enabled:false},
            });
            barChart.render();
        }
    }

    $('#btn-export-csv').on('click',function(){
        if(!tableData.length) return;
        const h=['الترتيب','الفئة','عدد المصروفات','الإجمالي','أعلى مصروف','النسبة'];
        const csv='\uFEFF'+h.join(',')+'\n'+tableData.map(r=>[r.rank,r.category_name,r.expenses_count,r.total_amount,r.max_single,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