@extends("backend.layout-sticky.master")

@section("title")
    Rekam Medis - Sistem Klinik
@endsection

@push('css')
<script type="text/javascript" src="{{url('https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js')}}"></script>
<link type="text/css" href="{{url('https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css')}}" rel="stylesheet">
<script type="text/javascript" src="{{url('https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js')}}"></script>

<script type="text/javascript" src="{{asset('js/signature2/js/jquery.signature.js')}}"></script>
<link rel="stylesheet" type="text/css" href="{{asset('js/signature2/css/jquery.signature.css')}}">

<style>
    .kbw-signature { width: 400px; height: 200px;}
    #sig canvas{
        width: 100% !important;
        height: auto;
    }
    h6{
      font-weight: 400;
      margin-bottom: 7px;
    }
</style>
@endpush

@section ('back')
<a href="#" data-back-button="" class="header-icon header-icon-1"><i class="fas fa-arrow-left"></i></a>
<!-- <a href="{{route('dashboard.master.pasien.index')}}" class="header-icon header-icon-1"><i class="fas fa-arrow-left"></i></a> -->
@endsection

@section ('content')

<div data-card-height="200" class="card card-style preload-img" data-src="{{asset('sticky-mobile/code/images/pictures/14w.jpg')}}">
    <div class="card-center text-center">
        <h1 class="font-22 color-white pt-3">{{ $row[0]->pasien->nama }}</h1>
        <p class="color-white opacity-70" style="margin-bottom: 4px;">{{ $row[0]->pasien->no_rm }}</p>
        <a href="{{route('dashboard.layanan.rekam_medis.riwayat', [$row[0]->pasien->id])}}" class="mb-1 default-link btn btn-m rounded-s btn-center-xl bg-red-dark font-900 text-uppercase">Riwayat Rekam Medis</a>
        <a href="{{route('dashboard.layanan.rekam_medis.print-rekam_medis', [$row[0]->pasien->id])}}" class="default-link btn btn-m rounded-s btn-center-xl bg-blue-dark font-900 text-uppercase">Print</a>
    </div>
    <div class="card-overlay bg-black opacity-80"></div>
</div>

<div class="card card-style">
    <div class="content">

      <table class="table">
        <thead>
          <tr>
            <th style="width:10%;">Tanggal</th>
            <th style="width:10%;">Subyektif</th>
            <th style="width:15%;">Pemeriksaan Obyektif</th>
            <th style="width:30%;">Assesment</th>
            <th style="width:25%;">Planning</th>
          </tr>

        </thead>
        <tbody>
          @foreach ($row as $value)
          <tr>
            <td>{{\Carbon\Carbon::parse($value->updated_at)->format('d/m/Y')}}</td>
            <td>{{ $value->subyektif }}</td>
            <td>
              <h6>Sondasi : {{ isset($value->sondasi) && $value->sondasi == 1 ? 'Positif' : 'Negatif' }}</h6>
              <h6>Perkusi : {{ isset($value->perkusi) && $value->perkusi == 1 ? 'Positif' : 'Negatif' }}</h6>
              <h6>Palpasi : {{ isset($value->palpasi) && $value->palpasi == 1 ? 'Positif' : 'Negatif' }}</h6>
              <h6>CE : {{ isset($value->ce) && $value->ce == 1 ? 'Positif' : 'Negatif' }}</h6>
              <h6>Rontgen : {{ isset($value->rontgen) && $value->rontgen == 1 ? 'Ya' : 'Tidak' }}</h6>
              <h6>Catatan : {{ $value->sondasi }}</h6>
            </td>
            <td>

              @if(count($value->diagnosis_details)>0)
              <ol>
                @foreach ($value->diagnosis_details as $val)
                  <li><h6>Elemen Gigi : {{$val->elemen_gigi}}</h6>
                      <h6>Kode : {{$val->kode}}</h6>
                      <h6>Deskripsi : {{$val->deskripsi}}</h6>
                  </li>
                @endforeach
              </ol>
              @endif
            </td>
            <td>
              @if($value->tindakan_pasien)
              <ol>
                @foreach ($value->tindakan_pasien->details as $values)
                  <li><h6>Elemen Gigi : {{$values->elemen_gigi}}</h6>
                      <h6>Tindakan : {{$values->nama_tindakan}}</h6>
                  </li>
                @endforeach
              </ol>
              @endif

            </td>
          </tr>
          @endforeach
        </tbody>
      </table>



        <!-- <a href="#" class="default-link btn btn-m rounded-s btn-center-xl bg-blue-dark font-900 text-uppercase" id="open-form" data-toggle="modal" data-target="#my-modal">Signature</a> -->

    </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" id="title-form"></h4>
        <button type="button" class="close" id="close-form" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="sig" ></div>
        <br/>
        <!-- <button id="clear">Clear Signature</button> -->
        <textarea id="signature64" name="signed"></textarea>
      </div>
      <div class="modal-footer justify-content-between">
        <button type="button" class="btn btn-default btn-shadow rounded-round" id="reset-form">Reset</button>
        <button type="button" class="btn btn-primary" id="submit-form">Simpan</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
@endsection

@push('js')
<!-- Page level custom scripts -->
<script>

var sig = $('#sig').signature();
$('#reset-form').click(function(e) {
    e.preventDefault();
    sig.signature('clear');
    $("#signature64").val('');
});

$(".btn-submit").on("click", function(){
  var image = $("#signature64").val()

  console.log(image);
})

</script>
@endpush