@extends('layouts.main')

@section('content')
<div class="row">
  <div class="col-md-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">{{__('strings.vehicles_registered')}}</h3>
      </div>
      <div class="card-body">
        <div class="table-responsive">
              <table id="routes-table" class="table table-striped table-bordered hover">
                  <thead>
                      <tr>
                          <th>Id</th>	   
                          <th>{{__('strings.alias')}}</th>
                          <th>{{__('strings.brand')}}</th>
                          <th>{{__('strings.model')}}</th>
                          <th>{{__('strings.year')}}</th>
                          <th>{{__('strings.plates')}}</th>
                          <th>Color</th>
                          <th>{{__('strings.vehicle_type')}}</th>
                          <th>{{__('strings.max_passengers')}}</th>
                          <th></th>
                          <th></th>
                      </tr>
                  </thead>
              </table>
          </div>
      </div>
    </div>
</div>
</div>
@endsection('content')

@push('scripts')
<script>
  var table;
  $(function() {
    
    //setting language for moment.js
    moment.locale('es');
    //initialize datetable
    
    //scrollY: "450px",
    //scrollCollapse: true,

    //initialize datetable
    table = $('#routes-table').DataTable({
                                  responsive: false,
                                  paging: true,	
                                  searching: true,
                                  serverSide: true,
                                  ordering: true,
                                  ajax: {
                                      url: "{{route('api_vehicles_datatable')}}",
                                      type: "POST",
                                      data: {
                                          user_token: "{{Auth::user()->SECURE_TOKEN}}"
                                      }
                                  },
                                  columns: [
                                          { data: 'id'},
                                          { data: 'alias', defaultContent:"---"},
                                          { data: 'brand', defaultContent:"---"},
                                          { data: 'model', defaultContent:"---"},
                                          { data: 'year', defaultContent:"---"},
                                          { data: 'plates', defaultContent:"---"},
                                          { data: 'color_name', defaultContent:"---"},
                                          { data: 'type.name', defaultContent:"---"}, 
                                          { data: 'type.number_of_passengers', defaultContent:"---"},                                           
                                          { data: 'id', render: function(vehicleId, type, row, meta){
                                              var url = "{{route('vehicles_edit_view', ':id')}}";
                                              url = url.replace(':id', vehicleId);
                                              return '<a href="' + url + '" class="btn btn-icon btn-info"><i class="fe fe-edit mr-1"></<>';
                                            }, defaultContent:"---"
                                          },                                           
                                          { data: 'id', render: function(vehicleId, type, row, meta){
                                              return '<button class="btn btn-icon btn-danger" onclick="deleteVehicle(this,' + vehicleId + ')"><i class="fe fe-trash-2 mr-1"></button>';
                                            }, defaultContent:"---"
                                          }
                                  ],
                                  dom: 'Bfrtip',
                                  buttons: [
                                    'pageLength','copy', 'excel'
                                  ],
                                  "language" : {
                                          url: "{!! asset('datatables/languages/spanish.json') !!}"
                                  }
                  });
  });

  function deleteVehicle(button, vehicleId) {
    $(button).toggleClass('btn-loading');
    $.post("{{route('api_vehicles_delete')}}", {
      user_token: "{{Auth::user()->SECURE_TOKEN}}",
      vehicle_id: vehicleId
    }, function(){
      table.ajax.reload();
    }).fail(function(){
      $(button).toggleClass('btn-loading');
    });
  }
</script>
@endpush