const previewModele1Footer = $('#modele1-footer');
const previewModele2Footer = $('#modele2-footer');
const previewModele3Footer = $('#modele3-footer');

// Liste des options
const logoFooterCheckbox = $('#theme_option_actif_logo_footer');
const logoPositionGauche = $('#theme_option_position_logo_footer_0');
const logoPositionDroite = $('#theme_option_position_logo_footer_1');
const logoPositionDessus = $('#theme_option_position_logo_footer_2');

const telFooterCheckbox = $('#theme_option_actif_tel_footer');
const titreTelFooterCheckbox = $('#theme_option_actif_titre_tel_footer');

const emailFooterCheckbox = $('#theme_option_actif_email_footer');
const titreEmailFooterCheckbox = $('#theme_option_actif_titre_email_footer');

const adresseFooterCheckbox = $('#theme_option_actif_adresse_footer');
const titreAdresseFooterCheckbox = $('#theme_option_actif_titre_adresse_footer');

const horairesFooterCheckbox = $('#theme_option_actif_horaires_footer');
const titreHorairesFooterCheckbox = $('#theme_option_actif_titre_horaires_footer');

const socialFooterCheckbox = $('#theme_option_actif_reseaux_sociaux_footer');

const button1FooterCheckbox = $('#theme_option_actif_bouton1_footer');

const pictosInfosFooterCheckbox = $('#theme_option_actif_pictos_info_footer');
const codeqrFooterCheckbox = $('#theme_option_actif_codeqr_footer');
const texteFooterCheckbox = $('#theme_option_actif_texte_footer');

const nbrContactsInput = $('#theme_option_nbr_contacts_footer');

const logoCopyrightCheckbox = $('#theme_option_actif_logo_copyright');
const dateCopyrightCheckbox = $('#theme_option_actif_date_copyright');

const bgTopFooter = $('#theme_option_bg_color_top_footer');
const colorTopFooter = $('#theme_option_color_top_footer');

const colorTopFooterHover = $('#theme_option_color_top_footer_hover');

const bgSubFooter = $('#theme_option_bg_color_sub_footer');
const colorSubFooter = $('#theme_option_color_sub_footer');

// Liste des elements
const logo_footer = $('#logo-footer').val();
const logoFooterElement = $('<div class="info-footer logo-footer"></div>').html('<img src="../uploads/images/'+logo_footer+'" style="max-width:200px;"/>');

const telFooterElement = $('<div class="info-footer tel-footer"></div>').text('01 23 45 67 89');
const titreTelFooterElement = $('<span></span>').text('Tél : ');

const emailFooterElement = $('<div class="info-foter email-footer"></div>').text('info@example.com');
const titreEmailFooterElement = $('<span></span>').text('Email : ');

const adresseFooterElement = $('<div class="info-footer adresse-footer"></div>').text('Num rue, 1234 Ville');
const titreAdresseFooterElement = $('<span></span>').text('Adresse : ');

const horairesFooterElement = $('<div class="info-footer horaires-footer"></div>').text('Lundi : 08h00-18h00');
const titreHorairesFooterElement = $('<span></span>').text('Horaires : ');

const socialFooterElement = $('<div class="info-footer social-footer"></div>').html('<a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-linkedin"></i></a> <a href="#"><i class="fa fa-instagram"></i></a>');

const button1FooterElement = $('<div class="info-footer info1-bouton"></div>').html('<a class="info1-btn btn btn-primary p-2"  href="#">Bouton 1</a>');

const codeqrFooterElement = $('<div class="info-footer codeqr-footer text-center"></div>').html('<span class="d-block"><img src="../assets-admin/images/codeqr.png" width="100" /></span><span class="d-block" style="max-width:150px;">Le Lorem Ipsum est simplement du faux texte</span>');

const texteFooterElement = $('<div class="info-footer texte-footer"></div>').html('<p style="max-width:200px;">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</p>');

const pictoTelFooter = $('<i></i>').addClass('fa fa-phone mx-2');
const pictoEmailFooter = $('<i></i>').addClass('fa fa-envelope mx-2');
const pictoAdresseFooter = $('<i></i>').addClass('fa fa-map-marker mx-2');
const pictoHorairesFooter = $('<i></i>').addClass('fa fa-clock mx-2');

const footerLeft = $('.footer-left');
const footerRight = $('.footer-right');

const logoCopyRightElement = $('<span class="logo-copyright"></span>').html('<img src="../logo-horizon/logo-bleu.png" width="30" class="mb-1" />');
const imageMapElement = $('.map-footer');
var date = new Date();
//var formattedDate = date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear();
var formattedDate = date.getFullYear();
const dateCopyRightElement = $('<span class="date-copyright"></span>').text(" | "+formattedDate);

// Déclaration des fonctions
function previewFooterModele1() {
    //console.log('exec 1');
    previewFooterGeneralOptions(previewModele1Footer);
}
function previewFooterModele2() {
    //console.log('exec 2');
    previewFooterGeneralOptions(previewModele2Footer);
}
function previewFooterModele3() {
    //console.log('exec 2');
    previewFooterGeneralOptions(previewModele3Footer);
}

function addRemoveInfoFooter(checkboxName, elementName, ParentElement){
    
    let classElement;

    if(elementName.attr("class") !== undefined){
        classElement = "."+elementName.attr("class").replace(' ','.');
    }else{
        classElement = "."+ParentElement.attr("class").replace(' ','.')+" "+elementName.prop("tagName");
    }

    if (checkboxName.prop('checked')) {
        if(elementName.prop("tagName") !== "SPAN"){
            (!$(classElement).length) ? ParentElement.append(elementName) : "";
        }else{
            (!$(classElement).length) ? ParentElement.prepend(elementName) : "";
        }
    }else{
        (elementName.length) ? elementName.remove() : "";
    }
}

function previewFooterGeneralOptions(previewModele){

    const footerTop = previewModele.find('.top-footer');
    const footerBottom = previewModele.find('.sub-footer');
    const copyright = previewModele.find('.sub-footer .footer-bottom .copyright');

    let infosFooterElement;

    if(!$('.items-top').length){
        infosFooterElement = $('<div></div>').addClass('items-top');
    }else{
        infosFooterElement = $('.items-top');
    }

    // Ajouter / supprimer les informations

    let contactsFooterElement;

    if(!$('.infos-contact-footer').length){
        contactsFooterElement = $('<div></div>').addClass('infos-contact-footer');
    }else{
        contactsFooterElement = $('.infos-contact-footer');
    }

    contactsFooterElement.html("");

    let itemContactsFooterElement;

    if(!$('.item-infos-contact-footer').length){
        itemContactsFooterElement = $('<div></div>').addClass('item-infos-contact-footer');
    }else{
        itemContactsFooterElement = $('.item-infos-contact-footer');
    }
    
    addRemoveInfoFooter(adresseFooterCheckbox,adresseFooterElement,itemContactsFooterElement);
    //if(previewModele !== previewModele2Footer ){
        addRemoveInfoFooter(titreAdresseFooterCheckbox,titreAdresseFooterElement,adresseFooterElement);
    //}else{
        // Traitement titre adresse pour le modele footer 2 (Ajout du titre au dessus de bloc)
    //}

    addRemoveInfoFooter(horairesFooterCheckbox,horairesFooterElement,itemContactsFooterElement);
    addRemoveInfoFooter(titreHorairesFooterCheckbox,titreHorairesFooterElement,horairesFooterElement);
    
    addRemoveInfoFooter(telFooterCheckbox,telFooterElement,itemContactsFooterElement);
    addRemoveInfoFooter(titreTelFooterCheckbox,titreTelFooterElement,telFooterElement);

    addRemoveInfoFooter(emailFooterCheckbox,emailFooterElement,itemContactsFooterElement);
    addRemoveInfoFooter(titreEmailFooterCheckbox,titreEmailFooterElement,emailFooterElement);

    if (pictosInfosFooterCheckbox.prop('checked')) {
        telFooterElement.prepend(pictoTelFooter); 
        emailFooterElement.prepend(pictoEmailFooter); 
        adresseFooterElement.prepend(pictoAdresseFooter); 
        horairesFooterElement.prepend(pictoHorairesFooter); 
    }else{
        (pictoTelFooter.length) ? pictoTelFooter.remove() : "";
        (pictoEmailFooter.length) ? pictoEmailFooter.remove() : "";
        (pictoAdresseFooter.length) ? pictoAdresseFooter.remove() : "";
        (pictoHorairesFooter.length) ? pictoHorairesFooter.remove() : "";
    }

    contactsFooterElement.append(itemContactsFooterElement);

    for (let nbContacts = 1; nbContacts <= nbrContactsInput.val(); nbContacts++) {
        if(itemContactsFooterElement.length<nbContacts){
            let itemContact = itemContactsFooterElement.clone();
            contactsFooterElement.append(itemContact);
        }
    }
    
    infosFooterElement.prepend(contactsFooterElement);

    addRemoveInfoFooter(logoFooterCheckbox,logoFooterElement,infosFooterElement);
    addRemoveInfoFooter(codeqrFooterCheckbox,codeqrFooterElement,infosFooterElement);
    addRemoveInfoFooter(button1FooterCheckbox,button1FooterElement,infosFooterElement);
    addRemoveInfoFooter(texteFooterCheckbox,texteFooterElement,infosFooterElement);

    if (socialFooterCheckbox.prop('checked')) {
        (!$('.social-footer').length) ? infosFooterElement.append(socialFooterElement) : "";
    }else{
        ($('.social-footer').length) ? socialFooterElement.remove() : "";
    }

    if (logoFooterCheckbox.prop('checked')) {
        if(logoPositionGauche.prop('checked')) {
            infosFooterElement.prepend(logoFooterElement)
        }else if(logoPositionDroite.prop('checked')){
            infosFooterElement.append(logoFooterElement);
        }else if(logoPositionDessus.prop('checked')){
            logoFooterElement.css('text-align','center');
            footerTop.prepend(logoFooterElement);
        } 
    }else{
        ($('.logo-footer').length) ? logoFooterElement.remove() : "";
    }

    (!infosFooterElement.children().length) ? infosFooterElement.addClass('d-none') : infosFooterElement.removeClass('d-none');

    $('footer').find(footerTop).css('color','#000');
    previewModele.find(footerTop).css('color',colorTopFooter.val());

    $('footer').find(footerTop).css('background','#fff');
    previewModele.find(footerTop).css('background',bgTopFooter.val());

    $('footer').find(footerBottom).css('color','#000');
    previewModele.find(footerBottom).css('color',colorSubFooter.val());

    $('footer').find(footerBottom).css('background','#fff');
    previewModele.find(footerBottom).css('background',bgSubFooter.val());

    if(previewModele[0].id !== "modele3-footer"){
        imageMapElement.css('display','none');
        footerTop.append(infosFooterElement);
    }else{
        imageMapElement.css('display','block');
        footerLeft.append(infosFooterElement);
        footerTop.prepend(footerLeft);
    }

    addRemoveInfoFooter(dateCopyrightCheckbox,dateCopyRightElement,copyright);
    addRemoveInfoFooter(logoCopyrightCheckbox,logoCopyRightElement,copyright);

    previewModele.append(previewModele);

    if($('.infos-contact-footer').length){
        contactsFooterElement.addClass('nbr-items-'+nbrContactsInput.val());
    }
}

function executeFunctionModeleFooter(functionName){
    functionName();

    logoFooterCheckbox.click(functionName);

    logoPositionDessus.click(functionName);
    logoPositionDroite.click(functionName);
    logoPositionGauche.click(functionName);

    adresseFooterCheckbox.click(functionName);
    titreAdresseFooterCheckbox.click(functionName);

    horairesFooterCheckbox.click(functionName);
    titreHorairesFooterCheckbox.click(functionName);

    telFooterCheckbox.click(functionName);
    titreTelFooterCheckbox.click(functionName);

    emailFooterCheckbox.click(functionName);
    titreEmailFooterCheckbox.click(functionName);

    pictosInfosFooterCheckbox.click(functionName);

    socialFooterCheckbox.click(functionName);

    button1FooterCheckbox.click(functionName);
    codeqrFooterCheckbox.click(functionName);
    texteFooterCheckbox.click(functionName);

    logoCopyrightCheckbox.click(functionName);
    dateCopyrightCheckbox.click(functionName);

    nbrContactsInput.on('change keyup keydown',functionName);

    bgTopFooter.on('change click mouseout mousedown mouseup mouseleave',functionName);
    colorTopFooter.on('change click mouseout mousedown mouseup mouseleave',functionName);

    bgSubFooter.on('change click mouseout mousedown mouseup mouseleave',functionName);
    colorSubFooter.on('change click mouseout mousedown mouseup mouseleave',functionName);

}

// Traitement

let functionPreviewFooter;

if($('#modele1-footer').hasClass('active')){
    functionPreviewFooter = previewFooterModele1;
}
if($('#modele2-footer').hasClass('active')){
    functionPreviewFooter = previewFooterModele2;
}
if($('#modele3-footer').hasClass('active')){
    functionPreviewFooter = previewFooterModele3;
}

executeFunctionModeleFooter(functionPreviewFooter);

// Choix de modele footer
$('.footer-nav footer').click(function(){
    $('.footer-nav-value').val($(this).attr('data-value'));
    $('.footer-nav footer').removeClass('active');
    $(this).addClass('active');
    if($('.footer-nav-value').val() == "footer1"){
        functionPreviewFooter = previewFooterModele1;
    }
    if($('.footer-nav-value').val() == "footer2"){
        functionPreviewFooter = previewFooterModele2;
    }
    if($('.footer-nav-value').val() == "footer3"){
        functionPreviewFooter = previewFooterModele3;
    }
    executeFunctionModeleFooter(functionPreviewFooter);
});