@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>
.kpi-card { border-right: 4px solid; border-radius: 12px; transition: transform .2s, box-shadow .2s; }
.kpi-card:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,.12) !important; }
.kpi-card.orange { border-right-color: #fd7e14; }
.kpi-card.blue   { border-right-color: #0d6efd; }
.kpi-card.green  { border-right-color: #198754; }
.kpi-card.purple { border-right-color: #6f42c1; }
.kpi-icon { width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.4rem; }
.kpi-icon.orange { background:#fff3cd;color:#fd7e14; }
.kpi-icon.blue   { background:#cfe2ff;color:#0d6efd; }
.kpi-icon.green  { background:#d1e7dd;color:#198754; }
.kpi-icon.purple { background:#e8d8f9;color:#6f42c1; }
.kpi-value { font-size:1.6rem; font-weight:800; color:#1a1a2e; }
.kpi-label { font-size:.82rem; color:#6c757d; }
.growth-up   { color:#198754; }
.growth-down { color:#dc3545; }
.report-nav-card { border-radius:14px; border:2px solid transparent; cursor:pointer; transition: all .2s; text-decoration:none; color:inherit; }
.report-nav-card:hover { border-color: #0d6efd; box-shadow:0 6px 20px rgba(13,110,253,.15); transform:translateY(-2px); color:inherit; }
.report-nav-icon { width:60px;height:60px;border-radius:14px;font-size:1.6rem;display:flex;align-items:center;justify-content:center;margin:0 auto 12px; }
.filter-card { background: linear-gradient(135deg, #f8f9ff 0%, #fff 100%); border:1px solid #e3e8ff; border-radius:12px; }
</style>
@endsection

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

    {{-- ─── Header ─── --}}
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4 gap-2">
        <div>
            <h4 class="mb-0 fw-bold">
                <i class="ti ti-report-money text-warning me-2"></i>
                لوحة تقارير المصروفات
            </h4>
            <small class="text-muted">تحليل شامل لمصروفات المنشأة</small>
        </div>
        <div class="d-flex gap-2">
            @can('expenses.create')
                <a href="{{ route('admin.expenses.create') }}" class="btn btn-primary">
                    <i class="ti ti-plus me-1"></i> إضافة مصروف
                </a>
            @endcan
            <a href="{{ route('admin.expenses.index') }}" class="btn btn-outline-secondary">
                <i class="ti ti-list me-1"></i> قائمة المصروفات
            </a>
        </div>
    </div>

    {{-- ─── Filter ─── --}}
    <div class="card filter-card mb-4">
        <div class="card-body py-3">
            <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 me-1 text-primary"></i> من تاريخ
                    </label>
                    <input type="date" id="dash_from" 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 text-primary"></i> إلى تاريخ
                    </label>
                    <input type="date" id="dash_to" class="form-control"
                           value="{{ now()->format('Y-m-d') }}">
                </div>
                <div class="col-md-2">
                    <button id="btn-dash-filter" class="btn btn-primary w-100">
                        <i class="ti ti-filter me-1"></i> تحديث
                    </button>
                </div>
                <div class="col-md-4 text-md-end">
                    <div class="btn-group">
                        <button class="btn btn-outline-secondary btn-sm quick-range" data-range="today">اليوم</button>
                        <button class="btn btn-outline-secondary btn-sm quick-range active" data-range="month">هذا الشهر</button>
                        <button class="btn btn-outline-secondary btn-sm quick-range" data-range="quarter">الربع</button>
                        <button class="btn btn-outline-secondary btn-sm quick-range" data-range="year">هذا العام</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ─── KPI Cards ─── --}}
    <div class="row g-3 mb-4" id="kpi-section">
        <div class="col-sm-6 col-xl-3">
            <div class="card kpi-card orange shadow-sm h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <div class="kpi-icon orange"><i class="ti ti-cash"></i></div>
                    <div>
                        <div class="kpi-value" id="kpi-total">--</div>
                        <div class="kpi-label">إجمالي المصروفات</div>
                        <small id="kpi-prev" class="text-muted">الفترة السابقة: --</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card kpi-card blue shadow-sm h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <div class="kpi-icon blue"><i class="ti ti-receipt-2"></i></div>
                    <div>
                        <div class="kpi-value" id="kpi-count">--</div>
                        <div class="kpi-label">عدد المصروفات</div>
                        <small id="kpi-growth" class="text-muted">نمو مقارنة بالفترة السابقة</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card kpi-card green shadow-sm h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <div class="kpi-icon green"><i class="ti ti-trending-up"></i></div>
                    <div>
                        <div class="kpi-value" id="kpi-growth-pct">--</div>
                        <div class="kpi-label">نسبة التغيير</div>
                        <small class="text-muted">مقارنة بالفترة المماثلة</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card kpi-card purple shadow-sm h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <div class="kpi-icon purple"><i class="ti ti-tag"></i></div>
                    <div>
                        <div class="kpi-value kpi-value-sm" id="kpi-top-cat" style="font-size:1rem">--</div>
                        <div class="kpi-label">أعلى فئة مصروفات</div>
                        <small id="kpi-top-cat-amt" class="text-muted">القيمة: --</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ─── Chart + Navigation ─── --}}
    <div class="row g-3 mb-4">
        <div class="col-xl-8">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-transparent border-0 pt-3 pb-0">
                    <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="daily-trend-chart" style="min-height:220px;"></div>
                </div>
            </div>
        </div>
        <div class="col-xl-4">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-transparent border-0 pt-3 pb-0">
                    <h6 class="mb-0 fw-bold"><i class="ti ti-report-analytics me-2 text-warning"></i>التقارير المتاحة</h6>
                </div>
                <div class="card-body d-flex flex-column gap-3">
                    <a href="{{ route('admin.expense_reports.daily') }}" class="card report-nav-card text-center p-3 shadow-sm">
                        <div class="report-nav-icon" style="background:#fff3cd;color:#fd7e14">
                            <i class="ti ti-calendar-day"></i>
                        </div>
                        <div class="fw-bold">التقرير اليومي</div>
                        <small class="text-muted">توزيع المصروفات يومياً</small>
                    </a>
                    <a href="{{ route('admin.expense_reports.monthly') }}" class="card report-nav-card text-center p-3 shadow-sm">
                        <div class="report-nav-icon" style="background:#cfe2ff;color:#0d6efd">
                            <i class="ti ti-calendar-month"></i>
                        </div>
                        <div class="fw-bold">التقرير الشهري</div>
                        <small class="text-muted">مقارنة الأشهر والاتجاهات</small>
                    </a>
                    <a href="{{ route('admin.expense_reports.by_category') }}" class="card report-nav-card text-center p-3 shadow-sm">
                        <div class="report-nav-icon" style="background:#e8d8f9;color:#6f42c1">
                            <i class="ti ti-chart-donut"></i>
                        </div>
                        <div class="fw-bold">تقرير الفئات</div>
                        <small class="text-muted">توزيع المصروفات حسب الفئة</small>
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- ─── Recent Expenses DataTable ─── --}}
    <div class="card shadow-sm">
        <div class="card-header bg-transparent border-0 pt-3 pb-0 d-flex justify-content-between align-items-center">
            <h6 class="mb-0 fw-bold"><i class="ti ti-table me-2 text-info"></i>آخر المصروفات المسجلة</h6>
            <a href="{{ route('admin.expenses.index') }}" class="btn btn-sm btn-outline-primary">عرض الكل</a>
        </div>
        <div class="card-body">
            <table id="recent-expenses-table" class="table table-hover table-bordered align-middle w-100">
                <thead class="table-light">
                    <tr>
                        <th>رقم المصروف</th>
                        <th>التاريخ</th>
                        <th>البيان</th>
                        <th>الفئة</th>
                        <th>القيمة</th>
                        <th>وسيلة الدفع</th>
                        <th>الإجراءات</th>
                    </tr>
                </thead>
            </table>
        </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 () {

    /* ── Helper: parse today / month / quarter / year ── */
    function getRange(type) {
        const today = new Date();
        const pad = n => String(n).padStart(2, '0');
        const fmt = d => `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}`;
        const todayStr = fmt(today);

        if (type === 'today') return { from: todayStr, to: todayStr };
        if (type === 'month') {
            const from = new Date(today.getFullYear(), today.getMonth(), 1);
            return { from: fmt(from), to: todayStr };
        }
        if (type === 'quarter') {
            const q = Math.floor(today.getMonth() / 3);
            const from = new Date(today.getFullYear(), q * 3, 1);
            return { from: fmt(from), to: todayStr };
        }
        if (type === 'year') {
            return { from: `${today.getFullYear()}-01-01`, to: todayStr };
        }
        return null;
    }

    /* ── Quick-range buttons ── */
    $('.quick-range').on('click', function () {
        $('.quick-range').removeClass('active');
        $(this).addClass('active');
        const r = getRange($(this).data('range'));
        if (r) { $('#dash_from').val(r.from); $('#dash_to').val(r.to); }
        loadDashboard();
    });

    /* ── Load dashboard KPIs + chart ── */
    let trendChart = null;

    function loadDashboard() {
        const from = $('#dash_from').val();
        const to   = $('#dash_to').val();

        $.get('{{ route('admin.expense_reports.summary_data') }}', { from_date: from, to_date: to }, function (res) {
            $('#kpi-total').text(res.current_total);
            $('#kpi-count').text(res.current_count);
            $('#kpi-prev').text('الفترة السابقة: ' + res.prev_total);
            $('#kpi-top-cat').text(res.top_category);
            $('#kpi-top-cat-amt').text('القيمة: ' + res.top_category_amount);

            const pct = parseFloat(res.growth);
            const sign = pct >= 0 ? '+' : '';
            const cls  = pct >= 0 ? 'growth-up' : 'growth-down';
            const icon = pct >= 0 ? '▲' : '▼';
            $('#kpi-growth-pct').html(`<span class="${cls}">${icon} ${sign}${pct}%</span>`);
            $('#kpi-growth').html(`<span class="${cls}">${icon} ${sign}${pct}% عن السابق</span>`);

            /* Chart */
            if (trendChart) { trendChart.destroy(); }
            const opts = {
                series: [{ name: 'المصروفات', data: res.chart_values }],
                chart: { type: 'area', height: 220, toolbar: { show: false }, fontFamily: 'Cairo, sans-serif' },
                colors: ['#fd7e14'],
                fill: { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: .5, opacityTo: .05 } },
                stroke: { curve: 'smooth', width: 2.5 },
                xaxis: { categories: res.chart_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: '#f1f1f1' },
                dataLabels: { enabled: false },
            };
            trendChart = new ApexCharts(document.querySelector('#daily-trend-chart'), opts);
            trendChart.render();
        });
    }

    $('#btn-dash-filter').on('click', loadDashboard);
    loadDashboard();

    /* ── Recent expenses DataTable ── */
    $('#recent-expenses-table').DataTable({
        ajax: '{{ route('admin.expenses.data') }}',
        columns: [
            { data: 'expense_number' },
            { data: 'expense_date' },
            { data: 'statement_ar' },
            { data: 'category' },
            { data: 'amount' },
            { data: 'payment_method' },
            { data: 'actions', orderable: false, searchable: false },
        ],
        order: [[0, 'desc']],
        pageLength: 5,
        lengthMenu: [[5, 10, 25], [5, 10, 25]],
        serverSide: false,
    });
});
</script>
@endsection