@extends('template.master')

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

@section('body')  
<style>
  .swal2-container {
    z-index: 3051;
  }
  .select2-container.select2-container--default.select2-container--open  {
    z-index: 5000;
  }
</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 Role</h4>
      <div class="text-start mb-3">
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#tambahRolemodal"><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="rolemng" class="stripe" style="width:100%">
                <thead>
                    <tr>
                        <th>Code</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="editRolemodal" aria-labelledby="editRolemodalLabel" aria-hidden="true">
      <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="editRolemodalLabel">Loading</h5>
              <button type="button" class="btn" data-bs-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body" id="modalBodyEdit">
              <form class="forms-sample" id="editRoleForm" method="POST">
                <div class="form-group">
                  <label for="codeEdit">Code</label>
                  @csrf
                  <input type="hidden" name="idRoleEdit" id="idRoleEdit">
                  <input type="text" class="form-control" id="codeEdit" name="codeEdit" autocomplete="off">
                </div>
                <div class="form-group">
                  <label for="nameEdit">Name</label>
                  <input type="text" class="form-control" id="nameEdit" name="nameEdit" autocomplete="off">
                </div>
              </form>
              <div class="row">
                <form id="livemenu_add">
                  <div class="form-group">
                    <label for="editMenu">Menu</label> <br>
                    @csrf
                    <input type="hidden" name="idRoleMenu" id="idRoleMenu">
                    <select name="editMenu[]" class="js-example-basic-multiple form-control" id="editMenu" multiple="multiple" style="width: 80%;" data-placeholder="Pilih Menu">
                    </select>
                    <button type="button" class="btn btn-primary" id="btn-simpanEditRoleMenu">Tambah</button>
                  </div>
                </form>
              </div>
              <div class="form-group">
                <label for="tableedit_rolemenu" class="col-form-label">Akses Menu Saat Ini</label>
                  <div class="table-responsive">
                    <table class="table table-striped table-bordered table-hover dataTables-example tablebrokeword" id="tableedit_rolemenu" >
                      <thead>
                          <tr>
                              <th>Code</th>
                              <th>Description</th>
                              <th>Action</th>
                              
                          </tr>
                      </thead>
                    </table>
                </div>
              </div>
            </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-simpanEditRole">Simpan</button>
            </div>
          </div>
      </div>
    </div>
    <div class="modal fade" id="tambahRolemodal" tabindex="-1" aria-labelledby="tambahRolemodalLabel" aria-hidden="true">
      <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="tambahRolemodalLabel">Tambah Data</h5>
              <button type="button" class="btn" data-bs-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body" id="modalBodyTambah">
              <form class="forms-sample" id="tambahRoleForm" method="POST">
                <div class="form-group">
                  <label for="codeTambah">Code</label>
                  @csrf
                  <input type="text" class="form-control" id="codeTambah" name="codeTambah" autocomplete="off">
                </div>
                <div class="form-group">
                  <label for="nameTambah">Name</label>
                  <input type="text" class="form-control" id="nameTambah" name="nameTambah" autocomplete="off">
                </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-simpanTambahRole">Simpan</button>
            </div>
          </div>
      </div>
    </div>
  </div>
  <!-- Content wrapper -->

@endsection
@section('jquery')
<script>  
  var id_role = '';
  $('#editMenu').select2({
    placeholder: 'Select an option',    		
    dropdownParent: $("#editRolemodal"),
    width: 'resolve'
  });
  $('#modalBodyEdit').hide();
  $('#editRolemodalLabel').html('Loading ...');
  function optionMenu(id){
    $.ajax({
      url: "{{route('api.getmenurole')}}",
      type: "GET",
      dataType: "json",
      data : 'key=Get Menu Role&id='+ id,
      cache: false,
      success: function (json) {
        // console.log(json);
        var html = '';
        var i;
        if (json.length > 0){
          for (i = 0; i < json.length; i++) {
            $("#editMenu").select2({
              data: [{id: json[i].menu_id, text: json[i].description}]
            });
          }
        } else {
          $("#editMenu").html('').select2({
          });
        }
        // $("#editMenu").html(html);
      },
      error: function (xhr, ajaxOptions, thrownError) {
        alert("error");
      },
    });
  }

  function delmenu_role(IdRoleMenu,Description){
    Swal.fire({
      title: "Apakah anda yakin ingin mencabut akses menu "+Description+" ?",
      showDenyButton: true,
      confirmButtonText: "Cabut",
      denyButtonText: `Batal`
    }).then((result) => {
      /* Read more about isConfirmed, isDenied below */
      if (result.isConfirmed) {
        $.ajax({
          url : "{{route('api.delmenurole')}}",
          type : "GET",
          data : 'id='+ IdRoleMenu,
          processData : false,
          contentType : false,
          cache : false,
          dataType: "json",
          success : function(res){
            $('#editMenu').html('').select2({});
            optionMenu(id_role);
            // 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
              })
            } else {
              const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,
              });
              Toast.fire({
                icon: 'success',
                title: 'Sukses Hapus Data'
              })
            }
            $('#tableedit_rolemenu').DataTable().ajax.reload();
          },
          error: function (xhr, ajaxOptions, thrownError) {
          }
        })
      } else if (result.isDenied) {
        Swal.fire("Changes are not saved", "", "info");
      }
    });
  }

  $(document).ready(function() {
    
    var table = new DataTable('#rolemng', {
      ordering: false,
      scrollX: true,
      "processing": true,
      "serverSide": false,
      ajax: {
        url: "{{route('api.gettablerole')}}",          
        type: "GET",
        dataType: "json",
        cache: false,
      },
      columns: [
        { data: 'role_code'},
        { data: 'role_name'},
        { 
          data: 'role_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="#editRolemodal">Edit</button>                
            `
          },
        },
      ],
    })

    $('#editRolemodal').on('shown.bs.modal', function (e) {
	    var id = $(e.relatedTarget).data('id');
	    // alert(id);
	    if(! id){	      
        $('#codeEdit').val('');
        $('#nameEdit').val('');
	    }else{
	      $.ajax({
          type : 'GET',
          url : "{{route('api.getdetailrole')}}",
          data :  'id='+ id,
          beforeSend: function(){
            $('#modalBodyEdit').hide();
            $('#editRolemodalLabel').html('Loading ...');
          },
          success : function(res){            
            $('#modalBodyEdit').show();
            $('#editRolemodalLabel').html('Edit Data');
            var obj = JSON.parse(res);	  
            console.log(obj);
            optionMenu(obj.data.data[0].role_id);
            id_role = obj.data.data[0].role_id;
            // if (obj.menu.recordsTotal > 0){
              $('#idRoleEdit').val(obj.data.data[0].role_id);
              $('#idRoleMenu').val(obj.data.data[0].role_id);
              $('#codeEdit').val(obj.data.data[0].role_code);
              $('#nameEdit').val(obj.data.data[0].role_name);
              var tableedit_rolemenu = $('#tableedit_rolemenu').DataTable({
                processing: true,
                // serverSide: true,
                searching: true,
                paging:true,
                pageLength: 5,
                lengthMenu: [[5, 10, 25, 50, 100, 1000, 100000], [5, 10, 25, 50, 100, 1000, "All"]],
                pagingType: "full_numbers",
                ajax: {
                  type : 'post',
                  headers: {
                    'X-CSRF-TOKEN': '{{csrf_token()}}'
                  },
                  url : "{{route('api.getmenuroletable')}}",
                  // data :  'id='+ id,
                  "data": function(d) {                    
                    d.id = obj.data.data[0].role_id;
                  }
                },
                responsive: true,
                dom: 'r<"html5buttons"B>lTfgitp',
                columns: [
                  {data: "menu_code", className: "dt-body-right"},     
                  {data: "description", className: "dt-body-right"},    
                  {
                    data: "id_role_menu",
                    "render": function(data, type, row, meta) {		            
                      return `
                        <a class="btn btn-danger text-white" onclick="delmenu_role(`+data+`,'`+row.description+`')">Delete</a>
                      `;
                    },
                    className: "dt-body-right"
                  },
                ],
                buttons: [		              
                ],
              });
            // }
			    }
			  });
	  	}
	  });

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

      $.ajax({
        url : "{{route('api.saveeditrole')}}",
        type : "POST",
        data : form_data,
        processData : false,
        contentType : false,
        cache : false,
        dataType: "json",
        beforeSend: function(){
          $('#btn-simpanEditRole').prop('disabled', true);
        },
        success : function(res){
          $('#btn-simpanEditRole').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();
          $('#editRolemodal').modal('hide');
        },
        error: function (xhr, ajaxOptions, thrownError) {
          alert(thrownError);
          $('#btn-simpanEditRole').prop('disabled', false);
        }
      })
    })

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

      $.ajax({
        url : "{{route('api.saveeditrolemenu')}}",
        type : "POST",
        data : form_data,
        processData : false,
        contentType : false,
        cache : false,
        dataType: "json",
        beforeSend: function(){
          $('#btn-simpanEditRoleMenu').prop('disabled', true);
        },
        success : function(res){
          $('#btn-simpanEditRoleMenu').prop('disabled', false);
          $('#editMenu').html('').select2({});
          optionMenu(id_role);
          // 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
            })
          } else {
            const Toast = Swal.mixin({
              toast: true,
              position: 'top-end',
              showConfirmButton: false,
              timer: 3000,
              timerProgressBar: true,
            });
            Toast.fire({
              icon: 'success',
              title: 'Sukses Update Data'
            })
          }
          $('#tableedit_rolemenu').DataTable().ajax.reload();
        },
        error: function (xhr, ajaxOptions, thrownError) {
          $('#btn-simpanEditRoleMenu').prop('disabled', false);
        }
      })
    })

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

      $.ajax({
        url : "{{route('api.savetambahrole')}}",
        type : "POST",
        data : form_data,
        processData : false,
        contentType : false,
        cache : false,
        dataType: "json",
        beforeSend: function(){
          $('#btn-simpanTambahRole').prop('disabled', true);
        },
        success : function(res){
          $('#btn-simpanTambahRole').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();
          $('#tambahRolemodal').modal('hide');
        },
        error: function (xhr, ajaxOptions, thrownError) {
          $('#btn-simpanTambahRole').prop('disabled', false);
        }
      })
    })

    $('#editRolemodal').on('hidden.bs.modal', function () {
      $('#btn-simpanEditRoleMenu').prop('disabled', false);
      $(this).find('form').trigger('reset');
      $('#editMenu').html('').select2({});
      $('#tableedit_rolemenu').DataTable().destroy();
    })
    $('#tambahRolemodal').on('hidden.bs.modal', function () {
      $('#btn-simpanTambahRole').prop('disabled', false);
      $(this).find('form').trigger('reset');
    })
  });

  // loadMenuEdit();
</script>
@endsection