<?php
$_certificate_content = get_post_meta( get_the_ID(), '_certificate_content', true );
$wrapper_width = (int) get_post_meta( get_the_ID(), '_certificate_content_wrapper_width', true );
if ( ! $wrapper_width ) {
	$wrapper_width = 520;
}
$wrapper_font_family = get_post_meta( get_the_ID(), '_certificate_content_wrapper_font_family', true );
$wrapper_textalign = get_post_meta( get_the_ID(), '_certificate_content_wrapper_textalign', true );
if ( empty( $wrapper_textalign ) ) {
	$wrapper_textalign = 'left';
}
$wrapper_text_color = get_post_meta( get_the_ID(), '_certificate_content_wrapper_font_color', true );
if ( empty( $wrapper_text_color ) ) {
	$wrapper_text_color = '#00305b';
}
$wrapper_font_size = (int) get_post_meta( get_the_ID(), '_certificate_content_wrapper_font_size', true );
if ( ! $wrapper_font_size ) {
	$wrapper_font_size = 18;
}

$wrapper_mt = get_post_meta( get_the_ID(), '_certificate_content_wrapper_mt', true );
$wrapper_mb = get_post_meta( get_the_ID(), '_certificate_content_wrapper_mb', true );
$wrapper_ml = get_post_meta( get_the_ID(), '_certificate_content_wrapper_ml', true );
if ( ! $wrapper_ml ){
	$wrapper_ml = 'auto';
}
$wrapper_mr = get_post_meta( get_the_ID(), '_certificate_content_wrapper_mr', true );
if ( ! $wrapper_mr ){
	$wrapper_mr = 'auto';
}

//Student
$student_name_font_family = get_post_meta( get_the_ID(), '_certificate_student_name_font_family', true );
$student_name_font_size = (int) get_post_meta( get_the_ID(), '_certificate_student_name_font_size', true );
if ( ! $student_name_font_size ) {
	$student_name_font_size = 18;
}

?>

<div class="dozent-option-field flex-grow-1 dozent-field-textarea">

    <p> <strong> <?php _e( 'Example Template', 'dozent-lms-certificate' ); ?> </strong> </p>

    <p class="dozent-border dozent-p-4 dozent-bg-light">
        This is certify to that <br />
        {student_name} <br />
        has successfully completed the online course of <br />
        {course_name} <br />
        on {date} <br />
    </p>

    <p> <strong> <?php _e( 'Certificate Content', 'dozent-lms-certificate' ); ?> </strong> </p>

    <textarea name="_certificate_content" class="dozent-form-control" rows="5" spellcheck="false"><?php echo $_certificate_content; ?></textarea>

    <!--<input type="color" name="color_picker_value" value="">-->
</div>



<div class="dozent-option-field flex-grow-1 dozent-field-text">

    <h3> <?php _e( 'Content Wrapper', 'dozent-lms-certificate' ); ?> </h3>

    <div class="dozent-option-field-wrap dozent-field-row-number">
        <div class="dozent-option-field-title">
            <label for="">
                <strong> <?php _e( 'Width', 'dozent-lms-certificate' ); ?> </strong>
            </label>
        </div>
        <div class="dozent-option-field flex-grow-1 dozent-field-number">
            <input type="number" name="_certificate_content_wrapper_width" value="<?php echo $wrapper_width; ?>">

            <p class="desc dozent-text-muted"> <?php _e( 'Set total width of certificate content as per your certificate design, preferable width is 520', 'dozent-lms-certificate' ); ?> </p>

        </div>
    </div>

    <div class="dozent-option-field-wrap dozent-field-row-number">
        <div class="dozent-option-field-title">
            <label for="">
                <strong> <?php _e( 'Font Family', 'dozent-lms-certificate' ); ?> </strong>
            </label>
        </div>
        <div class="dozent-option-field flex-grow-1 dozent-field-number">
            <select name="_certificate_content_wrapper_font_family">
                <option value="montserrat" <?php selected( 'montserrat', $wrapper_font_family ); ?> > Montserrat  </option>
                <option value="greatvibes" <?php selected( 'greatvibes', $wrapper_font_family ); ?> > GreatVibes  </option>
            </select>
        </div>
    </div>

    <div class="dozent-option-field-wrap dozent-field-row-number">
        <div class="dozent-option-field-title">
            <label for="">
                <strong> <?php _e( 'Font Size', 'dozent-lms-certificate' ); ?> </strong>
            </label>
        </div>
        <div class="dozent-option-field flex-grow-1 dozent-field-number">
            <input type="number" value="<?php echo $wrapper_font_size; ?>" name="_certificate_content_wrapper_font_size">
            <p class="desc dozent-text-muted">
				<?php _e( 'Set font size, preferable 18', 'dozent-lms-certificate' ); ?>
            </p>
        </div>
    </div>

    <div class="dozent-option-field-wrap dozent-field-row-number">
        <div class="dozent-option-field-title">
            <label for="">
                <strong> <?php _e( 'Font Color', 'dozent-lms-certificate' ); ?> </strong>
            </label>
        </div>
        <div class="dozent-option-field flex-grow-1 dozent-field-number">
            <input type="text" value="<?php echo $wrapper_text_color; ?>" name="_certificate_content_wrapper_font_color" class="dozent_color_picker" data-default-color="#00305b" />

            <p class="desc dozent-text-muted">
				<?php _e( 'Set color of the text', 'dozent-lms-certificate' ); ?>
            </p>
        </div>
    </div>

    <div class="dozent-option-field-wrap dozent-field-row-number">
        <div class="dozent-option-field-title">
            <label for="">
                <strong> <?php _e( 'Text Align', 'dozent-lms-certificate' ); ?> </strong>
            </label>
        </div>
        <div class="dozent-option-field flex-grow-1 dozent-field-number">
            <label>
                <input type="radio" name="_certificate_content_wrapper_textalign" value="left" <?php checked( 'left', $wrapper_textalign ); ?> >
                <?php _e( 'Left', 'dozent-lms-certificate' ); ?>
            </label>

            <label>
                <input type="radio" name="_certificate_content_wrapper_textalign" value="center" <?php checked( 'center', $wrapper_textalign ); ?> >
	            <?php _e( 'Center', 'dozent-lms-certificate' ); ?>
            </label>

            <label>
                <input type="radio" name="_certificate_content_wrapper_textalign" value="right" <?php checked( 'right', $wrapper_textalign ); ?> >
	            <?php _e( 'Right', 'dozent-lms-certificate' ); ?>
            </label>

        </div>
    </div>

    <div class="dozent-option-field-wrap dozent-field-row-number">
        <div class="dozent-option-field-title">
            <label for="">
                <strong> <?php _e( 'Margin', 'dozent-lms-certificate' ); ?> </strong>
            </label>
        </div>
        <div class="dozent-option-field flex-grow-1 dozent-field-number">

            <label>Top <input type="text" name="_certificate_content_wrapper_mt" size="10" value="<?php echo $wrapper_mt; ?>" > </label>
            <label>Bottom <input type="text" name="_certificate_content_wrapper_mb" size="10" value="<?php echo $wrapper_mb; ?>" ></label>
            <label>Left <input type="text" name="_certificate_content_wrapper_ml" size="10" value="<?php echo $wrapper_ml; ?>"  placeholder="auto" ></label>
            <label>Right <input type="text" name="_certificate_content_wrapper_mr" size="10" value="<?php echo $wrapper_mr; ?>" placeholder="auto" ></label>

            <p class="desc dozent-text-muted">
                <?php _e( 'Adjust top margin as per your designs requirement. To make center content, set left - auto, right - auto', 'dozent-lms-certificate' ); ?>
            </p>

        </div>
    </div>


    <h3> <?php _e( 'Student Name', 'dozent-lms-certificate' ); ?> </h3>

    <div class="dozent-option-field-wrap dozent-field-row-number">
        <div class="dozent-option-field-title">
            <label for="">
                <strong> <?php _e( 'Font Family', 'dozent-lms-certificate' ); ?> </strong>
            </label>
        </div>
        <div class="dozent-option-field flex-grow-1 dozent-field-number">
            <select name="_certificate_student_name_font_family">
                <option value="montserrat" <?php selected( 'montserrat', $student_name_font_family ); ?> > Montserrat  </option>
                <option value="greatvibes" <?php selected( 'greatvibes', $student_name_font_family ); ?> > GreatVibes  </option>
            </select>
        </div>
    </div>

    <div class="dozent-option-field-wrap dozent-field-row-number">
        <div class="dozent-option-field-title">
            <label for="">
                <strong> <?php _e( 'Font Size', 'dozent-lms-certificate' ); ?> </strong>
            </label>
        </div>
        <div class="dozent-option-field flex-grow-1 dozent-field-number">
            <input type="number" value="<?php echo $student_name_font_size; ?>" name="_certificate_student_name_font_size">
            <p class="desc dozent-text-muted">
                <?php _e( 'Set font size, preferable 18', 'dozent-lms-certificate' ); ?>
            </p>
        </div>
    </div>


</div>




<div class="certificate-test-btn-wrap dozent-mt-5">
    <button type="submit" name="test_dozent_certificate" class="dozent-btn dozent-primary-btn-bg" value="test_in_builder"> <?php _e( 'Test Certificate', 'dozent-lms-certificate' ); ?> </button>
</div>