@extends('layouts.master')
@section('content')
<div class="row page-titles">
	<div class="col-md-5 align-self-center">
	    <h4 class="text-themecolor">User Management</h4>
	</div>
	<div class="col-md-7 align-self-center text-right">
	    <div class="d-flex justify-content-end align-items-center">	        
	        <button type="button" class="btn btn-info btn-rounded" data-toggle="modal" data-target="#modal-edit" id="#AddUser"><i class="fa fa-plus-circle"></i> Create New User</button>
	    </div>
	</div>
</div>
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">User list</h4>
                <h6 class="card-subtitle"></h6>
                <div class="table-responsive">
                    <table id="dtable" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Name</th>
                                <th>User Name</th>
                                <th>Email</th>                                
                                <th>Role</th>
                                <th>Account Activation</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
       </div>
    </div>
@include('master.UserMGT.modal_pass')
@include('master.UserMGT.modal_edit')

@endsection

@section('js')

<script>
  // Switchery
   // $('select').select2();
   var save_method = 'add';
    var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
    $('.js-switch').each(function() {
        new Switchery($(this)[0], $(this).data());
    });
	var table = $("#dtable").DataTable({
        
          processing : true,
          serverSide : true,
ordering    : false,
          
          ajax: {
            url :'userData',
            type : 'get'
        },
          columns    : [
          
          
          {data : null, name : 'no'},
          {data : 'name', name : 'name'},
          {data : 'username', name : 'username'},
          {data : 'email', name : 'email'},
          {data : 'role', name : 'role'},
          {data : 'active', name : 'active'},
          {data : 'action',  orderable: false, searchable: false},

          ],
          columnDefs: [
            {
                "targets": 5, // your case first column
                "className": "text-center",
           },
          ],
          // "order": [[ 1, 'asc' ]]
  });
  table.on('draw.dt', function () {
    var info = table.page.info();
    table.column(0, { search: 'applied', order: 'applied', page: 'applied' }).nodes().each(function (cell, i) {
        cell.innerHTML = i + 1 + info.start;
    });
	});

  $('.modal').on('hidden.bs.modal', function(){
    $(this).find('form')[0].reset();
     save_method = 'add';

     // $('.switchery').prop('checked', true).trigger("click");
  });
  $('#AddUser').click(function(){
    $('.switchery').prop('checked', true).trigger("click");
  })
  $('#submit_user').click(function(){
    console.log(save_method)
    if(save_method == 'add'){

      var urls ='userMGT' ;
      var method = 'post';
      console.log("jjkk")
    }
    else if(save_method == 'edit'){
      var urls ='userMGT'+'/'+$('#id_user').val();
      var method = 'put';
    }

    $.ajax({
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      url : urls,
      type : method,
      data : $('#form_user').serialize(),
      success: function(response){
      console.log(response);
      
       localStorage.setItem("swal",
                                    swal({
                                        title: 'success',
                                        text:  'Data berhasil disimpan',
                                        type: 'success',
                                        timer: 3500,
                                        showConfirmButton: false
                                    })
                            );
      table.ajax.reload();
      },
    });
  })
  
  function editUser(id){
    $.ajax({
     url : 'userMGT'+'/'+id+'/edit',
     type: 'get',
      
      success:function(response){
        console.log(response);
        $('#id_user').val(response.id);
        $('#name').val(response.name);
        $('#username').val(response.username);
        $('#email').val(response.email);
        $('#role').val(response.role).trigger('change');
        if(response.active == true){
          console.log('zer')
           $('.switchery').prop('checked', false).trigger("click");
          // $('#active_account').prop('checked', true);
        }
        
        save_method = 'edit';
      },
      error:function(xhr){
        console.log(xhr)
      }
  })
  }
function passUser(id){
    $.ajax({
     url : 'userMGT'+'/'+id+'/edit',
     type: 'get',
      
      success:function(response){
        console.log(response);
        $('#id_user_pass').val(response.id);
        $('#name_pass').val(response.name);
        $('#username_pass').val(response.username);
        
        
        save_method = 'edit';
      },
      error:function(xhr){
        console.log(xhr)
      }
  })
  }
  $('#password, #confirm_password').on('keyup', function () {
    if($('#password').val().length < 8){
      
      $('#message_pass').html('Password must be more than 8 characters').css('color', 'red');
    }
    else{
      $('#message_pass').html('');
    }
    if ($('#password').val() == $('#confirm_password').val()) {
      $('#message').html('Matching').css('color', 'green');
    } else 
      $('#message').html('Not Matching').css('color', 'red');
});
  $('#submit_pass').click(function(){
    

    $.ajax({
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      url : 'userMGT/changepass'+'/'+$('#id_user_pass').val(),
      type : 'post',
      data : $('#form_pass').serialize(),
      success: function(response){
      console.log(response);
      
       localStorage.setItem("swal",
                                    swal({
                                        title: 'success',
                                        text:  'Password berhasil diubah',
                                        type: 'success',
                                        timer: 3500,
                                        showConfirmButton: false
                                    })
                            );
      table.ajax.reload();
      $('#modal-pass').modal('hide');
      },
      error:function(xhr){
        console.log(xhr)
      }
    });
  })
</script>
@endsection