@extends('admin.layouts.master')
@section('title', 'الخزينة والتحصيل المالي')

@section('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">
@endsection

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

        {{-- Header --}}
        <div class="page-header d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
            <div>
                <h4 class="mb-0"><i class="ti ti-building-bank me-2 text-success"></i>الخزينة والتحصيل المالي</h4>
                <small class="text-muted">سجل كامل للمعاملات المالية والتحصيل</small>
            </div>
            @can('collect payments')
            <a href="{{ route('admin.treasury.create') }}" class="btn btn-success">
                <i class="ti ti-plus me-1"></i>تسجيل عملية جديدة
            </a>
            @endcan
        </div>

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        {{-- ── Filters ── --}}
        <div class="card mb-3">
            <div class="card-header fw-semibold py-2">
                <i class="ti ti-filter me-1 text-primary"></i>الفلاتر
                <button class="btn btn-sm btn-light ms-auto" id="resetFilters">مسح الفلاتر</button>
            </div>
            <div class="card-body py-3">
                <div class="row g-2">

                    @if($showBranchColumn ?? false)
                    <div class="col-md-2">
                        <label class="form-label small">الفرع</label>
                        <select id="f_branch" class="form-select form-select-sm">
                            <option value="">كل الفروع</option>
                            @foreach($branches as $branch)
                                <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    @endif

                    <div class="col-md-2">
                        <label class="form-label small">من تاريخ</label>
                        <input type="date" id="f_date_from" class="form-control form-control-sm">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small">إلى تاريخ</label>
                        <input type="date" id="f_date_to" class="form-control form-control-sm">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small">نوع العملية</label>
                        <select id="f_type" class="form-select form-select-sm">
                            <option value="">الكل</option>
                            <option value="collection">تحصيل</option>
                            <option value="refund">استرداد</option>
                            <option value="expense">مصروف</option>
                            <option value="adjustment">تسوية</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small">طريقة الدفع</label>
                        <select id="f_payment" class="form-select form-select-sm">
                            <option value="">الكل</option>
                            <option value="cash">نقدي</option>
                            <option value="bank_transfer">تحويل بنكي</option>
                            <option value="instapay">إنستاباي</option>
                            <option value="card">بطاقة</option>
                            <option value="wallet">محفظة</option>
                            <option value="cheque">شيك</option>
                            <option value="other">أخرى</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small">الموظف</label>
                        <select id="f_employee" class="form-select form-select-sm">
                            <option value="">الكل</option>
                            @foreach($employees as $emp)
                                <option value="{{ $emp->id }}">{{ $emp->name }}</option>
                            @endforeach
                        </select>
                    </div>

                </div>
            </div>
        </div>

        {{-- ── DataTable ── --}}
        <div class="card">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table id="treasury-table" class="table table-striped table-bordered align-middle w-100">
                        <thead class="table-dark">
                        <tr>
                            <th>#</th>
                            <th>رقم المعاملة</th>
                            <th>التاريخ</th>
                            <th>النوع</th>
                            <th>الاتجاه</th>
                            <th>السجل المرتبط</th>
                            <th>المبلغ</th>
                            <th>طريقة الدفع</th>
                            <th>الموظف</th>
                            @if($showBranchColumn ?? false)<th>الفرع</th>@endif
                            <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 src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>
<script>
$(function () {
    var showBranchColumn = {{ ($showBranchColumn ?? false) ? 'true' : 'false' }};

    var columns = [
        { data: 'id', name: 'id', width: '50px' },
        { data: 'transaction_number', name: 'transaction_number' },
        { data: 'formatted_date', name: 'transaction_date' },
        { data: 'type_badge', name: 'transaction_type', orderable: false },
        { data: 'direction_badge', name: 'direction', orderable: false },
        { data: 'reference', name: 'person_permit_id', orderable: false },
        { data: 'formatted_amount', name: 'amount' },
        { data: 'payment_method_label', name: 'payment_method' },
        { data: 'employee_name', name: 'processedBy.name', defaultContent: '-' },
    ];

    if (showBranchColumn) {
        columns.push({ data: 'branch_name', name: 'branch.name', defaultContent: '-' });
    }
    columns.push({ data: 'actions', name: 'actions', orderable: false, searchable: false });

    var dt = $('#treasury-table').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        order: [[0, 'desc']],
        ajax: {
            url: '{{ route('admin.treasury.data') }}',
            data: function (d) {
                d.branch_id       = $('#f_branch').val();
                d.date_from       = $('#f_date_from').val();
                d.date_to         = $('#f_date_to').val();
                d.transaction_type = $('#f_type').val();
                d.payment_method  = $('#f_payment').val();
                d.employee_id     = $('#f_employee').val();
            }
        },
        language: { url: 'https://cdn.datatables.net/plug-ins/1.13.8/i18n/ar.json' },
        columns: columns,
    });

    // Reload on filter change
    $('#f_branch, #f_type, #f_payment, #f_employee').on('change', function () { dt.ajax.reload(); });
    $('#f_date_from, #f_date_to').on('change', function () { dt.ajax.reload(); });

    // Reset filters
    $('#resetFilters').on('click', function () {
        $('#f_branch, #f_type, #f_payment, #f_employee').val('');
        $('#f_date_from, #f_date_to').val('');
        dt.ajax.reload();
    });
});
</script>
@endsection