@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">
<style>
    .vehicles-filter-card { border: 1px dashed #e3e6ef; }
    .vehicle-period-cell { min-width: 110px; }

    /* تلوين الصفوف */
    .table tbody tr.table-warning {
        background-color: #fff3cd !important;
        border-color: #ffc107 !important;
    }

    .table tbody tr.table-warning:hover {
        background-color: #ffe69c !important;
    }

    .table tbody tr.table-danger {
        background-color: #f8d7da !important;
        border-color: #dc3545 !important;
    }

    .table tbody tr.table-danger:hover {
        background-color: #f5c2c7 !important;
    }
</style>
@endsection

@section('content')
<div class="pc-container">
    <div class="pc-content">
        <div class="page-header d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
            <div>
                <h4 class="mb-1">إدارة المركبات</h4>
                <small class="text-muted">عرض وإدارة السيارات والقاطرات والشاحنات بشكل مركزي</small>
            </div>
            <div class="d-flex gap-2">
                @can('create customers')
                <a href="{{ route('admin.vehicles.create') }}" class="btn btn-primary">
                    <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



        <div class="card vehicles-filter-card mb-3">
            <div class="card-body py-3">
                <form id="vehiclesFiltersForm">
                    <div class="row g-2 align-items-end">
                        <div class="col-md-3">
                            <label class="form-label mb-1">رقم اللوحة</label>
                            <input type="text" id="filterPlateNumber" class="form-control" placeholder="بحث برقم اللوحة">
                        </div>

                        <div class="col-md-3">
                            <label class="form-label mb-1">الفرع</label>
                            <input type="text" id="filterBranch" class="form-control" placeholder="بحث بالفرع">
                        </div>

                        <div class="col-md-2">
                            <label class="form-label mb-1">المالك</label>
                            <select id="filterOwnerType" class="form-select">
                                <option value="">الكل</option>
                                <option value="company">شركة</option>
                                <option value="customer">عميل</option>
                            </select>
                        </div>

                        <div class="col-md-2">
                            <label class="form-label mb-1">حالة التصريح</label>
                            <select id="filterPermitStatus" class="form-select">
                                <option value="">الكل</option>
                                <option value="expired">منتهي</option>
                                <option value="expiring_soon">ينتهي قريباً</option>
                                <option value="active">ساري</option>
                            </select>
                        </div>

                        <div class="col-md-2 d-flex gap-2">
                            <button type="button" id="applyFilters" class="btn btn-primary w-100">
                                <i class="ti ti-filter me-1"></i>تطبيق الفلاتر
                            </button>
                            <button type="button" id="resetFilters" class="btn btn-outline-secondary w-100">
                                <i class="ti ti-refresh me-1"></i>
                            </button>
                        </div>
                    </div>

                    <div class="row g-2 align-items-end mt-2">
                        <div class="col-md-3">
                            <label class="form-label mb-1">بحث عن المالك / الاسم</label>
                            <input type="text" id="filterOwnerSearch" class="form-control" placeholder="اسم الشركة أو العميل">
                        </div>

                        <div class="col-md-3">
                            <label class="form-label mb-1">تاريخ بداية التصريح (من - إلى)</label>
                            <div class="d-flex gap-2">
                                <input type="date" id="filterStartFrom" class="form-control">
                                <input type="date" id="filterStartTo" class="form-control">
                            </div>
                        </div>

                        <div class="col-md-3">
                            <label class="form-label mb-1">تاريخ نهاية التصريح (من - إلى)</label>
                            <div class="d-flex gap-2">
                                <input type="date" id="filterEndFrom" class="form-control">
                                <input type="date" id="filterEndTo" class="form-control">
                            </div>
                        </div>

                        <div class="col-md-3">
                            <label class="form-label mb-1">المتبقي (من - إلى)</label>
                            <div class="d-flex gap-2">
                                <input type="number" step="0.01" min="0" id="filterRemainingMin" class="form-control" placeholder="اقل">
                                <input type="number" step="0.01" min="0" id="filterRemainingMax" class="form-control" placeholder="اعلى">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table id="vehicles-table" class="table table-striped 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>
                            <th>اجمالي الحسابات</th>
                            <th>المدفوع</th>
                            <th>المتبقي</th>
                            <th class="text-center">إجراءات</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>

        @can('collect payments')
            <div class="modal fade" id="remainingPaymentModal" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <form method="POST" action="{{ route('admin.treasury.store') }}" id="remainingPaymentForm">
                            @csrf
                            <input type="hidden" name="branch_id" value="{{ $branchId }}">
                            <input type="hidden" name="transaction_type" value="collection">
                            <input type="hidden" name="reference_type" value="vehicle_permit">
                            <input type="hidden" name="reference_id" id="modal_reference_id">
                            <input type="hidden" name="transaction_date" id="modal_transaction_date" value="{{ now()->format('Y-m-d H:i:s') }}">
                            <input type="hidden" name="return_to" value="{{ url()->full() }}">

                            <div class="modal-header">
                                <h5 class="modal-title">
                                    <i class="ti ti-cash-banknote text-success me-1"></i>تحصيل المتبقي
                                </h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>

                            <div class="modal-body">
                                <div class="alert alert-light border mb-3">
                                    <div class="mb-1"><strong>السيارة:</strong> <span id="modal_vehicle_label">-</span></div>
                                    <div class="mb-1"><strong>المالك:</strong> <span id="modal_owner_label">-</span></div>
                                    <div class="mb-1"><strong>إجمالي المتبقي:</strong> <span id="modal_total_remaining_label" class="text-warning fw-bold">0.00 ج.م</span></div>
                                    <div><strong>المتاح تحصيله الآن:</strong> <span id="modal_collectable_label" class="text-success fw-bold">0.00 ج.م</span></div>
                                </div>

                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label">المبلغ المطلوب تحصيله</label>
                                        <div class="input-group">
                                            <input type="number" step="0.01" min="0.01" name="amount" id="modal_amount" class="form-control" required>
                                            <span class="input-group-text">ج.م</span>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label">طريقة الدفع</label>
                                        <select name="payment_method" class="form-select" required>
                                            <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-12">
                                        <label class="form-label">رقم الإيصال / المرجع</label>
                                        <input type="text" name="receipt_number" class="form-control" placeholder="اختياري">
                                    </div>

                                    <div class="col-12">
                                        <label class="form-label">ملاحظات</label>
                                        <textarea name="notes" class="form-control" rows="2" placeholder="ملاحظات على عملية التحصيل"></textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-light" data-bs-dismiss="modal">إلغاء</button>
                                <button type="submit" class="btn btn-success">
                                    <i class="ti ti-check me-1"></i>حفظ التحصيل
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        @endcan
    </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 () {
    function currentDateTimeForServer() {
        var now = new Date();
        var pad = function (value) { return String(value).padStart(2, '0'); };

        return now.getFullYear() + '-'
            + pad(now.getMonth() + 1) + '-'
            + pad(now.getDate()) + ' '
            + pad(now.getHours()) + ':'
            + pad(now.getMinutes()) + ':'
            + pad(now.getSeconds());
    }


    var table = $('#vehicles-table').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        ajax: {
            url: '{{ route('admin.vehicles.data') }}',
            data: function (d) {
                d.owner_type = $('#filterOwnerType').val();
                d.plate_number = $('#filterPlateNumber').val();
                d.branch = $('#filterBranch').val();
                d.permit_status = $('#filterPermitStatus').val();

                // New filters
                d.owner_search = $('#filterOwnerSearch').val();
                d.start_from = $('#filterStartFrom').val();
                d.start_to = $('#filterStartTo').val();
                d.end_from = $('#filterEndFrom').val();
                d.end_to = $('#filterEndTo').val();
                d.remaining_min = $('#filterRemainingMin').val();
                d.remaining_max = $('#filterRemainingMax').val();
            }
        },
        language: { url: 'https://cdn.datatables.net/plug-ins/1.13.8/i18n/ar.json' },
        order: [[0, 'desc']],
        pageLength: 25,
        columnDefs: [
            {
                targets: '_all',
                createdCell: function (td, cellData, rowData, row, col) {
                    if (rowData.row_color_class) {
                        $(td).closest('tr').addClass(rowData.row_color_class);
                    }
                }
            }
        ],
        columns: [
            { data: 'id', name: 'id' },
            { data: 'branch_name', name: 'branch.name', defaultContent: '-' },
            { data: 'plate_number', name: 'plate_number' },
            { data: 'trailer_number_label', name: 'latest_trailer_number', orderable: false, searchable: false },
            { data: 'start_date_label', name: 'latest_permit_start_date', orderable: false, searchable: false, className: 'vehicle-period-cell' },
            { data: 'end_date_label', name: 'latest_permit_end_date', orderable: false, searchable: false, className: 'vehicle-period-cell' },
            { data: 'owner_name', name: 'company.name', orderable: false, searchable: false },
            { data: 'owner_phone', name: 'owner_phone', orderable: false, searchable: false },
            { data: 'permits_total_amount_label', name: 'permits_total_amount', orderable: false, searchable: false },
            { data: 'permits_paid_amount_label', name: 'permits_paid_amount', orderable: false, searchable: false },
            { data: 'permits_remaining_amount_label', name: 'permits_remaining_amount', orderable: false, searchable: false },
            { data: 'actions', name: 'actions', orderable: false, searchable: false }
        ]
    });

    // Debounce helper to avoid excessive AJAX requests while typing
    function debounce(fn, wait) {
        var timeout = null;
        return function () {
            var context = this, args = arguments;
            clearTimeout(timeout);
            timeout = setTimeout(function () {
                fn.apply(context, args);
            }, wait);
        };
    }

    var debouncedDraw = debounce(function () { table.draw(false); }, 450);

    // Wire inputs: text inputs use input event with debounce, selects and date/number use change
    $('#filterPlateNumber, #filterBranch, #filterOwnerSearch').on('input', debouncedDraw);
    $('#filterOwnerType, #filterPermitStatus').on('change', debouncedDraw);
    $('#filterStartFrom, #filterStartTo, #filterEndFrom, #filterEndTo, #filterRemainingMin, #filterRemainingMax').on('change', debouncedDraw);

    // Apply / Reset buttons
    $('#applyFilters').on('click', function () {
        table.draw();
    });

    $('#resetFilters').on('click', function () {
        // Reset the form, then explicitly clear any non-standard controls and redraw
        $('#vehiclesFiltersForm')[0].reset();
        // For inputs that may not be cleared by reset in some browsers, ensure clearing
        $('#filterOwnerSearch').val('');
        $('#filterStartFrom, #filterStartTo, #filterEndFrom, #filterEndTo').val('');
        $('#filterRemainingMin, #filterRemainingMax').val('');
        table.search('').columns().search('').draw();
    });

    // Submit on Enter inside any input to make searching easier
    $('#vehiclesFiltersForm').on('keydown', 'input', function (e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            table.draw();
        }
    });

    @can('collect payments')
    $(document).on('click', '.js-open-remaining-modal', function () {
        var amount = parseFloat($(this).data('amount') || 0).toFixed(2);
        var totalRemaining = parseFloat($(this).data('total-remaining') || amount).toFixed(2);

        $('#modal_reference_id').val($(this).data('permit-id'));
        $('#modal_vehicle_label').text($(this).data('vehicle') || '-');
        $('#modal_owner_label').text($(this).data('owner') || '-');
        $('#modal_total_remaining_label').text(totalRemaining + ' ج.م');
        $('#modal_collectable_label').text(amount + ' ج.م');
        $('#modal_amount').val(amount).attr('max', amount);
        $('#modal_transaction_date').val(currentDateTimeForServer());

        var modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('remainingPaymentModal'));
        modal.show();
    });
    @endcan
});
</script>
@endsection