@extends('layouts.master')

@section('title', 'Roles')
@section('pageheader')
  <!-- Page Header -->
                    <div class="page-header">
                        <div class="header-icon"><i class="fa fa-cog"></i></div>
                        <h5>ADMINISTRATIVE SETTINGS</h5>
                        <div class="form-group float-right mt-2">
                            <select class="form-control">
                                <option>Units</option>
                                <option>Users</option>
                            </select>
                        </div>
                    </div>
                    <!-- /#Page Header -->

@endsection

@section('breadcrumb')
<nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#">Administrative settings</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Company</li>
                        </ol>
                    </nav>
 @endsection


@section('content')
@include('partials.flash')
@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" placeholder="Search" aria-label="Search"> -->
                                        <input type="text" class="form-control" id="roles_search" placeholder="Search" aria-label="Search">
                                        <div class="input-group-append">
                                            <button class="btn btn-outline-secondary" type="button"><i class="fa fa-microphone"></i></button>
                                        </div>
                                    
                                        <h1><i class="fa fa-key"></i> Roles

    <a href="{{ route('users.index') }}" class="btn btn-default pull-right">Users</a>
    <a href="{{ route('permissions.index') }}" class="btn btn-default pull-right">Permissions</a></h1>
    <hr>
                                    </div>
                                    
                                </form>
                                
                            </div>
                            <div class="col-4">
                                <div class="float-right">
                                    <!-- <a href="{{ route('company.index') }}"><button type="button" class="btn btn-outline-primary"><i class="fa fa-history"></i> Refresh</button></a>  -->
                                    
                                     <a href="{{ URL::to('roles/create') }}" class="b"><button type="button" class="btn btn-outline-primary ml-3"><i class="fa fa-truck"></i> New Role</button></a>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
    <div class="detailed-info-table">
                        <div class="info-table">
                             <table  class="table table-striped data-table">
                                <thead class="thead-dark">
                                    <tr>     
                                        <th>#</th>     
                                        <th>Role</th>
                                        <th>Permissions</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(){

    $.ajax({
      type: "POST",
      url : "{{ route('roles.ajax.datatable') }}",
      dataType: "JSON",
      data : {"_token": "{{ csrf_token() }}"},
      success: function(data)
      {
        var _dataset = [];
        var _data = data.dataset;
        var _i = 1;
        $(_data).each(function(idx,dataset){          
          var _j                = _i+'.';
          var _id           = _data[idx].id;
          var _role_name     = "<a href='roles/"+_id+"/edit' title='Edit'>"+_data[idx].name+"</a>";
          //var _driver_last_name  = _data[idx].last_name;
          var _permission  = _data[idx].permissions;            
          var _action   = ""
          + "<a href='roles/"+_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_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,_role_name,_permission,_action]);
          _i = _i+1;
        });
        //console.log(_dataset);
       var driverData =  $(".data-table").DataTable({
          destroy: true,
          paging: true,
          searching: true,
          pageLength: 25,
          data : _dataset,
          bAutoWidth:false,
          columnDefs: [
           
            { className: "", "targets": [ 0 ] },
            { className: "", "targets": [ 1 ] },
            { className: "", "targets": [ 2 ] },            
            { className: "text-center", "targets": [ 3 ],"bSortable": false }
          ]
        });
       
        $(".dataTables_filter").css("display","none");
        $(".dataTables_length").css("display","none");
        $('#roles_search').on( 'keyup click', function () {   // for text boxes
            var v =$(this).val();  // getting search input value
            driverData.search(v).draw();
        }); 


      }
    });

    return reload_datatable; //return the function itself to reference

  }());
  function ajax_delete(_id){
    if (confirm('Are you sure you want to Delete?')) {
      $.ajax({
        type: "DELETE",
        url : "{{ url('/driver/delete') }}/"+_id,
        dataType: "JSON",
        data : {"_token": "{{ csrf_token() }}"},
        success: function(data)
        {
          if(data.status === true){  
              alert('Data Deleted Successfully.');
              _reload();
          }else{
              alert('There is error to delete record.');
          }         
        }
      });
    }
    }

    function change_status(_id){
     if (confirm('Are you sure you want to change status?')) {
      $.ajax({
        type: "POST",
        url : "{{ url('/driver/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