jQuery(document).ready(function () {
    
    griffinformsDisplayDeleteSampleColumn();
    griffinformsDisplaySelectSampleColumnRatio()
    
    jQuery("#griffinforms-add-sample-column").click(griffinformsAddSampleColumn);
    jQuery('.griffinforms-delete-sample-column').click(griffinformsDeleteSampleColumn);
    jQuery(".griffinforms-set-ratio").click(griffinformsSetRatio);
    
    jQuery("#griffinforms-sample-row").sortable({
        cursor: "move",
        axis: "x",
        start: function (event, ui) {
            ui.helper.addClass("shadow-lg");
        },
        stop: function (event, ui) {
            ui.item.removeClass("shadow-lg");
        }
    });

});

function griffinformsAddSampleColumn()
{
    var lastColumn, newColumn;
    lastColumn = jQuery(".griffinforms-sample-column").get(-1);
    newColumn = jQuery(lastColumn).clone("deep");
    jQuery("#griffinforms-sample-row").append(newColumn);
    griffinformsResetSampleColumnClasses();
    griffinformsDisplayAddSampleColumn();
    griffinformsDisplayDeleteSampleColumn();
    griffinformsDisplaySelectSampleColumnRatio();
}

function griffinformsDeleteSampleColumn()
{
    jQuery(this).parent().remove();
    griffinformsDisplayDeleteSampleColumn();
    griffinformsDisplayAddSampleColumn();
    griffinformsDisplaySelectSampleColumnRatio();
}

function griffinformsDisplayAddSampleColumn()
{
    var columns = griffinformsSampleColumnCount();
    if (columns > 3) {
        jQuery("#griffinforms-add-sample-column").css("visibility", "hidden");
    } else {
        jQuery("#griffinforms-add-sample-column").css("visibility", "visible");
    }
}

function griffinformsDisplayDeleteSampleColumn()
{
    var columns = griffinformsSampleColumnCount();
    if (columns == 1) {
        jQuery('.griffinforms-delete-sample-column').hide();
    } else {
        jQuery('.griffinforms-delete-sample-column').show();
    }
}

function griffinformsSampleColumnCount()
{
    var columns = jQuery(".griffinforms-sample-column").length;
    return columns;
}

function griffinformsDisplaySelectSampleColumnRatio()
{
    var columnCount = griffinformsSampleColumnCount();
    var ratioGroupId = "#griffinforms-" + columnCount + "column-ratio";
    jQuery(".griffinforms-select-sample-columns-ratio").hide();
    jQuery(ratioGroupId).show();
}

function griffinformsSetRatio()
{
    var id = jQuery(this).attr("id");
    id = id.replace("griffinforms-", "");
    id = id.split("-");
    jQuery(".griffinforms-sample-column").each(function(index){
        let column = jQuery(".griffinforms-sample-column").get(index);
        jQuery(column).removeClass(griffinformsRemoveBsClass());
        jQuery(column).addClass("col-md-" + id[index]);
        jQuery(column).attr("data-width", id[index]);
    });
}

function griffinformsResetSampleColumnClasses()
{
    var columnCount = griffinformsSampleColumnCount();
    var width = 12 / columnCount;
    jQuery(".griffinforms-sample-column").removeClass(griffinformsRemoveBsClass());
    jQuery(".griffinforms-sample-column").addClass("col-md-" + width);
    jQuery(".griffinforms-sample-column").attr("data-width", width);
}

function griffinformsRemoveBsClass()
{
    var bsClass = "col col-md-1 col-md-2 col-md-3 col-md-4 col-md-5 col-md-6 col-md-7 col-md-8 col-md-9 col-md-10 col-md-11 col-md-12";
    return bsClass;
}
