<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <title>Certificate of Completion</title> --> 
             <!-- App Favicon -->
             <link rel="shortcut icon" href="http://localhost/hmspk.com/assets/images/favicon.ico">

            <!-- App title -->
            <title>SkedWise</title>
    <style> 

.alert-danger {
    background-color: rgba(240, 80, 80, 0.2);
    border-color: rgba(240, 80, 80, 0.3);
    color: #ff5b5b;
}
        h1 {
            font-weight: normal;
            text-align: center;
            margin: 0px 100px 0px 100px;
        }
        .awarded_to {
            font-weight: 100;
            text-align: center;
        }
        .details {
            font-weight: 100;
            text-align: center;
            margin: 10px 100px 0px 100px;
        }
        table {
            width: 100%;
            border: 0;
            padding: 9% 24% 9% 25%;
        }
        .td_line {
            border-top: 1.5px solid black;
            width: 18%;
        }
        .td_line div {
            padding-top: 15px;
            font-size: 16px;
        }
        .td_line_value {
            width: 18%;
        }
        .td_line_value div {
            font-size: 18px;
        }
        .td_line_value div img {
            width: 40%;
            height: 40%;
        }
        table tbody tr td div {
            text-align: center;
        }
        .candidate_dashboard_wrapper {
            background-image: url('<?php  echo base_url()."assets/images/backgorung_certificate.png";?>'); 
            background-repeat: no-repeat;
            background-size: 100% 100vh;
            margin: 0px 8px 0px 0px;
        } 

        .company_logo {
            float: right;
            width: 250px;
            height: 70px;
            object-fit: cover;
        }
        .grassroot_logo {
            width: 250px;
            height: 70px;
            object-fit: cover;
        } 

        .signature-container {
    margin: 20px;
    font-family: Arial, sans-serif;
}

/* .signature-box {
    width: 400px;
    height: 200px;
    border: 2px solid #000;
    background-color: #fff;
    position: relative;
}

canvas {
    position: absolute;
    top: 0;
    left: 0; 
     cursor: crosshair;
} */

    </style>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"
        integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg=="
        crossorigin="anonymous"
        referrerpolicy="no-referrer">
    </script>
</head>   
<body  id="certificate"> 
        <?php  
            $payment_flag=false; 
            if(isset($invoice_data)){
                if($invoice_data->invoice_amount >  $invoice_data->paid_amount){
                     $payment_flag=false; 
                }else{
                    $payment_flag=true;
                }
            }  
        ?>

      <div class="row hidden-print" <?php if($payment_flag == false){echo "style='display:block ; margin: 100px 100px 100px 100px;'";}else{ echo "style='display:none'";} ?>>
                 <div class="col-sm-12">
                     <div class="alert alert-danger" style="padding: 60px">
                         <strong>Warning!</strong> Your payment has not been completed; therefore, the certificate is unavailable at this moment.
                      </div>
                 </div>
    </div>

    <div class="candidate_dashboard_wrapper" <?php if($payment_flag == false){echo "style='display:none'";} ?>>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                            <div style="padding: 86px 99px 50px 99px;; text-align: center;">
                                <span>
                                    <img src=" <?php if(isset($certificate_data)){ echo base_url(); ?>assets/images/business/<?php echo $certificate_data->business_logo; }else { echo base_url().'assets/images/skedwise.png'; } ?>" class="img-responsive grassroot_logo" alt="logo">
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-3 col-md-3 col-sm-12 col-3"></div>
                        <div class="col-lg-6 col-md-6 col-sm-12 col-6">
                            <div>
                               <h1>CERTIFICATE OF COMPLETION</h1>
                            </div>
                            <div>
                                <h2 class="awarded_to">Awarded to <b>  <?php if(isset($certificate_data)){echo $certificate_data->customer_name;}  ?> </b></h2>
                            </div>
                            <div>
                                <p class="details">
                                    The person above has completed the <b><?php if(isset($certificate_data)){echo $certificate_data->service_name;}  ?></b> for Company <b><?php if(isset($certificate_data)){echo $certificate_data->business_name;}  ?></b>
                                </p>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-12 col-3"></div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                            <table>
                                <tbody>
                                    <tr>
                                        <td class="td_line_value">
                                            <div><?php echo  date('M d, Y'); ?></div>
                                        </td>
                                        <td style="width: 5%"></td>
                                        <td class="td_line_value"> 
                                               <div>
                                                <img src="<?php if(isset($ceo_signature)){ echo base_url(); ?>assets/images/business/<?php echo $ceo_signature->signature_image; }?>" alt="">
                                               </div>
                                             <!-- <div id="signature" class="signature-box">
                                               <canvas id="signatureCanvas"></canvas>
                                              </div> -->
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="td_line">
                                            <div>Date:</div>
                                        </td>
                                        <td style="width: 5%"></td>
                                        <td class="td_line">
                                            <div>Signature:</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>
    <script>
   function generatePDF() {
    const element = document.getElementById("certificate");
    html2pdf().from(element).save();
  } 


  function printDiv(divName) { 
        var printContents = document.getElementById(divName).innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
    } 
window.onload = function() { 
    <?php if($payment_flag== true){
        ?>
          printDiv('certificate'); 
        <?php
    }
    ?>
  
    // const images = document.images;
    // let loadedImagesCount = 0;

    // // Function to check if all images are loaded
    // function checkImagesLoaded() {
    //     if (loadedImagesCount === images.length) {
    //         generatePDF();
    //     }
    // }

    // if (images.length === 0) {
    //     generatePDF();
    // } else {
    //     for (let i = 0; i < images.length; i++) {
    //         const img = images[i];
    //         if (img.complete) {
    //             loadedImagesCount++;
    //         } else {
    //             img.addEventListener('load', function() {
    //                 loadedImagesCount++;
    //                 checkImagesLoaded();
    //             });
    //             img.addEventListener('error', function() {
    //                 loadedImagesCount++;
    //                 checkImagesLoaded();
    //             });
    //         }
    //     }
        // Fallback timeout in case images take too long to load
        // setTimeout(checkImagesLoaded, 5000);
    // }
};




    // document.addEventListener('DOMContentLoaded', () => {
    // const canvas = document.getElementById('signatureCanvas');
    // const ctx = canvas.getContext('2d');
    // let isDrawing = false;

    // // Set canvas size to match the signature box
    // canvas.width = canvas.parentElement.offsetWidth;
    // canvas.height = canvas.parentElement.offsetHeight;

    // // Set drawing color to black
    // ctx.strokeStyle = '#000';
    // ctx.lineWidth = 2;

    // function getMousePos(canvas, evt) {
    //     const rect = canvas.getBoundingClientRect();
    //     return {
    //         x: evt.clientX - rect.left,
    //         y: evt.clientY - rect.top
    //     };
    // }

    // function startDrawing(e) {
    //     isDrawing = true;
    //     const pos = getMousePos(canvas, e);
    //     ctx.beginPath();
    //     ctx.moveTo(pos.x, pos.y);
    // }

    // function draw(e) {
    //     if (!isDrawing) return;
    //     const pos = getMousePos(canvas, e);
    //     ctx.lineTo(pos.x, pos.y);
    //     ctx.stroke();
    // }

    // function stopDrawing() {
    //     isDrawing = false;
    //     ctx.closePath();
    // }

    // canvas.addEventListener('mousedown', startDrawing);
    // canvas.addEventListener('mousemove', draw);
    // canvas.addEventListener('mouseup', stopDrawing);
    // canvas.addEventListener('mouseleave', stopDrawing);
    // });

    </script>
</body>
</html>
