@include('header')

  <link rel="stylesheet" href="{{ asset('lte/plugins/jquery-ui/jquery-ui.css') }}">
  <link rel="stylesheet" href="{{ asset('lte/plugins/jquery-ui/jquery-ui.theme.css') }}">
  <script src="{{ asset('lte/plugins/jquery-ui/jquery-ui.js') }}"></script>
  
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>User</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">List User</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">

      <!-- Default box -->
      <div class="card" style="padding:20px">

        <div>

          <div style="margin-bottom:15px">
            <button type="button" onClick="showDialog()">Tambah Data</button>
          </div>

          <table id="listusers" class="table table-bordered table-hover">
            <thead>
              <tr>
                <th>UserId</th>
                <th>Tipe</th>
                <th>Name</th>
                <th>Status</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>

          <div id="dialog" title="User Form" style="display:none">
          </div>

        </div>
      </div>
      <!-- /.card -->

    <!-- DataTables -->
    <script src="{{ asset('lte/plugins/datatables/jquery.dataTables.min.js') }}"></script>   
    <script src="{{ asset('lte/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('lte/plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('lte/plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>

    <script language="javascript">
    <!--
        function showDialog(){
            $.ajax({
                      method: "POST",
                      url: jsBaseUrl+"user/create",
                      processData: false,
                      contentType: false,
                      data: '', 
                      headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                               }, 
                      beforeSend: function () {
                              },
                      success: function (oData) {
                            if (oData != ""){
                                $("#dialog").html(oData);

                                $("#dialog").dialog({
                                                      width: 500,
                                                    });
                            }
                          }, 
                      error: function (xhr, ajaxOptions, thrownError) {
                                  
                            }
                      });
        }

        function editForm(id){
            var jForm = new FormData();

            jForm.append('id', id);

            openMainLoading();

            $.ajax({
                      method: "POST",
                      url: jsBaseUrl+"user/edit",
                      processData: false,
                      contentType: false,
                      data: jForm, 
                      headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                               }, 
                      beforeSend: function () {
                              
                              },
                      success: function (oData) {
                            closeMainLoading();

                            if (oData != ""){
                                $("#dialog").html(oData);

                                $("#dialog").dialog({
                                                      width: 500,
                                                    });
                            }
                          }, 
                      error: function (xhr, ajaxOptions, thrownError) {
                                closeMainLoading();
                            }
                      });
        }

        function deleteForm(id){
            $.confirm({
                    title: "Konfirmasi Hapus Data",
                    content: 'Apakah anda yakin ingin menghapus data ?',
                    buttons: {
                        accept: {
                                    text: 'Ya',
                                    btnClass: 'btn btn-popup',
                                    action: function(){
                                                    doDeleteData(id)
                                            }
                                },
                        decline: {
                                    text: 'Tidak',
                                    btnClass: 'btn btn-popup',
                                    action: function(){
                                              
                                            }
                                }           
                    }
            }); 
        }

        function doDeleteData(id){
            var jForm = new FormData();

            jForm.append('id', id);

            openMainLoading();

            $.ajax({
                      method: "POST",
                      url: jsBaseUrl+"user/delete",
                      processData: false,
                      contentType: false,
                      data: jForm, 
                      headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                              }, 
                      beforeSend: function () {
                              
                              },
                      success: function (oData) {
                            closeMainLoading();

                            if ( $.fn.DataTable.isDataTable('#listusers') ) {
                              $('#listusers').DataTable().destroy();
                            }
                            
                            $('#listusers tbody').empty();
                            
                            if (oData != ""){
                              
                                $("#listusers tbody").html(oData);

                                $('#listusers').DataTable({
                                                            "paging": true,
                                                            "lengthChange": false,
                                                            "searching": true,
                                                            "ordering": true,
                                                            "info": true,
                                                            "autoWidth": false,
                                                            "responsive": true,
                                                        });
                            
                            }                            
                          }, 
                      error: function (xhr, ajaxOptions, thrownError) {
                                    closeMainLoading(); 
                            }
                      });
            
        }

        function saveForm(){
            var jForm = new FormData();
            var formUrl = "";

	          if ($("#code").val() != "" && $("#name").val() != "" && $("#status").val() != ""){
                jForm.append('id', $("input[name='id']").val());
                jForm.append('code', $("#code").val());
                jForm.append('name', $("#name").val());
                jForm.append('status', $("#status").val());

                openMainLoading();
                
                if ($("input[name='id']").val() == ""){
                    jForm.append('created_by', '1');
                    formUrl = jsBaseUrl+"user/store";
                } else {
                    jForm.append('updated_by', '1');
                    formUrl = jsBaseUrl+"user/update";
                }
    
                $.ajax({
                      method: "POST",
                      url: formUrl,
                      processData: false,
                      contentType: false,
                      data: jForm, 
                      headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                               }, 
                      beforeSend: function () {
                              
                              },
                      success: function (oData) {
                            closeMainLoading();

                            $("#dialog").dialog('close');

                            if ( $.fn.DataTable.isDataTable('#listusers') ) {
                              $('#listusers').DataTable().destroy();
                            }
                            
                            $('#listusers tbody').empty();
                            
                            if (oData != ""){
                              
                                $("#listusers tbody").html(oData);

                                $('#listusers').DataTable({
                                                            "paging": true,
                                                            "lengthChange": false,
                                                            "searching": true,
                                                            "ordering": true,
                                                            "info": true,
                                                            "autoWidth": false,
                                                            "responsive": true,
                                                        });
                            }
                          }, 
                      error: function (xhr, ajaxOptions, thrownError) {
                                  closeMainLoading();

                                  console.log("error");
                            }
                      });

            } else {
                toastr.error('semua field wajib di isi', '');
            }
        }

        function closeForm(){
            $("#dialog").dialog('close');
        }

        $(function() {
                      $('#listusers').DataTable({
                          "paging": true,
                          "lengthChange": false,
                          "searching": true,
                          "ordering": true,
                          "info": true,
                          "autoWidth": false,
                          "responsive": true,
                      });
        });
    //-->
    </script>

    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

  <style>
      .ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-draggable.ui-resizable {
        z-index: 5012;
      }
  </style>

  @include('footer')