@extends('page/layout/app')

  @section('title','Penghuni')

  @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="pageKamar">
    <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="">Master User</a></li>
              <li class="breadcrumb-item active" aria-current="page">Penghuni</li>
            </ol>
          </nav>
        </div>
      </div>
    </div>
    <section class="section">
      <div class="card">
        <div class="card-header">
          <h5 class="card-title mb-0">
            Data User Penghuni
          </h5>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-striped dt-responseive nowrap" id="table_penghuni" style="width: 100%;">
              <thead>
                <tr>
                  <th data-priority="1">No. </th>
                  <th data-priority="3">Nama</th>
                  <th data-priority="4">NIP</th>
                  <th data-priority="7">No. HP</th>
                  <th data-priority="11">Kontak Darurat</th>
                  <th data-priority="8">Foto</th>
                  <th data-priority="8">Dokumen</th>
                  <th data-priority="8">Webcam</th>
                  <th data-priority="9">Status Akun</th>
                  <th data-priority="10">Alamat</th>
                </tr>
              </thead>
              <tbody class="table-border-bottom-0">

              </tbody>
            </table>
          </div>
        </div>
      </div>
    </section>
  </div>
  @include('page.super_admin.user.penghuni.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;
      }
    }

    .lds-ellipsis,
    .lds-ellipsis div {
      box-sizing: border-box;
    }
    .lds-ellipsis {
      display: inline-block;
      position: relative;
      width: 80px;
      height: 80px;
    }
    .lds-ellipsis div {
      position: absolute;
      top: 33.33333px;
      width: 13.33333px;
      height: 13.33333px;
      border-radius: 50%;
      background: currentColor;
      animation-timing-function: cubic-bezier(0, 1, 1, 0);
    }
    .lds-ellipsis div:nth-child(1) {
      left: 8px;
      animation: lds-ellipsis1 0.6s infinite;
    }
    .lds-ellipsis div:nth-child(2) {
      left: 8px;
      animation: lds-ellipsis2 0.6s infinite;
    }
    .lds-ellipsis div:nth-child(3) {
      left: 32px;
      animation: lds-ellipsis2 0.6s infinite;
    }
    .lds-ellipsis div:nth-child(4) {
      left: 56px;
      animation: lds-ellipsis3 0.6s infinite;
    }
    @keyframes lds-ellipsis1 {
      0% {
        transform: scale(0);
      }
      100% {
        transform: scale(1);
      }
    }
    @keyframes lds-ellipsis3 {
      0% {
        transform: scale(1);
      }
      100% {
        transform: scale(0);
      }
    }
    @keyframes lds-ellipsis2 {
      0% {
        transform: translate(0, 0);
      }
      100% {
        transform: translate(24px, 0);
      }
    }
  </style>
  @endsection
  @section('scripts')
  <script type="text/javascript">
    var access = "{{request()->has('access') ? request()->input('access') : null}}";
    $(function () {
      $('#table_penghuni').DataTable({
        processing: true,
        pageLength: 10,
        responsive: true,
        colReorder: true,
        responsive: true,
        ajax: {
          url: "{{ route('index.user',$level) }}",
          data: {access: access},
          error: function (jqXHR, textStatus, errorThrown) {
            $('#table_penghuni').DataTable().ajax.reload();
          }
        },
        columns: [
        { data: 'DT_RowIndex', name: 'DT_RowIndex'},
        { 
          data: 'name', 
          name: 'name', 
          render: function (data, type, row) {
            return data;
          }  
        },
        { 
          data: 'nik', 
          name: 'nik', 
          render: function (data, type, row) {
            return data;
          }  
        },
        { 
          data: 'ponsel', 
          name: 'ponsel', 
          render: function (data, type, row) {
            return data;
          }  
        },
        { 
          data: 'no_darurat', 
          name: 'no_darurat', 
          render: function (data, type, row) {
            return data;
          }  
        },
        { 
          data: 'foto', 
          name: 'foto', 
          render: function (data, type, row) {
            if (data ==  null) {
              return '<span class="badge bg-primary text-white">Belum ada foto</span>';
            }else{
              return '<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center"><li data-bs-toggle="tooltip"data-popup="tooltip-custom"data-bs-placement="top" class="avatar avatar-xl pull-up" title="Foto Profil"><img src="{{asset('foto_ktp')}}/'+data+'" alt="Avatar" class="rounded-circle" /></li></ul>';
            }
          }  
        },
        { 
          data: 'dokumen', 
          name: 'dokumen', 
          render: function (data, type, row) {
            if (data ==  null) {
              return '<span class="badge bg-primary text-white">Belum ada dokumen</span>';
            }else{
              return '<a href="{{asset('file_dokumen')}}/'+data+'" target="_blank" class="btn btn-danger btn-sm w-100 text-white"><i class="bx bx-file bx-xs"> Lihat Dokumen</i></a>';
            }
          }  
        },
        { 
          data: 'webcam', 
          name: 'webcam', 
          render: function (data, type, row) {
            if (data ==  null) {
              return '<span class="badge bg-warning text-white">Belum ada foto webcam</span>';
            }else{
              return '<a href="{{asset('webcam')}}/'+data+'" target="_blank" class="btn btn-secondary btn-sm w-100 text-white"><i class="bx bxs-camera"> Lihat Foto</i></a>';
            }
          }  
        },
        { 
          data: 'status_user', 
          name: 'status_user', 
          render: function (data, type, row) {
            if (data == 'Aktif') {
              return '<span class="badge bg-success text-white">Aktif</span>';
            }else{
              return '<span class="badge bg-danger text-white">Non Aktif</span>';
            }
          }  
        },
        { 
          data: 'alamat', 
          name: 'alamat', 
          render: function (data, type, row) {
            return data;
          }  
        }
        // { data: 'action', name: 'action', orderable: false, className: 'space' }
        ]
      });
    });
    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")
    });
    var ajaxUrl = "";
    $(document).ready(function() {
      $(".new").click(function() {
        $("#loading").show();
        $("#pageKamar").attr('hidden',true);
        setTimeout(function() {
          $("#loading").hide();
          $("#pageKamarForm").attr('hidden',false);
          $("#penghuniForm")[0].reset();
          $(".invalid-feedback").children("strong").text("");
          $("#penghuniForm input").removeClass("is-invalid");
          $("#penghuniForm select").removeClass("is-invalid");
          $(".modal-title").html('<i class="bx bx-plus"></i> Form Tambah Penghuni');
          $(".view_akun").html('');
          $(".img_view").css('display','none');
          $("#status_user").val(null).trigger('change');
          $(".label_req_ktp").text('*');
        // $("#modal_form_penghuni").modal('show');
        ajaxUrl = "{{route('save.penghuni')}}";
      }, 300);
      });
    });
    $(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');
      });
    });
    $(".close").click(function() {
      $("#pageKamarForm").attr('hidden',true);
      $("#pageKamar").attr('hidden',false);
    })
    $(".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;
        }
        // $('.img_view').css('display','none');
        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('');
        }
        
      }
    });
    $(function () {
      $('#penghuniForm').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("");
        $("#penghuniForm input").removeClass("is-invalid");
        $("#penghuniForm select").removeClass("is-invalid");
        $("#loading").show();
        $.ajax({
          method: "POST",
          headers: {
            Accept: "application/json"
          },
          contentType: false,
          processData: false,
          url : ajaxUrl,
          data: formData,
          success: function (response) {
            $('#penghuniForm').data('submitted', false);
            $("#loading").hide();
            if (response.status == 'true') {
              $("#penghuniForm")[0].reset();
              // $('#modal_form_penghuni').modal('hide');
              $("#pageKamar").show();
              $("#pageKamarForm").hide();
              Swal.fire({
                title: 'User Success',
                text: response.message,
                icon: 'success',
                type: 'success'
              });
              setTimeout(function() {
                $('#table_penghuni').DataTable().ajax.reload();
              }, 100);
            } else {
             Swal.fire({
              title: 'User Error',
              text: response.message,
              icon: 'error',
              type: 'error'
            });
           }
         },
         error: function (response) {
          $('#penghuniForm').data('submitted', false);
          $("#loading").hide();
          if (response.status === 422) {
            let errors = response.responseJSON.errors;
            Object.keys(errors).forEach(function (key) {
              $("#" + key).addClass("is-invalid");
              $("#" + key + "Error").children("strong").text(errors[key][0]);
            });
          } else {
           Swal.fire({
            title: 'User Error',
            text: response.message,
            icon: 'error',
            type: 'error'
          });
         }
       }
     });
      });
    });
    function get_edit(userID) {
      $.ajax({
        type: "GET",
        url: "{{url('page/user/penghuni/get_edit')}}"+"/"+userID,
        success: function(response) {
          if (response) {
            $("#loading").hide();
            $("#pageKamarForm").attr('hidden',false);
            $.each(response, function(key, value) {
              $("#id_user").val(value.id);
              $("#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);
              $("#alamat").val(value.alamat);
              $("#fotoLama").val(value.foto);
              $("#dokumenLama").val(value.dokumen);
              $('.img_view').attr("src","{{asset('foto_ktp')}}/"+value.foto);
              $('.pdf_view').attr("src","{{asset('file_dokumen')}}/"+value.dokumen);
              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);
              }
            });
          }
        },
        error: function(response) {
          get_edit(userID);
        }
      });
    }
    $(document).on('click','.edit',function() {
      $("#loading").show();
      var userID = $(this).attr('more_id');
      $("#penghuniForm")[0].reset();
      $("#pageKamar").attr('hidden',true);
      $(".invalid-feedback").children("strong").text("");
      $("#penghuniForm input").removeClass("is-invalid");
      $("#penghuniForm select").removeClass("is-invalid");
      $(".modal-title").html('<i class="bx bx-edit"></i> Form Ubah Penghuni');
      $(".label_req_ktp").text('');
      $("#modal_form_penghuni").modal('show');
      $(".view_akun").html('');
      $(".img_view").css('display','none');
      $("#status_user").val(null).trigger('change');
      ajaxUrl = "{{route('update.penghuni')}}";
      if (userID) {
        get_edit(userID);
      }
    });
    $(document).on('click', '.delete', function (event) {
      userID = $(this).attr('more_id');
      event.preventDefault();
      Swal.fire({
        title: 'Lanjut Hapus Data?',
        text: 'Data User Penghuni 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/user/destroy')}}"+"/"+userID,
            success:function(response)
            {
              $("#loading").hide();
              if (response.status == 'true') {
                setTimeout(function(){
                  showToast('bg-success','Penghuni Dihapus',response.message);
                  $('#table_penghuni').DataTable().ajax.reload();         
                }, 50);
              }else{
                showToast('bg-danger','Penghuni Error',response.message);
              }
            },
            error: function(response) {
              $("#loading").hide();
              showToast('bg-danger','Penghuni Error',response.message);
            }
          })
        }
      });
    });
  </script>
  @endsection