<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
  <title>Surat Rujukan FKTP</title>
  <style>
    .custom-border {
      border: 2px solid black;
    }
    .content-print {
      padding: 20px;
    }
    .text-bold {
      font-weight: bold;
    }
    .signature {
      text-align: right;
      margin-top: 50px;
    }
    .checkbox {
      display: inline-block;
      width: 100%;
    }
    .checkbox label {
      margin-right: 10px;
    }
    .content-utama {
      margin: 20px;
    }
    .content-footer {
      margin: 10px;
    }
    .tr-25 {
      line-height: 25px;
    }
    .tr-30 {
      line-height: 30px;
    }
    .tr-40 {
      line-height: 40px;
    }
    .tr-spacing {
      height: 20px;
    }
    .kop-surat {
      padding: 10px;
      margin-left: 10px;
      margin-right: 10px;
    }
    .checkbox-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .checkbox {
            width: 20px;
            height: 20px;
            border: 2px solid black;
        }
  </style>
</head>
<body>
  <div class="row">
    <div class="col-xs-2">
      <img src="https://www.finansialku.com/wp-content/uploads/2015/05/Mengenal-BPJS-Kesehatan-Logo-BPJS-Badan-Penyelenggara-Jaminan-Sosial.jpg" class="img-responsive">
    </div>
    <div class="col-xs-6">
    </div>
  </div>
  <h3 class="text-center text-bold">Surat Rujukan FKTP</h3>
  <div class="container custom-border content-print">
    <div class="row custom-border kop-surat">
      <div class="col-xs-6">
        <p>No. Rujukan: 01150160724003575</p>
        <p>FKTP: Klinik dr Abdul Radjak</p>
        <p>Kabupaten / Kota: Kalidrs(0115016), KOTA JAKARTA BARAT(0115)</p>
      </div>
      <div class="col-xs-6 text-right">
        <img src="https://via.placeholder.com/100x50" alt="Barcode" class="img-responsive">
      </div>
    </div>
    <div class="content-utama">
      <div class="row">
        <div class="col-xs-6">
          <table class="table table-responsive table-condensed">
            <tbody>
              <tr class="tr-25">
                <td>Kepada Yth. TS Dokter</td>
                <td>:</td>
                <td><?= $pasien['DestPoliName']; ?></td>
              </tr>
              <tr class="tr-25">
                <td>Di</td>
                <td>:</td>
                <td><?= $pasien['DestName']; ?></td>
              </tr>
              <tr class="tr-spacing"></tr>
            </tbody>
          </table>
          <h4>Mohon pemeriksaan dan penanganan lebih lanjut pasien:</h4>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-6">
          <table class="table table-responsive table-condensed">
            <tbody>
              <tr><td>Nama</td>
                <td>:</td>
                <td><?= $pasien['Description']; ?></td>
              </tr>
              <tr class="tr-30">
                <td>No. Kartu BPJS</td>
                <td>:</td>
                <td><?= $pasien['EmployeeID']; ?></td>
              </tr>
              <tr class="tr-30">
                <td>Diagnosa</td>
                <td>:</td>
                <td><?= $pasien['Presenting Problem']; ?></td>
              </tr>
              <tr class="tr-30">
                <td>Telah diberikan</td>
                <td>:</td>
                <td></td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="col-xs-6">
          <table class="table table-responsive table-condensed">
            <tbody>
              <tr><td>Umur</td>
                <td>:</td>
                <td><?= $pasien['Age']; ?></td>
                <td>Tahun</td>
                <td>:</td>
                <td><?= $pasien['DOB']; ?></td>
              </tr>
              <tr class="tr-40">
                <td>Status</td>
                <td>:</td>
                <td>3</td>
                <td>Utama/Tanggungan</td>
                <td>P (L/P)</td>
              </tr>
              <tr class="tr-40">
                <td>Catatan</td>
                <td>:</td>
                <td>ini catatan</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="row content-footer">
      <div class="col-xs-8">
        <p>Atas bantuannya, diucapkan terima kasih</p>
        <br>
        <p>Tgl. Rencana Berkunjung: 30-Jul-2024</p>
        <p>Jadwal Praktek: Selasa : 15:00 - 17:00</p>
        <p>Surat rujukan berlaku [1satu] kali kunjungan, berlaku sampai dengan: 27-Oct-2024</p>
      </div>
      <div class="col-xs-4 text-center">
        <h4>Salam Selamat</h4>
        <br>
        <br>
        <br>
        <h4>Nama Dokter</h4>
      </div>
    </div>
    <hr>
    <u><h3 class="text-center text-bold">SURAT RUJUKAN BALIK</h3></u>
    <div class="row content-utama">
      <div class="col-xs-12">
        <p>Teman sejawat Yth,</p>
        <p>Mohon kontrol selanjutnya penderita:</p>
      </div>
      <div class="col-xs-10  col-xs-offset-1">
        <table class="table table-responsive table-condensed">
          <tbody>
            <tr class="tr-25">
              <td>Nama</td>
              <td>:</td>
              <td>........................................................................................................</td>
            </tr>
            <tr class="tr-25">
              <td>Diagnosa</td>
              <td>:</td>
              <td>........................................................................................................</td>
            </tr>
            <tr class="tr-25">
              <td>Terapi</td>
              <td>:</td>
              <td>........................................................................................................</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="col-xs-12">
        <p>Tindak lanjut yang dianjurkan</p>
      </div>
      <div class="col-xs-6">
        <div class="row checkbox-container">
          <div class="checkbox-item">
            <div class="checkbox"></div>
            <label>Pengobatan dengan obat-obatan</label>
          </div>
        </div>
      </div>
    </div>
    <div class="signature">
      <p>Dokter RS,</p>
    </div>
  </div>
</body>
</html>
<script>
        window.onload = function() {
            window.print();
            setTimeout(window.close, 500);
        };
</script>