ERP-upgrade/public/assets/js/vpn-index.js

$(document).ready(function() {

    // 1. Add VPN Config
    $('#addVpnForm').on('submit', function(e) {
        e.preventDefault();
        let $form = $(this);
        let $btn = $('#btnSaveVpn');
        let originalText = $btn.html();

        $btn.html('<span class="spinner-border spinner-border-sm me-2"></span>Saving...').prop('disabled', true);
        $form.find('.is-invalid').removeClass('is-invalid');

        $.ajax({
            url: `${base_url}/vpns`,
            type: 'POST',
            data: $form.serialize(),
            success: function(response) {
                $('#addVpnModal').modal('hide');
                Swal.fire({
                    icon: 'success',
                    title: 'Added!',
                    text: response.message,
                    timer: 1500,
                    showConfirmButton: false
                }).then(() => location.reload());
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    $.each(xhr.responseJSON.errors, function(key, value) {
                        let $input = $form.find('[name="' + key + '"]');
                        $input.addClass('is-invalid');
                        $input.parent().append('<div class="invalid-feedback d-block fw-medium">' + value[0] + '</div>');
                    });

                    let $firstError = $form.find('.is-invalid').first();
                    if ($firstError.length) {
                        let tabId = $firstError.closest('.tab-pane').attr('id');
                        $form.find('[data-bs-target="#' + tabId + '"]').tab('show');
                    }
                } else {
                    Swal.fire('Error', 'An unexpected error occurred.', 'error');
                }
            },
            complete: function() {
                $btn.html(originalText).prop('disabled', false);
            }
        });
    });

    // 2. Fetch Data for Edit Modal
    $(document).on('click', '.btn-edit-vpn', function(e) {
        e.preventDefault();
        let vpnId = $(this).data('id');
        
        $.ajax({
            url: `${base_url}/vpns/${vpnId}`,
            type: 'GET',
            success: function(vpn) {
                // Basic Info Tab
                $('#edit_vpn_id').val(vpn.id);
                $('#edit_partner_name').val(vpn.partner_name);
                $('#edit_status').val(vpn.status);
                $('#edit_local_device').val(vpn.local_device);
                $('#edit_peer_device').val(vpn.peer_device);
                $('#edit_local_ip').val(vpn.local_ip);
                $('#edit_peer_ip').val(vpn.peer_ip);
                $('#edit_encryption_domain_local').val(vpn.encryption_domain_local);
                $('#edit_encryption_domain_remote').val(vpn.encryption_domain_remote);
                
                // Phase 1 Tab
                $('#edit_ike_version').val(vpn.ike_version);
                $('#edit_phase1_encryption').val(vpn.phase1_encryption);
                $('#edit_phase1_hash').val(vpn.phase1_hash);
                $('#edit_phase1_dh_group').val(vpn.phase1_dh_group);
                $('#edit_phase1_lifetime').val(vpn.phase1_lifetime);
                
                // Phase 2 Tab
                $('#edit_phase2_encryption').val(vpn.phase2_encryption);
                $('#edit_phase2_hash').val(vpn.phase2_hash);
                $('#edit_phase2_dh_group').val(vpn.phase2_dh_group);
                $('#edit_phase2_lifetime').val(vpn.phase2_lifetime);
                
                // Handle Checkbox for PFS
                if (vpn.pfs_enabled == 1 || vpn.pfs_enabled === true) {
                    $('#edit_pfs_enabled').prop('checked', true);
                } else {
                    $('#edit_pfs_enabled').prop('checked', false);
                }

                // Reset tabs so it opens to the first tab by default
                $('#editVpnModal .nav-link').removeClass('active');
                $('#editVpnModal .tab-pane').removeClass('show active');
                $('#editVpnModal .nav-link').first().addClass('active');
                $('#edit-tab-basic').addClass('show active');
                
                $('#editVpnModal').modal('show');
            }
        });
    });

    // 3. Update VPN Config
    $('#editVpnForm').on('submit', function(e) {
        e.preventDefault();
        let $form = $(this);
        let vpnId = $('#edit_vpn_id').val();
        let $btn = $('#btnUpdateVpn');
        let originalText = $btn.html();

        $btn.html('<span class="spinner-border spinner-border-sm me-2"></span>Updating...').prop('disabled', true);
        $form.find('.is-invalid').removeClass('is-invalid');
        $form.find('.invalid-feedback').remove();

        $.ajax({
            url: `${base_url}/vpns/${vpnId}`,
            type: 'POST',
            data: $form.serialize(),
            success: function(response) {
                $('#editVpnModal').modal('hide');
                Swal.fire({
                    icon: 'success',
                    title: 'Updated!',
                    text: response.message,
                    timer: 1500,
                    showConfirmButton: false
                }).then(() => location.reload());
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    $.each(xhr.responseJSON.errors, function(key, value) {
                        let $input = $form.find('[name="' + key + '"]');
                        $input.addClass('is-invalid');
                        $input.parent().append('<div class="invalid-feedback d-block fw-medium">' + value[0] + '</div>');
                    });


                    let $firstError = $form.find('.is-invalid').first();
                    if ($firstError.length) {
                        let tabId = $firstError.closest('.tab-pane').attr('id');
                        $form.find('[data-bs-target="#' + tabId + '"]').tab('show');
                    }
                } else {
                    Swal.fire('Error', 'An unexpected error occurred.', 'error');
                }
            },
            complete: function() {
                $btn.html(originalText).prop('disabled', false);
            }
        });
    });

    // 4. Export VPN Configuration (Trigger Modal)
    $(document).on('click', '.btn-export-vpn', function(e) {
        e.preventDefault();
        let vpnId = $(this).data('id');
        let $btn = $(this);
        let originalHtml = $btn.html();

        $btn.html('<span class="spinner-border spinner-border-sm"></span>').prop('disabled', true);

        $.ajax({
            url: `${base_url}/vpns/${vpnId}/template`,
            type: 'GET',
            success: function(response) {
                $('#export_partner_name').val(response.partner_name);
                $('#export_config_content').val(response.template);
                $('#exportVpnModal').modal('show');
            },
            error: function() {
                Swal.fire('Error', 'Failed to generate configuration template.', 'error');
            },
            complete: function() {
                $btn.html(originalHtml).prop('disabled', false);
            }
        });
    });

    // Clean up modals on close
    $('#addVpnModal, #editVpnModal, #exportVpnModal').on('hidden.bs.modal', function () {
        $(this).find('form')[0].reset();
        $(this).find('.is-invalid').removeClass('is-invalid');
        $(this).find('.invalid-feedback').remove();
    });
});