@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>
    .col-hero {
        background: linear-gradient(135deg, #1a3c5e 0%, #0d7377 100%);
        border-radius: 14px; color: #fff; padding: 22px;
    }
    .stat-block { border: 1px solid #edf0f4; border-radius: 12px; }
    .stat-icon  { width: 44px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; }
    #collections-table td, #collections-table th { vertical-align: middle; }
</style>
@endsection

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

    {{-- Hero --}}
    <div class="col-hero mb-3">
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
            <div>
                <h4 class="mb-1 text-white">تحصيلات العملاء</h4>
                <p class="mb-0 small opacity-75">سجّل وتابع كل مدفوعات عملاء الألواح الأكريليك والبولي كاربونيت بدقة واحترافية.</p>
            </div>
            @can('customer_collections.create')
            <a href="{{ route('admin.customer_collections.create') }}" class="btn btn-light">
                <i class="ti ti-plus me-1"></i>إضافة تحصيل جديد
            </a>
            @endcan
        </div>
    </div>

    @if(session('success'))<div class="alert alert-success">{{ session('success') }}</div>@endif
    @if(session('error'))<div class="alert alert-danger">{{ session('error') }}</div>@endif

    {{-- KPI Cards --}}
    <div class="row g-3 mb-3">
        <div class="col-md-3">
            <div class="stat-block p-3 h-100">
                <div class="d-flex align-items-center gap-2">
                    <span class="stat-icon bg-primary-light text-primary"><i class="ti ti-cash-banknote"></i></span>
                    <div>
                        <div class="text-muted small">إجمالي التحصيلات</div>
                        <div class="fw-bold fs-5">{{ number_format($stats['total']) }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-block p-3 h-100">
                <div class="d-flex align-items-center gap-2">
                    <span class="stat-icon bg-success-light text-success"><i class="ti ti-currency-pound"></i></span>
                    <div>
                        <div class="text-muted small">إجمالي المبالغ المحصلة</div>
                        <div class="fw-bold fs-5">{{ number_format($stats['total_amount'], 2) }} ج.م</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-block p-3 h-100">
                <div class="d-flex align-items-center gap-2">
                    <span class="stat-icon bg-info-light text-info"><i class="ti ti-calendar-month"></i></span>
                    <div>
                        <div class="text-muted small">تحصيلات هذا الشهر</div>
                        <div class="fw-bold fs-5">{{ number_format($stats['month_amount'], 2) }} ج.م</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-block p-3 h-100">
                <div class="d-flex align-items-center gap-2">
                    <span class="stat-icon bg-warning-light text-warning"><i class="ti ti-calendar-today"></i></span>
                    <div>
                        <div class="text-muted small">تحصيلات اليوم</div>
                        <div class="fw-bold fs-5">{{ number_format($stats['today_amount'], 2) }} ج.م</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Filters --}}
    <div class="card mb-3">
        <div class="card-header"><h6 class="mb-0">تصفية متقدمة</h6></div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-2">
                    <label class="form-label">من تاريخ</label>
                    <input type="date" id="from_date" class="form-control">
                </div>
                <div class="col-md-2">
                    <label class="form-label">إلى تاريخ</label>
                    <input type="date" id="to_date" class="form-control">
                </div>
                <div class="col-md-3">
                    <label class="form-label">العميل</label>
                    <select id="filter_customer_id" class="form-select">
                        <option value="">كل العملاء</option>
                        @foreach($customers as $c)
                            <option value="{{ $c->id }}">{{ $c->name_ar }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">طريقة التحصيل</label>
                    <select id="filter_method" class="form-select">
                        <option value="">كل الطرق</option>
                        <option value="cash">نقداً</option>
                        <option value="bank_transfer">تحويل بنكي</option>
                        <option value="card">بطاقة</option>
                        <option value="wallet">محفظة إلكترونية</option>
                        <option value="instapay">Instapay</option>
                        <option value="check">شيك</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">حساب التحصيل</label>
                    <select id="filter_account_id" class="form-select">
                        <option value="">كل الحسابات</option>
                        @foreach($accounts as $acc)
                            <option value="{{ $acc->id }}">{{ $acc->name_ar }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-12 d-flex gap-2">
                    <button type="button" id="btn-filter" class="btn btn-primary">
                        <i class="ti ti-filter me-1"></i>تطبيق
                    </button>
                    <button type="button" id="btn-reset" class="btn btn-light">
                        <i class="ti ti-rotate me-1"></i>إعادة تعيين
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- DataTable --}}
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table id="collections-table" class="table table-striped table-bordered w-100">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>رقم التحصيل</th>
                            <th>العميل</th>
                            <th>الفاتورة</th>
                            <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 () {
    const table = $('#collections-table').DataTable({
        ajax: {
            url: '{{ route('admin.customer_collections.data') }}',
            data: function (d) {
                d.from_date           = $('#from_date').val();
                d.to_date             = $('#to_date').val();
                d.customer_id         = $('#filter_customer_id').val();
                d.payment_method      = $('#filter_method').val();
                d.payment_account_id  = $('#filter_account_id').val();
            }
        },
        columns: [
            { data: 'id' },
            { data: 'payment_number' },
            { data: 'customer' },
            { data: 'invoice' },
            { data: 'account' },
            { data: 'payment_date' },
            { data: 'payment_method' },
            { data: 'amount' },
            { data: 'created_by' },
            { data: 'actions', orderable: false, searchable: false }
        ],
        order: [[0, 'desc']],
        language: {
            sProcessing: 'جاري التحميل...',
            sLengthMenu: 'عرض _MENU_ سجل',
            sZeroRecords: 'لا توجد بيانات مطابقة',
            sInfo: 'عرض _START_ إلى _END_ من أصل _TOTAL_ سجل',
            sInfoEmpty: 'لا توجد سجلات',
            sInfoFiltered: '(مصفاة من _MAX_ سجل)',
            sSearch: 'بحث:',
            oPaginate: { sFirst: 'الأول', sPrevious: 'السابق', sNext: 'التالي', sLast: 'الأخير' }
        }
    });

    $('#btn-filter').on('click', function () { table.ajax.reload(); });

    $('#btn-reset').on('click', function () {
        $('#from_date, #to_date').val('');
        $('#filter_customer_id, #filter_method, #filter_account_id').val('');
        table.ajax.reload();
    });
});
</script>
@endsection