
<style>
    #header {
      font-family: Arial, Helvetica, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }
    
    #header td, #customers th {
     
      padding:4px;
      font-size:12px;
    }
    
    #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;
    }
    </style>
    
    
    
    
    <style>
    #scan {
      font-family: Arial, Helvetica, sans-serif;
    
      width: 100%;
      border: 1px solid #ddd;
    }
    
    #scan td, #scan th {
     
      padding: 8px;
      font-size:20px;
    }
    
    #scan tr:nth-child(even){background-color: #ffffff;}
    
    #scan tr:hover {background-color: #ddd;}
    
    #scan th {
      padding-top: 12px;
      padding-bottom: 12px;
      text-align: left;
      padding:4px;
      color:black;
    }
    </style>
    
    
    <style>
    #scan {
      font-family: Arial, Helvetica, sans-serif;
    
      width: 100%;
    }
    
    #scan td, #scan th {
      
      padding: 8px;
      font-size:12px;
    }
    
    
    #scan tr:nth-child(even){background-color: #ffffff;}
    
    #scan tr:hover {background-color: #ddd;}
    
    #scan th {
      border-collapse: collapse;
      padding-top: 12px;
      padding-bottom: 12px;
      text-align: left;
      padding:4px;
      color:black;
    }
    </style>
    
    
    
    <style>
    #details {
      font-family: Arial, Helvetica, sans-serif;
      border-collapse: collapse;
      width: 50%;
    }
    
    #details td, #details th {
     
      padding: 8px;
      font-size:16px;
    }
    
    #details tr:nth-child(even){background-color: #ffffff;}
    
    #details tr:hover {background-color: #ffffff;}
    
    #details th {
      padding-top: 12px;
     font-style:bold;
      padding-bottom: 12px;
      text-align: left;
      padding:4px;
      color:black;
    }
    </style>
    
    <style>
    #sign {
      font-family: Arial, Helvetica, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }
    
    #sign td, #sign th {
    
      padding: 8px;
      font-size:11px;
      text-align: center;
    }
    
    #sign tr:nth-child(even){background-color: #ffffff;}
    
    #sign tr:hover {background-color: #ddd;}
    
    #sign th {
      padding-top: 12px;
      padding-bottom: 12px;
      text-align: left;
      padding:4px;
      color:black;
    }
    </style>
    
    
    
    <style>
    #title {
      font-family: Arial, Helvetica, sans-serif;
      border-collapse: collapse;
      width: 50%;
    }
    
    #title td, #title th {
     
      padding:4px;
      font-size:12px;
      border: 0px solid #fff;
    }
    
    #title tr:nth-child(even){background-color: #ffffff;}
    
    #title tr:hover {background-color: #ddd;}
    
    #title th {
      padding-top: 12px;
      padding-bottom: 12px;
      text-align: left;
      padding:4px;
      color:black;
    
    }
    </style>
    
    <style>
    #details {
      font-family: Arial, Helvetica, sans-serif;
      border-collapse: collapse;
      width:80%;
    
    }
    
    #details td, #details th {
     
      padding:4px;
      font-size:16px;
      border: 1px solid #ddd;
    }
    
    #details tr:nth-child(even){background-color: #ffffff;}
    
    #details tr:hover {background-color: #ddd;}
    
    #details th {
      padding-top: 12px;
      padding-bottom: 12px;
      text-align: left;
      padding:4px;
      color:black;
    
    }
    </style>
    
    
    
    <style>
    #tarikh_cetak {
    
      font-family: Arial, Helvetica, sans-serif;
      border-collapse: collapse;
      width: 50%;
    }
    
    
    #tarikh_cetak  td, #tarikh_cetak th {
     
      padding:4px;
      font-size:10px;
    
    }
    
    #tarikh_cetak  tr:nth-child(even){background-color: #ffffff;}
    
    #tarikh_cetak  tr:hover {background-color: #ddd;}
    
    #tarikh_cetak  th {
      padding-top: 12px;
      padding-bottom: 12px;
      text-align: left;
      padding:4px;
      color:black;
    
    }
    </style>
    
    
    <style>
    #data {
      font-family: Arial, Helvetica, sans-serif;
      border-collapse: collapse;
      width: 80%;
    
    
    }
    
    #data td, #data th {
     
      padding:4px;
      font-size:16px;
    }
    
    
    #data tr:nth-child(even){background-color: #ffffff;}
    
    #data tr:hover {background-color: #ddd;}
    
    #data th {
      padding-top: 11px;
      padding-bottom: 11px;
      text-align: left;
      padding:4px;
      color:black;
      font-size:14px;
    
    
    }
    </style>
    
    
    
    
    
    <style>
    #tarikh_ib {
      font-family: Arial, Helvetica, sans-serif;
      border-collapse: collapse;
      width:45%;
    }
    
    #tarikh_ib td, #tarikh_ib th {
     
      padding:4px;
      font-size:12px;
    }
    
    #tarikh_ib tr:nth-child(even){background-color: #ffffff;}
    
    #tarikh_ib tr:hover {background-color: #ddd;}
    
    #tarikh_ib th {
      padding-top: 12px;
      padding-bottom: 12px;
      text-align: left;
      padding:4px;
      color:black;
    }
    </style>
    
    
    
    <style>
    #GL {
      font-family: Arial, Helvetica, sans-serif;
      border-collapse: collapse;
      width:100%;
    }
    
    #GL td, #GL th {
     
      padding:4px;
      font-size:12px;
      border: 1px solid #ddd;
    }
    
    #GL tr:nth-child(even){background-color: #ffffff;}
    
    #GL tr:hover {background-color: #ddd;}
    
    #GL th {
      padding-top: 12px;
      padding-bottom: 12px;
      text-align: left;
      padding:4px;
      color:black;
    }
    </style>
    
    
    
    
    <style>
    #GL_dtl {
      font-family: Arial, Helvetica, sans-serif;
      border-collapse: collapse;
      width:100%;
    }
    
    #GL_dtl td, #GL_dtl th {
     
      padding:4px;
      font-size:12px;
      border: 1px solid #ddd;
    }
    
    #GL_dtl tr:nth-child(even){background-color: #ffffff;}
    
    #GL_dtl tr:hover {background-color: #ddd;}
    
    #GL_dtl th {
      padding-top: 12px;
      padding-bottom: 12px;
      text-align: left;
      padding:4px;
      color:black;
    }
    </style>
    
    
    <style>
    #dtl_ib {
      font-family: Arial, Helvetica, sans-serif;
      border-collapse: collapse;
      width:100%;
    }
    
    #dtl_ib td, #dtl_ib th {
     
      padding:4px;
      font-size:12px;
      border: 1px solid #ddd;
    }
    
    #dtl_ib tr:nth-child(even){background-color: #ffffff;}
    
    #dtl_ib tr:hover {background-color: #ddd;}
    
    #dtl_ib th {
      padding-top: 12px;
      padding-bottom: 12px;
      text-align: left;
      padding:4px;
      color:black;
    }
    </style>
    
    
    <style>
    #total_harta {
      font-family: Arial, Helvetica, sans-serif;
      border-collapse: collapse;
      width:100%;
    }
    
    #total_harta td, #total_harta th {
     
      padding:4px;
      font-size:12px;
      border: 1px solid #ddd;
    }
    
    #total_harta tr:nth-child(even){background-color: #ffffff;}
    
    #total_harta tr:hover {background-color: #ddd;}
    
    #total_harta th {
      padding-top: 12px;
      padding-bottom: 12px;
      text-align: left;
      padding:4px;
      color:black;
    }
    </style>


    
    
    
    <table id="header">
      <tr>
        <th rowspan="4"  style="width:50px"><br><img src="{{ asset('img/ARRAHN1.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>
    <br>
    
    
    <table id="tarikh_ib">
    <tr>
     <td colspan="2" > <B><U>Laporan Kenyataan Akaun </U></B></td>
    
    
    </tr>
    </table>
    
    <table id="tarikh_ib">
    
    <tr><td style="width:10px" ><b>ID</b></td ><td style="width:20px"> {{ (Auth::user()->name) ? Auth::user()->name : ''}}  </td> </tr>
    <br>
    <tr><td style="width:10px" ><b>Tarikh Laporan</b></td ><td style="width:20px"> {{ $tarikh }} </td><td style="width:18px" ><b>Tarikh Cetak</b></td><td style="width:25px">  {{ $tarikh_cetak }} </td> </tr>
    
    </table>
    <br>
    
    <table style=" width: 100%; border-collapse: collapse;">
      <thead>
        <tr>
          <th style="border: 1px solid #ddd;text-align: left;padding: 8px;font-weight:bold;text-align:center;">Tarikh</th>
          <th style="border: 1px solid #ddd;text-align: left;padding: 8px;font-weight:bold;text-align:center;">Debit</th>
          <th style="border: 1px solid #ddd;text-align: left;padding: 8px;font-weight:bold;text-align:center;">Kredit</th>
          <th style="border: 1px solid #ddd;text-align: left;padding: 8px;font-weight:bold;text-align:center;">Nota</th>
        </tr>
      </thead>
      <tbody>
        @foreach ($acc_statement as $acc)
        <tr>
          <td style="border: 1px solid #ddd;text-align: left;padding: 8px;text-align:center;">{{ $acc['tarikh'] }}</td>
          <td style="border: 1px solid #ddd;text-align: left;padding: 8px;text-align:right;">{{ number_format($acc['tambah'],2) }}</td>
          <td style="border: 1px solid #ddd;text-align: left;padding: 8px;text-align:right;">{{ number_format($acc['kurang'],2) }}</td>
          <td style="border: 1px solid #ddd;text-align: left;padding: 8px;text-align:center;">{{ $acc['nota'] }}</td>
        </tr>
        @endforeach
      </tbody>
    </table>

    <br>

    <table id="sign" style="margin-top:200px;">
      <tr>
        <td></td>
        <td colspan="2"> .................................................................. </td>
        <td> </td>
        <td colspan="2">.................................................................. </td>
        <td> </td>
      </tr>
      <tr>
        <td></td>
        <td colspan="2"><B> DI SEMAK</B> </td>
        <td> </td>
        <td colspan="2"><B>DI SAHKAN </B></td>
        <td> </td>
      </tr>
    </table>
    