<html>
    <head>
        <title><?php echo $b_header['title']; ?></h3></title>
        <style>
            @media print
            {
                * {-webkit-print-color-adjust:exact;}
                  //.super_container {page-break-before: always; padding-top:10px; margin-bottom:150px !important;}
                //.page_break {page-break-after: always;}
                @page {margin:0in 0.10in 0in 0in; }
                .super_container
{
page-break-after: always;
// margin-bottom:200px;
 margin-top:0.25in;
position:relative;
width:100vw;
height:710px;
}
            }
body {margin: 0.25in 0.25in 0.63in 0.25in; box-sizing:border-box;width:100vw; height:100vh;padding-bottom:0.63in;}
            *{margin:0;padding:0;font-family:calibri;}
            .clear:after{content:"";clear:both;display:block;}
            .left{float:left;}
            .right{float:right;}
            .wd-10{width:10%;}
            .wd-20{width:20%;}
            .wd-30{width:30%;}
            .wd-40{width:40%;}
            .wd-50{width:50%;}
            .wd-60{width:60%;}
            .wd-70{width:70%;}
            .wd-80{width:80%;}
            .wd-90{width:90%;}
            .wd-100{width:100%;}
            .wd-15{width:15%;}
            .wd-25{width:25%;}
            .wd-35{width:35%;}
            .wd-45{width:45%;}
            .wd-55{width:55%;}
            .wd-65{width:65%;}
            .wd-75{width:75%;}
            .wd-85{width:85%;}
            .wd-95{width:95%;}
            .wd-100{width:100%;}
            .title{font-size:35px;}
            .super_container
            {
            margin-bottom:200px;
            position:relative;
            width:100vw;
            height:710px;
            }
            .wrapper{
                //width:calc(100vw - 20px);
                height:710px;
                margin:5px;
                //border:4px dotted #0e2746;
                outline: 7px double #0e2746;
                outline-offset: 5px;
                box-sizing: border-box;
                padding:5px;
                
                
            }
           
            .super_wrapper
            {
                position:absolute;
                top:0;
                left:0;
                width:100%;
                height:710px;
                z-index:120;
                margin:0;
                padding:0;
            }
            .watermark
            {
                height:200px;
                width:300px;
                //align:center;
                margin:auto;
                margin-left:600px;
                padding-top:50px;
                padding-left:120px;
                opacity:0.1;
                background:url('./watermark.jpg');
                background-size:100% 100%;
            }
            .watermark_wrapper
            {
                height:470px;
                width:100%;
                margin-top:150px;
                display:inline-flex;
                display:-webkit-inline-flex;
             }
            .wrapper.left2{
                width: calc(30vw - 5px);
                margin-right: 17px;
                margin-left: 17px;
            }
            
            h1,h2,h3{
                color:#0e2746;
                font-family:calibri;
                text-align:center;
            }
            //h3{font-weight: 700;}
            .boxed{background:#0e2746;color:#fff;width:80%;margin:0 auto;}
            .header{
                width:100%;
                //height:110px;
                border-bottom:2px solid #0e2746;
                padding-bottom:10px;            }
            .body{
                padding:10px;
            }
            .row{
                width:100%;
                margin: 3px auto;  
            }
            .text-center{text-align:center;}
            .bold{font-weight:bold;}
            .b-u-l{
                border-bottom: 1px solid #000;
                height:inherit;
            }
            .x-small{
                font-size: 10px;
            }
            .x-x-small{
                font-size: 7px;
            }
            .page_break{
                width: 100vw;
                height: 100vh;
                padding: 10px 0px;
                box-sizing: border-box;
            }
            .tbl1
            {
                border: 1px solid #000;
                text-align:center;
                width:100%;
                min-height:20px;
            }
            th{
                padding: 3px !important;
                font-size:14px;
            }
            td{
                padding: 3px !important;
                font-size:12px;
            }
            .normal{
                font-weight: normal !important;
            }
            .text-right{
                text-align: right !important;
            }
            p,b{
              font-size:14px;
            }
        </style>
    </head>
    <body class="clear">
<?php 
date_default_timezone_set("Asia/Karachi");
?>

 <div class="super_container">
    <div class="page_break clear">
     <div class="watermark_wrapper">
        <div class="watermark"></div>
        </div>
        <div class="super_wrapper">
        <div class="wrapper left2 left">
            <div class="header">
                 <div class="wd-100 clear">
                    <div class=" text-left left ">
                        <img src="<?php echo base_url().$b_header['logo1']; ?>" style="width:50px;height:50px;">
                    </div>
                    <div class=" text-left right ">
                        <img src="<?php echo base_url().$b_header['logo2']; ?>" style="width:50px;height:50px;">
                    </div>
                    <div style="">
                        <center><h4 style="color:#0e2746;"><?php echo $b_header['title']; ?></h4></center>
                        <center><h4>Fine Reciept</h4></center>
                        </br>
                         
                        <center><h3 class="boxed" style="margin-top:10px !important;">Library Copy</h3></center>
                    </div>
                </div>
            </div>
            <div class="body">
                <div class="row clear">
                    <div class="wd-100">
                       
                      <div class="left wd-20 x-large">
                            <p>Invoice No: </p>
                        </div>
                        <div class="left wd-30 x-large">
                            <b><?php echo $record['id']; ?></b>
                        </div>
                    </div>
                </div>
                <div class="row clear">
                    <div class="wd-100">
                        <div class="left wd-20 x-large">
                            <p>Issue Date: </p>
                        </div>
                        <div class="left wd-30 x-large">
                            <b><?php echo $record['s_date'];?></b>
                        </div>
                      <div class="left wd-20 x-large">
                            <p>Return Date: </p>
                        </div>
                        <div class="left wd-30 x-large">
                            <b><?php echo $record['e_date']; ?></b>
                        </div>
                    </div>
                </div>
                <div class="row clear">
                    <div class="left wd-30 x-large">
                        <p>Name:</p>
                    </div>
                    <div class="left wd-70 x-large">
                        <b><?php echo $record['firstname']." ".$record['lastname']; ?></b>
                    </div>
                </div>
                <div class="row clear">
                    <div class="left wd-30 x-large">
                        <p>P.NO:</p>
                    </div>
                    <div class="left wd-70 x-large">
                        <b><?php echo $record['emp_id']; ?></b>
                    </div>
                </div>
               <div class="row clear">
                    <div class="left wd-30 x-large">
                        <p>Book ISBN:</p>
                    </div>
                    <div class="left wd-70 x-large">
                        <b><?php echo $record['isbn']; ?></b>
                    </div>
                </div>
                <div class="row clear">
                    <div class="left wd-30 x-large">
                        <p>Book Name:</p>
                    </div>
                    <div class="left wd-70 x-large">
                        <b><?php echo $record['name']; ?></b>
                    </div>
                </div>
                <div class="row clear">
                    <div class="left ">
                        <b>The details of dues are as under: </b>
                    </div>
                    
                </div>
                <div class="row clear ">
                    <table class="tbl1" border="1">
                    <tr><th style="background:gray;color: white">Name</th><th style="background:gray;color: white">Amount</th></tr>
                    
                        <tr>
                            <td>Late Fine</td>
                            <td><?php echo $record['fine']; ?></td>
                           
                        </tr>
                        
                        
                    
                    <tr><th>Total</th><th><?php echo $t_quantity = $record['fine']; ?></th></tr>
                    
                    </table>
                    
                    <div class="footer" style="position:absolute;bottom:0;padding: 5px 0px;font-size:10px;width:28%;">
                        <center><p><i>Cadet College Sanghar</i></center>
                        <center><p>Email: <i><?php echo $b_header['email']; ?></i> | Ph #: <i><?php echo $b_header['phone_no']; ?></i></p></center>
                        <center><p>Website: <i>www.ccsanghar.com</i></p></center>
                    </div>
                </div>
                
            </div>
        </div>
        <?php $total=0;$t_quantity=0;?>
        <div class="wrapper left2 left">
            <div class="header">
                 <div class="wd-100 clear">
                    <div class=" text-left left ">
                        <img src="<?php echo base_url().$b_header['logo1']; ?>" style="width:50px;height:50px;">
                    </div>
                    <div class=" text-left right ">
                        <img src="<?php echo base_url().$b_header['logo2']; ?>" style="width:50px;height:50px;">
                    </div>
                    <div style="">
                        <center><h4 style="color:#0e2746;"><?php echo $b_header['title']; ?></h4></center>
                        <center><h4>Fine Reciept</h4></center>
                        </br>
                        <center><h3 class="boxed" style="margin-top:10px !important;">Accounts Copy</h3></center>
                    </div>
                </div>
            </div>
            <div class="body">
                <div class="row clear">
                    <div class="wd-100">
                       
                      <div class="left wd-20 x-large">
                            <p>Invoice No: </p>
                        </div>
                        <div class="left wd-30 x-large">
                            <b><?php echo $record['id']; ?></b>
                        </div>
                    </div>
                </div>
                <div class="row clear">
                    <div class="wd-100">
                       <div class="left wd-20 x-large">
                            <p>Issue Date: </p>
                        </div>
                        <div class="left wd-30 x-large">
                            <b><?php echo $record['s_date'];?></b>
                        </div>
                      <div class="left wd-20 x-large">
                            <p>Return Date: </p>
                        </div>
                        <div class="left wd-30 x-large">
                            <b><?php echo $record['e_date']; ?></b>
                        </div>
                    </div>
                </div>
                <div class="row clear">
                    <div class="left wd-30 x-large">
                        <p>Name:</p>
                    </div>
                   <div class="left wd-70 x-large">
                        <b><?php echo $record['firstname']." ".$record['lastname']; ?></b>
                    </div>
                </div>
                <div class="row clear">
                    <div class="left wd-30 x-large">
                        <p>P.NO:</p>
                    </div>
                    <div class="left wd-70 x-large">
                        <b><?php echo $record['emp_id']; ?></b>
                    </div>
                </div>
                <div class="row clear">
                    <div class="left wd-30 x-large">
                        <p>Book ISBN:</p>
                    </div>
                    <div class="left wd-70 x-large">
                        <b><?php echo $record['isbn']; ?></b>
                    </div>
                </div>
                <div class="row clear">
                    <div class="left wd-30 x-large">
                        <p>Book Name:</p>
                    </div>
                    <div class="left wd-70 x-large">
                        <b><?php echo $record['name']; ?></b>
                    </div>
                </div>
                <div class="row clear">
                    <div class="left ">
                        <b>The details of dues are as under: </b>
                    </div>
                    
                </div>
                <div class="row clear ">
                    <table class="tbl1" border="1">
                    <tr><th style="background:gray;color: white">Name</th><th style="background:gray;color: white">Amount</th></tr>
                    
                        <tr>
                            <td>Late Fine</td>
                            <td><?php echo $record['fine']; ?></td>
                           
                        </tr>
                       
                    
                    
                    <tr><th>Total</th><th><?php echo $t_quantity = $record['fine']; ?></th></tr>
                   
                    </table>
                  
                    <div class="footer" style="position:absolute;bottom:0;padding: 5px 0px;font-size:10px;width:28%;">
                        <center><p><i> Cadet College Sanghar</i></center>
                        <center><p>Email: <i><?php echo $b_header['email']; ?></i> | Ph #: <i><?php echo $b_header['phone_no']; ?></i></p></center>
                        <center><p>Website: <i>www.ccsanghar.com</i></p></center>
                    </div>
                </div>
                
            </div>
        </div><?php $total=0;$t_quantity=0;?>
        <div class="wrapper left2 left">
            <div class="header">
                 <div class="wd-100 clear">
                    <div class=" text-left left ">
                        <img src="<?php echo base_url().$b_header['logo1']; ?>" style="width:50px;height:50px;">
                    </div>
                    <div class=" text-left right ">
                        <img src="<?php echo base_url().$b_header['logo2']; ?>" style="width:50px;height:50px;">
                    </div>
                    <div style="">
                        <center><h4 style="color:#0e2746;"><?php echo $b_header['title']; ?></h4></center>
                        <center><h4>Fine Reciept</h4></center>
                        </br>
                         
                        <center><h3 class="boxed" style="margin-top:10px !important;"><?php 
                        if($u_type == 2)
                        {echo "Teacher";}
                        else{ echo "Staff";} ?>
                        Copy</h3></center>
                    </div>
                </div>
            </div>
            <div class="body">
                <div class="row clear">
                    <div class="wd-100">
                       
                      <div class="left wd-20 x-large">
                            <p>Invoice No: </p>
                        </div>
                        <div class="left wd-30 x-large">
                            <b><?php echo $record['id']; ?></b>
                        </div>
                    </div>
                </div>
                <div class="row clear">
                    <div class="wd-100">
                       <div class="left wd-20 x-large">
                            <p>Date: </p>
                        </div>
                        <div class="left wd-30 x-large">
                            <b><?php echo $record['s_date'];?></b>
                        </div>
                      <div class="left wd-20 x-large">
                            <p>Return Date: </p>
                        </div>
                        <div class="left wd-30 x-large">
                            <b><?php echo $record['e_date']; ?></b>
                        </div>
                    </div>
                </div>
                <div class="row clear">
                    <div class="left wd-30 x-large">
                        <p>Name:</p>
                    </div>
                    <div class="left wd-70 x-large">
                        <b><?php echo $record['firstname']." ".$record['lastname']; ?></b>
                    </div>
                </div>
                <div class="row clear">
                    <div class="left wd-30 x-large">
                        <p>P.NO:</p>
                    </div>
                    <div class="left wd-70 x-large">
                        <b><?php echo $record['emp_id']; ?></b>
                    </div>
                </div>
                <div class="row clear">
                    <div class="left wd-30 x-large">
                        <p>Book ISBN:</p>
                    </div>
                    <div class="left wd-70 x-large">
                        <b><?php echo $record['isbn']; ?></b>
                    </div>
                </div>
                <div class="row clear">
                    <div class="left wd-30 x-large">
                        <p>Book Name:</p>
                    </div>
                    <div class="left wd-70 x-large">
                        <b><?php echo $record['name']; ?></b>
                    </div>
                </div>
                
                <div class="row clear">
                    <div class="left ">
                        <b>The details of dues are as under: </b>
                    </div>
                    
                </div>
                <div class="row clear ">
                    <table class="tbl1" border="1">
                    <tr><th style="background:gray;color: white">Name</th><th style="background:gray;color: white">Amount</th></tr>
                    
                       <tr>
                            <td>Late Fine</td>
                            <td><?php echo $record['fine']; ?></td>
                           
                        </tr>
                        
                        
                    
                    <tr><th>Total</th><th><?php echo $t_quantity = $record['fine']; ?></th></tr>
                   
                    </table>
                   
                    
                    <div class="footer" style="position:absolute;bottom:0;padding: 5px 0px;font-size:10px;width:28%;">
                        <center><p><i> Cadet College Sanghar</i></center>
                        <center><p>Email: <i><?php echo $b_header['email']; ?></i> | Ph #: <i><?php echo $b_header['phone_no']; ?></i></p></center>
                        <center><p>Website: <i>www.ccsanghar.com</i></p></center>
                    </div>
                </div>
                
            </div>
        </div>
        
           
    </div>

</div>
</div>
    </body>
    <script>
        window.print();
    </script>
</html>
