@extends("backend.layouts2.master")

@section("title")
    {{ ucwords($module) }} - Sistem Klinik
@endsection

@push('css')

<link rel="stylesheet" href="{{asset('adminlte/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css')}}">
<link rel="stylesheet" href="{{asset('adminlte/plugins/datatables-responsive/css/responsive.bootstrap4.min.css')}}">
<link rel="stylesheet" href="{{asset('adminlte/plugins/datatables-buttons/css/buttons.bootstrap4.min.css')}}">
<style media="screen">
  .label-green{
    background-color: rgba(40,167,69,.1)!important;
    color: #28a745!important;
  }
</style>
@endpush

@section ('content')

<div class="container-fluid">

  <section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">

          <ol class="breadcrumb float-sm-left">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item">Pasien</li>
            <li class="breadcrumb-item active">Profile</li>
          </ol>
      </div>
    </div><!-- /.container-fluid -->
  </section>

  <div class="row">
    <div class="col-md-3">

      <!-- Profile Image -->
      <div class="card card-primary card-outline mb-2">
        <div class="card-body box-profile">
          <div class="text-center">
            @if($data->filepath != null)
            <img class="profile-user-img img-fluid rounded-circle"
                 src="{{asset($data->filepath)}}"
                 alt="User profile picture" style="height:100px!important; width:100px!important">
            @else
            <img class="profile-user-img img-fluid img-circle"
                 src="{{asset('avatar-default.jpg')}}"
                 alt="User profile picture" style="height:100px!important">
            @endif
            <!-- <input type="file" name="image" id="image"> -->

          </div>

          <h6 class="profile-username text-center mt-2">{{$data->nama}}</h6>

          @if($data->status == 1)
          <p class="text-center"> <label class="badge badge-success-soft text-center label-green">
            <i class="fas fa-check"></i> Aktif
           </label></p>
          @else
          <p class="text-center"> <label class="badge badge-danger-soft text-center label-green">
            s<i class="fas fa-x"></i> Non Aktif
           </label></p>

          @endif

          <ul class="list-group list-group-unbordered mb-3">
            <li class="list-group-item">
              <b>No RM</b> <a class="float-right">{{$data->no_rm}}</a>
            </li>
            <li class="list-group-item">
              <b>Berat Badan</b>
              <a class="float-right"><label class="badge badge-success-soft text-center label-green">{{$data->bb}}</label></a>
            </li>
            <li class="list-group-item">
              <b>Tinggi Badan</b>
              <a class="float-right"><label class="badge badge-success-soft text-center label-green">{{$data->tb}}</label></a>
            </li>
            <li class="list-group-item">
              <b>Tensi</b>
              <a class="float-right"><label class="badge badge-success-soft text-center label-green">{{$data->tensi}}</label></a>
            </li>
            <li class="list-group-item">
              <b>Gol. Darah</b>
              <a class="float-right"><label class="badge badge-success-soft text-center label-green">{{ ucwords($data->golongan_darah) }}</label></a>
            </li>
            <li class="list-group-item">
              <b>Alergi</b>
              <a class="float-right"><label class="badge badge-success-soft text-center label-green">{{ ucwords($data->alergi) }}</label></a>
            </li>

          </ul>

        </div>
        <!-- /.card-body -->
      </div>
      <!-- /.card -->

      <!-- About Me Box -->
      <div class="card card-primary mb-2">
        <div class="card-header">
          <h3 class="card-title">Identitas</h3>
        </div>
        <!-- /.card-header -->
        <div class="card-body">

          <strong><i class="fas fa-calendar mr-1"></i> Umur</strong>
          <p class="text-muted">{{ \Carbon\Carbon::parse($data->tgl_lahir)->diff(\Carbon\Carbon::now())->format('%y') }}</p>
          <p>{{$data->tempat_lahir}}, {{ \Carbon\Carbon::parse($data->tgl_lahir)->format('d/m/Y') }}</p>
          <hr>

          <strong><i class="fas fa-venus-mars mr-1"></i> Jenis Kelamin</strong>
          <p class="text-muted">{{$data->jenis_kelamin}}</p>
          <hr>

          <strong><i class="fas fa-id-card mr-1"></i> NIK</strong>
          <p class="text-muted">{{$data->nik}}</p>
          <hr>

          <strong><i class="fas fa-map-marker-alt mr-1"></i> Alamat</strong>
          <p class="text-muted">{{$data->alamat}}</p>
          <p class="text-muted">Kota : {{$data->kota}}</p>
          <hr>

          <strong><i class="fas fa-phone mr-1"></i> No HP</strong>
          <p class="text-muted">{{$data->no_hp}}</p>
          <hr>

          <strong><i class="fas fa-envelope mr-1"></i> Email</strong>
          <p class="text-muted">{{$data->email}}</p>
          <hr>

        </div>
        <!-- /.card-body -->
      </div>
      <!-- /.card -->
    </div>
    <!-- /.col -->
    <div class="col-md-9">
      <div class="card">
        <div class="card-header p-2">
          <h6 class="m-0 font-weight-bold text-primary w-75 p-2">Rekam Medis</h6>

        </div><!-- /.card-header -->
        <div class="card-body">
          <div class="tab-content">
            <div class="active tab-pane" id="activity">
              <!-- Post -->
              <div class="card">
                <!-- <div class="card-header">
                  <h3 class="card-title">Rekam Medis</h3>
                </div> -->
                <!-- /.card-header -->
                <div class="card-body p-0">
                  <table class="table table-striped" id="table-index">
                    <thead>
                      <tr>
                        <th style="width: 10px">#</th>
                        <th>Tanggal</th>
                        <th>Dokter</th>
                        <!-- <th>Diagnosis Kode</th>
                        <th>Deskripsi</th> -->
                        <!-- <th>Catatan</th> -->
                        <th>Action</th>
                      </tr>
                    </thead>
                    <tbody>

                    </tbody>
                  </table>
                </div>
                <!-- /.card-body -->
              </div>

            </div>
            <!-- /.tab-pane -->
            <!-- /.tab-pane -->
          </div>
          <!-- /.tab-content -->
        </div><!-- /.card-body -->
      </div>
      <!-- /.card -->
    </div>
    <!-- /.col -->
  </div>

</div>

<div class="modal fade" id="my-modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Resep</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <table class="table table-striped" id="table-index">
          <thead>
            <tr>
              <th style="width: 10px">#</th>
              <th>Obat</th>
              <th>Dosis</th>
              <th>Jumlah</th>
            </tr>
          </thead>
          <tbody class="resep-text">
          </tbody>
        </table>
      </div>
      <div class="modal-footer justify-content-between">
        <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
@endsection

@push('js')
<!-- Page level custom scripts -->
<script src="{{asset('adminlte/plugins/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-responsive/js/responsive.bootstrap4.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-buttons/js/dataTables.buttons.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-buttons/js/buttons.bootstrap4.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/jszip/jszip.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/pdfmake/pdfmake.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/pdfmake/vfs_fonts.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-buttons/js/buttons.html5.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-buttons/js/buttons.print.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-buttons/js/buttons.colVis.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/toastr/toastr.min.js')}}"></script>

<script>

      var table = null;
      $(document).ready(function(){
        table = $('#table-index').DataTable({
          processing: true,
          serverSide: true,
          lengthChange: false,
          searching : true,
          paging: true,
          language: {
              search: '<span>Search:</span> _INPUT_',
              lengthMenu: '<span>Show:</span> _MENU_',
              paginate: { 'first': 'First', 'last': 'Last', 'next': '→', 'previous': '←' }
          },
          dom: 'Bfrtip',
          buttons: [
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
          ],
          ajax: {
              url: "{{ route('dashboard.master.' . $module. '.getListRekamMedis') }}",
              data: function (d) {
                  return $.extend({}, d, {
                      id: "{{$data->id}}",
                  });
              },
          },

          columns: [
              {data: 'DT_RowIndex', name: 'DT_RowIndex'},
              {data: 'tgl', name: 'tgl'},
              {data: 'dokter', name: 'dokter'},
              // {data: 'diagnosis', name: 'diagnosis'},
              // {data: 'deskripsi', name: 'deskripsi'},
              // {data: 'catatan', name: 'catatan'},
              {data: 'action', name: 'action'},
          ],
        });
      });

      function resep(attribute){
        var id = $(attribute).attr("idData")

        $.ajax({
            url:"{{ route('dashboard.master.pasien.getPasienResep') }}?id="+id,
            method:"GET",
            success:function(data){
              console.log(data);
              $(".resep-text").html("")

              let html = ""
              let no = 0

              $.each(data.resep.details, function(k,v){
                no = k+1
                html += `
                  <tr>
                    <td>`+no+`</td>
                    <td>`+v.obat["nama"]+`</td>
                    <td>`+v["dosis"]+`</td>
                    <td>`+v["jumlah"]+`</td>
                  </tr>
                `
              })

              $(".resep-text").html(html)

            }
          })


        $("#my-modal").modal("show")
      }



  $(function () {
    $("#example1").DataTable({
      "responsive": true, "lengthChange": false, "autoWidth": false,
      "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
    }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
    $('#example2').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false,
      "responsive": true,
    });
  });
</script>
@endpush