


<!DOCTYPE html>
<html>
<head>
    <title><?=$this->lang->line('report_certificate')?></title>
    <script type="text/javascript" src="<?php echo base_url('assets/inilabs/jquery.min.js'); ?>"></script>

    <link rel="SHORTCUT ICON" href="<?=base_url("uploads/images/$siteinfos->photo")?>" />
    <link href="https://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Allerta+Stencil" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Fira+Sans+Extra+Condensed" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Limelight" rel="stylesheet">  
    <link href="https://fonts.googleapis.com/css?family=Michroma" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Prosto+One" rel="stylesheet"> 
    <link href="<?=base_url('assets/bootstrap/bootstrap.min.css')?>" rel="stylesheet">

    <link rel="stylesheet" href="<?php echo base_url('assets/inilabs/combined.css'); ?>" >

    <?php
        if(isset($headerassets)) {
            foreach ($headerassets as $assetstype => $headerasset) {
                if($assetstype == 'css') {
                  if(inicompute($headerasset)) {
                    foreach ($headerasset as $keycss => $css) {
                      echo '<link rel="stylesheet" href="'.base_url($css).'">'."\n";
                    }
                  }
                } elseif($assetstype == 'js') {
                  if(inicompute($headerasset)) {
                    foreach ($headerasset as $keyjs => $js) {
                      echo '<script type="text/javascript" src="'.base_url($js).'"></script>'."\n";
                    }
                  }
                }
            }
        }
    ?>

    <style type="text/css">

        @page {
            margin: 0.1cm;
            size: landscape;
            orientation: landscape;
            size: A4;
        }

        .mainTestimonial {
            position: relative;
        }

        .testimonialHead {
            left: 50%;
            position: absolute;
            top: 50%;
            transform: translate(-50%, 80%);
            font-size: 18px;
            padding: 3px 5px;
        }

        .topHeadingMiddleImg {
            width: 50px;
            height: 50px;
        }

        .topHeadingLeft {
            font-family: 'Prosto One', cursive;
            left: 11%;
            position: absolute;
            top: 50%;
            transform: translate(-50%, 50%);
            font-size: 14px;
            padding: 3px 5px;
        }

        .topHeadingMiddle {
            font-family: 'Prosto One', cursive;
            left: 50%;
            position: absolute;
            top: 50%;
            transform: translate(-50%, 50%);
            font-size: 14px;
            padding: 3px 5px;
        }

        .topHeadingRight {
            font-family: 'Prosto One', cursive;
            left: 84%;
            position: absolute;
            top: 50%;
            transform: translate(-50%, 50%);
            font-size: 14px;
            padding: 3px 5px;
        }

        .mainMiddleTextCenter {
            text-align: center;
        }

        .mainMiddleText {
            font-family: 'Limelight', cursive;
            font-size: 20px;
            padding: 3px 5px;
            width: 100%;
            text-align: center;
         }

         .top_heading_title {
            text-align: center;
            font-family: 'Allerta Stencil', sans-serif;
            text-transform: uppercase;
         }

        .testimonial {
            min-height: 550px;
            margin-left: auto;
            margin-right: auto;
            padding: 10%;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            background: url("<?='../../../../../../uploads/images/'.$certificate_template->background_image?>") no-repeat !important;
            background-size: 100% 100% !important;
            -webkit-print-color-adjust: exact;
        }

        @media print {
            .testimonial {
                min-height: 550px;
                margin-left: auto;
                margin-right: auto;
                padding: 10%;
                width: 100%;
                margin-left: auto;
                margin-right: auto;
                background: url("<?='../../../../../../uploads/images/'.$certificate_template->background_image?>") no-repeat !important;
                background-size: 100% 100% !important;
                -webkit-print-color-adjust: exact;
            }
        }

        .slno span {
            font-size: 16px;
            font-weight: 600;
        }

        .testimonialInfo {
            margin-top: 30px; 

        }

        .testimonialContent {
            font-family: 'Great Vibes', cursive;
            font-size: 24px;
            letter-spacing: 1px;
            line-height: 25px;
            letter-spacing: 4px;
        }

       .testimonialContent .dots {
            display: inline-block;
            height: 20px;
            line-height: 10px;
            position: relative;
            font-weight: 600;
        }

      .testimonialContent .dots::after {
            border-bottom: 2px dotted #999;
            bottom: 0;
            content: "";
            height: 0;
            left: 0;
            position: absolute;
            width: 100%;
        }

        .testimonialContent .dots::before {
            content: attr(data-hover);
            font-style: italic;
            height: 5px;
            left: 0;
            position: absolute;
            text-align: center;
            top: 10px;
            width: 100%;
        }

        .testimonialContent .dots.widthcss{
            width: 20%;
        }

        .headSection {
            margin-top: 80px;
        }

        .footerSection {
            margin-top: 30px;
        }

        .footer_left_text {
            font-family: 'Prosto One', cursive;
            font-size: 14px;

        }

        .footer_middle_text {
            font-family: 'Prosto One', cursive;
            font-size: 14px;
            text-align: center;
        }

        .footer_right_text {
            font-family: 'Prosto One', cursive;
            font-size: 14px;
            text-align: center;
        }
    </style>
</head>
<body>

    <div class="row">
        <div class="col-sm-12">

            <div id="printablediv">

                <div class="testimonial">
                    <div class="mainTestimonial">
                        <h2 class="top_heading_title"><?=$top_heading_title?></h2>

                       <div class="row">
                            <span class="topHeadingLeft"><?=$top_heading_left?></span> 

                            <span class="topHeadingMiddle"><img class="topHeadingMiddleImg" src="<?=base_url('uploads/images/'.$siteinfos->photo)?>"></span> 

                            <span class="topHeadingRight"><?=$top_heading_right?></span> 
                       </div>
                    </div>


                    <div class="headSection">
                        <div class="row" >
                            <div class="col-sm-12 mainMiddleTextCenter"><span class="mainMiddleText"><?=$main_middle_text?></span></div>
                        </div>
                    </div>

                    <div class="testimonialInfo">
                        <p class="testimonialContent">
                            <?=$template?>
                        </p>
                    </div>

                    <div class="footerSection">
                        <div class="row" >
                            <div class="col-sm-4 footer_left_text"><?=$footer_left_text?></div>
                            <div class="col-sm-4 footer_middle_text"></div>
                            <div class="col-sm-4 footer_right_text"><?=$footer_right_text?></div>
                        </div>
                    </div>
                </div>
            </div>

            <center>
                <button style="margin:50px;" class="btn btn-success btn-lg" onclick="javascript:printDiv('printablediv')">Print</button>
            </center>

        </div>
    </div>

<script language="javascript" type="text/javascript">
    function printDiv(divID) {
        //Get the HTML of div
        var divElements = document.getElementById(divID).innerHTML;
        //Get the HTML of whole page
        var oldPage = document.body.innerHTML;

        //Reset the page's HTML with div's HTML only
        document.body.innerHTML = divElements;

        //Print Page
        window.print();

        //Restore orignal HTML
        document.body.innerHTML = oldPage;
    }

    function closeWindow() {
        location.reload();
    }

</script>

</body>
</html>