erahn-click/resources/views/print/surat_wakil.blade.php

<!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>

  @page {
    margin: 20px;
}

.grid-container {
    display: flex;
    grid-template-columns: 1fr 1fr 1fr;
    padding-top: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
}

#header_surat1, #header_surat2, #nosiri {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    padding: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#header_surat1 p, #nosiri p {
    margin: 2px;
}

#header_surat2 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

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

.header-img {
    width: 55px;
    margin: 0 5px;
}

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

  #title {
    border: 1px solid black;
  }

  #title p {
    vertical-align: text-top;
    text-align: center;
  }

  #details {
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }
  #details th, #details td {
    text-wrap: nowrap;
    text-align: left;
    padding: 4px;
  }
  #details th {
    width: 25%;
    font-size: 12px;
  }
  #details td {
    width: 25%;
  }

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

  #note p {
    margin: 2px;
  }
</style>

<body>
    <table style="width:100%;">
        <tr>
            <td style="width:30%;">
                <div id="header_surat1">
                    <p>KOPERASI PERMODALAN KELANTAN BERHAD (D-5-0228)</p>
                    <p>{{ $cawangan_detail['namacaw'] }}</p>
                    <p>{{ $cawangan_detail['alamat1'] }}</p>
                    <p>{{ $cawangan_detail['alamat2'] }}</p>
                    <p>{{ $cawangan_detail['notel'] }}</p>
                </div>
            </td>
            <td>
                <div id="header_surat2">
                    <div class="flex-justify-center-items-center">
                        <img src="{{ asset('img/kopkb.png') }}" class="header-img" alt="Logo 1">
                        <img src="{{ asset('img/ARRAHN1.png') }}" class="header-img" alt="Logo 2">
                    </div>
                </div>
            </td>
            <td>
                <div id="nosiri">
                    <p>Tarikh Cetak: {{$tarikh_cetak}}</p>
                    <p>No Siri: {{$nosiri}}</p>
                </div>
            </td>
        </tr>
    </table>
    <div class="grid-container flex-print" style="margin-bottom: 10px;">

  <div id="title">
    <p><b>SURAT PELANTIKAN WAKIL<BR>TUJUAN PENYELESAIAN PEMBIAYAAN DI AR-RAHN</b></p>
  </div>
  <br>
  <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>

  <table id="details" style="margin-top:20px; width:100%;">
    <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>
    <table>
        <tr>
        <td colspan="2">
          <span>
            <th><input type="checkbox"></td>
            <th>Penyelesaian Penuh</td>
          </span>
        </td>
        <!-- <td colspan="2">
            <span>
              <th><input type="checkbox"></td>
              <th>Penyelesaian Penuh dan Permohonan Pembiayaan Baru</td>
            </span>
        </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 id="details" style="margin-top:10px; width: 100%; text-align: left;">
    <tr>
      <th style="width: 33%;">Tandatangan Pelanggan</th>
      <th style="width: 33%;">Tandatangan Wakil</th>
    </tr>
    <tr>
      <td style="padding: 10px;">
        ___________________________________<br>
        Nama : {{$customer_detail['nama']}}<br>
        Tarikh :
      </td>
      <td style="padding: 10px;">
        ___________________________________<br>
        Nama : <br>
        Tarikh :
      </td>
    </tr>
  </table>

  <table id="details" style="margin-top:10px; width: 100%; text-align: left;">
    <tr>
      <th style="width: 33%;">Tandatangan Pengurus Cawangan</th>
    </tr>
    <tr>
      <td style="padding: 10px;">
        ___________________________________<br>
        Nama : <br>
        Tarikh :
      </td>
    </tr>
  </table>

  <br>

  <div id="note">
      <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 adalah sama dengan tandatangan di Surat Akuan Gadai.</p>
  </div>

</table>

</body>

</html>