@extends('admin.layout')
<link rel="stylesheet" href="{{ asset('assets/css/table_filter.css') }}">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">
<style>
    .dt-search {
        display: none;
    }
</style>
@section('content')

<div class="d-flex align-items-center justify-content-between mb-3">
    <h5 class="fw-bold mb-0">Customer List</h5>
</div>

<div class="card p-2">
    <div class="row mb-3 align-items-center">
        <div class="col-auto mb-3">
            <select id="pageLength" class="form-select">
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
                <option value="All">All</option>
            </select>
        </div>
        <div class="col-lg-7 col-12 mb-3">
            <div class="search-cluster w-100">
                <div class="search-field">
                    <i class="ti tabler-search"></i>
                    <input type="text" id="sheetSearch" placeholder="Search customer..." class="w-100">
                </div>
            </div>
        </div>
        <div class="col-lg-1 col-12 mb-3">
            <button class="btn btn-secondary w-100" id="resetBtn" type="reset">
                <span>Reset</span>
            </button>
        </div>
        <div class="col-lg-1 col-12 mb-3">
            <button id="exportBtn" class="btn btn-label-secondary w-100">
                Export
            </button>
        </div>
    </div>

    <div class="table-responsive pt-0 pb-2">
        <table id="patientsTable" class="table table-bordered w-100">
            <thead>
                <tr>
                    <th>S.No</th>
                    <th>Name</th>
                    <th>Vehicle Number</th>
                    <th>Vehicle Model</th>
                    <th>Expenditure</th>
                    <th>Total Amount</th>
                    <th>Total Due Amount</th>
                    <th>Paid Amount</th>
                    <th>Pay Dues</th>
                    <th>Pending Due Amount</th>
                    <th>Call</th>
                    <th>Action</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

{{-- PAYMENT MODAL --}}
<div class="modal fade" id="payModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form id="paymentForm" action="{{ route('payment_store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="vehicle_id" id="modal_vehicle_id">
            <input type="hidden" name="customer_id" id="modal_customer_id">

            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Record Payment</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Pending Due Balance</label>
                        <input type="text" id="modal_display_balance" class="form-control bg-light" readonly>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Payment Date <span class="text-danger">*</span></label>
                        <input type="date" name="payment_date" class="form-control" value="{{ date('Y-m-d') }}" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Amount <span class="text-danger">*</span></label>
                        <input type="number" step="0.01" name="amount" id="modal_amount" class="form-control" required placeholder="Enter amount">
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Receipt Upload (Optional)</label>
                        <input type="file" name="receipt" class="form-control" accept="image/*,.pdf">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                   <button type="submit" id="savePaymentBtn" class="btn btn-success">
    Submit Payment
</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>

<script>
    $(function() {
        let table = $('#patientsTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('admin.customer_list_data') }}",
                type: "GET",
                error: function(xhr) {
                    console.log('DataTable AJAX Error');
                    console.log('Status:', xhr.status);
                    console.log('Response:', xhr.responseText);
                }
            },
            searching: true,
            lengthChange: false,
            info: true,
            buttons: [{
                extend: 'excelHtml5',
                title: 'Customer_List',
                text: 'Export',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
                }
            }],
            columns: [
                { data: 'DT_RowIndex', orderable: false, searchable: false },
                { data: 'name', name: 'name' },
                { data: 'vehicle_number', name: 'vehicle_number' },
                { data: 'vehicle_model', name: 'vehicle_model' },
                { data: 'expenditure', name: 'expenditure', orderable: false, searchable: false },
                { data: 'total_amount', name: 'total_amount' },
                { data: 'total_due_amount', name: 'total_due_amount' },
                { data: 'paid_amount', name: 'paid_amount' },
                { data: 'dues', name: 'dues', orderable: false, searchable: false },
                { data: 'pending_due_amount', name: 'pending_due_amount' },
                { data: 'call', name: 'call', orderable: false, searchable: false },
                { data: 'action', name: 'action', orderable: false, searchable: false }
            ]
        });

        // Export Button
        $('#exportBtn').click(function() {
            table.button('.buttons-excel').trigger();
        });

        // Search Input
        $('#sheetSearch').on('keyup', function() {
            table.search($(this).val()).draw();
        });

        // Page Length
        $('#pageLength').change(function() {
            let value = $(this).val();
            table.page.len(value === 'All' ? -1 : parseInt(value)).draw();
        });

        // Reset Filter
        $('#resetBtn').click(function() {
            $('#sheetSearch').val('');
            $('#pageLength').val('10');
            table.search('').page.len(10).draw();
        });

        // Populate Payment Modal Dues Input
        $(document).on('click', '.payBtn', function() {
            let vehicleId = $(this).data('vehicle');
            let customerId = $(this).data('customer');
            let remaining = $(this).data('remaining');

            $('#modal_vehicle_id').val(vehicleId);
            $('#modal_customer_id').val(customerId);
            $('#modal_display_balance').val('₹' + remaining);
            $('#modal_amount').val(remaining);
        });

        // Submit Loading Animation
        $('#paymentForm').on('submit', function(e) {

            let form = this;
            let button = $('#savePaymentBtn');

            // Prevent double submission
            if (button.data('processing') === true) {
                e.preventDefault();
                return false;
            }

            // Check HTML5 validation first
            if (!form.checkValidity()) {
                e.preventDefault();
                form.reportValidity();
                return false;
            }

            // Mark as processing
            button.data('processing', true);

            // Disable button
            button.prop('disabled', true);

            // Show processing
            button.html(
                '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span> Processing...'
            );

            // IMPORTANT:
            // Do NOT use e.preventDefault() here.
            // Form will submit normally to payment_store.
        });
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        /* ============================================================
           ELEMENTS
        ============================================================ */
        const amountInput =
            document.getElementById('payment_amount');
        const remainingInput =
            document.getElementById('remaining_amount');
        const remainingText =
            document.getElementById('remainingAmountText');
        const amountError =
            document.getElementById('amountError');
        const paymentForm =
            document.getElementById('paymentForm');
        const savePaymentBtn =
            document.getElementById('savePaymentBtn');
        const modalElement =
            document.getElementById('payModal');
        /* ============================================================
           MAXIMUM PAYMENT
        ============================================================ */
        const MAX_PAYMENT = 50000;
        /* ============================================================
           FLAG
           Prevent multiple modal reopen
        ============================================================ */
        let reopeningModal = false;
        /* ============================================================
           SHOW MAXIMUM PAYMENT ERROR
        ============================================================ */
        function showMaximumPaymentError() {
            // Prevent duplicate calls
            if (reopeningModal) {
                return;
            }
            reopeningModal = true;
            // Clear amount
            amountInput.value = '';
            // Disable save
            savePaymentBtn.disabled = true;
            // Get current Bootstrap modal
            let modalInstance =
                bootstrap.Modal.getInstance(modalElement);
            /* ========================================================
               MODAL EXISTS
            ======================================================== */
            if (modalInstance) {
                /*
                 * Wait until modal completely closes
                 */
                modalElement.addEventListener(
                    'hidden.bs.modal',
                    function reopenPaymentModal() {
                        /*
                         * Remove listener
                         */
                        modalElement.removeEventListener(
                            'hidden.bs.modal',
                            reopenPaymentModal
                        );
                        /*
                         * Reopen modal
                         */
                        const newModal =
                            new bootstrap.Modal(modalElement);
                        newModal.show();
                        /*
                         * Show RED error message
                         */
                        amountError.innerText =
                            'Maximum payment allowed is ₹50,000 per transaction.';
                        amountError.style.display =
                            'block';
                        /*
                         * Keep save button disabled
                         * until user enters valid amount
                         */
                        savePaymentBtn.disabled = true;
                        /*
                         * Reset flag
                         */
                        reopeningModal = false;
                    }, {
                        once: true
                    }
                );
                /*
                 * Close modal
                 */
                modalInstance.hide();
            } else {
                /*
                 * Modal instance not found
                 * Open directly
                 */
                const newModal =
                    new bootstrap.Modal(modalElement);
                newModal.show();
                /*
                 * Show error
                 */
                amountError.innerText =
                    'Maximum payment allowed is ₹50,000 per transaction.';
                amountError.style.display =
                    'block';
                savePaymentBtn.disabled = true;
                reopeningModal = false;
            }
        }
        /* ============================================================
           AMOUNT INPUT
        ============================================================ */
        amountInput.addEventListener('input', function() {
            let amount =
                parseFloat(this.value) || 0;
            let remaining =
                parseFloat(remainingInput.value) || 0;
            /* ========================================================
               CHECK ₹50,000 LIMIT
            ======================================================== */
            if (amount > MAX_PAYMENT) {
                showMaximumPaymentError();
                return;
            }
            /* ========================================================
               CHECK REMAINING AMOUNT
            ======================================================== */
            if (amount > remaining) {
                amountError.innerText =
                    'Payment cannot exceed remaining amount ₹' +
                    remaining.toFixed(2);
                amountError.style.display =
                    'block';
                savePaymentBtn.disabled = true;
                return;
            }
            /* ========================================================
               CHECK MINIMUM AMOUNT
            ======================================================== */
            if (amount <= 0) {
                amountError.innerText =
                    'Please enter a valid payment amount.';
                amountError.style.display =
                    'block';
                savePaymentBtn.disabled = true;
                return;
            }
            /* ========================================================
               VALID AMOUNT
            ======================================================== */
            amountError.innerText = '';
            amountError.style.display =
                'none';
            savePaymentBtn.disabled =
                false;
        });
        /* ============================================================
           FORM SUBMIT VALIDATION
        ============================================================ */
        paymentForm.addEventListener('submit', function(e) {
            let amount =
                parseFloat(amountInput.value) || 0;
            let remaining =
                parseFloat(remainingInput.value) || 0;
            /* ========================================================
               ₹50,000 LIMIT
            ======================================================== */
            if (amount > MAX_PAYMENT) {
                e.preventDefault();
                showMaximumPaymentError();
                return false;
            }
            /* ========================================================
               REMAINING AMOUNT
            ======================================================== */
            if (amount > remaining) {
                e.preventDefault();
                amountError.innerText =
                    'Payment cannot exceed remaining amount ₹' +
                    remaining.toFixed(2);
                amountError.style.display =
                    'block';
                amountInput.focus();
                return false;
            }
            /* ========================================================
               INVALID AMOUNT
            ======================================================== */
            if (amount <= 0) {
                e.preventDefault();
                amountError.innerText =
                    'Please enter a valid payment amount.';
                amountError.style.display =
                    'block';
                amountInput.focus();
                return false;
            }
        });
        /* ============================================================
           OPEN PAYMENT MODAL
        ============================================================ */
        window.openPaymentModal = function(
            vehicleId,
            customerId,
            remainingAmount
        ) {
            /*
             * Vehicle ID
             */
            document.getElementById('vehicle_id').value =
                vehicleId;
            /*
             * Customer ID
             */
            document.getElementById('customer_id').value =
                customerId;
            /*
             * Remaining amount
             */
            let remaining =
                parseFloat(remainingAmount) || 0;
            document.getElementById('remaining_amount').value =
                remaining;
            /*
             * Display remaining amount
             */
            remainingText.innerText =
                remaining.toFixed(2);
            /*
             * Clear amount
             */
            amountInput.value = '';
            /*
             * Clear previous error
             */
            amountError.innerText = '';
            amountError.style.display =
                'none';
            /*
             * Enable save
             */
            savePaymentBtn.disabled =
                false;
            /*
             * Dynamic max
             *
             * Remaining 30,000 -> max 30,000
             * Remaining 50,000 -> max 50,000
             * Remaining 80,000 -> max 50,000
             */
            let maxAllowed =
                Math.min(
                    remaining,
                    MAX_PAYMENT
                );
            amountInput.max =
                maxAllowed;
        };
    });
</script>
<script>
    $(document).ready(function () {

        let deleteId = null;

        // =====================================================
        // CLICK DELETE ICON
        // =====================================================

        $(document).on('click', '.deleteCustomer', function () {

            deleteId = $(this).data('id');

            console.log('Delete Customer ID:', deleteId);

            // Set delete form action
            $('#deleteForm').attr(
                'action',
                "{{ url('admin/delete_customer') }}/" + deleteId
            );

        });


        // =====================================================
        // CONFIRM DELETE
        // =====================================================

        $('#deleteForm').on('submit', function (e) {

            e.preventDefault();

            if (!deleteId) {

                alert('Vehicle ID not found.');

                return false;
            }

            let form = this;

            let button = $('#confirmDelete');

            // Disable button
            button.prop('disabled', true);

            // Loading
            button.html(`
                <span class="spinner-border spinner-border-sm me-1"
                      role="status"></span>
                Deleting...
            `);

            // Submit normally
            form.submit();

        });

    });
</script>
@endsection