@extends('page/layout/app')

  @section('title','Penyewaan Mes')

  @section('content')
  <div class="loading" id="loading" style="display: none;">
    <div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
    <h4>Loading</h4>
  </div>
  <div class="page-heading" id="pagePenyewaan">
    <div class="page-title">
      <div class="row">
        <div class="col-12 col-md-6 order-md-1 order-last">
        </div>
        <div class="col-12 col-md-6 order-md-2 order-first">
          <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="">Pengelolaan</a></li>
              <li class="breadcrumb-item active" aria-current="page">Penyewaan Ranjang</li>
            </ol>
          </nav>
        </div>
      </div>
    </div>
    <section class="section">
      <div class="card">
        <div class="card-header">
          <h5 class="card-title mb-0">
            Data Penyewaan Mes
            {!! request()->has('exp') ? '<br><strong>(Akhir Sewa : ' . date('F Y') . ')</strong>' : '' !!}
            <button type="button" style="float: right;" class="btn btn-sm rounded-pill btn-primary block new" >
              <i class="bx bx-plus"></i> Tambah Penyewaan
            </button><a href="{{route('index.penyewaan',['access'=>request()->has('access') ? request()->input('access') : null,'exp'=>'exp'])}}" class="btn btn-secondary btn-sm rounded-pill" style="float: right;margin-right: 5px;"><i class="bx bx-refresh"></i> Tampilkan Penyewaan yang habis bulan sekarang</a>
          </h5>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-striped nowrap dt-responsive" id="table_penyewaan" style="width: 100%;">
              <thead>
                <tr>
                  <th data-priority="2">No. </th>
                  <!-- <th data-priority="3">Kode Penyewaan</th> -->
                  <th data-priority="4">Nama</th>
                  <th data-priority="4">NIP</th>
                  <th data-priority="5">Ranjang</th>
                  <th data-priority="6">Tarif</th>
                  <th data-priority="7">Tanggal Mulai Sewa</th>
                  <th data-priority="8">Tanggal Selesai Sewa</th>
                  <th data-priority="9">Jumlah Tagihan belum bayar</th>
                  <th data-priority="10">Total Tagihan belum bayar</th>
                  <th data-priority="1">Action</th>
                </tr>
              </thead>
              <tbody class="table-border-bottom-0" >
                @foreach($data as $dt)
                <tr>
                  <td>{{$loop->index+1}}</td>
                  <td>{{$dt->name}}</td>
                  <td>{{$dt->nik}}</td>
                  <td>Lantai {{$dt->keterangan_kamar}} / {{$dt->nomor_kamar}}</td>
                  <td>Rp. {{number_format($dt->harga_kamar,0,",",".")}} / bulan</td>
                  <td>{{tanggal_indonesia($dt->tanggal_penyewaan)}}</td>
                  <td>
                    {{tanggal_indonesia($dt->tanggal_selesai)}}
                    @if($dt->tanggal_selesai < date('Y-m-d'))
                    <div class="spinner-grow spinner-grow-sm text-danger" role="status"></div>
                    <a
                    href="javascript:void(0)"
                    class="btn text-nowrap btn-xs text-warning"
                    data-bs-toggle="popover"
                    data-bs-offset="0,14"
                    data-bs-placement="top"
                    data-bs-html="true"
                    data-bs-content="Segera ubah Status Penyewaan menjadi Selesai."
                    title="Informasi">
                    <i class="bx bx-info-circle"></i>
                  </a>
                  @endif
                </td>
                <td>{{$dt->jumlah_tagihan}} bulan</td>
                <td>Rp. {{number_format($dt->total_tagihan,0,",",".")}}</td>
                <td>
                  <a href="javascript:void(0)" more_id="{{$dt->id_penyewaan}}" class="btn edit btn-sm rounded-pill text-white btn-success"><i class="bx bx-edit"></i></a>
                  <a href=" {{route('detail_penyewan',['kode_penyewaan'=>$dt->kode_penyewaan,'id_penyewaan'=>$dt->id_penyewaan,'access'=>request()->input('access', session('access', null))])}} " title="Lihat Detail Penyewaan" class="btn btn-sm rounded-pill text-white btn-info"><i class="bx bx-detail"></i></a>
                  @if(Auth::user()->level == 'Super Admin')
                  <a href="javascript" more_id="{{$dt->id_penyewaan}}" class="btn delete btn-sm btn-danger rounded-pill" title='Hapus Penyewaan'><i class="bx bx-trash"></i></a>
                  @endif
                </td>
              </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </section>
</div>
<!--  -->
@include('page.super_admin.penyewaan.form')
@endsection
@section('css')
<style type="text/css">
  .lds-spinner,
  .lds-spinner div,
  .lds-spinner div:after {
    box-sizing: border-box;
  }
  .lds-spinner {
    color: #000;
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-spinner div {
    transform-origin: 40px 40px;
    animation: lds-spinner 1.2s linear infinite;
  }
  .lds-spinner div:after {
    content: " ";
    display: block;
    position: absolute;
    top: 3.2px;
    left: 36.8px;
    width: 6.4px;
    height: 17.6px;
    border-radius: 20%;
    background: #000;
  }
  .lds-spinner div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -1.1s;
  }
  .lds-spinner div:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: -1s;
  }
  .lds-spinner div:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: -0.9s;
  }
  .lds-spinner div:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: -0.8s;
  }
  .lds-spinner div:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: -0.7s;
  }
  .lds-spinner div:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: -0.6s;
  }
  .lds-spinner div:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: -0.5s;
  }
  .lds-spinner div:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: -0.4s;
  }
  .lds-spinner div:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: -0.3s;
  }
  .lds-spinner div:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: -0.2s;
  }
  .lds-spinner div:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: -0.1s;
  }
  .lds-spinner div:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 0s;
  }
  @keyframes lds-spinner {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
</style>
@endsection
@section('scripts')
<script src="{{asset('webcam.min.js')}}"></script>
<script type="text/javascript">
  var access = "{{request()->has('access') ? request()->input('access') : null}}";
  function formatRupiah(angka, prefix) {
    let numberString = angka.replace(/[^,\d]/g, '').toString(),
    split = numberString.split(','),
    sisa = split[0].length % 3,
    rupiah = split[0].substr(0, sisa),
    ribuan = split[0].substr(sisa).match(/\d{3}/gi);

    if (ribuan) {
      let separator = sisa ? '.' : '';
      rupiah += separator + ribuan.join('.');
    }

    rupiah = split[1] !== undefined ? rupiah + ',' + split[1] : rupiah;
    return prefix === undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : '');
  }
  $(function () {
    $('#table_penyewaan').DataTable({
      processing: true,
      pageLength: 10,
      responsive: true,
      colReorder: true,
      responsive: true,
    });
    $("#table_kamar").DataTable({
     processing: true,
     pageLength: 10,
     responsive: true
   });
  });
  var text_id_kamar;
  var text_kamar;
  var text_jml;
  var text_harga;
  var text_keterangan;
  var tipe_input;
  $(document).ready(function() {
    $(document).on('click','.pilih',function() {
      var more_id = $(this).attr('more_id');
      var kamar = $(this).attr('more_kamar');
      var jml = $(this).attr('more_jml');
      var harga = $(this).attr('more_harga');
      var keterangan = $(this).attr('more_keterangan');
      $("#pilih_"+more_id).html('<i class="fa fa-spinner fa-pulse fa-2x"></i>');
      setTimeout(function() {
        $(".pilih").attr('hidden',true);
        $(".pilih").html('<i class="bx bx-check"></i>');
        $("#done_change_"+more_id).attr('hidden',false);
        $(".cancel").attr('hidden',false);
        $("#id_kamar").val(more_id);
      // 
      if (tipe_input == 'edit') {
        $("#label_pindah").attr('hidden',false);
      }
      // 
      $("#nomor_kamar").html(kamar);
      $("#harga_kamar").html(harga);
      $("#jumlah_fasilitas").html(jml);
      $("#keterangan_kamar").html(keterangan);
      // if (tipe_input == 'edit') {

      // }
    }, 300);
    });
  });
  $(".cancel").click(function() {
    $(this).attr('hidden',true);
    $(".pilih").attr('hidden',false);
    $(".done_change").attr('hidden',true);
    $("#id_kamar").val('');
    $("#label_pindah").attr('hidden',true);
    $(".view_akun").html('');
    if (tipe_input == 'edit') {
     $("#id_kamar").val(text_id_kamar);
     $("#nomor_kamar").html(text_kamar);
     $("#harga_kamar").html(text_harga);
     $("#jumlah_fasilitas").html(text_jml);
     $("#keterangan_kamar").html(text_keterangan);
   }
 });
  let ajaxUrl;
  $(function () {
    $('#penyewaanForm').submit(function (e) {
      e.preventDefault();
      if ($(this).data('submitted') === true) {
        return;
      }
      $(this).data('submitted', true);
      let formData = new FormData(this);
      $(".invalid-feedback").children("strong").text("");
      $("#penyewaanForm input").removeClass("is-invalid");
      $("#penyewaanForm select").removeClass("is-invalid");
      $("#penyewaanForm textarea").removeClass("is-invalid");
      $(".error-tab").html("");
      $("#loading").show();
      $.ajax({
        method: "POST",
        headers: {
          Accept: "application/json"
        },
        contentType: false,
        processData: false,
        url : ajaxUrl,
        data: formData,
        success: function (response) {
          $('#penyewaanForm').data('submitted', false);
          $("#loading").hide();
          if (response.status == 'true') {
            $("#penyewaanForm")[0].reset();
            Swal.fire({
              title: 'Penyewaan Berhasil',
              text: response.message,
              icon: 'success',
              type: 'success'
            }).then((result) => {
              if (result.isConfirmed) {
                document.location.href = response.redirect;
              }
            });
          }else if(response.status == 'warning'){
            Swal.fire({
              title: 'Penyewaan Warning',
              text: response.message,
              icon: 'warning',
              type: 'warning'
            });
          }else {
            Swal.fire({
              title: 'Penyewaan Error',
              text: response.message,
              icon: 'error',
              type: 'error'
            });
          }
        },
        error: function (response) {
          $('#penyewaanForm').data('submitted', false);
          $("#loading").hide();
          if (response.status === 422) {
            let errors = response.responseJSON.errors;
            Object.keys(errors).forEach(function (key) {
              var key_temp = key.replaceAll(".", "_");
              $("#" + key_temp).addClass("is-invalid");
              $("#" + key_temp + "Error").children("strong").text(errors[key][0]);
              var tab_id = $("#" + key_temp + "Error").closest(".tab-pane").attr("id");
              if (tab_id != undefined) {
                $("#tab_detail").find("[href$='#" + tab_id + "']").find(".error-tab").html("<i class='bx bx-info-circle'></i> Required");
              }
            });
          } else {
           Swal.fire({
            title: 'Penyewaan Error',
            text: response.message,
            icon: 'error',
            type: 'error'
          });
         }
       }
     });
    });
  });
  function tanggal_indonesia(dateString) {
    const bulan = [
    'Januari',
    'Februari',
    'Maret',
    'April',
    'Mei',
    'Juni',
    'Juli',
    'Agustus',
    'September',
    'Oktober',
    'November',
    'Desember'
    ];

    const tanggal = dateString.split('-');
    const hari = tanggal[2];
    const bulanIndex = parseInt(tanggal[1]) - 1;
    const tahun = tanggal[0];

    return `${hari} ${bulan[bulanIndex]} ${tahun}`;
  }
    // $("#status_user").select2({
    //   placeholder: ".: PILIH STATUS :.",
    //   dropdownParent: $("#modal_form_penghuni")
    // });
    $("#status_penyewaan").select2({
      placeholder: ".: STATUS PENYEWAAN :."
    });
    $(document).ready(function() {
      $(".btn_lihat").click(function() {
        var tipe = $(this).attr('more_tipe');
        if (tipe == 'foto') {
          $("#modal_view").addClass('modal-sm');
          $("#modal_view").removeClass('modal-xl');
          $(".img_view").show();
          $(".pdf_view").hide();
        }else{
          $("#modal_view").addClass('modal-xl');
          $("#modal_view").removeClass('modal-sm');
          $(".img_view").hide();
          $(".pdf_view").show();
        }
        $("#modal_form_preview").modal('show');
      });
    });
    $(".change_view").change(function() {
      var view = $(this).attr('id');
      var tipe = $(this).attr('more_tipe');
      if (this.files && this.files[0]) {
        $("#loading").show();
        var file = this.files[0];
        var allowedExtensions = ['png','jpg','jpeg','pdf'];
        var fileExtension = file.name.split('.').pop().toLowerCase();
        if (!allowedExtensions.includes(fileExtension)) {
          alert('File Dokumen tidak didukung.');
          if (tipe == 'foto') {
            $("#btn_foto").attr('disabled',true);
            $("#foto").val('');
            $("#foto").empty('');
          }else{
            $("#dokumen").val('');
            $("#dokumen").empty('');
            $("#btn_dokumen").attr('disabled',true);
          }
          $("#loading").hide();
          return;
        }
        var reader = new FileReader();
        reader.onload = function (e) {
          setTimeout(function() {
            $("#loading").hide();
            if (tipe == 'foto') {
              $("#btn_foto").attr('disabled',false);
              $('.img_view').css('display','block');
              $('.img_view').attr('src',e.target.result);
            }else{
              $("#btn_dokumen").attr('disabled',false);
              $('.pdf_view').css('display','block');
              $('.pdf_view').attr('src',e.target.result);
            }
          }, 500);
        };
        reader.readAsDataURL(this.files[0]);
      } else {
        if (tipe == 'foto') {
          $("#btn_foto").attr('disabled',true);
          $('.img_view').css('display','none');
          $('#foto').val('');
          $('#foto').empty('');
        }else{
          $("#btn_dokumen").attr('disabled',true);
          $('.pdf_view').css('display','none');
          $('#dokumen').val('');
          $('#dokumen').empty('');
        }
        
      }
    });
    $(".new").click(function() {
      $("#loading").show();
      $("#pagePenyewaan").css('display', 'none');
      tipe_input = 'new';
      $(".cancel").trigger('click');
      $("#label_pindah").attr('hidden',true);
      setTimeout(function() {
        $("#loading").hide();
        $(".view_akun").html('');
        $("#penyewaanForm")[0].reset();
        $(".invalid-feedback").children("strong").text("");
        $("#penyewaanForm input, #penyewaanForm select, #penyewaanForm textarea").removeClass("is-invalid");
        $(".modal-title").html('<i class="bx bx-plus"></i> Form Tambah Penyewaan');
        $(".label_req_ktp").text('*');
        $(".error-tab").html("");
        $("#col_status_penyewaan").hide();
        $("#status_penyewaan").val(null).trigger('change');
        $("#tanggal_penyewaan").attr('disabled', false);
        $("#col_table_kamar").show();
        $("#pagePenyewaanForm").css('display', 'block');
        $("#label_webcam").hide();
        ajaxUrl = "{{route('save.penyewaan')}}";
        document.getElementById('webcam-container').style.display = 'block';
        document.getElementById('preview-container').style.display = 'none';
      }, 200);
    });
    $(".btn_webcam").click(function() {
      setTimeout(function() {
       webCamGet();
     }, 600);
      $("#modal_webcam").modal('show');
    });
    function webCamGet() {
     Webcam.set({
      height: 400,
      image_format: 'jpeg',
      jpeg_quality: 100,
      dest_width: 640,
      dest_height: 480,
      flip_horiz: true
    });
     Webcam.attach('#webcam');
   }
   Webcam.on( 'error', function(err) {
    $("#foto_tamu").val('');
    $("#label_webcam").hide();
    if (err == 'NotAllowedError: Permission dismissed') {
      $("#not_allowed").css('display','block');
    }
    else if(err == 'NotAllowedError: Permission denied'){
      $("#not_allowed").css('display','block');
    }
  });
   $("#label_webcam").hide();
   Webcam.on('live', function() {
    $("#capture-btn").css('display','block');
  });
   $(document).on('click','#capture-btn',function() {
    Webcam.snap(function (data_uri) {
      var x = document.getElementById("myAudio"); 
      x.play();
      document.getElementById('webcam-container').style.display = 'none';
      document.getElementById('preview-container').style.display = 'block';

      var canvas = document.getElementById('captured-photo');
      var context = canvas.getContext('2d');

      var img = new Image();
      img.onload = function () {
        context.drawImage(img, 0, 0, canvas.width, canvas.height);
      };
      img.src = data_uri;

      document.getElementById('preview-photo').src = data_uri;
      $("#foto_tamu").val(data_uri);
      $("#label_webcam").show();
      $("#reset-btn").css('display','block');
    });
  });
   $(document).on('click','#reset-btn',function() {
    Webcam.reset();
    document.getElementById('webcam-container').style.display = 'block';
    document.getElementById('preview-container').style.display = 'none';
    $("#label_webcam").hide();
    $("#reset-btn").hide();
    $("#foto_tamu").val('');
    $("#preview-photo").attr('src', '');
    setTimeout(function() {
      webCamGet();
    }, 500);
  });
   $("#modal_webcam").on('hidden.bs.modal', function () {
    Webcam.reset();
  });
   $(".close").click(function() {
    $("#pagePenyewaan").css('display','block');
    $("#pagePenyewaanForm").css('display','none');
  });
   function get_edit(penyewaanID) {
    $.ajax({
      type: "GET",
      url: "{{url('page/pengelolaan/penyewaan/get_edit')}}"+"/"+penyewaanID,
      success: function(response) {
        $("#loading").hide();
        $.each(response, function(key, value) {
          $("#tanggal_penyewaan").val(value.tanggal_penyewaan);
          $("#id_user").val(value.id_user);
          $("#tanggal_selesai").val(value.tanggal_selesai);
          $("#status_penyewaan").val(value.status_penyewaan).trigger('change');
          $("#id_penyewaan").val(value.id_penyewaan);
          $("#name").val(value.name);
          $("#nik").val(value.nik);
            // $("#status_user").val(value.status_user).trigger('change');
            $("#ponsel").val(value.ponsel);
            $("#no_darurat").val(value.no_darurat);
            $("#status_no_darurat").val(value.status_no_darurat);
            $("#alamat").val(value.alamat);
            $("#fotoLama").val(value.foto);
            $("#dokumenLama").val(value.dokumen);
            $("#foto_tamuLama").val(value.webcam);
            // // 
            $("#id_kamar").val(value.id_kamar);
            $("#nomor_kamar").html(value.nomor_kamar);
            $("#harga_kamar").html(formatRupiah(value.harga_kamar,'Rp. '));
            $("#jumlah_fasilitas").html(value.jumlah_fasilitas);
            $("#keterangan_kamar").html(value.keterangan_kamar);
            // 
            text_id_kamar = value.id_kamar;
            text_kamar = value.nomor_kamar;
            text_harga = value.harga_kamar;
            text_jml = value.jumlah_fasilitas;
            text_keterangan = value.keterangan_kamar;
            // 
            $('.img_view').attr("src","{{asset('foto_ktp')}}/"+value.foto);
            $('.pdf_view').attr("src","{{asset('file_dokumen')}}/"+value.dokumen);
            $('#preview-photo').attr("src","{{asset('webcam')}}/"+value.webcam);
            if (value.foto != null) {
              $(".img_view").css('display','block');
              $("#btn_foto").attr('disabled',false);
            }else{
              $(".img_view").css('display','none');
              $("#btn_foto").attr('disabled',true);
            }
            if (value.dokumen != null) {
              $(".pdf_view").css('display','block');
              $("#btn_dokumen").attr('disabled',false);
            }else{
              $(".img_view").css('display','none');
              $("#btn_dokumen").attr('disabled',true);
            }
            if (value.webcam != null) {
              $("#reset-btn").css('display','block');
              $("#capture-btn").css('display','none');
              $("#label_webcam").show();
            }else{
              $("#reset-btn").css('display','none');
              $("#capture-btn").css('display','block');
              $("#label_webcam").hide();
            }
          });
      },
      error: function(response) {
        get_edit(penyewaanID);
      }
    });
  }
  $(document).on('click','.edit',function() {
    var penyewaanID = $(this).attr('more_id');
    $("#loading").show();
    tipe_input = 'edit';
    $(".view_akun").html('');
    $("#label_pindah").attr('hidden',true);
    $(".cancel").trigger('click');
    $("#pagePenyewaan").css('display','none');
    $("#penyewaanForm")[0].reset();
    $(".invalid-feedback").children("strong").text("");
    $("#penyewaanForm input").removeClass("is-invalid");
    $("#penyewaanForm select").removeClass("is-invalid");
    $("#penyewaanForm textarea").removeClass("is-invalid");
    $(".modal-title").html('<i class="bx bx-edit"></i> Form Edit Penyewaan');
    $(".label_req_ktp").text('');
    $(".error-tab").html("");
    $("#status_penyewaan").val(null).trigger('change');
    $("#pagePenyewaanForm").css('display','block');
    $("#col_status_penyewaan").show();
    $("#tanggal_penyewaan").attr('disabled',true);
    // $("#col_table_kamar").hide();
    ajaxUrl = "{{route('update.penyewaan')}}";
    document.getElementById('webcam-container').style.display = 'none';
    document.getElementById('preview-container').style.display = 'block';
    if (penyewaanID) {
      get_edit(penyewaanID);
    }
  });
  $(document).on('click', '.delete', function (event) {
    penyewaanID = $(this).attr('more_id');
    event.preventDefault();
    Swal.fire({
      title: 'Lanjut Hapus Data?',
      text: 'Data Penyewaan akan dihapus secara Permanent!',
      icon: 'warning',
      type: 'warning',
      showCancelButton: !0,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: 'Lanjutkan'
    }).then((result) => {
      if (result.isConfirmed) {
        $("#loading").show();
        $.ajax({
          method: "GET",
          url: "{{url('page/pengelolaan/penyewaan/destroy')}}"+"/"+penyewaanID,
          success:function(response)
          {
            $("#loading").hide();
            if (response.status == 'true') {
              showToast('bg-success','Penyewaan Dihapus',response.message);
              setTimeout(function(){
                document.location.href=''
              }, 200);
            }else{
              showToast('bg-danger','Penyewaan Error',response.message);
            }
          },
          error: function(response) {
            $("#loading").hide();
            showToast('bg-danger','Penyewaan Error',response.message);
          }
        })
      }
    });
  });
</script>
@endsection