@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>
.status-badge { font-size:.75rem; padding:.3em .8em; border-radius:20px; font-weight:600; }
.filter-strip { background:#fffbf5; border:1px solid #ffe5b4; border-radius:12px; }
.table thead th { background:#fff8ee; color:#5c3000; font-weight:700; white-space:nowrap; }
.table tbody tr:hover td { background:#fffbf5 !important; cursor:pointer; }
.kpi-mini { border-radius:10px; border-right:3px solid; }
.amount-cell { font-weight:700; color:#fd7e14; font-size:.95rem; }
</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-cash-register text-warning me-2"></i>إدارة المصروفات</h4>
            <small class="text-muted">سجل وإدارة جميع مصروفات المنشأة</small>
        </div>
        <div class="d-flex gap-2 flex-wrap">
            @can('reports.view')
                <a href="{{ route('admin.expense_reports.index') }}" class="btn btn-outline-warning btn-sm">
                    <i class="ti ti-chart-bar me-1"></i> التقارير
                </a>
            @endcan
            @can('expense_categories.view')
                <a href="{{ route('admin.expense_categories.index') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="ti ti-tag me-1"></i> الفئات
                </a>
            @endcan
            @can('expenses.create')
                <a href="{{ route('admin.expenses.create') }}" class="btn btn-warning fw-bold">
                    <i class="ti ti-plus me-1"></i> إضافة مصروف
                </a>
            @endcan
        </div>
    </div>

    @if(session('success'))<div class="alert alert-success alert-dismissible fade show"><i class="ti ti-check me-2"></i>{{ session('success') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>@endif
    @if(session('error'))<div class="alert alert-danger alert-dismissible fade show"><i class="ti ti-alert-circle me-2"></i>{{ session('error') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>@endif

    {{-- Filter Strip --}}
    <div class="card filter-strip mb-3 shadow-sm">
        <div class="card-body py-3">
            <div class="row g-2 align-items-end">
                <div class="col-md-2">
                    <label class="form-label fw-semibold mb-1 small">من تاريخ</label>
                    <input type="date" id="f_from" class="form-control form-control-sm">
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold mb-1 small">إلى تاريخ</label>
                    <input type="date" id="f_to" class="form-control form-control-sm">
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-semibold mb-1 small">وسيلة الدفع</label>
                    <select id="f_method" class="form-select form-select-sm">
                        <option value="">كل وسائل الدفع</option>
                        @foreach(\App\Models\Expense::PAYMENT_METHODS as $key => $label)
                            <option value="{{ $key }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <button id="btn-filter" class="btn btn-warning btn-sm w-100 fw-bold">
                        <i class="ti ti-filter me-1"></i> تصفية
                    </button>
                </div>
                <div class="col-md-2">
                    <button id="btn-reset" class="btn btn-outline-secondary btn-sm w-100">
                        <i class="ti ti-refresh me-1"></i> إعادة تعيين
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- DataTable --}}
    <div class="card shadow-sm">
        <div class="card-body">
            <table id="expenses-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>
                        <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 () {
    const table = $('#expenses-table').DataTable({
        ajax: {
            url: '{{ route('admin.expenses.data') }}',
            data: function (d) {
                d.from_date      = $('#f_from').val();
                d.to_date        = $('#f_to').val();
                d.payment_method = $('#f_method').val();
            },
        },
        serverSide: false,
        columns: [
            { data: 'expense_number', render: v => `<span class="badge bg-warning-subtle text-warning fw-bold">${v}</span>` },
            { data: 'expense_date',   render: v => `<span class="text-muted small">${v}</span>` },
            { data: 'statement_ar',   render: v => `<span class="fw-semibold">${v||'-'}</span>` },
            { data: 'category',       render: v => v ? `<span class="badge bg-purple-subtle text-purple" style="background:#f0eaff;color:#6f42c1">${v}</span>` : '<span class="text-muted">-</span>' },
            { data: 'payment_account',render: v => v||'<span class="text-muted">-</span>' },
            { data: 'amount',         render: v => `<span class="amount-cell">${v}</span>` },
            { data: 'payment_method', render: v => `<span class="badge bg-secondary-subtle text-secondary">${v||'-'}</span>` },
            { data: 'actions', orderable: false, searchable: false },
        ],
        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());
    $('#btn-reset').on('click', function () {
        $('#f_from, #f_to').val('');
        $('#f_method').val('');
        table.ajax.reload();
    });
});
</script>
@endsection