<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet">
        <title><?php echo $this->config->item('app_name') ?> <?php echo isset($title) ? ' | ' . $title : null; ?></title>
        <style type="text/css">
            * {
    font-size: 12px;
    font-family: 'Times New Roman';
}

.tbl td,
.tbl th,
.tbl,
.tbl table {
    border-top: 1px solid black;
    border-collapse: collapse;
}

.tbl td.description,
.tbl th.description {
    font-size: 8px;
    width: 3cm;
    max-width: 3cm;
}

.tbl td.quantity,
.tbl th.quantity {
    font-size: 8px;
    width: 1cm;
    max-width: 1cm;
    word-break: break-all;
}

.tbl td.price,
.tbl th.price {
    text-align:center;
    font-size: 8px;
    width: 2cm;
    max-width: 2cm;
    word-break: break-all;
}

.tbl td.no,
.tbl th.no {
    font-size: 8px;
    width: 1cm;
    max-width: 1cm;
}
td{
    font-size: 8px;
}
.centered {
    font-size: 10px;
    text-align: center;
    align-content: center;
}

.ticket {
    /*font-size: 8px;*/
    /*border*/
    /*border: solid 1px;*/
    /*background: black;*/
    width: 6cm;
    height: 4cm;
    max-height: 4cm;
    max-width: 6cm;
}

/*img {
    max-width: inherit;
    width: inherit;
}*/
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

@media print {
    .hidden-print,
    .hidden-print * {
        display: none !important;
    }
}
        </style>
    </head>
    <body onload="window.print()">
        <div class="ticket">
            <table width="100%">
                <td align="center">
                      <img class="logo" width="40px" src="<?php echo upload_url('school/' . logo()) ?>" alt="Logo">
                </td>
                <td align="center">
                     <p class="centered"><b><?php echo $setting_school['setting_value'] ?></b>
                <br><?php echo $setting_address['setting_value'] ?>,
                Kec. <?php echo $setting_district['setting_value'] ?></p>
                </td>
                
            </table>
          
           
         <div>
             <table>
                 <td>NISN</td>
                 <td>:</td>
                 <td>1232434343</td>
                 
                  <td>TA</td>
                 <td>:</td>
                 <td>2023/2024</td>
                  <td>Tgl</td>
                 <td>:</td>
                 <td>2023-08-09</td>
                 <tr>
                 <td>Nama</td>
                 <td>:</td>
                 <td>Erick Irwansyah</td>
                 <td>Kelas</td>
                 <td>:</td>
                 <td>X IPA</td>
                 </tr>
                
             </table>
         </div>
            <table class="tbl">
                <thead>
                    <tr>
                        <th class="quantity" width="20px">No.</th>
                        <th class="description">Pembayaran</th>
                        <th class="price">Total</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                $i =1;
                foreach ($bulan as $row) :
                    $namePay = $row['pos_name'].' - T.A '.$row['period_start'].'/'.$row['period_end'];
                    $mont = ($row['month_month_id']<=6) ? $row['period_start'] : $row['period_end'];
                 ?>
                    <tr>
                       <td   align="center" style="border-bottom: 1px solid;padding-top: 10px; padding-bottom: 10px;"><?php echo $i ?></td>
                        <td style="border-bottom: 1px solid;"><?php echo $namePay.' - ('.$row['month_name'].' '. $mont.')' ?></td>
                        <td class="price" style="border-bottom: 1px solid"><?php echo 'Rp. ' . number_format($row['bulan_bill'], 0, ',', '.') ?></td>
                    </tr>
                   <?php 
                $i++;
                endforeach ?>
                <?php
                $j =$i;
                foreach ($free as $row) :
                    $namePayFree = $row['pos_name'].' - T.A '.$row['period_start'].'/'.$row['period_end'];
                 ?>
                    <tr>
                        <tr>
                <td style="font-size: 8px;border-bottom: 1px solid;padding-top: 10px; padding-bottom: 10px;"><?php echo $j ?></td>
                <td style="font-size: 8px;border-bottom: 1px solid;"><?php echo $namePayFree .' - ('.$row['bebas_pay_desc'].')' ?></td>      
                <td style="font-size: 8px;border-bottom: 1px solid; text-align: right;"><?php echo number_format($row['bebas_pay_bill'], 0, ',', '.') ?></td>
            </tr>
            <?php 
                $j++;
                endforeach ?>
                    <tr>
                        <td class="quantity"></td>
                        <td class="description"><b style="font-size: 8px;">TOTAL</b></td>
                        <td align="center"><b style="font-size: 8px;"><?php echo number_format($summonth+$sumbeb, 0, ',', '.') ?></b></td>
                    </tr>
                </tbody>
            </table>
            <p class="centered" style="font-size: 8px;">Terima Kasih!, Simpan Bukti Pembayaran</p>
                <!-- <p class="centered"><?php  echo $this->config->item('app_name') ?></p> -->
        </div>
        <!-- <button id="btnPrint" class="hidden-print">Print</button> -->
        <script>
            const $btnPrint = document.querySelector("#btnPrint");
$btnPrint.addEventListener("click", () => {
    window.print();
});
        </script>
    </body>
</html>