@extends('layouts.app1')

@section('content')

<!-- page content -->
<div class="right_col" role="main">
          <div class="">
            <div class="page-title">
              <div class="title_left">
                <h3>Certificate</h3>
              </div>

              <div class="title_right">
                <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
                  <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for...">
                    <span class="input-group-btn">
                      <button class="btn btn-secondary" type="button">Go!</button>
                    </span>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="clearfix"></div>

            <div class="panel-body">
            
            </div>

            

            <div class="row container">
              <div class="col-md-12 col-sm-12">
<!--                <input type="button" class="btn btn-success text-center" onclick="printDiv('print-content')" value="print"/>
 -->                              <input type="button" class="btn btn-success text-center" onclick="saveDiv('print-content','certificate')" value="save as pdf"/>

                <div class="" id="print-content"> 

                    <div class="containers">
                        <img class="img-fluid" src="{{ url('/').'/images/logo.png' }}" style="width: 180px;">

                    <div class="inner size_top" id="inners">
                    <div class="input_text d-flex">
                    <p class=" headt left_color hide bold">CSP NAME:</p>
                    <p class=" headt right_color"><strong>{{strtoupper( $user->name)}}
                            {{strtoupper($user->last_name)}}</strong></p>
                    </div>
                    <div class="input_text ">
                    <p class="text"><span class="left_color hide bold">CSP CODE:</span> <strong class="right_color">{{strtoupper($user->show_login_id)}}</strong></p>
                    </div>
                    <div class="input_text d-flex">
                    <p class="text left_color "> <span class="hide bold">LOCATION:</span></p>
                    <p class="text right_color"><strong>{{strtoupper($user->address)}}</strong></p>
                    </div>
                    <div class="input_text">
                    <p class="text "> <span class="hide text left_color bold" >STATE:</span><span class="left_color"></span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong class="right_color">{{strtoupper($user->state)}}</strong> </p>
                    </div>
                    </div>
                </div>
         
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- /page content -->
<style type="text/css" media="print,screen">
    .centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
    .bold{
        font-weight: bold;
    }
    @page {
  size: A4;
  margin: 0;
}
    .right_color{
        color: #826134db;
    }
    .left_color{
        color: black;
    }    
    .size_top{
        margin-top: 521px;
        height: 165px;
    }
  .fade:not(.show){
    opacity: 1;
  }
  .x_panel{
    background:#f97b56;
    color: #fff;
  }
  .containers{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

}
.box_fix{
    background-color: whitesmoke;
  
}
    .container1{
  align-items: center;
  justify-content: center;
    height: 100%;

}

  .inner {
    position: absolute;

  display: table;
  
  
      max-width: 443px;

}
.input_text{
     border-bottom: 1px solid black;
     text-align: start;
}
.headt{
    font-size: 20px;
        margin-bottom: -2px;

}
.text{
        text-align: start;
    font-size: 20px;
    margin-bottom: -1px;
}
@media only screen and (max-width: 1545px) {
  .size_top {
    margin-top: 40%;
    height: 165px;
}
}
@media only screen and (max-width: 1245px) {
  .size_top {
    margin-top: 40%;
    height: 135px;
}
.text{
        text-align: start;
    font-size: 15px;
    margin-bottom: -1px;
}
}
@media only screen and (max-width: 1068px) {
  .size_top {
    margin-top: 39%;
    height: 45px;
}
.text{
        text-align: start;
    font-size: 15px;
    margin-bottom: -1px;
}
.inner {
    position: absolute;

  display: table;
  /*margin: 0  auto;*/
  background-color: whitesmoke;
      max-width: 342px;

}
}
@media only screen and (max-width: 991px) {
  .size_top {
    margin-top: 41%;
    height: 138px;
}
@media only screen and (max-width: 841px) {
  .size_top {
    margin-top: 39%;
    height: 119px;
}
.text{
        text-align: start;
    font-size: 15px;
    margin-bottom: -1px;
}
.inner {
    position: absolute;

  display: table;
  /*margin: 0  auto;*/
  background-color: whitesmoke;
      max-width: 301px;

}
}
@media only screen and (max-width: 789px) {
  .size_top {
    margin-top: 39%;
    height: 119px;
}
.text{
        text-align: start;
    font-size: 15px;
    margin-bottom: -1px;
}
.inner {
    position: absolute;

  display: table;
  /*margin: 0  auto;*/
  background-color: whitesmoke;
      max-width: 357px;

}
.headt{
    font-size: 15px;
        margin-bottom: -2px;

}
}
@media only screen and (max-width: 789px) {
  .size_top {
    margin-top: 40%;
    height: 96px;
}
.text{
        text-align: start;
    font-size: 14px;
    margin-bottom: -1px;
}
.inner {
    position: absolute;

  display: table;
  /*margin: 0  auto;*/
  background-color: whitesmoke;
      max-width: 357px;

}
.headt{
    font-size: 14px;
        margin-bottom: -2px;

}
}
</style>
<script src=
"https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js">
    </script>
<script type="text/javascript">

       var dataUrl=''; 
  
    function printDiv(divName) {
         let div =
                document.getElementById('print-content');
  
            // Use the html2canvas
            // function to take a screenshot
            // and append it
            // to the output div
            html2canvas(div).then(
                function (canvas) {
                    // document
                    // .getElementById('output')
                    // .appendChild(canvas);
                    var dataUrl = canvas.toDataURL();
                          var printWindow = window.open('', '', '');
    printWindow.document.write('<html><head><title>Print certificate</title>');
    
    // Make sure the relative URL to the stylesheet works:
    // printWindow.document.write('<base href="' + location.origin + location.pathname + '">');
    
    // Add the stylesheet link and inline styles to the new document:
    // printWindow.document.write('<link rel="stylesheet" href="css/invoice.css">');
    printWindow.document.write('<style type="text/css">.container1{align-items: center;  justify-content: center;height: 100%;}.inner{background-color:#f7f7f7; position: absolute;bottom:17%; left: 39%;transform: translate(-17%, 21%);max-width: 53%;}.input_text{line-height: 10px;display:flex;}.text{text-align: start;font-size: 1vw;} .right_color{color: #826134db;}.left_color{color: black;} .headt{font-size: 1vw;}.centered {position: absolute;top: 35%;left: 50%;transform: translate(-50%, -60%);} img{width:auto;height:100%}</style>');
    printWindow.document.write('</head><body class="centered">');
    printWindow.document.write('<img src="' + dataUrl + '">');
    printWindow.document.write('</body></html>');
    printWindow.document.close();
    setTimeout(function () {
        printWindow.print();
    }, 500);


                })
                
        
        // w=window.open('', '', '');
        // w.document.write(printContents);
        // w.print();
        // w.close();
         

     
    }
</script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>

<script type="text/javascript">
   
 function saveDiv(divId, title) { 
    var dataUrl='';

    let div =
                document.getElementById('print-content'); 
    html2canvas(div).then(
    function (canvas) {
        
    // document
    // .getElementById('output')
    // .appendChild(canvas);
    var dataUrl = canvas.toDataURL();
    var doc = new jsPDF();
        

 // doc.fromHTML(`<html><head><title>${title}</title></head><body><img src="${dataUrl}" ></body></html>`);
  // doc.fromHTML(`<html><head><title>${title}</title></head><body><h1>hiii its me dear</h1></body></html>`);

doc.addImage(dataUrl, 'png',0, 0, 210, 190);

 doc.save('certificate.pdf');
    })
}
</script>
@endsection