<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Data Pasien</title>
 <!-- Favicon -->
 <link rel="shortcut icon" href="./img/svg/logo.svg" type="image/x-icon">
 <!-- Bootstrap -->
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <!-- Custom styles -->
 <!-- Fontawesome -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 <!-- Custom styles -->
 <link rel="stylesheet" href="{{url('design/css/style.min.css')}}">
 <link rel="stylesheet" href="{{url('design/fonts/stylesheet.css')}}">
 <!-- Froala -->
 <link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
 <!-- Project Style -->
 <link rel="stylesheet" href="{{url('design/css/project-style.css')}}">
 <!-- Flatpicker -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
 <!-- DataTables -->
 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css">

</head>

<body>
 <div class="layer"></div>
 <!-- ! Body -->
 <div class="page-flex">
  <!-- ! Sidebar -->
  @include('component.sidebar')
  <div class="main-wrapper">
   <!-- ! Main nav -->
   @include('component.navbar')
   <!-- ! Main -->
   <main class="main users chart-page">
    <div class="container">
     <h2 class="main-title">Data Pasein / Detail</h2>
     <div class="row justify-content-center">
      <div class="col-10">
       <div class="white-block">
        <div class="row">
         <div class="col-6">
          <p class="stat-cards-info__num mb-3" style="font-size: 22px;">Data Pasien</p>
         </div>
        </div>
        <div class="row">
         <div class="col-6">
          <div class="mb-3">
           <p>No. Rekam Medis</p>
           <h5>{{$dataPasien->dp_no_rm}}</h5>
          </div>
          <div class="mb-3">
           <p>No. KTP</p>
           <h5>{{$dataPasien->dp_no_ktp}}</h5>
          </div>
          <div class="mb-3">
           <p>No. BPJS</p>
           <h5>{{$dataPasien->dp_no_bpjs}}</h5>
          </div>
          <div class="mb-3">
           <p>Nomor Hp</p>
           <h5>{{$dataPasien->dp_no_hp}}</h5>
          </div>
         </div>

         <div class="col-6">
          <div class="mb-3">
           <p>Nama</p>
           <h5>{{$dataPasien->dp_nama}}</h5>
          </div>
          <div class="mb-3">
           <p>Usia</p>
           <h5>
            <?php
            $tgl_lahir = date_create($dataPasien->dp_tgl_lahir);
            $today = new DateTime;
            $usia = $today->diff($tgl_lahir);
            echo $usia->format('%y Tahun, %m Bulan');
            ?>
           </h5>
          </div>
          <div class="mb-3">
           <p>Usia</p>
           <h5>
            {{$dataPasien->dp_jenis_kelamin}}
           </h5>
          </div>
          <div class="mb-3">
           <p>Alamat</p>
           <h5><?php echo $dataPasien->dp_alamat ?></h5>
          </div>



         </div>
         <div class="col-12 mb-3 overflow-auto">
          <h5 class="mb-3">Data Rekam Medis Pasien</h5>
          <div class="tableFixHead" style="min-width: 1300px;">
           <table class="table table-bordered">
            <thead>
             <tr>
              <th>Tanggal</th>
              <th>Biaya</th>
              <th>Alergi Obat</th>
              <th>Anamnesa</th>
              <th>Pemeriksaan Fisik</th>
              <th>Diagnosa</th>
              <th>Terapi</th>
             </tr>
            </thead>
            <tbody>
             @foreach ($riwayatMedisPasien as $rMP)
             <tr class="align-middle">
              <th>
               <?php
               $date = new DateTime($rMP->a_created_at);
               echo $date->format('d-F-Y');
               ?>
              </th>
              <td>{{$rMP->a_pembayaran}}</td>
              <td>
               <div class="catatan_rekam_medis">
                <?php echo $rMP->a_alergi ?>
               </div>
              </td>
              <td>
               <div class="catatan_rekam_medis">
                <?php echo $rMP->a_anamnesa ?>
               </div>
              </td>
              <td>
               <div class="catatan_rekam_medis">
                <?php echo $rMP->a_pemeriksaan_fisik ?>
               </div>
              </td>
              <td>
               <div class="catatan_rekam_medis">
                <?php echo $rMP->a_diagnosa ?>
               </div>
              </td>
              <td>
               <div class="catatan_rekam_medis">
                <?php echo $rMP->a_terapi ?>
               </div>
              </td>
             </tr>
             @endforeach
            </tbody>
           </table>
          </div>
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>
   </main>
   <!-- ! Footer -->
   @include('component.footer')
  </div>
 </div>


 <!-- jQuery -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js" integrity="sha256-DI6NdAhhFRnO2k51mumYeDShet3I8AKCQf/tf7ARNhI=" crossorigin="anonymous"></script>
 <!-- Bootstrap -->
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
 <!-- Chart library -->
 <script src="{{url('design/plugins/chart.min.js')}}"></script>
 <!-- Icons library -->
 <script src="{{url('design/plugins/feather.min.js')}}"></script>
 <!-- Custom scripts -->
 <script src="{{url('design/js/script.js')}}"></script>
 <!-- Flatpicker -->
 <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
 <!-- Froala -->
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>
 <!-- Notiflix -->
 <script src="https://cdn.jsdelivr.net/npm/notiflix@3.0.1/dist/notiflix-aio-3.0.1.min.js"></script>
 <!-- DataTables -->
 <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
 <script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>


 <script>
  $(document).ready(function() {
   $(".tgl-lahir").flatpickr({
    altInput: true,
    altFormat: "j-F-Y",
    dateFormat: "d-M-Y"
   });

   $('#data_pasien').DataTable({
    "scrollX": true,
    'language': {
     search: '<div class="search-wrapper float-end"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search" aria-hidden="true"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg> <input type="text" placeholder="Cari ..." required=""> </div>',
     searchPlaceholder: 'Cari',
    }
   });

   new FroalaEditor('textarea.alamat', {
    quickInsertEnabled: false,
    attribution: false,
    placeholderText: false,
    height: 150,
    fontSizeDefaultSelection: '18',
    toolbarButtons: [
     ['bold', 'italic', 'underline'],
     ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'lineHeight', 'outdent', 'indent'],
     ['undo', 'redo', 'print', 'getPDF']
    ]
   });
  });
 </script>

 @include('component.notif')

</body>

</html>