<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
            window.print
            // window.onfocus=function(){ window.close();}
        });
</script>
<style>
  .grid-container {
    display: grid;
    grid: 75px / 33% 33% 33%;
    padding-top: 10px;
  }

  #header_surat1 {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
    font-size: 10px;
  }

  #header_surat1 p {
    margin: 2px;
  }

  #header_surat2 {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    border-collapse: collapse;
    width: 100%;
    font-size: 10px;
  }

  #header_surat2 p {
    margin: 2px;
  }

  .flex-justify-center-items-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #nosiri {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
    font-size: 11px;
  }

  #title p {
    height: 40px;
    width: 700px;
    font-size: 13px;
    vertical-align: text-top;
    text-align: center;
    border: 1px solid black;
  }

  #details {

    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
    text-align: left;
  }

  #details th td {

    text-wrap: nowrap;

  }

  #note {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
    font-size: 10px;
  }

  #note p {
    margin: 2px;
  }
</style>
<style>
        .custom-box {
            width: 15px;
            height: 15px;
            border: 50px solid black;
            display: inline-block;
            cursor: pointer;
            user-select: none;
            margin-right: 4px;
            background-color: white;
        }
        .custom-box.checked {
            background-color: black;
        }
</style>

<body>

  <div class="grid-container" style="margin-bottom: 10px">
    <div id="header_surat1">
      <p style="text-wrap:nowrap">KOPERASI PERMODALAN KELANTAN BERHAD (D-5-0228)</p>
      <p>{{ $cawangan_detail['namacaw'] }}</p>
      <p style="text-wrap:nowrap">{{ $cawangan_detail['alamat1'] }}</p>
      <p>{{ $cawangan_detail['alamat2'] }}</p>
      <p>{{ $cawangan_detail['notel'] }}</p>
    </div>
    <div id="header_surat2" style="margin-left:20px">
      <div class="flex-justify-center-items-center" style="height: 60px">
        <img src="{{ asset('img/kopkb.png') }}" style="width:65px; margin:0 5px" alt="User Image" class="center">
        <img src="{{ asset('img/ARRAHN1.png') }}" style="width:50px; margin:0 5px" alt="User Image" class="center">
      </div>
    </div>
    <div id="nosiri" style="text-align:left">
    <div style="margin-left: 15px;">
            @php
                echo '<img src="data:image/png;base64,' .
                DNS1D::getBarcodePNG($gadai_details['norujukan'], 'C128', 1, 30) .
                '" alt="barcode" />';
            @endphp
      </div>
      <!-- <div class="arial-sans-serif f-10">Tarikh Cetak: {{$tarikh_cetak}}</div> -->
      <div style="display: flex; align-items: center; margin-left: 14px;">
        <div class="arial-sans-serif f-10">Tarikh Cetak: {{$tarikh_cetak}}</div>
      </div>
      <div style="display: flex; align-items: center; margin-left: 15px;">
        <div class="arial-sans-serif f-10">No Siri: {{$nosiri}}</div>
      </div>
      <div style="display: flex; align-items: center; margin-left: 15px;">
        <div class="arial-sans-serif f-10">Cetakan: arOS V2</div>
      </div>
    </div>
  </div>

  <div id="title">
    <p><b>SURAT PELANTIKAN WAKIL<BR>TUJUAN PENYELESAIAN PEMBIAYAAN DI AR-RAHN</b></p>
  </div>

  <table id="details">
    <tr>
      <th>Nama Pelanggan</th>
      <td colspan="3">: {{$customer_detail['nama']}}</td>
    </tr>
    <tr>
      <th>No Surat Akuan Gadai</th>
      <td>: {{$gadai_details['norujukan']}}</td>
      <th>Nilai Marhun</th>
      <td>: RM{{number_format($gadai_details['nilaimarhun'],2) }}</td>
    </tr>
    <tr>
      <th>No MyKad / Passport</th>
      <td>: {{$noic}}</td>
      <th>Nilai Pembiayaan</th>
      <td>: RM{{number_format($gadai_details['pinjaman'],2)}}</td>
    </tr>
    <tr>
      <th>No Telefon</th>
      <td>: {{$customer_detail['telefon']}}</td>
      <th>Baki Pembiayaan</th>
      <td>: RM{{number_format($gadai_details['bakipjm'],2)}}</td>
    </tr>
    <tr>
      <th></th>
      <td></td>
      <th>Harga Jualan</th>
      <td>: RM{{number_format($gadai_details['hargajualan'],2)}}</td>
    </tr>

  </table>

  <br>

  <table id="details" style="margin-top:20px;">
    <tr>
        <td colspan="2">
            Saya seperti nama di atas, ingin memaklumkan kepada Ar-Rahn Koperasi Permodalan Kelantan Berhad
            bagi Cawangan {{ $cawangan_detail['namacaw'] }}, bahawa saya tidak dapat hadir untuk melakukan transaksi:
        </td>
    </tr>
    <tr>
        <td>
            <!-- <input type="checkbox"><strong>Penyelesaian Penuh</strong> -->
            <input type="checkbox" id="agree-box" class="custom-box"><strong>Penyelesaian Penuh</strong>
            <input type="checkbox" id="agree-box" class="custom-box"><strong>Penyelesaian Penuh dan Permohonan Pembiayaan Baru</strong>
        </td>
    </tr>
</table>


  <table id="details" style="margin-top:20px;">
    <tr>
      <td colspan="2">1. Saya melantik nama dibawah sebagai wakil bagi pihak saya untuk 
        transaksi sebagaimana di atas. Maklumat wakil adalah seperti berikut:</td>
    </tr>
    <tr>
      <td colspan="2">2. Saya mengaku tidak akan membuat apa-apa Tuntutan @ Ganti Rugi atas kebarangkalian @
        kerugian yang berlaku disebabkan perlantikan wakil bagi apa-apa transaksi sebagai wakil saya.
      </td>
    </tr>
    
  </table>

  <table id="details" style="margin-top:20px;">
    <tr>
      <th style="width: 180px">Nama</td>
      <td>:</td>
    </tr>
    <tr>
      <th style="width: 180px">No. Kad Pengenalan</td>
      <td>:</td>
    </tr>
    <tr>
      <th style="width: 180px">No. Telefon</td>
      <td>:</td>
    </tr>
    <tr>
      <th style="width: 180px">Hubungan</td>
      <td>:</td>
    </tr>
  </table>

  <br>
  <br>

  </table>

  <table id="details" style="margin-top:20px;" id="keuntungan">
    <tr>
      <th colspan="2">Tandatangan Pelanggan</th>
      <th colspan="2">Tandatangan Wakil</th>
    </tr>
    <tr>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td rowspan="2" colspan="2" style="padding:4px; width:33%; height:50px;">_________________________________</td>
      <td rowspan="2" colspan="2" style="padding:4px; width:33%; height:50px;">_________________________________</td>
    </tr>
    <tr></tr>
    <tr></tr>
    <tr>
      <td style="width: 40px">Nama</td>
      <td>: {{$customer_detail['nama']}}</td>
      <td>Nama</td>
      <td>: </td>
    </tr>
    <tr>
      <td style="width: 40px">Tarikh</td>
      <td>:</td>
      <td style="width: 30px">Tarikh</td>
      <td>:</td>
    </tr>
  </table>
  <br>
  <table id="details" style="margin-top:20px;" id="keuntungan">
    <tr>
      <th colspan="2">Tandatangan Pengurus Cawangan</th>
      <th colspan="2"></th>
    </tr>
    <tr>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td rowspan="2" colspan="2" style="padding:4px; width:33%; height:50px;">_________________________________</td>
      <td rowspan="2" colspan="2" style="padding:4px; width:33%; height:50px;"></td>
    </tr>
    <tr></tr>
    <tr></tr>
    <tr>
      <td style="width: 40px">Nama</td>
      <td>:</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td style="width: 40px">Tarikh</td>
      <td>:</td>
      <td style="width: 30px"></td>
      <td></td>
    </tr>
  </table>

  <br>

  <div id="note"><b>
      <p>*Penting:</p>
      <p>&nbsp;a) Sila lampirkan bersama:</p>
      <p>&nbsp;&nbsp;&nbsp;&nbsp; i. Salinan kad pengenalan diri pelanggan dan kad pengenalan diri wakil yang dilantik.</p>
      <p>&nbsp;&nbsp;&nbsp;&nbsp; ii. SAG asal pelanggan</p>
      <p>&nbsp;b) Pastikan tandatangan pelanggan di dalam Surat Perlantikan Wakil ini adalah sama dengan tandatangan di Surat Akuan Gadai.</p>
  </div>







</body>

</html>