jQuery(document).ready(function($) {


var data = {
    action: 'dropstr_ajax_action',
    window: 'welcome',
    nonce : dropstr_ajax_call.nonce,
};

// We can also pass the url value separately from ajaxurl for front end AJAX implementations
$.ajax({
    type: "POST",
    url: dropstr_ajax_call.ajax_url,
    data: data,
    cache: false
})
.done(function( html ) {
    jQuery( "#window" ).html( html );
});

jQuery('body').on('click','#dashboard',function(){

    var data = {
        action: 'dropstr_ajax_action',
        window: 'welcome',
        nonce : dropstr_ajax_call.nonce,
    };

    jQuery("#dashboard").removeClass("active");
        $.ajax({
        type: "POST",
        url: dropstr_ajax_call.ajax_url,
        data: data,
        cache: false
    })
    .done(function( html ) {
        jQuery( "#window" ).html( html );
    });
});

jQuery('body').on('click','#instances',function(){

var data = {
action: 'dropstr_ajax_action',
window: 'instances',
nonce : dropstr_ajax_call.nonce,
};

jQuery("#dashboard").removeClass("active");
$.ajax({
type: "POST",
url: dropstr_ajax_call.ajax_url,
data: data,
cache: false
})
.done(function( html ) {
jQuery( "#window" ).html( html );
});
});

jQuery('body').on('click','#new-instance',function(){

    var data = {
        action: 'dropstr_ajax_action',
        window: 'new_instance',
        nonce : dropstr_ajax_call.nonce,
    };

    $.ajax({
        type: "POST",
        url: dropstr_ajax_call.ajax_url,
        data: data,
        cache: false
    })
    .done(function( html ) {
        jQuery( "#window" ).html( html );
    });
});

jQuery('body').on('click','#containers',function(){

var data = {
action: 'dropstr_ajax_action',
window: 'containers',
nonce : dropstr_ajax_call.nonce,
};

$.ajax({
type: "POST",
url: dropstr_ajax_call.ajax_url,
data: data,
cache: false
})
.done(function( html ) {

jQuery( "#window" ).html( html );

});
});

jQuery('body').on('click','#new-container',function(){

var data = {
action: 'dropstr_ajax_action',
window: 'new_container',
nonce: dropstr_ajax_call.nonce,
};

$.ajax({
type: "POST",
url: dropstr_ajax_call.ajax_url,
data: data,
cache: false
})
.done(function( html ) {
jQuery( "#window" ).html( html );
});
});


jQuery('body').on('click','#create-container',function(){

var data = {
action: 'dropstr_ajax_action',
window: 'create_container',
name: jQuery("#containerName").val(),
location: jQuery("#container-location").val(),
ipv6: jQuery("#container-ipv6").prop('checked'),
nonce: dropstr_ajax_call.nonce,
};

$.ajax({
type: "POST",
url: dropstr_ajax_call.ajax_url,
data: data,
cache: false
})
.done(function( html ) {
jQuery( "#window" ).html( html );

});
});

jQuery('body').on('click','#support',function(){

var data = {
action: 'dropstr_ajax_action',
window: 'support',
nonce : dropstr_ajax_call.nonce,
};

$.ajax({
type: "POST",
url: dropstr_ajax_call.ajax_url,
data: data,
cache: false
})
.done(function( html ) {
jQuery( "#window" ).html( html );
});
});

function getPhpVersionsDropdown(version, idVersion)
{
    const versions = {"4.9.24" : [ "7.2", "7.1", "7.0", "5.6"],"5.0.20" : [ "7.3","7.2", "7.1", "7.0", "5.6"],"5.1.17" : [ "7.3","7.2", "7.1", "7.0", "5.6"],"5.2.19" : [ "7.3","7.2", "7.1", "7.0", "5.6"],"5.3.16" : [ "7.4","7.3","7.2", "7.1", "7.0", "5.6"],"5.4.14" : [ "7.4","7.3","7.2", "7.1", "7.0", "5.6"],"5.5.13" : [ "7.4","7.3","7.2", "7.1", "7.0", "5.6"],"5.6.12" : [ "8.0","7.4","7.3","7.2", "7.1", "7.0", "5.6"],"5.7.10" : [ "8.0","7.4","7.3","7.2", "7.1", "7.0", "5.6"],"5.8.8" : [ "8.0","7.4","7.3","7.2", "7.1", "7.0", "5.6"],"5.9.8" : [ "8.1","8.0","7.4","7.3","7.2", "7.1", "7.0", "5.6"],"6.0.6" : [ "8.1","8.0","7.4","7.3","7.2", "7.1", "7.0", "5.6"],"6.1.4" : [ "8.2","8.1","8.0","7.4","7.3","7.2", "7.1", "7.0", "5.6"],"6.2.3" : [ "8.2","8.1","8.0","7.4","7.3","7.2", "7.1", "7.0", "5.6"],"6.3.2" : [ "8.2","8.1","8.0","7.4","7.3","7.2", "7.1", "7.0"],"6.4.1" : [ "8.3","8.2","8.1","8.0","7.4","7.3","7.2", "7.1", "7.0"],"6.4.2" : [ "8.3","8.2","8.1","8.0","7.4","7.3","7.2", "7.1", "7.0"]};    var html = '';

    for (let index = 0, len = versions[version].length; index < len; ++index) {

        // covert . to - for ids
        let phpId = versions[version][index].replaceAll(".", "-");

        html += '<option value="'+versions[version][index]+'" >'+versions[version][index]+'</option>';

    }

return html;
}

function getVersionOptions(wpVersion, idVersion)
{
    return '<h4>'+wpVersion+'</h4><div class="list-group"> <label class="list-group-item d-flex gap-2"><input name="wpv[]" type="hidden" value="'+wpVersion+'" class="wpv"> <input class="form-check-input flex-shrink-0" id="salt-'+idVersion+'" type="checkbox"  name="salt" value="enable" > <span>Custom Salt Keys <small class="d-block text-body-secondary">Use your own salts instead of generating random ones (default).</small> </span> </label> <label class="list-group-item d-flex gap-2"> <input class="form-check-input flex-shrink-0" id="debug-'+idVersion+'" type="checkbox" name="debug" value="enable" checked=""> <span>Enable Debug Mode <small class="d-block text-body-secondary">Enable WordPress debug mode to see errors.</small> </span> </label> <label class="list-group-item d-flex gap-2"> <input class="form-check-input flex-shrink-0" id="cron-'+idVersion+'" type="checkbox" name="cron" value="enable" checked=""> <span>Disable WP-Cron <small class="d-block text-body-secondary">Enable internal cronjob instead of relying on a page load (wp-cron.php).</small> <div class="col-md-6"> <label for="cron-php" class="form-label">PHP Version to run cronjobs</label> <select class="form-select" id="cron-php-'+idVersion+'" required=""> <option value="default">Choose...</option> '+getPhpVersionsDropdown(wpVersion, idVersion)+' </select> <div class="invalid-feedback">Please select a valid country. </div> </div></span> </label><label class="list-group-item d-flex gap-2"><div class="col-md-6"> <span>PHP Version <small class="d-block text-body-secondary">Select the default PHP version (can be changed later).</small> <select class="form-select" id="php-'+idVersion+'" required=""> <option value="default">Choose...</option> '+getPhpVersionsDropdown(wpVersion, idVersion)+' </select></span> </div></label> </div>';
}

jQuery('body').on('change','#wp-version',function(){

var id = jQuery("#wp-version option:selected").val();

    const versionArr  = id.split('-');
    let wpVersion = ''+versionArr[1]+'.'+versionArr[2]+'.'+versionArr[3];
    let wpidVersion = ''+versionArr[1]+'-'+versionArr[2]+'-'+versionArr[3];

    jQuery("#after-wp").html("<div id='"+id+"-details' class=\"flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center\">"+getVersionOptions(wpVersion, wpidVersion)+"</div>");



});

});