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

@section("title")
    Rekam Medis - 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>

  .header-clear-medium {
    padding-top: calc(70px + (env(safe-area-inset-top))*0.8) !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.master.pasien.index')}}" class="header-icon header-icon-1"><i class="fas fa-arrow-left"></i></a> -->
@endsection

@section ('content')



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

@if ($action === "UPDATE")
    @method('PUT')
@endif

@csrf

<div class="card card-style">

  @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="status" value="1">
    <div class="content mb-0">
      <label class="form-label">Nama</label>
        <div class="input-style has-borders has-icon validate-field mb-4">
            <i class="fa fa-user"></i>
            <input type="name" value="{{ old('nama', (isset($row) && $row['nama'] ? $row['nama'] : '') ) }}" class="form-control validate-name" name="nama" id="nama" placeholder="Name" >
            <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">Tempat Lahir</label>
        <div class="input-style has-borders no-icon validate-field mb-4">
            <input type="text" value="{{ old('tempat_lahir', (isset($row) && $row['tempat_lahir'] ? $row['tempat_lahir'] : '') ) }}" class="form-control validate-text" name="tempat_lahir" id="form2" placeholder="Tempat Lahir">
            <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">Tanggal Lahir</label>
        <div class="input-style has-borders no-icon mb-4">
            <input type="date" value="{{ old('tgl_lahir', (isset($row) && $row['tgl_lahir'] ? $row['tgl_lahir'] : '1995-12-31') ) }}" max="2030-01-01" min="1930-01-01" name="tgl_lahir" class="form-control validate-text" id="form6" 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">Jenis Kelamin</label>
        <div class="input-style has-borders no-icon mb-4">
            <select id="form5"  name="jenis_kelamin">
                <option value="default" disabled selected>Pilih Jenis Kelamin</option>
                <option value="Laki-laki" {{ old('jenis_kelamin', (isset($row) && $row['jenis_kelamin'] == "Laki-laki" ? "selected" : '') ) }}>Laki-laki</option>
                <option value="Perempuan" {{ old('jenis_kelamin', (isset($row) && $row['jenis_kelamin'] == "Perempuan" ? "selected" : '') ) }}>Perempuan</option>
            </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">Pekerjaan</label>
        <div class="input-style has-borders no-icon validate-field mb-4">
            <input type="text" class="form-control" value="{{ old('pekerjaan', (isset($row) && $row['pekerjaan'] ? $row['pekerjaan'] : '') ) }}" id="form2" name="pekerjaan" placeholder="Pekerjaan">
            <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">Phone</label>
        <div class="input-style has-borders no-icon mb-4">
            <input type="number" class="form-control" value="{{ old('no_hp', (isset($row) && $row['no_hp'] ? $row['no_hp'] : '') ) }}" name="no_hp" placeholder="Phone">
            <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">Alamat</label>
        <div class="input-style has-borders no-icon validate-field mb-4">
            <input type="text" class="form-control" value="{{ old('alamat', (isset($row) && $row['alamat'] ? $row['alamat'] : '') ) }}" id="form2" name="alamat" placeholder="Alamat">
            <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">Provinsi</label>
        <div class="form-group select-form">
          <select class="form-control" name="prov_id" id="provinsi"></select>
        </div>

        <label class="form-label">Kota</label>
        <div class="form-group select-form">
          <select class="form-control" name="city_id" id="kota"></select>
        </div>

        <label class="form-label">Kecamatan</label>
        <div class="form-group select-form">
          <select class="form-control" name="dis_id" id="kecamatan"></select>
        </div>

        <label class="form-label">Kelurahan</label>
        <div class="form-grou select-form">
          <select class="form-control" name="subdis_id" id="kelurahan"></select>
        </div>

        <label class="form-label">Berat Badan</label>
        <div class="input-style has-borders no-icon validate-field mb-4">
            <input type="number" class="form-control" name="bb" value="{{ old('bb', (isset($row) && $row['bb'] ? $row['bb'] : '') ) }}" placeholder="Berat Badan">
            <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">Tinggi Badan</label>
        <div class="input-style has-borders no-icon validate-field mb-4">
            <input type="number" class="form-control"name="tb" value="{{ old('tb', (isset($row) && $row['tb'] ? $row['tb'] : '') ) }}" placeholder="Tinggi Badan">
            <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">Tekanan Darah</label>
        <div class="input-style has-borders no-icon mb-4">
            <input type="text" class="form-control" name="tensi" value="{{ old('tensi', (isset($row) && $row['tensi'] ? $row['tensi'] : '') ) }}" placeholder="Tekanan Darah">
            <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">Alergi</label>
        <div class="input-style has-borders no-icon validate-field mb-4">
            <input type="text" class="form-control" name="alergi" value="{{ old('alergi', (isset($row) && $row['alergi'] ? $row['alergi'] : '') ) }}" placeholder="Alergi">
            <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  bg-blue-light">Save</span> </button>



    </div>
</div>

</form>
@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>
console.log("tes");

  @if(isset($row) && $row['prov_rel'])
      var set_prov = new Option("{{$row['prov_rel']['prov_name']}}", "{{$row['prov_id']}}", false, true)
      var set_kota = new Option("{{$row['city_rel']['city_name']}}", "{{$row['city_id']}}", false, true)
      var set_kec = new Option("{{$row['dis_rel']['dis_name']}}", "{{$row['dis_id']}}", false, true)
      var set_kel = new Option("{{$row['subdis_rel']['subdis_name'] ?? ""}}", "{{$row['subdis_id'] ?? ""}}", false, true)

      $('#provinsi').append(set_prov).trigger('change')
      $('#kota').append(set_kota).trigger('change')
      $('#kecamatan').append(set_kec).trigger('change')
      $('#kelurahan').append(set_kel).trigger('change')
    @endif

    var prov_id = 13
    var city_id = ''
    var kec_id = ''

    $('#provinsi').on('change', function() {
      prov_id = $("#provinsi option:selected").val();
    })
    $('#kota').on('change', function() {
      city_id = $("#kota option:selected").val();
    })
    $('#kecamatan').on('change', function() {
      kec_id = $("#kecamatan option:selected").val();
    })

    $("#provinsi").select2({
        placeholder:"Pilih Provinsi",
        ajax:
        {
          url: function (term) {
          return "{{ route('get-wilayah.provinsi') }}";
        },
          processResults: function (data) {
            console.log(data);
            return {
              results: data.results
            };
          }
        }
    })

    $("#kota").select2({
        placeholder:"Pilih Kota",
        ajax:
        {
          url: function (term) {
          return "{{ route('get-wilayah.kota') }}?prov_id="+prov_id;
        },
          processResults: function (data) {
            console.log(data);
            return {
              results: data.results
            };
          }
        }
    })

    $("#kecamatan").select2({
        placeholder:"Pilih Kecamatan",
        ajax:
        {
          url: function (term) {
          return "{{ route('get-wilayah.kecamatan') }}?city_id=" + city_id;
        },
          processResults: function (data) {
            console.log(data);
            return {
              results: data.results
            };
          }
        }
    })

    $("#kelurahan").select2({
        placeholder:"Pilih Kelurahan",
        ajax:
        {
          url: function (term) {
          return "{{ route('get-wilayah.kelurahan') }}?kec_id=" + kec_id;
        },
          processResults: function (data) {
            console.log(data);
            return {
              results: data.results
            };
          }
        }
    })


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