@extends('page/layout/app')

  @section('title','Operator')

  @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="">Master User</a></li>
              <li class="breadcrumb-item active" aria-current="page">Operator</li>
            </ol>
          </nav>
        </div>
      </div>
    </div>
    <section class="section">
      <div class="card">
        <div class="card-header">
          <h5 class="card-title mb-0">
            Data User Operator
            <button type="button" style="float: right;" class="btn btn-sm rounded-pill btn-primary block new" >
              <i class="bx bx-plus"></i> Tambah Operator
            </button>
          </h5>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-striped dt-responseive nowrap" id="table_operator" style="width: 100%;">
              <thead>
                <tr>
                  <th data-priority="2">No. </th>
                  <th data-priority="3">Nama</th>
                  <th data-priority="5">Email</th>
                  <th data-priority="6">Telepon</th>
                  <th data-priority="7">Status</th>
                  <th data-priority="1">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_operator" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel1" aria-hidden="true">
  <div class="modal-dialog 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="operatorForm" enctype="multipart/form-data">
        @csrf
        <div class="row">
          <div class="col-lg-12">
            <div class="row">
              <div class="col-lg-12 mb-2">
                <div class="form-group">
                  <label class="col-form-label">Nama <span class="text-danger">*</span></label>
                  <input type="" hidden="" id="id_user" name="id_user">
                  <input type="text" class="form-control input_view" autocomplete="off" id="name" name="name">
                  <span class="invalid-feedback" role="alert" id="nameError">
                    <strong></strong>
                  </span>
                </div>
              </div>
              <div class="col-lg-12 mb-2">
                <div class="form-group">
                  <label class="col-form-label">Email <span class="text-danger">*</span></label>
                  <input type="email" autocomplete="off" class="form-control input_view" id="email" name="email">
                  <span class="invalid-feedback" role="alert" id="emailError">
                    <strong></strong>
                  </span>
                </div>
              </div>
              <div class="col-lg-12 mb-2">
                <div class="form-group">
                  <label class="col-form-label">Password <span class="text-danger">*</span></label>
                  <input type="text" autocomplete="off" class="form-control input_view" id="password" name="password">
                  <span class="invalid-feedback" role="alert" id="passwordError">
                    <strong></strong>
                  </span>
                </div>
              </div>
              <div class="col-lg-12 mb-2">
                <div class="form-group">
                  <label class="col-form-label">No Telepon <span class="text-danger">*</span></label>
                  <input type="number" autocomplete="off" class="form-control input_view" id="ponsel" name="ponsel">
                  <span class="invalid-feedback" role="alert" id="ponselError">
                    <strong></strong>
                  </span>
                </div>
              </div>
              <div class="col-lg-12 mb-2">
                <div class="form-group">
                  <label class="col-form-label">Status <span class="text-danger">*</span></label>
                  <select class="form-control" style="width: 100%;" name="status_user" id="status_user">
                    <option value="Aktif">Aktif</option>
                    <option value="Non Aktif">Non Aktif</option>
                  </select>
                  <span class="invalid-feedback" role="alert" id="status_userError">
                    <strong></strong>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-loading" id="modal-loading" style="display: none;text-align: center;">
        <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
        <h5>Menunggu Foto</h5>
      </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>
</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;
    }
  }

  .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_operator').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_operator').DataTable().ajax.reload();
        }
      },
      columns: [
      { data: 'DT_RowIndex', name: 'DT_RowIndex'},
      { 
        data: 'name', 
        name: 'name', 
        render: function (data, type, row) {
          return data;
        }  
      },
      { 
        data: 'email', 
        name: 'email', 
        render: function (data, type, row) {
          return '<a href="mailto:'+data+'">'+data+'</a>';
        }  
      },
      { 
        data: 'ponsel', 
        name: 'ponsel', 
        render: function (data, type, row) {
          return data;
        }  
      },
      { 
        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: '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}`;
  // }
  var ajaxUrl = "";
  $("#status_user").select2({
    placeholder: ".: PILIH STATUS :.",
    dropdownParent: $("#modal_form_operator")
  });
  $(document).ready(function() {
    $(".new").click(function() {
      $("#loading").show();
      setTimeout(function() {
        $("#loading").hide();
        $("#operatorForm")[0].reset();
        $(".invalid-feedback").children("strong").text("");
        $("#operatorForm input").removeClass("is-invalid");
        $("#operatorForm select").removeClass("is-invalid");
        $(".modal-title").html('<i class="bx bx-plus"></i> Form Tambah Operator');
        $("#status_user").val(null).trigger('change');
        $("#modal_form_operator").modal('show');
        ajaxUrl = "{{route('save.operator')}}";
      }, 300);
    });
  });
  $(function () {
    $('#operatorForm').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("");
      $("#operatorForm input").removeClass("is-invalid");
      $("#operatorForm select").removeClass("is-invalid");
      $("#loading").show();
      $.ajax({
        method: "POST",
        headers: {
          Accept: "application/json"
        },
        contentType: false,
        processData: false,
        url : ajaxUrl,
        data: formData,
        success: function (response) {
          $('#operatorForm').data('submitted', false);
          $("#loading").hide();
          if (response.status == 'true') {
            $("#operatorForm")[0].reset();
            $('#modal_form_operator').modal('hide');
            Swal.fire({
              title: 'User Success',
              text: response.message,
              icon: 'success',
              type: 'success'
            });
            setTimeout(function() {
              $('#table_operator').DataTable().ajax.reload();
            }, 100);
          } else {
           Swal.fire({
            title: 'User Error',
            text: response.message,
            icon: 'error',
            type: 'error'
          })
         }
       },
       error: function (response) {
        $('#operatorForm').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/operator/get_edit')}}"+"/"+userID,
      success: function(response) {
        if (response) {
          $("#loading").hide();
          $.each(response, function(key, value) {
            $("#id_user").val(value.id);
            $("#name").val(value.name);
            $("#email").val(value.email);
            $("#status_user").val(value.status_user).trigger('change');
            $("#ponsel").val(value.ponsel);
          });
        }
      },
      error: function(response) {
        get_edit(userID);
      }
    });
  }
  $(document).on('click','.edit',function() {
    $("#loading").show();
    var userID = $(this).attr('more_id');
    $("#operatorForm")[0].reset();
    $(".invalid-feedback").children("strong").text("");
    $("#operatorForm input").removeClass("is-invalid");
    $(".modal-title").html('<i class="bx bx-edit"></i> Form Ubah Operator');
    $("#modal_form_operator").modal('show');
    $("#status_user").val(null).trigger('change');
    ajaxUrl = "{{route('update.operator')}}";
    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 Operator 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','Operator Dihapus',response.message);
                $('#table_operator').DataTable().ajax.reload();         
              }, 50);
            }else{
              showToast('bg-danger','Operator Error',response.message);
            }
          },
          error: function(response) {
            $("#loading").hide();
            showToast('bg-danger','Operator Error',response.message);
          }
        })
      }
    });
  });
</script>
@endsection