$(document).ready(function() {
    
    const senderModal = new bootstrap.Modal(document.getElementById('senderModal'));
    const $form = $('#senderForm');

    $('#edit_mno_name').select2({
        placeholder: "Select Network Operator",
        allowClear: true,
        width: '100%',
        dropdownParent: $('#senderModal') // Crucial for Bootstrap Modals
    });
    $('#edit_supplier_name').select2({
        placeholder: "Select Supplier",
        allowClear: true,
        width: '100%',
        dropdownParent: $('#senderModal') // Crucial for Bootstrap Modals
    });

    $('#edit_senderid').on('input', function() {
        // $(this).val($(this).val().toUpperCase().replace(/\s/g, ''));
        //$(this).val($(this).val().replace(/\s/g, ''));
        const max = 11;
        const val = $(this).val();

        if (val.length > max) {
            $(this).val(val.slice(0, max));
        }
    });


    // Function to handle the form layout based on Direct MNO selection
    function toggleSenderIdRoutingFields(selection, isEdit = false) {
        let prefix = isEdit ? 'edit_' : '';
        
        let $mnoWrapper = $('#wrapper_mno_name' + (isEdit ? '_edit' : ''));
        let $supplierWrapper = $('#wrapper_supplier_name' + (isEdit ? '_edit' : ''));
        let $mnoInput = $('#input_mno_name' + (isEdit ? '_edit' : ''));
        let $supplierInput = $('#input_supplier_name' + (isEdit ? '_edit' : ''));

        if (selection === 'YES') {
            // Show MNO, Hide Supplier
            $mnoWrapper.slideDown();
            $mnoInput.prop('required', true);
            
            $supplierWrapper.slideUp();
            $supplierInput.prop('required', false).val(''); // Clear hidden field
        } else {
            // Show Supplier, Hide MNO
            $supplierWrapper.slideDown();
            $supplierInput.prop('required', true);
            
            $mnoWrapper.slideUp();
            $mnoInput.prop('required', false).val(''); // Clear hidden field
        }
    }

    // Trigger on change for Create Form
    $('#create_direct_mno').on('change', function() {
        toggleSenderIdRoutingFields($(this).val(), false);
    });

    // If you have an Edit form, trigger it there as well
    // $('#edit_direct_mno').on('change', function() {
    //     toggleSenderIdRoutingFields($(this).val(), true);
    // });

    // Run on initial load to ensure correct state
    toggleSenderIdRoutingFields($('#create_direct_mno').val(), false);

    // Bind change event to the select dropdown
    $('#edit_direct_mno').on('change', function() {
        toggleSenderIdRoutingFields($(this).val());
    });

    // --- OPEN MODAL FOR CREATE ---
    $('#btnOpenSenderModal').on('click', function() {
        $form[0].reset(); 
        $('#senderRecordId').val('');
        
        $('#senderModalTitle').text('Add Sender ID');
        $('#btnSubmitSender').html('<i class="bi bi-send me-2"></i>Save Sender ID');
        
        // Reset toggle state to YES
        $('#edit_direct_mno').val('YES').trigger('change');
        
        senderModal.show();
    });

    // --- OPEN MODAL FOR EDIT ---
    $('.btn-edit-sender').on('click', function() {
        const data = $(this).data();
        
        $form[0].reset();
        $('#senderRecordId').val(data.id);
        
        $('#edit_senderid').val(data.senderid);
        $('#edit_direct_mno').val(data.direct_mno);
        
        // Set dependent fields before toggling
        $('#edit_mno_name').val(data.mno_name);
        $('#edit_supplier_name').val(data.supplier_name);
        
        $('#edit_type').val(data.type);
        $('#edit_bind_name').val(data.bind_name);
        $('#edit_status').val(data.status);
        $('#edit_remarks').val(data.remarks);
        
        $('#senderModalTitle').text('Edit Sender ID: ' + data.senderid);
        $('#btnSubmitSender').html('<i class="bi bi-save me-2"></i>Update Sender ID');
        
        // Trigger the toggle layout based on the loaded data
        toggleSenderIdRoutingFields(data.direct_mno);
        
        senderModal.show();
    });

    // --- HANDLE FORM SUBMISSION (Actual AJAX) ---
    $form.on('submit', function(e) {
        e.preventDefault();
        
        const $btn = $('#btnSubmitSender');
        const originalText = $btn.html();
        const $alertBox = $('#senderIdModalAlert');
        
        // Show loading state and clear old errors
        $btn.html('<span class="spinner-border spinner-border-sm me-2"></span> Processing...');
        $btn.prop('disabled', true);
        $alertBox.html(''); 
        $form.find('.is-invalid').removeClass('is-invalid');
        $form.find('.invalid-feedback').remove();

        // Determine if we are creating or updating based on the hidden ID field
        const recordId = $('#senderRecordId').val();
        const submitUrl = base_url + "/" + recordId ? "senderids/" + recordId : "senderids";
        
        // Add a hidden _method field for PUT requests if editing
        let formData = $form.serialize();
        if (recordId) {
            formData += '&_method=PUT';
        }

        $.ajax({
            url: submitUrl,
            type: 'POST', // We use POST but pass _method=PUT in the data payload for Laravel
            data: formData,
            success: function(response) {
                if (response.success) {
                    senderModal.hide();
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: response.message || 'Sender ID record saved.',
                        confirmButtonColor: '#5c4df0'
                    }).then(() => {
                        // Reload the page to refresh the table and KPI counts
                        location.reload(); 
                    });
                }
            },
            error: function(xhr) {
                // Handle Laravel Validation Errors
                if (xhr.status === 422) {
                    let errors = xhr.responseJSON.errors;
                    
                    $alertBox.html(`
                        <div class="alert alert-danger d-flex align-items-center py-2 px-3 small" role="alert">
                            <i class="bi bi-exclamation-triangle-fill me-2"></i>
                            <div>Please check the highlighted fields below.</div>
                        </div>
                    `);

                    // Highlight specific invalid fields
                    $.each(errors, function(key, value) {
                        let $input = $form.find('[name="' + key + '"]');
                        if ($input.length) {
                            $input.addClass('is-invalid');
                            $input.parent().append('<div class="invalid-feedback d-block fw-medium small">' + value[0] + '</div>');
                        }
                    });
                } else {
                    // Handle standard 500 server errors
                    $alertBox.html(`
                        <div class="alert alert-danger d-flex align-items-center py-2 px-3 small" role="alert">
                            <i class="bi bi-x-circle-fill me-2"></i>
                            <div>An unexpected server error occurred. Please try again.</div>
                        </div>
                    `);
                }
            },
            complete: function() {
                // Restore button state
                $btn.html(originalText).prop('disabled', false);
            }
        });
    });

});