@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,#fffbf0,#fff); border:1px solid #ffe5b4; border-radius:14px; }
.summary-kpi { border-radius:12px; border:none; }
.summary-kpi .kpi-val { font-size:1.5rem; font-weight:800; }
.pct-bar { height:6px; border-radius:4px; background:#e9ecef; overflow:hidden; min-width:80px; }
.pct-bar-fill { height:100%; border-radius:4px; background:linear-gradient(90deg,#fd7e14,#ffc107); }
.table thead th { background:#fff8ee; color:#6c3d00; font-weight:700; white-space:nowrap; }
.table tbody tr:hover td { background:#fffbf5 !important; }
.page-header-custom { background: linear-gradient(135deg,#fd7e14 0%,#e65c00 100%); border-radius:16px; padding:1.5rem; color:#fff; }
</style>
@endsection

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

    <div class="page-header-custom 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-day 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.monthly') }}" class="btn btn-warning btn-sm">الشهري</a>
            <a href="{{ route('admin.expense_reports.by_category') }}" class="btn btn-warning 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-warning me-1"></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 text-warning 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-warning 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-warning quick-day" data-range="week">7 أيام</button>
                        <button class="btn btn-outline-warning active quick-day" data-range="month">هذا الشهر</button>
                        <button class="btn btn-outline-warning quick-day" data-range="prev_month">الشهر الماضي</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-sm-4">
            <div class="card summary-kpi shadow-sm" style="border-right:4px solid #fd7e14">
                <div class="card-body text-center">
                    <div class="kpi-val text-warning" id="sum-total">--</div>
                    <div class="text-muted small">إجمالي الفترة</div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="card summary-kpi shadow-sm" style="border-right:4px solid #0d6efd">
                <div class="card-body text-center">
                    <div class="kpi-val text-primary" id="sum-days">--</div>
                    <div class="text-muted small">أيام بها مصروفات</div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="card summary-kpi 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>

    <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-popular text-warning me-2"></i>الرسم البياني اليومي</h6>
        </div>
        <div class="card-body"><div id="chart-daily" style="min-height:220px;"></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-warning"></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="daily-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 dailyChart = null, tableData = [];

    function getRange(type) {
        const today = new Date(), fmt = d => d.toISOString().slice(0,10);
        if (type==='week')       { const f=new Date(today); f.setDate(f.getDate()-6); return {from:fmt(f),to:fmt(today)}; }
        if (type==='month')      return {from:fmt(new Date(today.getFullYear(),today.getMonth(),1)),to:fmt(today)};
        if (type==='prev_month') { const f=new Date(today.getFullYear(),today.getMonth()-1,1),t=new Date(today.getFullYear(),today.getMonth(),0); return {from:fmt(f),to:fmt(t)}; }
    }

    $('.quick-day').on('click', function () {
        $('.quick-day').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 = $('#daily-report-table').DataTable({
        ajax: {
            url: '{{ route('admin.expense_reports.daily_data') }}',
            data: d => { d.from_date=$('#from_date').val(); d.to_date=$('#to_date').val(); },
            dataSrc: function (json) {
                tableData = json.data || [];
                const total = json.grand_total || '0';
                const days  = tableData.length;
                const avgVal = days>0 ? (parseFloat(total.replace(/,/g,''))/days).toLocaleString('ar-EG',{maximumFractionDigits:2}) : '0';
                $('#sum-total').text(total+' ج.م');
                $('#sum-days').text(days+' يوم');
                $('#sum-avg').text(avgVal+' ج.م');
                buildChart(tableData);
                return tableData;
            },
        },
        serverSide: false,
        columns: [
            { data:'expense_date', render: v=>`<span class="fw-semibold">${v}</span>` },
            { data:'day_name',     render: v=>`<span class="badge bg-secondary-subtle text-secondary">${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-warning">${v}</span>` },
            { data:'max_expense' },
            { 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,'desc']],
        language: { url:'//cdn.datatables.net/plug-ins/1.13.8/i18n/ar.json' },
        pageLength: 15, lengthMenu: [[10,15,25,50,-1],[10,15,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());

    function buildChart(rows) {
        const sorted = [...rows].sort((a,b)=>a.expense_date.localeCompare(b.expense_date));
        const labels = sorted.map(r=>r.expense_date);
        const values = sorted.map(r=>parseFloat(r.total_amount.replace(/,/g,'')));
        if (dailyChart) dailyChart.destroy();
        dailyChart = new ApexCharts(document.querySelector('#chart-daily'), {
            series:[{name:'المصروفات',data:values}],
            chart:{type:'bar',height:220,toolbar:{show:false},fontFamily:'Cairo,sans-serif'},
            colors:['#fd7e14'],
            plotOptions:{bar:{borderRadius:5,columnWidth:'55%'}},
            xaxis:{categories:labels,labels:{rotate:-30,style:{fontSize:'11px'}}},
            yaxis:{labels:{formatter:v=>v.toLocaleString('ar-EG')}},
            tooltip:{y:{formatter:v=>v.toLocaleString('ar-EG')+' ج.م'}},
            grid:{borderColor:'#f5f5f5'},dataLabels:{enabled:false},
        });
        dailyChart.render();
    }

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