@extends('page/layout/app')

  @section('title','History Aktivitas dan Pelanggaran')

  @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">
    <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="">Page</a></li>
              <li class="breadcrumb-item active" aria-current="page">History</li>
            </ol>
          </nav>
        </div>
      </div>
    </div>
    <section class="section">
      <div class="card">
        <div class="card-header">
          <h5 class="card-title mb-0">
            History Aktivitas dan Pelanggaran
            @if(Auth::user()->level != 'Penghuni')
            <button type="button" style="float: right;" class="btn btn-sm btn-outline-primary block new" >
              <i class="bx bx-plus"></i>
            </button>
            @endif
          </h5>
        </div>
        <div class="card-body">
          <div class="table-responsive text-nowrap">
            <table class="table table-striped" id="table_history" style="width: 100%;">
              <thead>
                <tr>
                  <th data-priority="1">No. </th>
                  <th>NIP</th>
                  <th>Nama</th>
                  <th>Jenis</th>
                  <th>Kategori</th>
                  <th>Keterangan</th>
                  <th data-priority="2">Action</th>
                </tr>
              </thead>
              <tbody class="table-border-bottom-0">

              </tbody>
            </table>
          </div>
        </div>
      </div>
    </section>
  </div>
  <div class="modal fade text-left" data-bs-backdrop="static" id="modal_form_history" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel1"></h5>
        <button
        type="button"
        class="btn-close"
        data-bs-dismiss="modal"
        aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
       <form method="post" id="ajuanForm" enctype="multipart/form-data">
        @csrf
        <div class="row">
          <input type="" hidden="" id="id_history" name="id_history">
          <div class="col-lg-12">
            <div class="form-group">
              <label class="col-form-label">Penghuni <span class="text-danger">*</span></label>
              <select class="form-control" style="width: 100%;" id="id_penyewaan" name="id_penyewaan">
                @foreach($penghuni as $sewa)
                <option value="{{$sewa->id_penyewaan}}">{{$sewa->name}}</option>
                @endforeach
              </select>
              <span class="invalid-feedback" role="alert" id="id_penyewaanError">
                <strong></strong>
              </span>
            </div>
          </div>
          <div class="col-lg-12">
            <div class="form-group">
              <label class="col-form-label">Jenis <span class="text-danger">*</span></label>
              <select class="form-control" style="width: 100%;" id="jenis" name="jenis">
                <option value="Pelanggaran">Pelanggaran</option>
                <option value="Aktivitas">Aktivitas</option>
              </select>
              <span class="invalid-feedback" role="alert" id="jenisError">
                <strong></strong>
              </span>
            </div>
          </div>
          <div class="col-lg-12">
            <div class="form-group">
                            <label class="col-form-label">Kategori <span class="text-danger" id="label_kategori"></span></label>
              <select class="form-control" style="width: 100%;" id="kategori" name="kategori">
                @foreach($kategori as $ktg)
                <option value="{{$ktg}}">{{$ktg}}</option>
                @endforeach
              </select>
              <span class="invalid-feedback" role="alert" id="kategoriError">
                <strong></strong>
              </span>
            </div>
          </div>
          <div class="col-lg-12">
            <div class="form-group">
              <label class="col-form-label">Keterangan <span class="text-danger" id="label_keterangan"></span></label>
              <textarea class="form-control" rows="4" id="isi" name="isi" placeholder="Masukkan Saran Anda ..."></textarea>
              <span class="invalid-feedback" role="alert" id="isiError">
                <strong></strong>
              </span>
            </div>
          </div>
        </div>
        <div class="row mt-4">
          <div class="col-lg-12">
            <label class="form-label">Tambahkan Foto</label><br>
            <button type="button" id="new_history_foto" class="btn btn-info text-white btn-sm mb-2">
              <i class="bx bx-plus"></i>
            </button>
            <input type="text" id="id_history_detail_del" hidden="" name="id_history_detail_del">
            <div class="table-responsive">
              <table class="table table-hover table-bordered table-striped responsive-table" style="width: 100%;">
                <thead style="background: #aaa;">
                 <tr>
                  <th>No. </th>
                  <th>Foto</th>
                  <th>Preview</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody id="table_history_foto">
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn" data-bs-dismiss="modal">
        <span>Tutup</span>
      </button>
      <button class="btn btn-primary ml-1 submit">
        <i class="bx bx-save"></i> <span>Simpan</span>
      </button>
    </div>
  </form>
  <div style="display:none;">
    <table id="sample_table_history_foto">
      <tr id="">
        <td data-label="No."><span class="sn" style="vertical-align:middle;"></span></td>   
        <td data-label="Isi">
          <input type="" hidden="" name="ajuan[0][id_history_detail]" id="ajuan_0_id_history_detail" class="form-control id_history_detail_input">
          <input type="file" accept="image/*" name="ajuan[0][foto_history]" id="ajuan_0_foto_history" class="form-control foto_history_input">
          <span class="invalid-feedback foto_history_input_error" role="alert" id="ajuan_0_foto_historyError">
            <strong></strong>
          </span>
        </td>
        <td data-label="Preview Foto">
          <img src="" class="img rounded-pill lihat_foto_history_input" id="ajuan_0_lihat_foto_history" width="100">
        </td>
        <td>
          <center>
            <button type="button" class="delete-record btn btn-sm btn-danger" data-id="0"><i class="bx bx-trash"></i></button>
          </center>
        </td>
      </tr>
    </table>
  </div>
</div>
</div>
</div>
@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 type="text/javascript">
  $(function () {
    $('#table_history').DataTable({
      processing: true,
      pageLength: 10,
      colReorder: true,
      responsive: true,
      ajax: {
        url: "{{ route('penghuni.history') }}",
        error: function (jqXHR, textStatus, errorThrown) {
          $('#table_history').DataTable().ajax.reload();
        }
      },
      columns: [
      { data: 'DT_RowIndex', name: 'DT_RowIndex'},
      { 
        data: 'nik', 
        name: 'nik', 
        render: function (data, type, row) {
          return data;
        }  
      },
      { 
        data: 'name', 
        name: 'name', 
        render: function (data, type, row) {
          return data;
        }  
      },
      { 
        data: 'jenis', 
        name: 'jenis', 
        render: function (data, type, row) {
          if (data == 'Pelanggaran') {
            return '<span class="badge bg-danger text-white">Pelanggaran</span>';
          }else{
            return '<span class="badge bg-warning text-white">Aktivitas</span>';
          }
          // return data;
        }  
      },
      { 
        data: 'kategori', 
        name: 'kategori', 
        render: function (data, type, row) {
          if (data != null) {
            return data;
          }else{
            return '-';
          }
        }  
      },
      { 
        data: 'keterangan', 
        name: 'keterangan', 
        render: function (data, type, row) {
          return data;
        }  
      },
      { data: 'action', name: 'action', orderable: false, className: 'space' }
      ]
    });
  });
  $("#jenis").select2({
    placeholder: ".: PILIH JENIS :.",
    dropdownParent: $("#modal_form_history")
  });
  $("#id_penyewaan").select2({
    placeholder: ".: PILIH PENGHUNI :.",
    dropdownParent: $("#modal_form_history")
  });
  $("#kategori").select2({
    placeholder: ".: PILIH KATEGORI :.",
    allowClear: true,
    dropdownParent: $("#modal_form_history")
  });
  var ajaxUrl = "";
  $(document).ready(function() {
    $(".new").click(function() {
      $("#loading").show();
      setTimeout(function() {
        $("#loading").hide();
        $("#ajuanForm")[0].reset();
        $("#jenis").val(null).trigger('change');
        $("#id_penyewaan").val(null).trigger('change');
        $("#kategori").val(null).trigger('change');
        $(".invalid-feedback").children("strong").text("");
        $("#ajuanForm input").removeClass("is-invalid");
        $("#ajuanForm select").removeClass("is-invalid");
        $("#ajuanForm textarea").removeClass("is-invalid");
        global_id_history_detail = 0;
        $(".rec").remove();
        $(".modal-title").html('<i class="bx bx-plus"></i> Form History');
        // 
        $("#new_history_foto").show();
        $("#ajuanForm textarea").attr('disabled',false);
        $(".foto_history_input").attr('disabled',false);
        $(".delete-record").show();
        $(".submit").show();
        // 
        $("#modal_form_history").modal('show');
        ajaxUrl = "{{route('save.history')}}";
      }, 300);
    });
  });
  let global_id_history_detail = 0;
  $(document).on('click', '#new_history_foto', function () {
    var content = jQuery("#sample_table_history_foto tr"),
    size = global_id_history_detail++,
    element = null,
    element = content.clone();
    element.attr('id','rec-'+size);
    element.attr('class','rec');
    element.find('.delete-record').attr('data-id', size);

    element.find('.id_history_detail_input').attr('id', 'ajuan_' + size + '_id_history_detail');
    element.find('.id_history_detail_input').attr('name', 'ajuan[' + size + '][id_history_detail]');

    element.find('.lihat_foto_history_input').attr('id', 'ajuan_' + size + '_lihat_foto_history');
    element.find('.lihat_foto_history_input').attr('name', 'ajuan[' + size + '][lihat_foto_history]');

    element.find('.foto_history_input').attr('id', 'ajuan_' + size + '_foto_history');
    element.find('.foto_history_input').attr('name', 'ajuan[' + size + '][foto_history]');
    element.find('.foto_history_input_error').attr('id', 'ajuan_' + size + '_foto_historyError');
    element.find('.foto_history_input').val(null).trigger('change');
    element.find('.foto_history_input').on('change',function() {
      if (this.files && this.files[0]) {
        show_loading();
        var file = this.files[0];
        var allowedExtensions = ['png','jpg','jpeg'];
        var fileExtension = file.name.split('.').pop().toLowerCase();

        if (!allowedExtensions.includes(fileExtension)) {
          alert('File Dokumen tidak didukung.');
          element.find('.foto_history_input').val('');
          element.find('.foto_history_input').empty('');
          hide_loading();
          return;
        }
        element.find('.lihat_foto_history_input').css('display','none');
        var reader = new FileReader();
        reader.onload = function (e) {
          setTimeout(function() {
            hide_loading();
            element.find('.lihat_foto_history_input').css('display','block');
            element.find('.lihat_foto_history_input').attr('src', e.target.result);
          }, 500);
        };
        reader.readAsDataURL(this.files[0]);
      } else {
        element.find('.lihat_foto_history_input').css('display','none');
        element.find('.foto_history_input').val('');
        element.find('.foto_history_input').empty('');
      }
    });

    element.appendTo('#table_history_foto');
    $('#table_history_foto tr').each(function (index) {
      $(this).find('span.sn').html(index + 1);
    });
  });
  $(document).on('click', '.delete-record', function () {
    var id = jQuery(this).attr('data-id');
    var more_id = jQuery(this).attr('more_id');
    var currentValues = $("#id_history_detail_del").val();
    if (currentValues) {
      if (more_id) {
        $("#id_history_detail_del").val(currentValues + ',' + more_id);
      }
    } else {
      $("#id_history_detail_del").val(more_id);
    }
    var targetDiv = jQuery(this).attr('targetDiv');
    jQuery('#rec-' + id).remove();
    $('#table_history_foto tr').each(function (index) {
      $(this).find('span.sn').html(index + 1);
    });
    return true;
  });
  $(function () {
    $('#ajuanForm').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("");
      $("#ajuanForm input").removeClass("is-invalid");
      $("#ajuanForm select").removeClass("is-invalid");
      $("#ajuanForm textarea").removeClass("is-invalid");
      $("#loading").show();
      $.ajax({
        method: "POST",
        headers: {
          Accept: "application/json"
        },
        contentType: false,
        processData: false,
        url : ajaxUrl,
        data: formData,
        success: function (response) {
          $('#ajuanForm').data('submitted', false);
          $("#loading").hide();
          if (response.status == 'true') {
            $("#ajuanForm")[0].reset();
            $('#modal_form_history').modal('hide');
            Swal.fire({
              title: 'History Success',
              text: response.message,
              icon: 'success',
              type: 'success'
            });
            $('#table_history').DataTable().ajax.reload();
          } else {
            showToast('bg-danger','History Error',response.message);
          }
        },
        error: function (response) {
          $('#ajuanForm').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]);
            });
          } else {
            showToast('bg-danger','History Error',response.message);
          }
        }
      });
    });
  });
  function get_edit(historyID) {
    $.ajax({
      type: "GET",
      url: "{{url('page/history/get_edit')}}"+"/"+historyID,
      success: function(response) {
        $("#loading").hide();
        global_id_history_detail = 0;
        $("#id_penyewaan").attr('readonly',true);
        $.each(response.data, function(key, value) {
          $("#id_history").val(value.id_history);
          $("#id_penyewaan").val(value.id_penyewaan).trigger('change');
          $("#jenis").val(value.jenis).trigger('change');
          $("#kategori").val(value.kategori).trigger('change');
          $("#keterangan").val(value.keterangan);
        });
        $.each(response.foto, function(key, value_foto) {
          $("#new_history_foto").trigger('click');
        });
        setTimeout(function () {
          $('#table_history_foto tr').each(function (index) {
            $(this).find('.id_history_detail_input').val(response.foto[index].id_history_detail);
            $(this).find('.lihat_foto_history_input').attr('src', '{{asset('foto_history')}}/'+response.foto[index].foto_history);
            $(this).find('.foto_history_input').attr('disabled',true);
            $(this).find('span.sn').html(index + 1);
            $(this).find('.delete-record').attr('more_id', response.foto[index].id_history_detail);
          }); 
        }, 500);
      },
      error: function(response) {
        get_edit(historyID);
      }
    });
  }
  $(document).on('click','.view',function() {
    $("#loading").show();
    var historyID = $(this).attr('more_id');
    $("#ajuanForm")[0].reset();
    $(".invalid-feedback").children("strong").text("");
    $("#ajuanForm input").removeClass("is-invalid");
    $("#ajuanForm select").removeClass("is-invalid");
    $("#ajuanForm textarea").removeClass("is-invalid");
    $(".modal-title").html('<i class="bx bx-edit"></i> Form Ubah History');
    $(".rec").remove();
    // 
    $("#jenis").val(null).trigger('change');
    $("#id_penyewaan").val(null).trigger('change');
    $("#kategori").val(null).trigger('change');
    // $("#new_history_foto").hide();
    // $("#ajuanForm textarea").attr('disabled',true);
    // $(".foto_history_input").attr('disabled',true);
    // $(".delete-record").hide();
    // $(".submit").hide();
    $("#modal_form_history").modal('show');
    ajaxUrl = " {{route('update.history')}} ";
    if (historyID) {
      get_edit(historyID);
    }
  });
  $(document).on('change', '#kategori', function() {
    var kategoriValue = $(this).val();
    if (kategoriValue == 'Lainnya') {
      $("#label_keterangan").html('*');
    }else{
      $("#label_keterangan").html('');
    }
  });
  $(document).on('change', '#jenis', function() {
    var jenisValue = $(this).val();
    if (jenisValue == 'Pelanggaran') {
      $("#label_kategori").html('*');
    }else{
      $("#label_kategori").html('');
    }
  });
  $(document).on('click', '.delete', function (event) {
    historyID = $(this).attr('more_id');
    event.preventDefault();
    Swal.fire({
      title: 'Lanjut Hapus Data?',
      text: 'Kotak Saran 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/aduan/destroy')}}"+"/"+historyID,
          success:function(response)
          {
            $("#loading").hide();
            if (response.status == 'true') {
              setTimeout(function(){
                showToast('bg-success','Saran Dihapus',response.message);
                $('#table_history').DataTable().ajax.reload();         
              }, 50);
            }else{
              showToast('bg-danger','Saran Error',response.message);
            }
          },
          error: function(response) {
            $("#loading").hide();
            showToast('bg-danger','Saran Error',response.message);
          }
        })
      }
    });
  });
</script>
@endsection