@extends('layouts.default')

@section('content')

<link href="css/plugins/dataTables/datatables.min.css" rel="stylesheet">

<style>
    /* ID Card Image Card */
    .id-card-image-card {
        border: 1px solid #dee2e6;
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    }
    .id-card-image-label {
        background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
        color: #fff;
        padding: 8px 14px;
        font-size: 0.80rem;
        font-weight: 700;
        letter-spacing: 0.6px;
        text-transform: uppercase;
    }
    .id-card-image-body {
        padding: 12px;
    }
    .id-card-preview-wrapper {
        position: relative;
        display: inline-block;
        margin-bottom: 5px;
    }
    .id-card-thumb {
        width: 180px;
        height: 110px;
        object-fit: cover;
        border: 2px solid #dee2e6;
        border-radius: 8px;
        cursor: pointer;
    }
    .remove-img-btn {
        position: absolute;
        top: -8px;
        right: -8px;
    }
    .id-card-input {
        font-size: 0.85rem;
    }
</style>

<div class="modal fade" id="CustomerInfo" tabindex="-1" aria-labelledby="CustomerInfoLabel" aria-hidden="true">
    <form id="customer" method="POST" action="{{ route('customers.store') }}" enctype="multipart/form-data">
        @csrf
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header d-flex justify-content-between align-items-center">
                    <h5 class="modal-title mb-0" id="CustomerInfoLabel">Customer Information</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <div id="success-message" class="alert alert-success" style="display: none;">
                        <span></span>
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-label">Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="customer_name" name="name" maxlength="150">
                        <div class="invalid-feedback" id="error-name" style="display: none;">Name is required</div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Customer Type <span class="text-danger">*</span></label>
                                <select class="form-select" id="customer_type" name="type">
                                    <option value="customer" selected>Customer</option>
                                    <option value="shop">Shop</option>
                                </select>
                                <div class="invalid-feedback" id="error-type" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Contact No</label>
                                <input type="text" class="form-control" id="customer_contact_number" name="contact_number" maxlength="25">
                                <div class="invalid-feedback" id="error-contact_number" style="display: none;"></div>
                            </div>
                        </div>
                         <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">ID Card</label>
                                <input type="text" class="form-control" id="customer_id_card" name="id_card" maxlength="25">
                                <div class="invalid-feedback" id="error-id_card" style="display: none;"></div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-3" id="add-id-card-images-container" style="display: none;">
                        <div class="col-md-6 mb-3">
                            <div class="id-card-image-card">
                                <div class="id-card-image-label">
                                    <i class="fa fa-id-card"></i>&nbsp; ID Card Front
                                </div>
                                <div class="id-card-image-body">
                                    <div id="add-front-preview-container" class="id-card-preview-wrapper" style="display: none;">
                                        <img src="" id="add-front-thumbnail" class="id-card-thumb" alt="Front">
                                        <button type="button" class="btn btn-xs btn-danger remove-img-btn" data-target="add-front"><i class="fa fa-times"></i></button>
                                    </div>
                                    <input type="file" class="form-control id-card-input mt-2" id="customer_id_card_front" name="id_card_front" accept="image/*">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="id-card-image-card">
                                <div class="id-card-image-label">
                                    <i class="fa fa-id-card"></i>&nbsp; ID Card Back
                                </div>
                                <div class="id-card-image-body">
                                    <div id="add-back-preview-container" class="id-card-preview-wrapper" style="display: none;">
                                        <img src="" id="add-back-thumbnail" class="id-card-thumb" alt="Back">
                                        <button type="button" class="btn btn-xs btn-danger remove-img-btn" data-target="add-back"><i class="fa fa-times"></i></button>
                                    </div>
                                    <input type="file" class="form-control id-card-input mt-2" id="customer_id_card_back" name="id_card_back" accept="image/*">
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="form-group mb-3">
                        <label class="form-label">Address</label>
                        <textarea class="form-control" id="customer_address" name="address" rows="3"></textarea>
                        <div class="invalid-feedback" id="error-address" style="display: none;"></div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Op. Balance</label>
                                <input type="number" step="0.01" class="form-control" id="customer_op_balance" name="op_balance" value="0.00">
                                <div class="invalid-feedback" id="error-op_balance" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Op. Balance Date</label>
                                <input type="date" class="form-control" id="customer_op_balance_date" name="op_balance_date">
                                <div class="invalid-feedback" id="error-op_balance_date" style="display: none;"></div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-label">Status <span class="text-danger">*</span></label>
                        <select class="form-select" id="customer_status" name="status">
                            <option value="Active" selected>Active</option>
                            <option value="Inactive">Inactive</option>
                        </select>
                        <div class="invalid-feedback" id="error-status" style="display: none;"></div>
                    </div>

                    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="saveCustomer">
                        <i class="fa fa-check"></i>&nbsp;Save Changes
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
{{-- update customer modal --}}
<div class="modal fade" id="EditCustomerInfo" tabindex="-1" aria-labelledby="EditCustomerInfoLabel" aria-hidden="true">
    <form id="edit-customer-form" enctype="multipart/form-data">
        @csrf
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header d-flex justify-content-between align-items-center">
                    <h5 class="modal-title mb-0" id="EditCustomerInfoLabel">Edit Customer Information</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="edit-success-message" class="alert alert-success" style="display: none;">
                        <span></span>
                    </div>
                    <div class="form-group mb-3">
                        <label class="form-label">Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="edit_customer_name" name="name" maxlength="150">
                        <div class="invalid-feedback" id="edit-error-name" style="display: none;">
                            Name is required
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Customer Type <span class="text-danger">*</span></label>
                                <select class="form-select" id="edit_customer_type" name="type">
                                    <option value="customer">Customer</option>
                                    <option value="shop">Shop</option>
                                </select>
                                <div class="invalid-feedback" id="edit-error-type" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Contact No</label>
                                <input type="text" class="form-control" id="edit_customer_contact_number" name="contact_number" maxlength="25">
                                <div class="invalid-feedback" id="edit-error-contact_number" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">ID Card</label>
                                <input type="text" class="form-control" id="edit_customer_id_card" name="id_card" maxlength="25">
                                <div class="invalid-feedback" id="edit-error-id_card" style="display: none;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-3" id="edit-id-card-images-container" style="display: none;">
                        <div class="col-md-6 mb-3">
                            <div class="id-card-image-card">
                                <div class="id-card-image-label">
                                    <i class="fa fa-id-card"></i>&nbsp; ID Card Front
                                </div>
                                <div class="id-card-image-body">
                                    <div id="edit-front-preview-container" class="id-card-preview-wrapper" style="display: none;">
                                        <img src="" id="edit-front-thumbnail" class="id-card-thumb" alt="Front">
                                        <button type="button" class="btn btn-xs btn-danger remove-img-btn" data-target="edit-front"><i class="fa fa-times"></i></button>
                                    </div>
                                    <input type="file" class="form-control id-card-input mt-2" id="edit_customer_id_card_front" name="id_card_front" accept="image/*">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="id-card-image-card">
                                <div class="id-card-image-label">
                                    <i class="fa fa-id-card"></i>&nbsp; ID Card Back
                                </div>
                                <div class="id-card-image-body">
                                    <div id="edit-back-preview-container" class="id-card-preview-wrapper" style="display: none;">
                                        <img src="" id="edit-back-thumbnail" class="id-card-thumb" alt="Back">
                                        <button type="button" class="btn btn-xs btn-danger remove-img-btn" data-target="edit-back"><i class="fa fa-times"></i></button>
                                    </div>
                                    <input type="file" class="form-control id-card-input mt-2" id="edit_customer_id_card_back" name="id_card_back" accept="image/*">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-label">Address</label>
                        <textarea class="form-control" id="edit_customer_address" name="address" rows="3"></textarea>
                        <div class="invalid-feedback" id="edit-error-address" style="display: none;"></div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Op. Balance</label>
                                <input type="number" step="0.01" class="form-control" id="edit_customer_op_balance" name="op_balance">
                                <div class="invalid-feedback" id="edit-error-op_balance" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Op. Balance Date</label>
                                <input type="date" class="form-control" id="edit_customer_op_balance_date" name="op_balance_date">
                                <div class="invalid-feedback" id="edit-error-op_balance_date" style="display: none;"></div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-label">Status <span class="text-danger">*</span></label>
                        <select class="form-select" id="edit_customer_status" name="status">
                            <option value="Active">Active</option>
                            <option value="Inactive">Inactive</option>
                        </select>
                        <div class="invalid-feedback" id="edit-error-status" style="display: none;"></div>
                    </div>

                   
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="updateCustomer">
                        <i class="fa fa-check"></i>&nbsp;Update Customer
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>


<div class="card-section-header">
    <div class="d-flex justify-content-between align-items-start w-100">
        <div>
            <h2 class="card-section-title">Customers</h2>
            <p class="card-section-subtitle">Manage customers and vendors information.</p>
        </div>
        <button class="btn btn-primary" type="button" id="addNewCustomer">
            <i class="fa fa-plus"></i><span class="btn-text">&nbsp;New Customer</span>
        </button>
    </div>
</div>
<div class="wrapper wrapper-content">

    <!-- Desktop DataTable View -->
    <div class="row d-none d-lg-block">
        <div class="col-lg-12">
            <table class="table table-striped table-bordered table-hover" style="width: 100%;" id="customers-table">
                <thead>
                    <tr>
                        <th>Sr. NO</th>
                        <th>Name</th>
                        <th>Contact No</th>
                        <th>Id Card</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Mobile Card View -->
    <div class="mobile-customers-container d-lg-none">
        <div class="mb-3">
            <label class="form-label fw-bold">Search:</label>
            <input type="text" class="form-control" id="mobile-search-input" placeholder="Search customers...">
        </div>
        <div id="mobile-customers-cards" class="mobile-customers-list">
            <!-- Cards will be populated here -->
        </div>
        <div id="mobile-customers-pagination" class="mt-3 d-flex justify-content-center">
            <!-- Pagination will be populated here -->
        </div>
        <div id="mobile-customers-loading" class="text-center py-4" style="display: none;">
            <i class="fa fa-spinner fa-spin fa-3x"></i>
        </div>
    </div>
</div>
@push('scripts')
<script>
    $("#addNewCustomer").click(function(e){
        e.preventDefault();
        ModalHelper.open('CustomerInfo');
    });
    
    // Function to handle Enter key to move to next field (like Tab)
    function setupEnterToTab() {
        // Handle Enter key in both modals
        $(document).on('keydown', '#CustomerInfo input[type="text"], #CustomerInfo textarea, #CustomerInfo input[type="number"], #CustomerInfo input[type="date"], #EditCustomerInfo input[type="text"], #EditCustomerInfo textarea, #EditCustomerInfo input[type="number"], #EditCustomerInfo input[type="date"]', function(e) {
            // Only handle Enter key, not Shift+Enter (which should create new line in textarea)
            if ((e.key === 'Enter' || e.keyCode === 13) && !e.shiftKey) {
                e.preventDefault();
                
                // Get all focusable elements in the current modal (excluding hidden, disabled, and buttons)
                let modal = $(this).closest('.modal');
                let focusableElements = modal.find('input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([disabled]), textarea:not([disabled]), select:not([disabled])');
                
                // Find current element index
                let currentIndex = focusableElements.index(this);
                
                // Find next focusable element
                let nextIndex = currentIndex + 1;
                
                // Move to next element if available
                if (nextIndex < focusableElements.length) {
                    let nextElement = focusableElements.eq(nextIndex);
                    
                    // Focus next element
                    if (nextElement.length) {
                        // For regular inputs/selects, just focus
                        if (nextElement.is('input') || (!nextElement.hasClass('select2-hidden-accessible'))) {
                            nextElement.focus();
                            // Select text if it's an input field
                            if (nextElement.is('input[type="text"], input[type="number"]')) {
                                nextElement.select();
                            }
                        } else if (nextElement.is('select') && nextElement.hasClass('select2-hidden-accessible')) {
                            // For Select2, focus the container
                            nextElement.next('.select2-container').find('.select2-selection').focus();
                        } else {
                            nextElement.focus();
                        }
                    }
                }
            }
        });
    }

    $(document).ready(function() {
        // Setup Enter to Tab functionality
        setupEnterToTab();
        
        // Ensure the Add Customer form is always fresh when the modal opens
        $('#CustomerInfo').on('show.bs.modal', function () {
            $('#customer')[0].reset();
            $('#customer_status').val('Active');
            $('#customer_type').val('customer');
            $('#customer_op_balance').val('0.00');
            $('#add-id-card-images-container').hide(); // Hide ID card images container
            $('#add-front-preview-container, #add-back-preview-container').hide(); // Hide previews
            $('.invalid-feedback').hide();
            $('.form-control, .form-select').removeClass('is-invalid');
        });

        // Reset Edit Customer form when modal is hidden
        $('#EditCustomerInfo').on('hidden.bs.modal', function () {
            $('#edit-customer-form')[0].reset();
            $('#edit-id-card-images-container').hide(); // Hide ID card images container
            $('#edit-front-preview-container, #edit-back-preview-container').hide(); // Hide previews
            $('.invalid-feedback').hide();
            $('.form-control, .form-select').removeClass('is-invalid');
        });

        // Define the save button element
        const saveButton = $('#saveCustomer');

        // Function to reset the button state
        function resetButtonState(button, text, disabled = false) {
            button.html(text).prop('disabled', disabled);
        }

        saveButton.on('click', function(e) {
            e.preventDefault();

            let formData = new FormData();
            formData.append('name', $('#customer_name').val());
            formData.append('type', $('#customer_type').val());
            formData.append('id_card', $('#customer_id_card').val());
            formData.append('contact_number', $('#customer_contact_number').val());
            formData.append('address', $('#customer_address').val());
            formData.append('op_balance', $('#customer_op_balance').val());
            formData.append('op_balance_date', $('#customer_op_balance_date').val());
            formData.append('status', $('#customer_status').val());
            
            // Append files if selected
            let frontFile = document.getElementById('customer_id_card_front').files[0];
            let backFile = document.getElementById('customer_id_card_back').files[0];
            if (frontFile) formData.append('id_card_front', frontFile);
            if (backFile) formData.append('id_card_back', backFile);

            // Change the button text to "Processing..."
            resetButtonState(saveButton,'<i class="fa fa-spinner fa-spin"></i> Processing...', true);

            // Clear previous validation messages
            $('.invalid-feedback').hide();
            $('.form-control, .form-select').removeClass('is-invalid');

            $.ajax({
                url: "{{ route('customers.store') }}",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    if (response.success) {
                        // Clear input fields
                        document.getElementById('customer').reset();
                        $('#customer_status').val('Active');
                        $('#customer_type').val('customer');
                        $('#customer_op_balance').val('0.00');
                        $('#add-front-preview-container, #add-back-preview-container').hide();

                        // Show the success message
                        $('#success-message span').text('Customer added successfully!');
                        $('#success-message').fadeIn();

                        // Refresh the DataTable
                        window.customersTable.ajax.reload(null, false);
                        
                        // Refresh mobile view if on mobile
                        if (window.innerWidth < 992 && typeof window.customersMobileManager !== 'undefined') {
                            window.customersMobileManager.refresh();
                        }

                        // Optionally hide the message after a few seconds
                        setTimeout(function() {
                            $('#success-message').fadeOut();
                        }, 3000);
                    }

                    // Reset button to "Save Changes"
                    resetButtonState(saveButton,'<i class="fa fa-check"></i> Save Changes');
                },
                complete: function() {
                    // Always reset button state when request completes
                    if (saveButton && saveButton.length) {
                        resetButtonState(saveButton,'<i class="fa fa-check"></i> Save Changes');
                    } else {
                        $('#saveCustomer').html('<i class="fa fa-check"></i>&nbsp;Save Changes').prop('disabled', false);
                    }
                },
                error: function(errorResponse) {
                    // Reset button to "Save Changes"
                    resetButtonState(saveButton,'<i class="fa fa-check"></i> Save Changes');

                    if (errorResponse.status === 422) { // Laravel validation error
                        let errors = errorResponse.responseJSON.errors;
                        Object.keys(errors).forEach(function(key) {
                            let fieldId = 'customer_' + key;
                            $('#' + fieldId).addClass('is-invalid');
                            $('#error-' + key).text(errors[key][0]).show();
                        });
                    } else {
                        Swal.fire({
                            title: 'Error!',
                            text: 'An error occurred. Please try again.',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                }
            });
        });

        $(document).on('click', '.edit-button', function() {

            let customerId = $(this).data('id');

            // Fetch customer details from the database
            $.ajax({
                url: "{{ route('customers.show', ':id') }}".replace(':id', customerId),
                type: 'GET',
                success: function(data) {
                    // Populate the edit form with the fetched data
                    $('#edit_customer_name').val(data.name || '');
                    $('#edit_customer_type').val(data.type || 'customer');
                    $('#edit_customer_id_card').val(data.id_card || '');
                    $('#edit_customer_contact_number').val(data.contact_number || '');
                    $('#edit_customer_address').val(data.address || '');
                    $('#edit_customer_op_balance').val(data.op_balance || '0.00');
                    
                    // Format date for HTML date input (YYYY-MM-DD)
                    let opBalanceDate = '';
                    if (data.op_balance_date) {
                        // If date is already in YYYY-MM-DD format, use it directly
                        // Otherwise, parse and format it
                        if (data.op_balance_date.includes('T')) {
                            // Handle ISO datetime format
                            opBalanceDate = data.op_balance_date.split('T')[0];
                        } else if (data.op_balance_date.match(/^\d{4}-\d{2}-\d{2}$/)) {
                            // Already in correct format
                            opBalanceDate = data.op_balance_date;
                        } else {
                            // Try to parse and format
                            const date = new Date(data.op_balance_date);
                            if (!isNaN(date.getTime())) {
                                opBalanceDate = date.toISOString().split('T')[0];
                            }
                        }
                    }
                    $('#edit_customer_op_balance_date').val(opBalanceDate);
                    
                    $('#edit_customer_status').val(data.status || 'Active');

                    // Show/hide ID card images container based on whether customer has ID card
                    $('#edit_customer_id_card').trigger('change');

                    // Display existing ID card images if available
                    if (data.id_card_front_url) {
                        $('#edit-front-thumbnail').attr('src', data.id_card_front_url);
                        $('#edit-front-preview-container').show();
                    } else {
                        $('#edit-front-preview-container').hide();
                    }
                    
                    if (data.id_card_back_url) {
                        $('#edit-back-thumbnail').attr('src', data.id_card_back_url);
                        $('#edit-back-preview-container').show();
                    } else {
                        $('#edit-back-preview-container').hide();
                    }

                    // Store customer ID in a data attribute for later
                    $('#edit-customer-form').data('customer-id', customerId);

                    // Open edit modal
                    ModalHelper.open('EditCustomerInfo');
                },
                error: function(xhr) {
                    Swal.fire({
                        title: 'Error!',
                        text: xhr.status === 404 ? 'Customer not found.' : 'Could not fetch customer details.',
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            });
        });   
        
        $(document).on('click', '#updateCustomer', function () {
            let customerId = $('#edit-customer-form').data('customer-id');
            let formData = new FormData();
            formData.append('_method', 'PUT');
            formData.append('name', $('#edit_customer_name').val());
            formData.append('type', $('#edit_customer_type').val());
            formData.append('id_card', $('#edit_customer_id_card').val());
            formData.append('contact_number', $('#edit_customer_contact_number').val());
            formData.append('address', $('#edit_customer_address').val());
            formData.append('op_balance', $('#edit_customer_op_balance').val());
            formData.append('op_balance_date', $('#edit_customer_op_balance_date').val());
            formData.append('status', $('#edit_customer_status').val());
            
            // Append files if selected
            let frontFile = document.getElementById('edit_customer_id_card_front').files[0];
            let backFile = document.getElementById('edit_customer_id_card_back').files[0];
            if (frontFile) formData.append('id_card_front', frontFile);
            if (backFile) formData.append('id_card_back', backFile);

            // Get the update button reference
            let updateButton = $('#updateCustomer');

            // Set the button to "Processing..." state
            resetButtonState(updateButton, '<i class="fa fa-spinner fa-spin"></i> Processing...', true);

            // Clear validation messages
            $('.form-control, .form-select').removeClass('is-invalid');
            $('.invalid-feedback').hide();

            $.ajax({
                url: "{{ route('customers.update', ':id') }}".replace(':id', customerId),
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function (response) {
                    if (response.success) {
                        // Close the modal
                        $('#EditCustomerInfo').modal('hide');

                        // Refresh the DataTable
                        window.customersTable.ajax.reload(null, false);
                        
                        // Refresh mobile view if on mobile
                        if (window.innerWidth < 992 && typeof window.customersMobileManager !== 'undefined') {
                            window.customersMobileManager.refresh();
                        }

                        // Show success alert
                        Swal.fire('Success', 'Customer updated successfully!', 'success');
                    }

                    // Reset the button back to "Update Customer"
                    resetButtonState(updateButton, '<i class="fa fa-check"></i> Update Customer');
                },
                error: function (errorResponse) {
                    // Reset the button back to "Update Customer"
                    resetButtonState(updateButton, '<i class="fa fa-check"></i> Update Customer');

                    if (errorResponse.status === 422) {
                        let errors = errorResponse.responseJSON.errors;
                        Object.keys(errors).forEach(function(key) {
                            $('#edit_customer_' + key).addClass('is-invalid');
                            $('#edit-error-' + key).text(errors[key][0]).show();
                        });
                    } else {
                        Swal.fire('Error', 'Could not update customer.', 'error');
                    }
                },
            });
        });

        window.customersTable = $('#customers-table').DataTable({
            processing: true,
            serverSide: true,
            info: false,
            lengthChange: false,
            ajax: '{{ route('customers.data') }}',
            columns: [
                { data: 'id', name: 'id', render: function(data, type, row, meta) { return meta.row + 1; } },
                { data: 'name', name: 'name' },
                { data: 'contact_number', name: 'contact_number', defaultContent: '-' },
                { data: 'id_card', name: 'id_card', defaultContent: '-' },
                {
                    data: null,
                    render: function (data, type, row) {
                        return `
                            <button class="btn btn-info btn-circle edit-button" type="button" data-id="${row.id}"><i class="fa fa-edit"></i></button>
                            <button class="btn btn-danger btn-circle delete-button" type="button" data-id="${row.id}"><i class="fa fa-times"></i></button>
                        `;
                    },
                    width: '150px', orderable: false, searchable: false
                }
            ],
            order: [[1, 'asc']], // Order by name
            language: {
                processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="visually-hidden">Loading...</span>'
            }
        });

        // Initialize Mobile CRUD Manager for Customers
        window.customersMobileManager = MobileCrudManager.init({
            moduleName: 'customers',
            dataUrl: '{{ route('customers.data') }}',
            deleteUrl: '{{ url('customers') }}',
            cardRenderer: function(customer) {
                return `
                    <div class="card mb-3 mobile-brand-card">
                        <div class="card-body">
                            <div class="mobile-brand-name">${customer.name}</div>
                            <div class="mobile-brand-field mb-2">
                                <span class="mobile-brand-label">Name</span>
                            </div>
                            <div class="mobile-brand-field mb-2">
                                <div class="mobile-brand-value">${customer.contact_number || '-'}</div>
                                <span class="mobile-brand-label">Contact No</span>
                            </div>
                            <div class="mobile-brand-field mb-2">
                                <div class="mobile-brand-value">${customer.id_card || '-'}</div>
                                <span class="mobile-brand-label">Id Card</span>
                            </div>
                            <div class="mobile-brand-actions">
                                <button class="btn btn-info btn-circle edit-button" type="button" data-id="${customer.id}">
                                    <i class="fa fa-edit"></i>
                                </button>
                                <button class="btn btn-danger btn-circle delete-button" type="button" data-id="${customer.id}">
                                    <i class="fa fa-times"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                `;
            },
            dataTable: window.customersTable
        });

        // Show/hide ID card picture field based on ID card input (Add modal)
        $('#customer_id_card').on('input change', function() {
            if ($(this).val().trim() !== '') {
                $('#add-id-card-images-container').show();
            } else {
                $('#add-id-card-images-container').hide();
                $('#customer_id_card_front, #customer_id_card_back').val(''); // Clear files
            }
        });

        // Show/hide ID card picture field based on ID card input (Edit modal)
        $('#edit_customer_id_card').on('input change', function() {
            if ($(this).val().trim() !== '') {
                $('#edit-id-card-images-container').show();
            } else {
                $('#edit-id-card-images-container').hide();
                $('#edit_customer_id_card_front, #edit_customer_id_card_back').val(''); // Clear files
            }
        });

        // Image preview on file select for Add modal
        $('#customer_id_card_front, #customer_id_card_back').on('change', function() {
            let fieldName = $(this).attr('id').replace('customer_id_card_', ''); // 'front' or 'back'
            let file = this.files[0];
            
            if (file) {
                let reader = new FileReader();
                reader.onload = function(event) {
                    $(`#add-${fieldName}-thumbnail`).attr('src', event.target.result);
                    $(`#add-${fieldName}-preview-container`).show();
                };
                reader.readAsDataURL(file);
            }
        });

        // Image preview on file select for Edit modal
        $('#edit_customer_id_card_front, #edit_customer_id_card_back').on('change', function() {
            let fieldName = $(this).attr('id').replace('edit_customer_id_card_', ''); // 'front' or 'back'
            let file = this.files[0];
            
            if (file) {
                let reader = new FileReader();
                reader.onload = function(event) {
                    $(`#edit-${fieldName}-thumbnail`).attr('src', event.target.result);
                    $(`#edit-${fieldName}-preview-container`).show();
                };
                reader.readAsDataURL(file);
            }
        });

        // Remove image button
        $(document).on('click', '.remove-img-btn', function() {
            let target = $(this).data('target'); // 'add-front', 'add-back', 'edit-front', 'edit-back'
            let inputId = target.includes('add') ? 'customer_id_card_' : 'edit_customer_id_card_';
            let fieldName = target.includes('front') ? 'front' : 'back';
            
            $('#' + inputId + fieldName).val('');
            $(`#${target}-preview-container`).hide();
            $(`#${target}-thumbnail`).attr('src', '');
        });

        // Initialize Delete Helper for Customers
        DeleteHelper.init({
            deleteUrl: '{{ url('customers') }}',
            dataTable: window.customersTable,
            mobileManager: window.customersMobileManager
        });
    });   
</script>
@endpush
@endsection