ERP-upgrade/public/assets/js/mno_index.js

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

     
        function loadServicesAndOpen(callback) {
            $.ajax({
                url: base_url + '/api/services',
                type: 'GET',
                success: function(services) {
                    let $servicesSelect = $('#mnoServices');
                    $servicesSelect.empty();
                    services.forEach(function(s) {
                        $servicesSelect.append(new Option(s.name, s.id));
                    });
                    if (typeof callback === 'function') callback();
                }
            });
        }

        function setSelect2Values(selector, values) {
                let $el = $(selector);
                $el.val(null).trigger('change');
                if (values && Array.isArray(values)) {
                    values.forEach(function(val) {
                        if ($el.find("option[value='" + val + "']").length === 0) {
                            // If it's a free-form tag not in the base options, append it
                            $el.append(new Option(val, val, true, true));
                        }
                    });
                    $el.val(values).trigger('change');
                }
        }

        // --- OPEN MODAL FOR CREATE ---
        $('#btnOpenMnoModal').on('click', function(e) {
            e.preventDefault(); // Prevent any default anchor/button jump
            
            $form[0].reset();
            $('#mnoId').val('');
            $('#methodField').html('');
            $form.attr('action', base_url + "/mnos");
            $('#mnoModalTitle').text('Add New MNO');
            $('#btnSubmitMno').html('<i class="bi bi-save me-2"></i>Save Gateway Profile');
            
            // Clear all multi-selects first
            $('#mnoServices, #mnoSupportEmails, #mnoFinanceEmails').val(null).trigger('change');

            // Fetch services and then open the modal directly
            $.ajax({
                url: base_url + '/api/services',
                type: 'GET',
                success: function(services) {
                    let $servicesSelect = $('#mnoServices');
                    $servicesSelect.empty();
                    services.forEach(function(s) {
                        $servicesSelect.append(new Option(s.name, s.id));
                    });
                    $servicesSelect.trigger('change');

                    // Open modal safely once data is ready
                    mnoModal.show();
                },
                error: function() {
                    // Fallback: open modal even if service fetch fails
                    mnoModal.show();
                }
            });
        });

        // --- OPEN MODAL FOR EDIT ---
        $(document).on('click', '.btn-edit-mno', function() {
            const mnoId = $(this).data('id');
            
            $form[0].reset();
            $('#methodField').html('<input type="hidden" name="_method" value="PUT">');
            $form.attr('action', base_url + '/mnos/' + mnoId);
            $('#mnoModalTitle').text('Modify MNO Profile');
            $('#btnSubmitMno').html('<i class="bi bi-check-circle me-2"></i>Apply Changes');

            loadServicesAndOpen(function() {
                $.ajax({
                    url: base_url + '/mnos/' + mnoId + '/json',
                    type: 'GET',
                    success: function(mno) {
                        $('#mnoId').val(mno.id);
                        $('#mnoName').val(mno.name);
                        $('#mnoCountry').val(mno.country);
                        $('#mnoConnectionStatus').val(mno.connection_status);
                        $('#mnoContactPerson').val(mno.contact_person);
                        $('#mnoContactPhone').val(mno.contact_person_phone);
                        $('#mnoContactEmail').val(mno.contact_person_email);
                        $('#mnoTechSupport').val(mno.technical_support_person);
                        $('#mnoSupportSkype').val(mno.support_skype);
                        $('#mnoAccountManager').val(mno.mno_account_manager);
                        $('#mnoBuyingRate').val(mno.buying_rate);
                        // $('#mnoRateType').val(mno.rate_type);
                        // $('#mnoPaymentTerms').val(mno.payment_terms);
                        // $('#mnoConnectionType').val(mno.connection_type);

                        // Inside your AJAX success callback for editing a Network Operator:
                        $('#edit_rate_type').val(mno.rate_type);
                        $('#edit_payment_terms').val(mno.payment_terms);
                        $('#edit_connection_type').val(mno.connection_type);

                        // Populate Select2 fields with existing records
                        setSelect2Values('#mnoServices', mno.services);
                        setSelect2Values('#mnoSupportEmails', mno.support_emails);
                        setSelect2Values('#mnoFinanceEmails', mno.finance_emails);

                        mnoModal.show();
                    },
                    error: function() {
                        Swal.fire('Error', 'Could not fetch MNO details.', 'error');
                    }
                });
            });
        });

        // --- INITIALIZE SELECT2 TAGS ON MODAL SHOWN ---
        $('#mnoModal').on('shown.bs.modal', function () {
            // Initialize Database-driven services multi-select (no custom tags allowed)
            if (!$('#mnoServices').hasClass("select2-hidden-accessible")) {
                $('#mnoServices').select2({
                    theme: 'bootstrap-5',
                    dropdownParent: $('#mnoModal'),
                    placeholder: 'Select services...'
                });
            }

            // Initialize Email fields with custom tagging enabled (allows typing custom emails)
            $('#mnoModal .select2-tags').each(function() {
                if (!$(this).hasClass("select2-hidden-accessible")) {
                    $(this).select2({
                        theme: 'bootstrap-5',
                        dropdownParent: $('#mnoModal'),
                        tags: true,
                        tokenSeparators: [',', ' '],
                        placeholder: 'Type email and press enter...'
                    });
                }
            });
        });

        // --- AJAX FORM SUBMISSION ---
        $form.on('submit', function(e) {
            e.preventDefault();
            const $btn = $('#btnSubmitMno');
            const originalText = $btn.html();
            
            $btn.html('<span class="spinner-border spinner-border-sm me-2"></span> Saving...');
            $btn.prop('disabled', true);

            $.ajax({
                url: $form.attr('action'),
                type: 'POST',
                data: $form.serialize(),
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    mnoModal.hide();
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: response.message || 'Saved successfully.',
                        confirmButtonColor: '#5c4df0'
                    }).then(() => {
                        location.reload();
                    });
                },
                error: function(xhr) {
                    let errors = xhr.responseJSON?.errors;
                    let errorMsg = 'Validation failed. Please check inputs.';
                    if (errors) {
                        errorMsg = Object.values(errors).flat().join('\n');
                    }
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: errorMsg,
                        confirmButtonColor: '#dc3545'
                    });
                    $btn.html(originalText).prop('disabled', false);
                }
            });
        });
});