@extends('template.master')

@section('title', 'Dashboard TKPK - Manajemen User')
@section('description', 'Meta Description - Deskripsi setiap view dalam website')

@section('body')  
<style>
  .select2-close-mask{
    z-index: 3099;
  }
  .select2-dropdown{
    z-index: 3051;
  }
  .swal2-container {
    z-index: 3051;
  }
</style>
  <!-- Content wrapper -->
  <div class="content-wrapper">
    <!-- Content -->
    <div class="container-xxl flex-grow-1 container-p-y">
      <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Pages/</span> Manajemen User</h4>
      <div class="text-start mb-3">
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#tambahUsermodal"><i class="fa fa-plus-square" aria-hidden="true"></i></button>
        {{-- <button type="button" class="btn btn-primary"><i class='bx bx-download icon-export'></i>Export</button> --}}
      </div>
        <div class="card">
          <div class="container">
            <div class="card-datatable text-nowrap">
              <table id="usermng" class="stripe" style="width:100%">
                <thead>
                    <tr>
                        <th>Nama</th>
                        <th>Username</th>
                        <th>Role</th>
                        <th></th>
                    </tr>
                </thead>                      
              </table>
            </div>
          </div>
        </div>
    </div>


    </div>

    <div class="content-backdrop fade"></div>
    <div class="modal fade" id="editUsermodal" tabindex="-1" aria-labelledby="editUsermodalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg modal-simple">
          <div class="modal-content p-3 p-md-5">
            <div class="modal-body" id="modalBodyEdit">
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              <div class="text-center mb-4">
                <h3 class="mb-2" id="editUsermodalLabel">Loading ...</h3>
                <p class="text-danger d-none" id="error_info">Maaf terdapat kesalahan, silakan coba lagi.</p>
              </div>
              <form class="forms-sample" id="editUserForm" method="POST">
                <div class="form-group">
                  <label for="namaEdit">Nama</label>
                  @csrf
                  <input type="hidden" name="idUserEdit" id="idUserEdit">
                  <input type="text" class="form-control" id="namaEdit" name="namaEdit" autocomplete="off">
                </div>
                <div class="form-group">
                  <label for="emailEdit">Email</label>
                  <input type="email" class="form-control" id="emailEdit" name="emailEdit" autocomplete="off">
                </div>
                <div class="form-group">
                  <label for="passwordEdit">Password</label>
                  <input type="password" class="form-control" id="passwordEdit" name="passwordEdit" autocomplete="off">
                  <input type="checkbox" class="form-check-input" onclick="showPWDView()"><span  class="form-check-label"> Show Password</span>
                </div>
                  <div class="form-group">
                    <label for="editRole">Role</label>
                    <select name="editRole" class="js-example-basic-multiple form-control" id="editRole" style="width: 100%;" data-placeholder="Pilih Role">									  			
                      <option value="" disabled selected>Pilih Role</option>
                    </select>
                  </div>
              </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-success" id="btn-simpanEditUser">Simpan</button>
            </div>
          </div>
      </div>
    </div>

    <div class="modal fade" id="tambahUsermodal" tabindex="-1" aria-labelledby="tambahUsermodalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg modal-simple">
          <div class="modal-content p-3 p-md-5">
            <div class="modal-body" id="modalBodyEdit">
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              <div class="text-center mb-4">
                <h3 class="mb-2" id="viewDataLabel">Tambah User</h3>
              </div>
              <form class="forms-sample" id="tambahUserForm" method="POST">
                <div class="form-group">
                  <label for="namaTambah">Nama</label>
                  @csrf
                  <input type="text" class="form-control" id="namaTambah" name="namaTambah" autocomplete="off">
                </div>
                <div class="form-group">
                  <label for="emailTambah">Email</label>
                  <input type="email" class="form-control" id="emailTambah" name="emailTambah" autocomplete="off">
                </div>
                <div class="form-group">
                  <label for="passwordTambah">Password</label>
                  <input type="password" class="form-control" id="passwordTambah" name="passwordTambah" autocomplete="off">
                  <input type="checkbox" class="form-check-input" onclick="showPWDAdd()"><span  class="form-check-label"> Show Password</span>
                </div>
                  <div class="form-group">
                    <label for="tambahRole">Role</label>
                    <select name="tambahRole" class="js-example-basic-multiple form-control" id="tambahRole" style="width: 100%;" data-placeholder="Pilih Role">									  			
                      <option value="" disabled selected>Pilih Role</option>
                    </select>
                  </div>
              </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-success" id="btn-simpanTambahUser">Simpan</button>
            </div>
          </div>
      </div>
    </div>
  </div>
  <!-- Content wrapper -->


@endsection
@section('jquery')
<script>  
  function showPWDView() {
	  var x = document.getElementById("passwordEdit");
	  if (x.type === "password") {
	    x.type = "text";
	  } else {
	    x.type = "password";
	  }
	}
  
  function showPWDAdd() {
	  var x = document.getElementById("passwordTambah");
	  if (x.type === "password") {
	    x.type = "text";
	  } else {
	    x.type = "password";
	  }
	}

  function loadRoleEdit() {
		$("select").select2();		
    $.ajax({
      url: "{{route('api.getroleuser')}}",
      type: "GET",
      dataType: "json",
      // data: "key=Role User",
      cache: false,
      success: function(json) {
        console.log(json);
        $("#editRole").select2({
          data: json
        });
        $("#tambahRole").select2({
          data: json
        });
      },
      error: function (xhr, ajaxOptions, thrownError) {
        alert('gagal memuat data role, harap ulangi');
      }
		});		
  }

  loadRoleEdit();
  $(document).ready(function() {
    var table = new DataTable('#usermng', {
      ordering: false,
      scrollX: true,
      "processing": true,
      "serverSide": false,
      ajax: {
        url: "{{route('api.gettableuser')}}",          
        type: "GET",
        dataType: "json",
        cache: false,
      },
      columns: [
        { data: 'name'},
        { data: 'email'},
        { 
          data: 'role',
          "render": function(data, type, row, meta) {
            if (data=='diskominfo') {
                return `
                  <span class="badge-bluee">`+data+`</span>
                `;
            } else if (data=='dinkes'){
                return `
                  <span class="badge-greenn">`+data+`</span>
                `;
            } else {
                return `
                  <span class="badge-orange">`+data+`</span>
                `;
            }
          },
        },
        { 
          data: 'user_id',
          "render": function(data, type, row, meta) {
            return `
              <button type="button" class="btn btn-success" data-bs-toggle="modal" data-id="`+data+`" data-bs-target="#editUsermodal">Edit</button>                
            `
          },
        },
      ],
    })

    $('#editUsermodal').on('shown.bs.modal', function (e) {
      $('#error_info').addClass('d-none');
	    var id = $(e.relatedTarget).data('id');
	    // alert(id);
	    if(! id){	      
        $('#namaEdit').val('');
        $('#emailEdit').val('');
        $('#passwordEdit').val('');
        $('#editRole').val('');
	    }else{
	      $.ajax({
          type : 'GET',
          url : "{{route('api.getdetailuser')}}",
          data :  'id='+ id,
          beforeSend: function(){
            $('#editUserForm').hide();
            $('#editUsermodalLabel').html('Loading ...');
          },
          success : function(res){	          		
            $('#editUserForm').show();
            $('#editUsermodalLabel').html('Edit Data');
            var obj = JSON.parse(res);	  
            if (obj){
              $('#idUserEdit').val(obj[0].user_id);
              $('#namaEdit').val(obj[0].name);
              $('#emailEdit').val(obj[0].email);
              $('#passwordEdit').val(obj[0].password);
              $("#editRole").select2().val(obj[0].role).trigger("change");
            } else {
              $('#error_info').removeClass('d-none');
              $('#editUserForm').hide();
            }
			    }
			  });
	  	}
	  });

    $('#btn-simpanEditUser').on('click', function(e){
      e.preventDefault();
      var form = $('#editUserForm').get(0);
      var form_data = new FormData(form);
      var obj;

      $.ajax({
        url : "{{route('api.saveedituser')}}",
        type : "POST",
        data : form_data,
        processData : false,
        contentType : false,
        cache : false,
        dataType: "json",
        beforeSend: function(){
          $('#btn-simpanEditUser').prop('disabled', true);
        },
        success : function(res){
          $('#btn-simpanEditUser').prop('disabled', false);
          // console.log(res);
          if (res.status != '200'){
            const Toast = Swal.mixin({
              toast: true,
              position: 'top-end',
              showConfirmButton: true,              
            });
            Toast.fire({
              icon: 'error',
              title: res.message
            })
            table.ajax.reload();
          } else {
            const Toast = Swal.mixin({
              toast: true,
              position: 'top-end',
              showConfirmButton: false,
              timer: 3000,
              timerProgressBar: true,
            });
            Toast.fire({
              icon: 'success',
              title: 'Sukses Update Data'
            })
            table.ajax.reload();
          }
          $('.modal-backdrop').remove();
          $('#editUsermodal').modal('hide');
        },
        error: function (xhr, ajaxOptions, thrownError) {
          // alert(thrownError);
          $('#btn-simpanEditUser').prop('disabled', false);
        }
      })
    })

    $('#btn-simpanTambahUser').on('click', function(e){
      e.preventDefault();
      var form = $('#tambahUserForm').get(0);
      var form_data = new FormData(form);
      var obj;

      $.ajax({
        url : "{{route('api.savetambahuser')}}",
        type : "POST",
        data : form_data,
        processData : false,
        contentType : false,
        cache : false,
        dataType: "json",
        beforeSend: function(){
          $('#btn-simpanTambahUser').prop('disabled', true);
        },
        success : function(res){
          $('#btn-simpanTambahUser').prop('disabled', false);
          // console.log(res);
          if (res.status != '200'){
            const Toast = Swal.mixin({
              toast: true,
              position: 'top-end',
              showConfirmButton: true,              
            });
            Toast.fire({
              icon: 'error',
              title: res.message
            })
            table.ajax.reload();
          } else {
            const Toast = Swal.mixin({
              toast: true,
              position: 'top-end',
              showConfirmButton: false,
              timer: 3000,
              timerProgressBar: true,
            });
            Toast.fire({
              icon: 'success',
              title: 'Sukses Tambah Data'
            })
            table.ajax.reload();
          }
          $('.modal-backdrop').remove();
          $('#tambahUsermodal').modal('hide');
        },
        error: function (xhr, ajaxOptions, thrownError) {
          // alert(thrownError);
          $('#btn-simpanTambahUser').prop('disabled', false);
        }
      })
    })

    $('#editUsermodal').on('hidden.bs.modal', function () {
      $('#btn-simpanEditUser').prop('disabled', false);
      $(this).find('form').trigger('reset');
      $('#editRole').val(null).trigger('change');
      var x = document.getElementById("passwordEdit");
      if (x.type === "password") {
        x.type = "text";
      } else {
        x.type = "password";
      }
    })
    $('#tambahUsermodal').on('hidden.bs.modal', function () {
      $('#btn-simpanTambahUser').prop('disabled', false);
      $(this).find('form').trigger('reset');
      $('#tambahRole').val(null).trigger('change');
      var x = document.getElementById("passwordTambah");
      if (x.type === "password") {
        x.type = "text";
      } else {
        x.type = "password";
      }
    })
  });
</script>
@endsection