<html>
<head>

  <script src="{{ asset('js/jquery.min.js') }}"></script>

<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;
  }

  #loading {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    opacity: 0.7;
    background-color: #fff;
    z-index: 99;
  }

  #loading-image {
    position: absolute;
    top: 100px;
    left: 240px;
    z-index: 100;
  }

  #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;
  }

  #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;
  }

  #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;
  }

  #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;
  }

  #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;

  }

  #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;

  }

  #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;

  }

  #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;


  }

  #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;
  }

  #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;
  }

  #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;
  }

  #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;
  }

  #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>
</head>
<body>
  <div id="loading">
    <img id="loading-image" src="{{ asset('img/loader.gif') }}" alt="Loading..." />
  </div>
<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 cospan="2" > <B><U>LAPORAN IMBANGAN DUGA CAWANGAN</U></B></td>


</tr>
</table>

<table id="tarikh_ib">


<tr><td style="width:10px" ><b>Tarikh Laporan</b></td ><td style="width:20px"> {{ ($tarikh_imbangan2) ? $tarikh_imbangan2 : ''}}  </td><td style="width:18px" ><b>Tarikh Cetak</b></td><td    style="width:25px"    > {{$tarikh_cetak}} </td> </tr>



</table>
<br>

<table id="GL_dtl"> 

  <tr>
    <th width="20%"> Kod GL </th>    
    <th colspan="1" width="60%">Keterangan </th>   
    <th width="20%">Amaun</th>
  </tr>

  <tr>
    <th><b> HARTA SEMASA</b> </th>
    <th></th>
    <th></th>
  </tr>

  @foreach($hartasemasa as $index => $assets)
  <tr>
    <td>{{ $assets['glcode'] }}</td>
    <td>{{ $assets['descpt'] }}</td>
    <td>{{ number_format($assets['amaun'],2) }}</td>
  </tr>
  @endforeach

  <tr>
    <td><b>JUMLAH </b></td>
    <td colspan="1"></td>
    <td><b>{{ number_format($totalhartasemasa,2) }}</b></td>
  </tr>

</table>
<br>
<table id="GL_dtl"> 

  <tr>
    <th width="20%"><b> TANGGUNGAN SEMASA</b> </th>
    <th width="60%"></th>
    <th width="20%"></th>
  </tr>

  @foreach($tanggungansemasa as $index => $liabilities)
  <tr>
    <td>{{ $liabilities['glcode'] }}</td>
    <td>{{ $liabilities['descpt'] }}</td>
    <td>{{ number_format($liabilities['amaun'],2) }}</td>
  </tr>
  @endforeach

  <tr>
    <td><b>JUMLAH </b></td>
    <td colspan="1"></td>
    <td>{{ number_format($totaltanggungansemasa,2) }}</td>
  </tr>

</table>
<br>
<table id="GL_dtl"> 

  <tr>
    <th width="20%"><b> Untung Rugi</b> </th>
    <th width="60%"></th>
    <th width="20%"></th>
  </tr>

  @foreach($untungrugifield as $index => $untungrugi)
  <tr>
    <td>{{ $untungrugi['glcode'] }}</td>
    <td>{{ $untungrugi['descpt'] }}</td>
    <td>{{ number_format($untungrugi['amaun'],2) }}</td>
  </tr>
  @endforeach

  <tr>
    <td><b>JUMLAH </b></td>
    <td colspan="1"></td>
    <td><b>{{ number_format($totaluntungrugi,2) }}</b></td>
  </tr>

</table>
<br>
<br>

  <script>
  $(window).load(function() {
    $('#loading').hide();
  });

  </script>
</body>
</html>