@extends('admin.layouts.master')
@section('title', 'المدفوعات')

@section('content')
<div class="page-content-wrapper"><div class="content-container"><div class="page-content">
    <div class="content-header d-flex flex-wrap justify-content-between align-items-center gap-2 mb-4">
        <div>
            <h4 class="mb-1"><i class="ti ti-wallet me-1"></i>إدارة المدفوعات</h4>
            <p class="text-muted mb-0">متابعة التحصيل اليومي وحالة السداد وربط المدفوعات بالفواتير باحترافية.</p>
        </div>
        @can('payments.create')
        <a href="{{ route('admin.payments.create') }}" class="btn btn-primary"><i class="ti ti-plus me-1"></i>إضافة دفعة جديدة</a>
        @endcan
    </div>

    <div class="row g-3 mb-3">
        <div class="col-md-3 col-sm-6"><div class="card shadow-sm border-0 h-100"><div class="card-body"><p class="text-muted mb-1">إجمالي السندات</p><h5 class="mb-0">{{ number_format($stats['count']) }}</h5></div></div></div>
        <div class="col-md-3 col-sm-6"><div class="card shadow-sm border-0 h-100"><div class="card-body"><p class="text-muted mb-1">سندات اليوم</p><h5 class="mb-0 text-primary">{{ number_format($stats['today_count']) }}</h5></div></div></div>
        <div class="col-md-3 col-sm-6"><div class="card shadow-sm border-0 h-100"><div class="card-body"><p class="text-muted mb-1">تحصيل اليوم</p><h5 class="mb-0 text-success">{{ number_format((float) $stats['today_total'], 2) }}</h5></div></div></div>
        <div class="col-md-3 col-sm-6"><div class="card shadow-sm border-0 h-100"><div class="card-body"><p class="text-muted mb-1">قيمة السندات المعلقة</p><h5 class="mb-0 text-warning">{{ number_format((float) $stats['pending_total'], 2) }}</h5></div></div></div>
    </div>

    <div class="card mb-3 border-0 shadow-sm">
        <div class="card-body">
            <div class="row g-2 align-items-end">
                <div class="col-md-2">
                    <label class="form-label fw-semibold">من تاريخ</label>
                    <input type="date" id="filter-date-from" class="form-control">
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold">إلى تاريخ</label>
                    <input type="date" id="filter-date-to" class="form-control">
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold">طريقة الدفع</label>
                    <select id="filter-method" class="form-select">
                        <option value="">الكل</option>
                        <option value="cash">نقدي</option>
                        <option value="card">بطاقة</option>
                        <option value="bank_transfer">تحويل بنكي</option>
                        <option value="wallet">محفظة</option>
                        <option value="mixed">مختلط</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold">الحالة</label>
                    <select id="filter-status" class="form-select">
                        <option value="">الكل</option>
                        <option value="completed">مكتمل</option>
                        <option value="pending">معلق</option>
                        <option value="cancelled">ملغي</option>
                        <option value="posted">مرحل</option>
                        <option value="void">ملغى محاسبيا</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold">الكاشير</label>
                    <select id="filter-cashier" class="form-select">
                        <option value="">الكل</option>
                        @foreach($cashiers as $cashier)
                            <option value="{{ $cashier->id }}">{{ $cashier->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold">العميل</label>
                    <select id="filter-customer" class="form-select">
                        <option value="">الكل</option>
                        @foreach($customers as $customer)
                            <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2 d-grid">
                    <button type="button" id="btn-reset-filters" class="btn btn-outline-secondary"><i class="ti ti-refresh me-1"></i>إعادة تعيين</button>
                </div>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <table id="payments-table" class="table table-hover align-middle w-100">
                <thead class="table-light">
                    <tr>
                        <th>م</th>
                        <th>رقم السند</th>
                        <th>التاريخ</th>
                        <th>الفاتورة</th>
                        <th>العميل</th>
                        <th>الصندوق</th>
                        <th>الشفت</th>
                        <th>الكاشير</th>
                        <th>طريقة الدفع</th>
                        <th>المرجع</th>
                        <th class="text-end">القيمة</th>
                        <th>الحالة</th>
                        <th class="text-center">الإجراءات</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div></div></div>
@endsection

@push('scripts')
<script>
$(function () {
    const table = $('#payments-table').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        pageLength: 25,
        lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
        order: [[0, 'desc']],
        language: { url: 'https://cdn.datatables.net/plug-ins/1.13.8/i18n/ar.json' },
        ajax: {
            url: '{{ route('admin.payments.index') }}',
            data: function (d) {
                d.date_from = $('#filter-date-from').val();
                d.date_to = $('#filter-date-to').val();
                d.payment_method = $('#filter-method').val();
                d.status = $('#filter-status').val();
                d.cashier_id = $('#filter-cashier').val();
                d.customer_id = $('#filter-customer').val();
            }
        },
        columns: [
            {data: 'id', name: 'id'},
            {data: 'payment_number', name: 'payment_number'},
            {data: 'payment_date', name: 'payment_date'},
            {data: 'invoice_no', name: 'invoice_no'},
            {data: 'customer', name: 'customer'},
            {data: 'cash_register', name: 'cash_register'},
            {data: 'cashier_shift', name: 'cashier_shift'},
            {data: 'cashier', name: 'cashier'},
            {data: 'payment_method', name: 'payment_method', orderable: false, searchable: false},
            {data: 'reference', name: 'reference'},
            {data: 'amount', name: 'amount', className: 'text-end fw-semibold'},
            {data: 'status', name: 'status', orderable: false, searchable: false},
            {data: 'actions', name: 'actions', orderable: false, searchable: false, className: 'text-center'}
        ]
    });

    $('#filter-date-from, #filter-date-to, #filter-method, #filter-status, #filter-cashier, #filter-customer').on('change', function () {
        table.ajax.reload();
    });

    $('#btn-reset-filters').on('click', function () {
        $('#filter-date-from, #filter-date-to, #filter-method, #filter-status, #filter-cashier, #filter-customer').val('');
        table.search('').ajax.reload();
    });
});
</script>
@endpush