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

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

@push('css')

@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->nama ?? $row->pasien->nama }}</h1>
        <p class="color-white opacity-70">{{ $row->no_rm }}</p>
        <a href="#" class="default-link btn btn-m rounded-s btn-center-xl bg-red-dark font-900 text-uppercase">Registrasi Pasien</a>
    </div>
    <div class="card-overlay bg-black opacity-80"></div>
</div>

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

  @if(session()->has('error'))
    <div class="alert alert-danger">
        {{ session()->get('error') }}
    </div>
  @endif
</div>

<div class="card card-style">
  <form action="{{ ($action === "UPDATE") ? route('dashboard.layanan.registrasi.update', [$row->id]) : route('dashboard.layanan.registrasi.store') }}" method="POST" enctype="multipart/form-data">

  @if ($action === "UPDATE")
      @method('PUT')
      <input type="hidden" name="patient_id" value="{{$row->patient_id}}">
  @else
  <input type="hidden" name="patient_id" value="{{$row->id}}">

  @endif

  @csrf

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <input type="hidden" name="type" value="1">

      <div class="content mb-0">
        <label class="form-label">Tanggal</label>
          <div class="input-style has-borders no-icon mb-4">
              <input type="date" value="{{ old('tgl_antrian', (isset($row) && $row['tgl_antrian'] ? $row['tgl_antrian'] : '') ) }}" max="2030-01-01" min="1930-01-01" name="tgl_antrian" class="form-control validate-text" id="tanggal" placeholder="Phone">
              <i class="fa fa-check disabled valid me-4 pe-3 font-12 color-green-dark"></i>
              <i class="fa fa-check disabled invalid me-4 pe-3 font-12 color-red-dark"></i>
          </div>

          <label class="form-label">Klinik</label>
          <div class="input-style has-borders no-icon mb-4">
              <select id="klinik_id"  name="klinik_id">
                  <option value="default" disabled selected>Pilih Klinik</option>
                  @foreach ($klinik as $val)
                  <option value="{{$val->id}}" {{ old('klinik_id', (isset($row) && $row['klinik_id'] == $val->id ? "selected" : '') ) }}>{{ $val->nama}}</option>
                  @endforeach
              </select>
              <span><i class="fa fa-chevron-down"></i></span>
              <i class="fa fa-check disabled valid color-green-dark"></i>
              <i class="fa fa-check disabled invalid color-red-dark"></i>
              <em></em>
          </div>

          <label class="form-label">Dokter</label>
          <div class="input-style has-borders no-icon mb-4">
              <select id="doctor_id"  name="doctor_id">
                  <option value="default" disabled selected>Pilih Dokter</option>
                  @foreach ($doctors as $val)
                  <option value="{{$val->id}}" {{ old('doctor_id', (isset($row) && $row['doctor_id'] == $val->id ? "selected" : '') ) }}>{{ $val->nama}}</option>
                  @endforeach
              </select>
              <span><i class="fa fa-chevron-down"></i></span>
              <i class="fa fa-check disabled valid color-green-dark"></i>
              <i class="fa fa-check disabled invalid color-red-dark"></i>
              <em></em>
          </div>

          <label class="form-label">Waktu</label>
          <div class="input-style has-borders no-icon mb-4">
              <select id="waktu"  name="waktu">

              </select>
              <span><i class="fa fa-chevron-down"></i></span>
              <i class="fa fa-check disabled valid color-green-dark"></i>
              <i class="fa fa-check disabled invalid color-red-dark"></i>
              <em></em>
          </div>

          <label class="form-label">Keluhan Utama</label>
          <div class="input-style has-borders no-icon validate-field mb-4">
              <input type="text" class="form-control" name="keluhan" value="{{ old('keluhan', (isset($row) && $row['keluhan'] ? $row['keluhan'] : '') ) }}" placeholder="Keluhan Utama">
              <i class="fa fa-times disabled invalid color-red-dark"></i>
              <i class="fa fa-check disabled valid color-green-dark"></i>
              <!-- <em>(required)</em> -->
          </div>

          <label class="form-label">File</label>
          <div class="input-style has-borders no-icon validate-field mb-4">
              <input type="file" class="form-control" name="file">
              <i class="fa fa-times disabled invalid color-red-dark"></i>
              <i class="fa fa-check disabled valid color-green-dark"></i>
              <!-- <em>(required)</em> -->
          </div>

          <button class="btn btn-xxs mb-3 rounded-s text-uppercase font-900 shadow-s border-blue-dark btn-save  bg-blue-light" type="button">Save </button>
          <button class="d-none btn-submit" type="submit"></button>



      </div>

  </form>
</div>
@endsection

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

$(document).on('click', '.btn-save', function(e){

  let klinik = $("#klinik_id").val()
  let waktu = $("#waktu").val()
  let tanggal = $("#tanggal").val()
  let dokter = $("#doctor_id").val()
  let error = 0

    if (waktu == null ) {
      error += 1
      Swal.fire({
          title:'error',
          text:'Silahkan masukkan waktu',
          icon:'error'
      })
    }

    if (waktu == 0 ) {
      error += 1
      Swal.fire({
          title:'error',
          text:'Jadwal tidak tersedia',
          icon:'error'
      })
    }

    if (klinik == undefined) {
      error += 1
      Swal.fire({
          title:'error',
          text:'Silahkan masukkan klinik',
          icon:'error'
      })
    }

    if (tanggal == "") {
      error += 1
      Swal.fire({
          title:'error',
          text:'Silahkan masukkan tanggal',
          icon:'error'
      })
    }

    if (dokter == null) {
      error += 1
      Swal.fire({
          title:'error',
          text:'Silahkan masukkan dokter',
          icon:'error'
      })
    }

  // console.log(error);
  if (error > 0) {

  }else {
    $(".btn-submit").click()
  }


});

var doctor_id = 0
var klinik_id = 0
var tanggal = "2023-02-13"
var patient_id = 0

@if(isset($row) && isset($row->waktu))
  doctor_id = "{{$row->doctor_id}}"
  klinik_id = "{{$row->klinik_id}}"
  tanggal = "{{$row->tgl_antrian}}"
  tanggal = "{{$row->patient_id}}"
  getWaktu(doctor_id, tanggal, klinik_id, patient_id)
@endif

setTimeout(function() {
        $("#waktu").val("{{$row->waktu}}").trigger("change")
    }, 1000);


$(document).on('change', '#klinik_id', function(e){
  klinik_id = $(this).val()
  getWaktu(doctor_id, tanggal, klinik_id, patient_id)

});

$(document).on('change', '#doctor_id', function(e){
  doctor_id = $(this).val()
  getWaktu(doctor_id, tanggal, klinik_id, patient_id)

});

$(document).on('change', '#tanggal', function(e){
  tanggal = $(this).val()
  getWaktu(doctor_id, tanggal, klinik_id, patient_id)
});

$(document).on('change', '#patient_id', function(e){
  patient_id = $(this).val()
  getWaktu(doctor_id, tanggal, klinik_id, patient_id)
});

function getWaktu(doctor_id, tanggal, klinik_id, patient_id){
  $.ajax({
      url:"{{ route('dashboard.layanan.' . $module. '.getWaktu') }}",
      method:"GET",
      data: {
        doctor_id: doctor_id,
        tanggal: tanggal,
        klinik_id: klinik_id,
        patient_id: patient_id,
      },
      success:function(res){
        console.log(res);
        let html = ""
        $("#waktu").empty()
        $.each(res, function(k,v){
          html += `<option value="`+k+`">`+v+`</option>`
        })

        $("#waktu").html(html)

      }
    })
}

</script>
@endpush