<html>
<head>
    <style>
        .header{
            font-size:12px;
            font-weight: bold;
            margin-left:40px;

        }

        body {
            background: white; 
        }

        page {
            background: white;
            display: block;
            margin: 0 auto;
            margin-bottom: 0.5cm;
            /* box-shadow: 0 0 0.5cm rgba(0,0,0,0.5); */
        }

        page[size="A4"] {  
            width: 21cm;
            /* height: 29.7cm;  */
        }

        page[size="A4"][layout="landscape"] {
            width: 29.7cm;
            height: 21cm;  
        }

        @media print {
            body, page {
                margin: 0;
                box-shadow: 0;
            }
            
        }

        .middleheader{
            text-align: center;  
        }

        .container{
            font-family: Arial, Helvetica, sans-serif;
            width: 25%;
            border: 2px solid gray;
            border-radius: 15px;
            padding: 5px 10px 10px 30px;
            margin: 0 auto;
        }

        #header {
            font-family: Arial, Helvetica, sans-serif;
            border-collapse: collapse;
            width: 100%;
            margin-left:40px;
        }

        #header td, #customer th {
            padding:4px;
            font-size:10px;
        }

        #header tr:nth-child(even){
            background-color: #ffffff;
        }

        /* #header tr:hover {
            background-color: #ddd;
        } */

        #header th {
            padding-top: 12px;
            padding-bottom: 12px;
            text-align: left;
            padding:4px;
            color:black;
        }

        .statements{
            font-family: Arial, Helvetica, sans-serif;
            border-collapse: collapse;
            width: 95%;
            margin: 0 auto;
        }
        .statements th{
            font-size:14px;
            background-color: #f9ca24;
            border:1px solid gray;
            color:black;
            padding:4px 10px 4px 10px;
        }

        .statements td{
            border:1px solid gray;
            padding:4px 4px 4px 4px;

        }

        .center{
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            color: white;
            text-align: center;

        }

    </style>
</head>
<body onload="window.print()">
<page size="A4">
    <h6 class="header">SULIT DAN PERSENDIRIAN</h6>
    <table id="header">
        <tr>
        <th rowspan="4"  style="width:50px"><br><img src="{{ asset('img/icon_pkb.png') }}" style="width:70px"></img></th>
        <th colspan="1">KOPERASI PERMODALAN KELANTAN BERHAD</th>
        </tr>
        <tr>
        <td>{{ $cawangan_detail['namacaw'] }}</td>
        <td></td>
        </tr>
        <tr>
        <td>{{ $cawangan_detail['alamat1'] }}</td>
        <td></td>
        </tr>
        <tr>
        <td>{{ $cawangan_detail['alamat2'].' No Tel : '. $cawangan_detail['notel'].' No Faks : '. $cawangan_detail['nofaks'] }}</td>
        <td></td>
        </tr>
    </table>


    <h6 class="middleheader">PENYATA ALIRAN TUNAI : {{ $teller }}</h6>

    <div class="row" style="display: flex; justify-content: start;">
        <div class="container" style="flex: 1; margin-left: 20px;">
            <h3>Baki Awal</h3>
            <span>RM {{ number_format($alirantunai['bakiawal'], 2) }}</span>
        </div>
    
        <div class="container" style="flex: 1; margin-left: 10px;">
            <h3>Pendahuluan</h3>
            <span>RM {{ number_format($alirantunai['tambah'], 2) }}</span>
        </div>
    
        <div class="container" style="flex: 1; margin-left: 10px;">
            <h3>Penyelesaian Pem.</h3>
            <span>RM {{ number_format($alirantunai['masuk'], 2) }}</span>
        </div>
    </div>

    <div class="row" style="display: flex; justify-content: start; margin-top: 20px;">
        <div class="container" style="flex: 1; margin-left: 20px;">
            <h3>Baki Tunai Semasa</h3>
            <span>RM {{ number_format($alirantunai['baki'], 2) }}</span>
        </div>
    
        <div class="container" style="flex: 1; margin-left: 10px;">
            <h3>Serahan</h3>
            <span>RM {{ number_format($alirantunai['kurang'], 2) }}</span>
        </div>
    
        <div class="container" style="flex: 1; margin-left: 10px;">
            <h3>Pembiayaan</h3>
            <span>RM {{ number_format($alirantunai['keluar'], 2) }}</span>
        </div>
    </div>
    

    <h6 class="middleheader" style="margin-bottom:-5px;">KEMASUKAN TUNAI</h6>
    <br>

    <table class="statements">
        <tr>
            <th>TARIKH</th>
            <th>DEBIT (RM)</th>
            <th>KREDIT (RM)</th>
            <th>NOTA</th>
        </tr>
    @php $totaltambah = 0; $totalkurang = 0; @endphp
    @foreach($addtunai as $index=>$ad)
        @php $totaltambah += $ad['tambah']; $totalkurang += $ad['kurang']; @endphp
        <tr style="text-align:center;">
            <td>{{ $ad['tarikh'] }}</td>  
            <td>{{ number_format($ad['tambah'],2) }}</td>
            <td>{{ number_format($ad['kurang'],2) }}</td>
            <td>{{ $ad['nota'] }}</td> 
        </tr>
    @endforeach
        <tr style="text-align:center;">
            <td style="font-weight:bold;">JUMLAH</td>
            <td>{{ number_format($totaltambah,2) }}</td>
            <td>{{ number_format($totalkurang,2) }}</td>
            <td></td>
        </tr>
    </table>

</page>

<script>

 

</script>

</body>
</html>