<div class="wrapper-admin-backend">
    <div class="mb-3">
        <iframe id="zertifikat-preview" width="100%" height="600"></iframe>
    </div>
    <button id="zertifikat-preview-button"  class="btn btn-primary mr-3"><i class="fas fa-redo-alt"></i>&nbsp;Vorschau aktualisieren</button>
    <button class="btn btn-primary my-3" id="zertifikat-save-button"><i class="fas fa-save"></i>&nbsp;Speichern</button>
    <input type="hidden" id="zertifikat-post-id" value="{{postid}}">
</div>

<script>

jQuery(document).on('ready', function(){
    zertifikatPreview();
});

jQuery('#zertifikat-preview-button').on('click', function(e){
    e.preventDefault();
    zertifikatPreview();
});

function zertifikatPreview(){

    // Format der PDF
    var pdfOrientation = "p";
    var pdfFormat = "a4";

    // Font
    var pdfFont = "helvetica";

    // Seitenränder
    var pdfMarginTop = 25;
    if(jQuery('#zertifikat-logo-url').val().trim() != ""){
        pdfMarginTop = 15;
    }
    var pdfMarginLeft = 25;
    var pdfMarginRight = 25;
    var pdfMarginBottom = 20;

    // Erstellen der PDF-Instanz
    var doc = new jspdf.jsPDF({orientation: pdfOrientation, format: pdfFormat});
    doc.setFont(pdfFont, "normal");
    
    // Höhe/Breite/Mitte der PDF (Werte jeweils in mm)
    var maxHeight = doc.internal.pageSize.height;
    var maxWidth = doc.internal.pageSize.width;
    var pdfCenter = maxWidth/2;

    // Maximal erlaubte Breite für Inhalt in der PDF (Wert in mm)
    var maxContentWidth = maxWidth - pdfMarginLeft - pdfMarginRight;
    
    // Aktuelle Position in y-Richtung im Dokument
    var currentHeightPosition = pdfMarginTop;

    // Rufe den Titel des Trainings bzw. den Alternativtitel ab
    var trainingTitle = jQuery('#zertifikat-training-dropdown').find(":selected").text();
    if(jQuery('#zertifikat-add-alt-training-title').is(':checked')){
        if(jQuery('#zertifikat-alt-training-title').val().trim() != ''){
            trainingTitle = jQuery('#zertifikat-alt-training-title').val().trim();
        }
    }

    // Binde Logo in Header ein, falls vorhanden
    if(jQuery('#zertifikat-logo-url').val().trim() != ""){
        var logoUrl = jQuery('#zertifikat-logo-url').val();
        var logoOrientation = "";
        if(jQuery('#zertifikat-logo-orientation-left').is(':checked')){
            logoOrientation = "left";
        }
        else if(jQuery('#zertifikat-logo-orientation-center').is(':checked')){
            logoOrientation = "center";
        }
        else if(jQuery('#zertifikat-logo-orientation-right').is(':checked')){
            logoOrientation = "right";
        }

        var logoProperties = doc.getImageProperties(logoUrl);
        //var heightWidthRatio = logoProperties['height']/logoProperties['width'];
        var logoHeight = parseInt(jQuery('#zertifikat-logo-height').val());
        var logoWidth = parseInt(jQuery('#zertifikat-logo-width').val());

        var logoPosition = pdfMarginLeft;
        if(logoOrientation == "left"){
            logoPosition = pdfMarginLeft;
        }
        else if(logoOrientation == "center"){
            logoPosition = (maxContentWidth/2) - (logoWidth/2) + pdfMarginLeft;
        }
        else if(logoOrientation == "right"){
            logoPosition = maxContentWidth - logoWidth + pdfMarginLeft;
        }

        doc.addImage(logoUrl, logoProperties['fileType'], logoPosition, currentHeightPosition, logoWidth, logoHeight, "", "FAST");
        // Füge einen Abstand unterhalb des Bildes hinzu
        currentHeightPosition+= logoHeight + 3*(doc.getFontSize()*0.352778+doc.getLineHeightFactor()*0.352778);
    }

    // Füge Überschrift dem Dokument hinzu, falls vorhanden
    if(jQuery("#zertifikat-titel").val().trim() != ""){
        var headlineText = jQuery("#zertifikat-titel").val();
        var headlineTextOrientation = "";
        if(jQuery('#zertifikat-titel-orientation-left').is(':checked')){
            headlineTextOrientation = "left";
        }
        else if(jQuery('#zertifikat-titel-orientation-center').is(':checked')){
            headlineTextOrientation = "center";
        }
        else if(jQuery('#zertifikat-titel-orientation-right').is(':checked')){
            headlineTextOrientation = "right";
        }

        var headlineColor = jQuery('#zertifikat-titel-color').val();
        doc.setTextColor(headlineColor);

        doc.setFontSize(35);
        var headlineTextArray = doc.splitTextToSize(headlineText, maxContentWidth);

        for(var headlineTextIndex=0; headlineTextIndex < headlineTextArray.length; headlineTextIndex++){
        
            var headlineTextDim = doc.getTextDimensions(headlineTextArray[headlineTextIndex]);
            var headlineTextPosition = pdfMarginLeft;
            if(headlineTextOrientation == "left"){
                headlineTextPosition = pdfMarginLeft;
            }
            else if(headlineTextOrientation == "center"){
                headlineTextPosition = (maxContentWidth/2) - (headlineTextDim['w']/2) + pdfMarginLeft;
            }
            else if(headlineTextOrientation == "right"){
                headlineTextPosition = maxContentWidth - headlineTextDim['w'] + pdfMarginLeft;
            }

            doc.text(headlineTextArray[headlineTextIndex], headlineTextPosition, currentHeightPosition);
            currentHeightPosition += doc.getFontSize()*0.352778+doc.getLineHeightFactor()*0.352778;
        }
    }


    // Einleitender Text
    doc.setFontSize(15);
    var introdcutionOrientation = "";
    if(jQuery('#zertifikat-introduction-orientation-left').is(':checked')){
        introdcutionOrientation = "left";
    }
    else if(jQuery('#zertifikat-introduction-orientation-center').is(':checked')){
        introdcutionOrientation = "center";
    }
    else if(jQuery('#zertifikat-introduction-orientation-right').is(':checked')){
        introdcutionOrientation = "right";
    }

    var introductionColor = jQuery('#zertifikat-additional-info-color').val();
    doc.setTextColor(introductionColor);

    var altInfoText = "";
    if(jQuery('#zertifikat-add-alt-info-text').is(':checked')){
        if(jQuery('#zertifikat-alt-info-text').val().trim() != ""){
            altInfoText = jQuery('#zertifikat-alt-info-text').val();
            altInfoText = altInfoText.replace(/\[firstname\]/gi, "VORNAME").replace(/\[lastname\]/gi, "NACHNAME").replace(/\[trainingtitle\]/gi, trainingTitle);
        }
    }

    // Füge den Defaultwert für den einleitenden Text ein
    if(altInfoText == ""){
        var introductionText = "VORNAME NACHNAME hat erfolgreich am Training";
        var introductionTextArray = doc.splitTextToSize(introductionText,maxContentWidth);
        for(var introductionTextIndex = 0; introductionTextIndex < introductionTextArray.length; introductionTextIndex++){
            var introductionTextDim = doc.getTextDimensions(introductionTextArray[introductionTextIndex]);
            var introductionTextPosition = pdfMarginLeft;
            if(introdcutionOrientation == "left"){
                introductionTextPosition = pdfMarginLeft;
            }
            else if(introdcutionOrientation == "center"){
                introductionTextPosition = (maxContentWidth/2) - (introductionTextDim['w']/2) + pdfMarginLeft;
            }
            else if(introdcutionOrientation == "right"){
                introductionTextPosition = maxContentWidth - introductionTextDim['w'] + pdfMarginLeft;
            }

            doc.text(introductionTextArray[introductionTextIndex], introductionTextPosition, currentHeightPosition);
            currentHeightPosition += doc.getFontSize()*0.352778+doc.getLineHeightFactor()*0.352778;
        }
        
        currentHeightPosition += doc.getFontSize()*0.352778+doc.getLineHeightFactor()*0.352778;
        
        // Füge Trainings-Titel dem Dokument hinzu
        var trainingTitleOrientation = "";
        if(jQuery('#zertifikat-training-title-orientation-left').is(':checked')){
            trainingTitleOrientation = "left";
        }
        else if(jQuery('#zertifikat-training-title-orientation-center').is(':checked')){
            trainingTitleOrientation = "center";
        }
        else if(jQuery('#zertifikat-training-title-orientation-right').is(':checked')){
            trainingTitleOrientation = "right";
        }

        var trainingTitleColor = jQuery('#zertifikat-training-name-color').val();
        doc.setTextColor(trainingTitleColor);

        doc.setFontSize(25);
        doc.setFont(pdfFont, "bold");
        var trainingTitleArray = doc.splitTextToSize(trainingTitle, maxContentWidth);
        for(var trainingTitleIndex = 0; trainingTitleIndex < trainingTitleArray.length; trainingTitleIndex++){
            var trainingTitleDim = doc.getTextDimensions(trainingTitleArray[trainingTitleIndex]);
            var trainingTitlePosition = pdfMarginLeft;
            if(trainingTitleOrientation == "left"){
                trainingTitlePosition = pdfMarginLeft;
            }
            else if(trainingTitleOrientation == "center"){
                trainingTitlePosition = (maxContentWidth/2) - (trainingTitleDim['w']/2) + pdfMarginLeft;
            }
            else if(trainingTitleOrientation == "right"){
                trainingTitlePosition = maxContentWidth - trainingTitleDim['w'] + pdfMarginLeft;
            }

            doc.text(trainingTitleArray[trainingTitleIndex], trainingTitlePosition, currentHeightPosition);
            currentHeightPosition += doc.getFontSize()*0.352778+doc.getLineHeightFactor()*0.352778;
        }

        doc.setFont(pdfFont, "normal");
        doc.setFontSize(15);

        var additionalInformationText = "";
    
        if(jQuery('#zertifikat-additional-info-text').val().trim() != ""){
            additionalInformationText = jQuery('#zertifikat-additional-info-text').val();
        }
    
        if(additionalInformationText == ""){
            additionalInformationText += "teilgenommen.";
        }
        else{
            additionalInformationText += " teilgenommen.";
        }
    
        doc.setTextColor(introductionColor);

        var additionalInformationTextArray = doc.splitTextToSize(additionalInformationText, maxContentWidth);
        for(var additionalInformationTextIndex = 0; additionalInformationTextIndex < additionalInformationTextArray.length; additionalInformationTextIndex++){
            var additionalInformationTextDim = doc.getTextDimensions(additionalInformationTextArray[additionalInformationTextIndex]);
            var additionalInformationTextPosition = pdfMarginLeft;
        
            if(introdcutionOrientation == "left"){
                additionalInformationTextPosition = pdfMarginLeft;
            }
            else if(introdcutionOrientation == "center"){
                additionalInformationTextPosition = (maxContentWidth/2) - (additionalInformationTextDim['w']/2) + pdfMarginLeft;
            }
            else if(introdcutionOrientation == "right"){
                additionalInformationTextPosition = maxContentWidth - additionalInformationTextDim['w'] + pdfMarginLeft;
            }

            doc.text(additionalInformationTextArray[additionalInformationTextIndex], additionalInformationTextPosition, currentHeightPosition);
            currentHeightPosition += doc.getFontSize()*0.352778+doc.getLineHeightFactor()*0.352778;
        }

        currentHeightPosition += doc.getFontSize()*0.352778+doc.getLineHeightFactor()*0.352778;
    }
    // Füge alternativen einleitenden Text in Dokument ein
    else{
        var altInfoTextArray = doc.splitTextToSize(altInfoText, maxContentWidth);
        
        for(var altInfoTextIndex = 0; altInfoTextIndex < altInfoTextArray.length; altInfoTextIndex++){
            var altInfoTextDim = doc.getTextDimensions(altInfoTextArray[altInfoTextIndex]);
            var altInfoTextPosition = pdfMarginLeft;
        
            if(introdcutionOrientation == "left"){
                altInfoTextPosition = pdfMarginLeft;
            }
            else if(introdcutionOrientation == "center"){
                altInfoTextPosition = (maxContentWidth/2) - (altInfoTextDim['w']/2) + pdfMarginLeft;
            }
            else if(introdcutionOrientation == "right"){
                altInfoTextPosition = maxContentWidth - altInfoTextDim['w'] + pdfMarginLeft;
            }

            doc.text(altInfoTextArray[altInfoTextIndex], altInfoTextPosition, currentHeightPosition);
            currentHeightPosition += doc.getFontSize()*0.352778+doc.getLineHeightFactor()*0.352778;
        }

        currentHeightPosition += doc.getFontSize()*0.352778+doc.getLineHeightFactor()*0.352778;
    }

    

    // Füge optionale Beschreibung des Trainings dem Dokument hinzu
    var additionalTrainingInfoText = jQuery('#zertifikat-additional-traininginfo-text').val();
    if(additionalTrainingInfoText.trim() != ""){
        var additionalTrainingInfoOrientation = "";
        if(jQuery('#zertifikat-additional-traininginfo-orientation-left').is(':checked')){
            additionalTrainingInfoOrientation = "left";
        }
        else if(jQuery('#zertifikat-additional-traininginfo-orientation-center').is(':checked')){
            additionalTrainingInfoOrientation = "center";
        }
        else if(jQuery('#zertifikat-additional-traininginfo-orientation-right').is(':checked')){
            additionalTrainingInfoOrientation = "right";
        }

        var additionalTraininginfoColor = jQuery('#zertifikat-additional-traininginfo-color').val();
        doc.setTextColor(additionalTraininginfoColor);

        doc.setFontSize(15);
        var additionalTrainingInfoTextArray = doc.splitTextToSize(additionalTrainingInfoText, maxContentWidth);

        for(var additionalTrainingInfoTextIndex = 0; additionalTrainingInfoTextIndex < additionalTrainingInfoTextArray.length; additionalTrainingInfoTextIndex++){
            var additionalTrainingInfoTextDim = doc.getTextDimensions(additionalTrainingInfoTextArray[additionalTrainingInfoTextIndex]);
            var additionalTrainingInfoTextPosition = pdfMarginLeft;
            if(additionalTrainingInfoOrientation == "left"){
                additionalTrainingInfoTextPosition = pdfMarginLeft;
            }
            else if(additionalTrainingInfoOrientation == "center"){
                additionalTrainingInfoTextPosition = (maxContentWidth/2) - (additionalTrainingInfoTextDim['w']/2) + pdfMarginLeft;
            }
            else if(additionalTrainingInfoOrientation == "right"){
                additionalTrainingInfoTextPosition = maxContentWidth - additionalTrainingInfoTextDim['w'] + pdfMarginLeft;
            }

            doc.text(additionalTrainingInfoTextArray[additionalTrainingInfoTextIndex], additionalTrainingInfoTextPosition, currentHeightPosition);
            currentHeightPosition += doc.getFontSize()*0.352778+doc.getLineHeightFactor()*0.352778;
        }
        currentHeightPosition += doc.getFontSize()*0.352778+doc.getLineHeightFactor()*0.352778;
    }

    // Schlussformel
    doc.setFontSize(15);
    var currentDate = new Date();
    var closingLocation = jQuery('#zertifikat-closing-location').val();
    var currentDateDay = "";
    if(currentDate.getDate()>=10){
        currentDateDay = currentDate.getDate();
    }
    else{
        currentDateDay = "0"+currentDate.getDate();
    }

    var currentDateMonth = "";
    if((currentDate.getMonth()+1)>=10){
        currentDateMonth = (currentDate.getMonth()+1);
    }
    else{
        currentDateMonth = "0"+(currentDate.getMonth()+1);
    }
    var closingLocationDate = closingLocation + ", " + currentDateDay + "." + currentDateMonth + "." + currentDate.getFullYear();

    var closingOrientation = "";
    if(jQuery('#zertifikat-closing-orientation-left').is(':checked')){
        closingOrientation = "left";
    }
    else if(jQuery('#zertifikat-closing-orientation-center').is(':checked')){
        closingOrientation = "center";
    }
    else if(jQuery('#zertifikat-closing-orientation-right').is(':checked')){
        closingOrientation = "right";
    }

    var closingColor = jQuery('#zertifikat-closing-color').val();
    doc.setTextColor(closingColor);

    var closingLocationDateArray = doc.splitTextToSize(closingLocationDate, maxContentWidth);
    for(var closingLocationDateIndex = 0; closingLocationDateIndex < closingLocationDateArray.length; closingLocationDateIndex++){
        var closingLocationDateDim = doc.getTextDimensions(closingLocationDateArray[closingLocationDateIndex]);
        var closingLocationDatePosition = pdfMarginLeft;
        if(closingOrientation == "left"){
            closingLocationDatePosition = pdfMarginLeft;
        }
        else if(closingOrientation == "center"){
            closingLocationDatePosition = (maxContentWidth/2) - (closingLocationDateDim['w']/2) + pdfMarginLeft;
        }
        else if(closingOrientation == "right"){
            closingLocationDatePosition = maxContentWidth - closingLocationDateDim['w'] + pdfMarginLeft;
        }

        doc.text(closingLocationDateArray[closingLocationDateIndex], closingLocationDatePosition, currentHeightPosition);
        currentHeightPosition += doc.getFontSize()*0.352778+doc.getLineHeightFactor()*0.352778;
    }

    doc.setFontSize(10);
    var closingPersons = jQuery('#zertifikat-closing-persons').val();
    var closingPersonsArray = doc.splitTextToSize(closingPersons, maxContentWidth);
    for(var closingPersonsIndex = 0; closingPersonsIndex < closingPersonsArray.length; closingPersonsIndex++){
        var closingPersonsDim = doc.getTextDimensions(closingPersonsArray[closingPersonsIndex]);
        var closingPersonsPosition = pdfMarginLeft;
        if(closingOrientation == "left"){
            closingPersonsPosition = pdfMarginLeft;
        }
        else if(closingOrientation == "center"){
            closingPersonsPosition = (maxContentWidth/2) - (closingPersonsDim['w']/2) + pdfMarginLeft;
        }
        else if(closingOrientation == "right"){
            closingPersonsPosition = maxContentWidth - closingPersonsDim['w'] + pdfMarginLeft;
        }

        doc.text(closingPersonsArray[closingPersonsIndex], closingPersonsPosition, currentHeightPosition);
        currentHeightPosition += doc.getFontSize()*0.352778+doc.getLineHeightFactor()*0.352778;
    }

    if(jQuery('#zertifikat-closing-img-url').val().trim() != ""){
        var closingImgUrl = jQuery('#zertifikat-closing-img-url').val();
        var closingImgProperties = doc.getImageProperties(closingImgUrl);
        var closingImgHeight = parseInt(jQuery('#zertifikat-closing-img-height').val());
        var closingImgWidth = parseInt(jQuery('#zertifikat-closing-img-width').val());
        
        var closingImgPosition = pdfMarginLeft;
        if(closingOrientation == "left"){
            closingImgPosition = pdfMarginLeft;
        }
        else if(closingOrientation == "center"){
            closingImgPosition = (maxContentWidth/2) - (closingImgWidth/2) + pdfMarginLeft;
        }
        else if(closingOrientation == "right"){
            closingImgPosition = maxContentWidth - closingImgWidth + pdfMarginLeft;
        }

        doc.addImage(closingImgUrl, closingImgProperties['fileType'], closingImgPosition, currentHeightPosition, closingImgWidth, closingImgHeight, "", "FAST");
        // Füge einen Abstand unterhalb des Bildes hinzu
        currentHeightPosition+= logoHeight + 3*(doc.getFontSize()*0.352778+doc.getLineHeightFactor()*0.352778);
    }

    // Optionaler Footer
    var footerText = jQuery('#zertifikat-footer-text').val();
    if(footerText.trim() != ""){
        doc.setFontSize(10);
        var footerColor = jQuery('#zertifikat-footer-color').val();
        doc.setTextColor(footerColor);
        var footerTextArray = doc.splitTextToSize(footerText, maxContentWidth);

        var footerHeightPosition = maxHeight - pdfMarginBottom;

        for(var footerTextIndex = (footerTextArray.length-1); footerTextIndex >= 0; footerTextIndex--){
            doc.text(footerTextArray[footerTextIndex], pdfMarginLeft, footerHeightPosition);
            footerHeightPosition -= doc.getFontSize()*0.352778+doc.getLineHeightFactor()*0.352778;
        }
    }

    var currentDateHour = "";
    if(currentDate.getHours()>=10){
        currentDateHour += currentDate.getHours();
    }
    else{
        currentDateHour = "0"+currentDate.getHours();
    }

    var currentDateMinutes = "";
    if(currentDate.getMinutes()>=10){
        currentDateMinutes += currentDate.getMinutes();
    }
    else{
        currentDateMinutes = "0"+currentDate.getMinutes();
    }

    // Ergänze Kennzeichnung, sofern ausgewählt
    if(jQuery('#zertifikat-add-userid').is(':checked')){

        // Ergänze Validierungscode, sofern ausgewählt
        if(jQuery('#zertifikat-add-validationcode').is(':checked')){
            var codeTime = currentDateHour+currentDateMinutes;
            var trainingId = jQuery('#zertifikat-training-dropdown').find(":selected").val();
            var validationCode = 123*parseInt(trainingId)+parseInt(codeTime);
            var validationCodeText = "Validierungscode: "+validationCode;
            doc.setTextColor('#000000');
            doc.setFontSize(8);
            doc.text(validationCodeText, 5, maxHeight-5-2*doc.getFontSize()*0.352778+doc.getLineHeightFactor()*0.352778);
        }

        var identificationText = "Wurde vom Teilnehmenden mit der ID 123 am " + currentDateDay + "." + currentDateMonth + "." + currentDate.getFullYear() + " um " + currentDateHour + ":" + currentDateMinutes + " Uhr erstellt.";
        doc.setTextColor('#000000');
        doc.setFontSize(8);
        doc.text(identificationText, 5, maxHeight-5); 
    }

    var outputString = doc.output('datauristring');
    jQuery('#zertifikat-preview').attr('src', outputString);

}
</script>