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

@section("title")
    Odontogram - Sistem Klinik
@endsection

@push('css')
<link href="{{asset('sb-admin2/css/sb-admin-2.min.css')}}" rel="stylesheet">

<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>
.header-clear-medium {
  padding-top: calc(70px + (env(safe-area-inset-top))*0.8) !important;
}
</style>

<style>
  .component {
    /* margin-right: 30px; */
    font-size: 16px;
    padding: 0;
    flex: 0 0 0 6%;
    max-width: 6%;
  }

  .image-component {
    width: 40px;
  }

  .component-blank {
    color: white;
  }

  .component-blank-image {
    height: 40px;
    width: 40px;
    background-color: #fff;
  }
  .col-form-label-odontogram {
    font-size: 12px;
  }
  .label-atas {
    border-style: solid;
    width: 100%;
    height: 45px;
    padding: 8px;
  }
  .select2-container{
    width: 100%!important;
  }
</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.layanan.rekam_medis.index')}}" class="header-icon header-icon-1"><i class="fas fa-arrow-left"></i></a>
@endsection

@section ('content')

<div class="container-fluid">
  @if(session()->has('messages'))
    <div class="alert alert-success">
        {{ session()->get('messages') }}
    </div>
  @endif
  <!-- Page Heading -->

  <!-- DataTales Example -->
  <div class="card shadow mb-4">
      <div class="card-header py-3">
        <div class="row" style="margin-bottom: 0px;">
          <div class="col-6">
            <h6 class="m-0 font-weight-bold text-primary w-75 p-2">Odontogram</h6>

          </div>
          <div class="col-6 float-right" style="text-align: end;">
            <a href="{{route('dashboard.layanan.rekam_medis.edit', $rekam_medis_id)}}" >
              <button type = "button" class = "icon icon-xxs rounded-xl bg-facebook" style="padding-right: 15px;">
                <i class="fas fa-pencil-alt"></i>Tindakan
              </button>
            </a>

          </div>
        </div>
      </div>
        <div class="card-body">
          <form action="{{ route('dashboard.layanan.' . $module. '.odontology-edit', $row->id) }}" method="POST" enctype="multipart/form-data">
          @method('PUT')
          @csrf
          <input type="hidden" name="rekam_medis_id" value="{{$row->rekam_medis_id}}">
          <input type="hidden" name="patient_id" value="{{$row->patient_id}}">
          <input type="hidden" name="umur" value="{{$row->umur}}">
          <input type="hidden" name="jenis_kelamin" value="{{$row->jenis_kelamin}}">

            <div class="card-body">

              <div class="row mb-2 mt-2" style="">
                <div class="col-md-12 label-atas text-center button-regio" data-id="rahang_atas_bawah" data-name="All Rahang Atas dan Bawah">
                  <span>All Rahang Atas dan Bawah</span>
                </div>
              </div>

              <div class="row mb-2 mt-2" style="">
                <div class="col-md-12 label-atas text-center button-regio" data-id="rahang_atas" data-name="All Rahang Atas">
                  <span>All Rahang Atas</span>
                </div>
              </div>

              <div class="row mb-2 mt-2" style="">
                <div class="col-md-4 label-atas text-center button-regio" data-id="regio_1" data-name="Regio 1">
                  <span>Regio 1</span>
                </div>
                <div class="col-md-4 label-atas text-center button-regio" data-id="anterior_atas" data-name="Anterior Atas">
                  <span>Anterior Atas</span>
                </div>
                <div class="col-md-4 label-atas text-center button-regio" data-id="regio_2" data-name="Regio 2">
                  <span>Regio 2</span>
                </div>

              </div>

              <div class="row mb-2 mt-2">
                @include("backend.layanan.rekam-medis.component-odontogram1", ["row" => $row])
              </div>

              <div class="row mb-2 mt-2">
                @include("backend.layanan.rekam-medis.component-odontogram2", ["row" => $row])
              </div>

              <div class="row mb-4 mt-2">
                @include("backend.layanan.rekam-medis.component-odontogram3", ["row" => $row])
              </div>

              <div class="row mb-4 mt-2">
                @include("backend.layanan.rekam-medis.component-odontogram4", ["row" => $row])
              </div>

              <div class="row mb-2 mt-2" style="">
                <div class="col-md-4 label-atas text-center button-regio" data-id="regio_4" data-name="Regio 4">
                  <span>Regio 4</span>
                </div>
                <div class="col-md-4 label-atas text-center button-regio" data-id="anterior_bawah" data-name="Anterior Bawah">
                  <span>Anterior Bawah</span>
                </div>
                <div class="col-md-4 label-atas text-center button-regio" data-id="regio_3" data-name="Regio 3">
                  <span>Regio 3</span>
                </div>

              </div>

              <div class="row mb-4 mt-2" style="">
                <div class="col-md-12 label-atas text-center button-regio" data-id="rahang_bawah" data-name="All Rahang Bawah">
                  <span>All Rahang Bawah</span>
                </div>
              </div>

              <div class="row mb-0 mt-2">
                  <div class="form-group row mb-0 mt-1">
                        <div class="col-sm-2">
                          <h6>Elemen Gigi</h6>
                        </div>
                        <div class="col-sm-4">
                          <h6>Bagian</h6>
                        </div>
                        <div class="col-sm-5">
                          <h6>Differensial Diagnosis</h6>
                        </div>
                  </div>
              </div>

              @if (isset($row->details))

              @foreach ($row->details as $val)
              <div class="row mb-0 mt-1">
                  <div class="form-group row mb-0 mt-1">
                        <div class="col-sm-2">
                          <input type="hidden" name="elemen_gigi[]" value="{{ $val->elemen_gigi }}">
                          <input type="number" class="form-control" disabled value="{{ $val->elemen_gigi }}">
                        </div>
                        <div class="col-sm-3">
                          <select class="form-control" name="bagian[]">

                            @if (in_array($val->elemen_gigi, [18,17,16,15,14,24,25,26,27,28, 54, 55, 64, 65]))
                              <option value="oklusal" {{ $val->bagian == 'oklusal' ? 'selected' : '' }}>oklusal</option>
                              <option value="mesial" {{ $val->bagian == 'mesial' ? 'selected' : '' }}>mesial</option>
                              <option value="distal" {{ $val->bagian == 'distal' ? 'selected' : '' }}>distal</option>
                              <option value="bukal" {{ $val->bagian == 'bukal' ? 'selected' : '' }}>bukal</option>
                              <option value="palatal" {{ $val->bagian == 'palatal' ? 'selected' : '' }}>palatal</option>
                            @elseif (in_array($val->elemen_gigi, [48,47,46,45,44,34,35,36,37,38, 74, 75, 84, 85]))
                              <option value="oklusal" {{ $val->bagian == 'oklusal' ? 'selected' : '' }}>oklusal</option>
                              <option value="mesial" {{ $val->bagian == 'mesial' ? 'selected' : '' }}>mesial</option>
                              <option value="distal" {{ $val->bagian == 'distal' ? 'selected' : '' }}>distal</option>
                              <option value="bukal" {{ $val->bagian == 'bukal' ? 'selected' : '' }}>bukal</option>
                              <option value="lingual" {{ $val->bagian == 'lingual' ? 'selected' : '' }}>lingual</option>
                            @elseif (in_array($val->elemen_gigi, [11,12,13,21,22,23, 51,52,53,61,62,63]))
                              <option value="incisal" {{ $val->bagian == 'incisal' ? 'selected' : '' }}>incisal</option>
                              <option value="mesial" {{ $val->bagian == 'mesial' ? 'selected' : '' }}>mesial</option>
                              <option value="distal" {{ $val->bagian == 'distal' ? 'selected' : '' }}>distal</option>
                              <option value="labial" {{ $val->bagian == 'labial' ? 'selected' : '' }}>labial</option>
                              <option value="palatal" {{ $val->bagian == 'palatal' ? 'selected' : '' }}>palatal</option>
                            @elseif (in_array($val->elemen_gigi, [43,42,41,31,32,33, 71, 72, 73, 81,82,83]))
                              <option value="incisal" {{ $val->bagian == 'incisal' ? 'selected' : '' }}>incisal</option>
                              <option value="mesial" {{ $val->bagian == 'mesial' ? 'selected' : '' }}>mesial</option>
                              <option value="distal" {{ $val->bagian == 'distal' ? 'selected' : '' }}>distal</option>
                              <option value="labial" {{ $val->bagian == 'labial' ? 'selected' : '' }}>labial</option>
                              <option value="lingual" {{ $val->bagian == 'lingual' ? 'selected' : '' }}>lingual</option>
                            @else
                              <option value="oklusal" {{ $val->bagian == 'oklusal' ? 'selected' : '' }}>oklusal</option>
                              <option value="mesial" {{ $val->bagian == 'mesial' ? 'selected' : '' }}>mesial</option>
                              <option value="distal" {{ $val->bagian == 'distal' ? 'selected' : '' }}>distal</option>
                              <option value="bukal" {{ $val->bagian == 'bukal' ? 'selected' : '' }}>bukal</option>
                              <option value="palatal" {{ $val->bagian == 'palatal' ? 'selected' : '' }}>palatal</option>
                            @endif

                          </select>
                        </div>
                        <div class="col-sm-6">
                          <select class="form-control" name="diagnosis_id[]" id="diagnosis_id-{{$val->elemen_gigi}}">

                          </select>
                        </div>
                        <div class="col-sm-1">
                          <a href="#" class="icon icon-xxs rounded-xl bg-pinterest button-remove-diagnosis">
                            <i class="fas fa-trash"></i>
                          </a>
                        </div>
                  </div>
              </div>
              @endforeach
              @endif

              <div class="odontogram-body">

              </div>

              @if (isset($row->regio_details))

              @foreach ($row->regio_details as $val)
              <div class="row mb-0 mt-1">
                  <div class="form-group row mb-0 mt-1">
                        <div class="col-sm-5">
                          <input type="hidden" class="form-control" name="regio[]" value="{{ $val->regio }}">
                          <input type="text" disabled class="form-control" value="{{ $val->regio }}">
                        </div>
                        <div class="col-sm-6">
                          <select class="form-control" name="diagnosis_regio_id[]" id="diagnosis_id-{{ $val->id }}">

                          </select>
                        </div>
                        <div class="col-sm-1">
                          <a href="#" class="icon icon-xxs rounded-xl bg-pinterest button-remove-diagnosis-regio">
                            <i class="fas fa-trash"></i>
                          </a>
                        </div>
                  </div>
              </div>
              @endforeach
              @endif

              <div class="regio-body">

              </div>

            </div>

            <div class="card-footer">
              <button type="submit" class="btn btn-xxs mb-3 rounded-s font-900 shadow-s border-blue-dark  bg-blue-light">Save</button>
              <a href="{{route('dashboard.layanan.' . $module. '.pdf-odontogram', [$row->rekam_medis_id])}}" target="_blank">
               <!-- <button type="button" class="btn btn-success"><i class="fas fa-print"></i> Print</button> -->
               </a>
            </div>
          </form>
        </div>
    </div>

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

@if(isset($row))
  var set_rm = new Option("{{$row['pasien']['no_rm']}} - {{$row['pasien']['nama']}}", "{{$row['patient_id']}}", false, true)

  $('#no_rm').append(set_rm).trigger('change')

  @if(isset($row->details) && count($row->details)>0)
    @foreach ($row->details as $value)
    var set_diagnosa_{{$value->elemen_gigi}} = new Option("{{$value->odontologi->nama}} - {{$value->odontologi->deskripsi}}", "{{$value['diagnosis_id'] ?? 0}}", false, true)
    console.log(set_diagnosa_{{$value->elemen_gigi}});
    $('#diagnosis_id-{{$value->elemen_gigi}}').append(set_diagnosa_{{$value->elemen_gigi}}).trigger('change')

      $("#diagnosis_id-{{$value->elemen_gigi}}").select2({
          placeholder:"Pilih Differensial Diagnosis",
          ajax:
          {
            url: "{{ route('dashboard.master.odontology.getDiagnosa') }}",
            processResults: function (data) {
              // console.log(data);
              return {
                results: data.results
              };
            }
          }
      })
    @endforeach
  @endif

  @if(isset($row->regio_details) && count($row->regio_details)>0)
    @foreach ($row->regio_details as $value)
    var set_diagnosa_{{$value->id}} = new Option("{{$value->odontologi->nama}} - {{$value->odontologi->deskripsi}}", "{{$value['diagnosis_id'] ?? 0}}", false, true)
    console.log(set_diagnosa_{{$value->id}});
    $('#diagnosis_id-{{$value->id}}').append(set_diagnosa_{{$value->id}}).trigger('change')

      $("#diagnosis_id-{{$value->id}}").select2({
          placeholder:"Pilih Differensial Diagnosis",
          ajax:
          {
            url: "{{ route('dashboard.master.odontology.getDiagnosa') }}",
            processResults: function (data) {
              // console.log(data);
              return {
                results: data.results
              };
            }
          }
      })
    @endforeach
  @endif

@endif

$(document).on('click', '.button-regio', function(e){
  e.preventDefault();
  let id_regio = $(this).attr("data-id")
  let name_regio = $(this).attr("data-name")
console.log(id_regio);
  $(".regio-body").after(`
    <div class="row mb-0 mt-1">
        <div class="form-group row mb-0 mt-1">
              <div class="col-sm-5">
                <input type="hidden" class="form-control" name="regio[]" value="`+name_regio+`">
                <input type="text" disabled class="form-control" value="`+name_regio+`">
              </div>
              <div class="col-sm-6">
                <select class="form-control" name="diagnosis_regio_id[]" id="diagnosis_id-`+id_regio+`">

                </select>
              </div>
              <div class="col-sm-1">
                <a href="#" class="icon icon-xxs rounded-xl bg-pinterest button-remove-diagnosis-regio">
                  <i class="fas fa-trash"></i>
                </a>
              </div>
        </div>
    </div>
    `);

    $("#diagnosis_id-"+id_regio).select2({
        placeholder:"Pilih Differensial Diagnosis",
        ajax:
        {
          url: "{{ route('dashboard.master.odontology.getDiagnosa') }}",
          processResults: function (data) {
            // console.log(data);
            return {
              results: data.results
            };
          }
        }
    })

})

$(document).on('click', '.button-remove-diagnosis', function(e){
  e.preventDefault();

  $(this).parents("div .form-group.row").remove()

});

$(document).on('click', '.button-remove-diagnosis-regio', function(e){
  e.preventDefault();

  $(this).parents("div .form-group.row").remove()

});

$(document).on('click', '.image-component', function(e){
  e.preventDefault();
  let id = $(".odontogram-body div").length
  let id_gigi = $(this).attr("data-id")

  let array_atas_belakang = [18,17,16,15,14,24,25,26,27,28, 54, 55, 64, 65];
  let array_bawah_belakang = [48,47,46,45,44,34,35,36,37,38, 74, 75, 84, 85];
  let array_atas_depan = [11,12,13,21,22,23, 51,52,53,61,62,63];
  let array_bawah_depan = [43,42,41,31,32,33, 71, 72, 73, 81,82,83];

  let html_opt = ''

  // console.log(parseInt(id_gigi));
  // console.log(jQuery.inArray(212, [18,17,16,15,14,24,25,26,27,28]));
  // console.log(jQuery.inArray(48, [48,47,46,45,44,34,35,36,37,38]));
  // console.log(jQuery.inArray(12, [11,12,13,21,22,23]));
  // console.log(jQuery.inArray(43, [43,42,41,31,32,33]));

  if (jQuery.inArray(parseInt(id_gigi), array_atas_belakang) !== -1) {
    html_opt += `<option value="oklusal">oklusal</option>
    <option value="mesial">mesial</option>
    <option value="distal">distal</option>
    <option value="bukal">bukal</option>
    <option value="palatal">palatal</option>`
  }else if (jQuery.inArray(parseInt(id_gigi), array_bawah_belakang) !== -1) {
    html_opt += `<option value="oklusal">oklusal</option>
    <option value="mesial">mesial</option>
    <option value="distal">distal</option>
    <option value="bukal">bukal</option>
    <option value="lingual">lingual</option>`
  }else if (jQuery.inArray(parseInt(id_gigi), array_atas_depan) !== -1) {
    html_opt += `<option value="incisal">incisal</option>
    <option value="mesial">mesial</option>
    <option value="distal">distal</option>
    <option value="bukal">labial</option>
    <option value="lingual">palatal</option>`
  }else if (jQuery.inArray(parseInt(id_gigi), array_bawah_depan) !== -1) {
    html_opt += `<option value="oklusal">incisal</option>
    <option value="mesial">mesial</option>
    <option value="distal">distal</option>
    <option value="bukal">labial</option>
    <option value="lingual">lingual</option>`
  }else {
    html_opt += `<option value="oklusal">incisal</option>
    <option value="mesial">mesial</option>
    <option value="distal">distal</option>
    <option value="bukal">labial</option>
    <option value="lingual">lingual</option>`
  }


  $(".odontogram-body").after(`
    <div class="row mb-0 mt-1">
        <div class="form-group row mb-0 mt-1">
              <div class="col-sm-2">
              <input type="hidden" name="elemen_gigi[]" value="`+id_gigi+`">
                <input type="number" disabled class="form-control" value="`+id_gigi+`">
              </div>
              <div class="col-sm-3">
                <select class="form-control" name="bagian[]">
              `
              +html_opt+
              `
              </select>
              </div>
              <div class="col-sm-6">
                <select class="form-control" name="diagnosis_id[]" id="diagnosis_id-`+id_gigi+`">

                </select>
              </div>
              <div class="col-sm-1">
                <a href="#" class="icon icon-xxs rounded-xl bg-pinterest button-remove-diagnosis">
                  <i class="fas fa-trash"></i>
                </a>
              </div>
        </div>
    </div>
    `);

    $("#diagnosis_id-"+id_gigi).select2({
        placeholder:"Pilih Differensial Diagnosis",
        ajax:
        {
          url: "{{ route('dashboard.master.odontology.getDiagnosa') }}",
          processResults: function (data) {
            // console.log(data);
            return {
              results: data.results
            };
          }
        }
    })

});

$(document).on('click', '.button-remove-drug', function(e){
  e.preventDefault();

  $(this).parents("tr").remove()

});

  function displayPhotos(input, type, value) {
      let extension = value.split(".").pop().toUpperCase();

      if (extension != "PNG" && extension != "JPG" && extension != "JPEG") {
          $("#error-file").text("Image extension not valid");
          if (type == "file") {
              $("#input-file").val("");
          }
      } else {
          if (input.files && input.files[0]) {
              var reader = new FileReader();

              reader.onload = function (e) {
                  if (type == "file") {
                      $("#image-preview").attr("src", e.target.result);
                      // console.log( e.target.result);
                  }
              };
              reader.readAsDataURL(input.files[0]);
          }
      }
  }

  $(document).on("change", "#file", function (e) {

      $("#error-file").text(" ");
      let value = $("#file").val();
      // console.log(value);
      displayPhotos(this, "file", value);
  });

  $(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