wp-plugin-swiss-football-matchdata/assets/admin.js

// Swiss Football Admin JavaScript
jQuery(document).ready(function($) {
    'use strict';
    
    // Settings form with Save and Test functionality
    $('#swi-foot-settings-form').on('submit', function(e) {
        var $form = $(this);
        var $status = $('#connection-status');
        var action = $('[name="swi_foot_action"]:focus').val() || 'save_only';
        
        e.preventDefault();
        
        // Get form data
        var formData = new FormData($form[0]);
        
        // Submit form via WordPress options.php
        fetch($form.attr('action'), {
            method: 'POST',
            credentials: 'same-origin',
            body: formData
        }).then(function(resp) {
            // After form saves successfully, test if requested
            if (action === 'save_and_test') {
                return test_api_connection($status);
            } else {
                $('<div class="notice notice-info is-dismissible"><p>Settings saved!</p></div>')
                    .insertAfter('.wrap h1');
            }
        }).catch(function(err) {
            $('<div class="notice notice-error is-dismissible"><p>Error saving settings: ' + err.message + '</p></div>')
                .insertAfter('.wrap h1');
        });
    });
    
    // Function to test API connection
    function test_api_connection($statusElement) {
        // Get current field values from form
        var apiUrl = $('input[name="swi_foot_api_base_url"]').val();
        var username = $('input[name="swi_foot_api_username"]').val();
        var password = $('input[name="swi_foot_api_password"]').val();
        
        // Validate credentials first
        if (!username || !password) {
            $('<div class="notice notice-error is-dismissible"><p>API credentials not configured. Please configure Username and Password.</p></div>')
                .insertAfter('.wrap h1');
            return;
        }
        
        if (!apiUrl) {
            $('<div class="notice notice-error is-dismissible"><p>API Base URL not configured.</p></div>')
                .insertAfter('.wrap h1');
            return;
        }
        
        // Step 1: Check if URL is reachable with a HEAD request
        var urlTest = apiUrl.replace(/\/$/, '') + '/';
        fetch(urlTest, {
            method: 'HEAD',
            credentials: 'same-origin',
            mode: 'no-cors'
        }).then(function(resp) {
            // Step 2: Make actual API call via REST endpoint
            return fetch(swi_foot_ajax.rest_url.replace(/\/$/, '') + '/admin/test-connection', {
                method: 'POST',
                credentials: 'same-origin',
                headers: {
                    'Content-Type': 'application/json',
                    'X-WP-Nonce': swi_foot_ajax.rest_nonce
                },
                body: JSON.stringify({ test: true })
            });
        }).then(function(resp) {
            return resp.json();
        }).then(function(response) {
            if (response && response.success) {
                $('<div class="notice notice-success is-dismissible"><p>Settings saved and connection test successful!</p></div>')
                    .insertAfter('.wrap h1');
            } else {
                var errorMsg = (response.error || 'Connection failed');
                var details = response.details ? ': ' + response.details : '';
                $('<div class="notice notice-error is-dismissible"><p>' + errorMsg + details + '</p></div>')
                    .insertAfter('.wrap h1');
            }
        }).catch(function(err) {
            $('<div class="notice notice-error is-dismissible"><p>API URL not reachable: ' + apiUrl + '</p></div>')
                .insertAfter('.wrap h1');
        });
    }
    
    // Handle button clicks to set which action was used
    $('button[name="swi_foot_action"]').on('click', function() {
        $(this).focus();
    });
    
    // Refresh teams functionality
    $('#refresh-teams').on('click', function() {
        var $button = $(this);
        var $status = $('#refresh-status');
        
        $button.prop('disabled', true).text('Refreshing...');
        $status.text('').removeClass('success error');

        fetch(swi_foot_ajax.rest_url.replace(/\/$/, '') + '/admin/refresh-teams', {
            method: 'POST',
            credentials: 'same-origin',
            headers: { 'Content-Type': 'application/json', 'X-WP-Nonce': swi_foot_ajax.rest_nonce }
        }).then(function(resp) {
            return resp.json();
        }).then(function(response) {
            if (response && response.success) {
                $status.text('✓ Teams refreshed successfully!').addClass('success');
                setTimeout(function() { location.reload(); }, 1500);
            } else {
                $status.text('✗ Error: ' + (response.error || 'Unknown')).addClass('error');
            }
        }).catch(function() {
            $status.text('✗ Network error occurred.').addClass('error');
        }).finally(function() {
            $button.prop('disabled', false).text('Refresh Teams List');
        });
    });
    
    // Clear cache functionality
    $('#clear-cache').on('click', function() {
        var $button = $(this);
        var $status = $('#cache-status');
        
        if (!confirm('Are you sure you want to clear the match data cache?')) {
            return;
        }
        
        $button.prop('disabled', true);
        $status.text('Clearing cache...').removeClass('success error');

        fetch(swi_foot_ajax.rest_url.replace(/\/$/, '') + '/admin/clear-cache', {
            method: 'POST',
            credentials: 'same-origin',
            headers: { 'Content-Type': 'application/json', 'X-WP-Nonce': swi_foot_ajax.rest_nonce }
        }).then(function(resp) { return resp.json(); }).then(function(response) {
            if (response && response.success) {
                $status.text('✓ Cache cleared successfully!').addClass('success');
                setTimeout(function() { location.reload(); }, 1000);
            } else {
                $status.text('✗ Error clearing cache.').addClass('error');
            }
        }).catch(function() {
            $status.text('✗ Error clearing cache.').addClass('error');
        }).finally(function() {
            $button.prop('disabled', false);
        });
    });
    
});