@extends('layouts.master')
@section('title', 'Equipments Master')
@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">Equipment Master</li>
                        </ol>
                    </nav>
 @endsection


@section('content')
@include('layouts.includes.alert')
<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="company_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('equipment.create') }}"><button type="button" class="btn btn-outline-primary ml-3"><i class="fa fa-id-badge"></i> New Equipment</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>Equipment Name</th>  
                                        <th>Equipment Type</th>
                                        <th>Reference Number #</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: "POST",
      url : "{{ route('equipment.ajax.datatable') }}",
      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 _equipment_name     = "<a href='equipment/edit/id/"+_id+"' title='Edit'>"+_data[idx].equipment_name+'&nbsp;'+"</a>";
          //var _equipment_last_name  = _data[idx].last_name;
          var _type  = _data[idx].equipment_type_name;   
          var _reference_number  = _data[idx].reference_number;   
          //var status = _data[idx].is_active;
          var chang_color='red';
          var __status = _data[idx].status;
          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 _user_role     = _data[idx].user_role;
          var _action   = ""
          + "<a href='equipment/edit/id/"+_id+"' 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,_equipment_name,_type,_reference_number,__status,_action]);
          _i = _i+1;
        });
        console.log(_dataset);
       var equipmentData =  $(".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: "", "targets": [ 3 ] },
            { className: "text-center", "targets": [ 4 ],"bSortable": false },
            { className: "text-center", "targets": [ 5 ],"bSortable": false }
          ]
        });
       
        $(".dataTables_filter").css("display","none");
        $(".dataTables_length").css("display","none");
        $('#company_search').on( 'keyup click', function () {   // for text boxes
            var v =$(this).val();  // getting search input value
            equipmentData.search(v).draw();
        }); 


      }
    });

    return reload_datatable; //return the function itself to reference

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

    function change_status(_id){
     bootbox.confirm("Are you sure you want to change status!", function(result){
   
      if(result==true){
        startLoading('Please wait....');
      $.ajax({
        type: "POST",
        url : "{{ url('/equipment/changestatus') }}/"+_id,
        dataType: "JSON",
        data : {"_token": "{{ csrf_token() }}"},
        success: function(data)
        {
          if(data.status === true){  
               startLoading('Status changed Successfully.')
              _reload();
          }else{
              bootbox.alert('There is error while changing status.');
          }         
        }
      });
      }
    });
    }

  $(document).ready(function(){
    
  });
</script>

@endsection