@extends('layouts.master')
@section('title', 'Users')
@section('breadcrumb')
<nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#">Users Management</a></li>
                        </ol>
                    </nav>
 @endsection

@include('layouts.includes.alert')
@section('content')

<div class="pista-wrapper mb-3">
                        <div class="row">
                            <div class="col-8">
                                <form class="form-inline">
                                    <div class="input-group search-box mr-3">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text"><i class="fa fa-search"></i></div>
                                        </div>
                                        <input type="text" class="form-control" id="users_search" placeholder="Search" aria-label="Search">
                                        <div class="input-group-append">
                                            <button title="Comming Soon" class="btn btn-outline-secondary" type="button"><i class="fa fa-microphone"></i></button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="col-4">
                                <div class="float-right">
                                     <!-- <a href="{{ route('users.index') }}"><button type="button" class="btn btn-outline-primary"><i class="fa fa-history"></i> Refresh</button></a> -->
                                    @role('CompanyAdmin','Supervisor')<a href="{{ route('users.create') }}"><button type="button" class="btn btn-outline-primary ml-3"><i class="fa fa-user"></i> New User</button></a>@endrole
                                </div>
                            </div>
                        </div>
                    </div>
<div class="detailed-info-table">
                        <div class="info-table">
                             <table id="" class="table table-striped data-table">
                                <thead class="thead-dark">
                                    <tr>            
                                        <th>#</th>                            
                                        <th>Username</th>
                                        <th>Email</th>                                        
                                        <th>Role</th>
                                        <th>Status</th>
                                        <th class="text-center">Actions</th>
                                    </tr>
                                    
                                </thead>
                                <tbody class="tbody searchable">

                                </tbody>
                            </table>


                        </div>
</div>

@endsection

@section('script')
<script>
  
  var _reload = (function reload_datatable(){
    startLoading();
    $.ajax({
      type: "GET",
      url : "{{ url('ajax-getusers') }}",
      dataType: "JSON",
      data : {"_token": "{{ csrf_token() }}"},
      success: function(data)
      {
        stopLoading();
        var _dataset = [];
        var _data = data.dataset;
        var _i = 1;
        $(_data).each(function(idx,dataset){
          var _j                = _i+'.';
          var _id           = _data[idx].id;
          var _name     = _data[idx].user_name;
          var _email  = _data[idx].email;          
          var _user_role     = _data[idx].role_name;
          
          // var _desc     = _data[idx].description;
          var chang_color='red';
          var status_title="inactive";
          if(_data[idx].is_active==1){
            chang_color='green';
            status_title='active';
          }
          var status = ""
          +"<a href='javascript:void(0);' onClick='change_status("+_id+"); return false;' title="+status_title+">"
          +"<button type='button' class='status_change btn btn-link action c-"+chang_color+" title='status' value='"+_data[idx].is_active+"'>"
          +"<i class='fa fa-check-circle'></i>"
          + "</button>"
          + "</a>";
          var _action   = ""
          + "<a href='users/"+_id+"/edit' title='Edit'>"
          +"<button type='button' class='btn btn-link action c-yellow' title='edit' value='"+_id+"'>"
          +"<i class='fa fa-pencil-alt'></i>"
          + "</button>"
          + "</a>"
          + "<a href='javascript:void(0)' onClick='ajax_roles_delete("+_id+"); return false;' title='Delete'>"
          +"<button type='button' class='btn btn-link action c-red ml-3' title='delete' value='"+_id+"'>"
          +"<i class='fa fa-trash'></i>"          
          + "</button>"
          + "</a>";
          _dataset.push([_j,_name,_email,_user_role,status,_action]);
          _i = _i+1;
        });
        // console.log(_dataset);
        var usersDataT  =   $(".data-table").DataTable({
                              destroy: true,
                              paging: true,
                              searching: true,
                              pageLength: 25,
                              data : _dataset,
                              bAutoWidth:false,
                              columnDefs: [
                                { className: "text-center", "targets": [ 0 ],"bSortable": false },
                                { className: "text-center", "targets": [ 1 ] },
                                { className: "text-center", "targets": [ 2 ] },
                                { className: "text-center", "targets": [ 3 ] },
                                { className: "text-center", "targets": [ 4 ] ,"bSortable": false},            
                              ]
                            });

        $(".dataTables_filter").css("display","none");
        $(".dataTables_length").css("display","none");
        $('#users_search').on( 'keyup click', function () {   // for text boxes
            var v =$(this).val();  // getting search input value
            usersDataT.search(v).draw();
        }); 

      }
    });

    return reload_datatable; //return the function itself to reference

  }());

  function ajax_roles_delete(_id){
    bootbox.confirm("Are you sure you want to Delete!", function(result){
      if(result==true){
        startLoading('Please wait....');
      $.ajax({
        type: "DELETE",
        url : "users/"+_id,
        dataType: "JSON",
        data : {"_token": "{{ csrf_token() }}"},
        success: function(data)
        {
          if(data.status === true){  
             startLoading('User Deleted Successfully.')
              _reload();
          }else{
              bootbox.alert('There is error to delete record, Try again.');
          }
        }
      });
    }
  });
    }
    function change_status(_id){
      bootbox.confirm("Are you sure you want to change status!", function(result){
   
      if(result==true){
     //if (confirm('Are you sure you want to change status?')) {
      $.ajax({
        type: "POST",
        url : "{{ url('/users/changestatus') }}/"+_id,
        dataType: "JSON",
        data : {"_token": "{{ csrf_token() }}"},
        success: function(data)
        {
          if(data.status === true){  
              alert('Status changed Successfully.');
              _reload();
          }else{
              alert('There is error while changing status.');
          }         
        }
      });
      }
    });
    }
  $(document).ready(function(){

  });
</script>
@endsection