$(document).ready(function() {
    showDate('showDate');
    getEvements();
});

// Show QRCode

function printTuile(data){

    if(data === null){
        return '<div class="card mb-3 text-center fadeIn"><div class="card-header"><span data-feather="info"></span></div><div class="card-body">Aucun évènement n\'est associé à votre profil à ce jour</div></div>';
    } else {
        var explication = null;
        var meta = null;
        var classCard = null;
        var txtFooter = null;
        var classFadeIn = getClassTuile(data["nb"]);
    
        if(data["type_emargement"] == 1){
            explication = '<p class="card-text"><div>[ QRCode à présenter à votre arrivée ]</div><br /><div><span data-feather="maximize"></span></div></p>';
            meta = 'data-toggle="modal" data-target="#QRCodeModal" onclick="showQRCode(this)" data-qrr-qrcode-regexp="^https?:\/\/" data-sel="' + data["url_qrcode"] + '" data-titre="' + data["titre"] + '"';
            classCard = "showQRCode";
            txtFooter = "Cliquez ici pour afficher votre QRCode";
        } else {
            explication = '<p class="card-text"><div>[ QRCode à flasher vous même ]</div><br /><div><span data-feather="camera"></span></div></p>';
            meta = 'data-event="' + data["md5"] + '" data-qrr-target="#QRCodeRead" ';
            classCard = "qrcodeReader";
            txtFooter = "Cliquez ici pour scanner le QRCode";
        }
    
        if(data["present"]){
            meta = "";
            explication = '<p class="card-text">Votre émargement a bien été pris en compte</p>';
            classCardText = "text-success";
            classCard = "";
            txtFooter = "Emargement réalisé le " + data["present"];
        } else {
            classCardText = "text-dark";
        }

        return '<div ' + meta + ' class="card mb-3 text-center ' + classCard + ' ' + classCardText + ' fadeIn ' + classFadeIn + '"><div class="card-header"><small>Du ' + data["startDate"] + ' au ' + data["endDate"] + '</small></div><div class="card-body"><h5 class="card-title">' + data["titre"] + '</h5>' + explication + '</div><div class="card-footer"><small>' + txtFooter + '</small></div></div>';
    }

}

function getClassTuile(nb){
    switch (nb) {
        case 0:
            return "first";
            break;
        case 1:
            return "second";
            break;
        case 2:
            return "third";
            break;
        case 3:
            return "fourth";
            break;
        default:
            return "fifth";
            break;
    }
}

function getEvements(){

    var formData = {
        jsonData: "list-events"
    }

    if (checkconnection()) {

        $.ajax({
            type: "GET",
            url: "json.php",
            data: formData,
            dataType: "json",
            encode: true,
        }).done(function (json) {
            $("#listEvent").html("");

            if(json[0] === null){
                $("#listEvent").append(printTuile(null));
                feather.replace();
            } else {
                $.each(json, function () {
                    $("#listEvent").append(printTuile(this));
                });
    
                feather.replace();
                $(".qrcodeReader").qrCodeReader();
            }
        });
    } else {
        $("#divOffline").empty();
        $("#divOffline").append('<div class="alert alert-warning" role="alert">Vous n\'êtes pas connecté à internet</div>');
        $("#divOffline").show();
    }
}

function showQRCode(element){
    var sel = $(element).data("sel");
    var titre = $(element).data("titre");

    $("#showQRCode").empty();
    $("#showQRCode").replaceWith('<div class="modal-body" id="showQRCode"><img src="qrcode.php?q=' + sel + '" width="100%" ></div>');

    $("#showTitreEvent").empty();
    $("#showTitreEvent").replaceWith('<div class="card-header" id="showTitreEvent">' + titre + '</div>');
}

// Reade QRCode

$(".qrcodeReader").on("click", function () {
    var idEvent = $(this).data("event");
    $("#form-event").val(idEvent);
});

$("#qrr-close").on("click", function () {
    $("#form-event").val("");
});

function checkEmagementControl(){
    var formData = {
        form: $("#emargementControlFrom").val(),
        event: $("#form-event").val(),
        qRcode: $("#QRCodeRead").val(),
    };

    if (checkconnection()) {

        $.ajax({
            type: "POST",
            url: "json.php?jsonData=check-control-emargement",
            data: formData,
            dataType: "json",
            encode: true,
        }).done(function (data) {
            $('#ResultQRCode').remove();
            $("#confirmationModal").append(getConfirmModal(data));
            $('#ResultQRCode').modal("show");
            if (data["result"] == true) {
                $('#ResultQRCode').on('hidden.bs.modal', function () {
                    getEvements();
                });
            }
        }).fail(function () {
            retour = Array;
            retour["result"] = false;
            retour["description"] = "Le QR-Code n'est pas valide";
            retour["salarie"] = null;
            retour["evenement"] = null;

            $('#ResultQRCode').remove();
            $("#confirmationModal").append(getConfirmModal(retour));
            $('#ResultQRCode').modal("show");
        });
        $("#QRCodeRead").removeAttr('value');

    } else {
        $("#divOffline").empty();
        $("#divOffline").append('<div class="alert alert-warning" role="alert">Vous n\'êtes pas connecté à internet</div>');
        $("#divOffline").show();
    }
}

$("#QRCodeRead").bind("DOMSubtreeModified", function () {
    if ($("#QRCodeRead").val() !== null && $("#QRCodeRead").val() !== '') {
        checkEmagementControl();
    }
});