@extends('layouts.main')
@push('styles')
<link href="{{asset('css/daterangepicker.css')}}" rel='stylesheet' />
<link rel="stylesheet" type="text/css" href="{{asset('css/dataTables.checkboxes.css')}}"/>
@endpush
@section('content')
<div class="row">
  <div class="col-md-12">
    <form class="card" method="post" action="{{route('vehicles_post_update', ['vehicle_id' => $vehicle->id])}}">
      {{csrf_field()}}
      <div class="card-body">
      <h1 >{{__('strings.vehicles_update_header', ['alias' => $vehicle->alias ?? ''])}}</h1>

        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <label class="form-label">Id</label>
              <input type="number" name="vehicle_id" class="form-control" value="{{$vehicle->id ?? ''}}" readonly/>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <label class="form-label">{{__('strings.alias')}}</label>
              <input type="text" name="alias" class="form-control" placeholder="{{__('strings.alias')}}" value="{{$vehicle->alias ?? ''}}">
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <label class="form-label">{{__('strings.plates')}}</label>
              <input type="text" name="plates" class="form-control" placeholder="{{__('strings.plates')}}" value="{{$vehicle->plates ?? ''}}"/>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <label class="form-label">{{__('strings.brand')}}</label>
              <input type="text" name="brand" class="form-control" placeholder="{{__('strings.brand')}}" maxlength="255" required value="{{$vehicle->brand ?? ''}}"/>
            </div>
          </div>
          <div class="col-md-6">
            <div class='form-group'>
              <label class="form-label">{{__('strings.model')}}</label>
              <input type="text" name='model' class="form-control" placeholder="{{__('strings.model')}}" maxlength="255" required value="{{$vehicle->model ?? ''}}"/>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <label class="form-label">{{__('strings.year')}}</label>
              <input type="text" name="year" class="form-control" placeholder="{{__('strings.year')}}" maxlength="255" required value="{{$vehicle->year ?? ''}}"/>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <label class="form-label">{{__('strings.color')}}</label>
              <div class="input-group">
                <input type="text" name="color_name" class="form-control" placeholder="{{__('strings.color')}}" value="{{$vehicle->color_name ?? ''}}"/>
                <span class="input-group-append">
                  <input type="color" name="color_hex" class="btn btn-icon form-control" value="{{$vehicle->color_hex ?? ''}}"/>
                </span>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <label class="form-label">{{__('strings.vehicle_type')}} [{{__('strings.max_passengers')}}]</label>
              <select name="vehicle_type_id" class="form-control custom-select">
                @php $vehicleTypes = \App\Models\VehicleType::all(); @endphp
                @foreach($vehicleTypes as $type)
                <option value="{{$type->id}}" {{$type->id == $vehicle->vehicle_type_id ? 'selected' : ''}}>{{$type->name ?? ''}} [{{$type->number_of_passengers}}]</option>
                @endforeach
              </select>
            </div>
          </div>
        </div>

        <div class="card-footer text-right">
          <button type="submit" class="btn btn-primary">{{__('strings.submit_update')}}</button>
        </div>
    </form>
  </div>

    <div class="card">
      <div class="card-body">
      <div class="row">
          <div class="col-md-12">
              <div class="panel-heading">
                  <h1>
                      {{ __('strings.vehicle_employees') }} 
                  </h1>
              </div>                
              <div class="table-responsive mb-4">
                  <table id="vehicle-employees-table" class="table hover">
                      <thead class="thead-ligth">
                          <tr>
                              <th>{{__('strings.employee_number')}}</th>
                              <th>{{__('strings.name')}}</th>
                              <th>{{__('strings.department')}}</th>
                              <th></th>
                          </tr>
                      </thead>
                  </table>
              </div>
          </div>
        </div>
</div>
 </div>
 <div class="card">
      <div class="card-body">
      <div class="row">

          <div class="col-md-12">
              <div class="panel-heading">
                  <h1>
                      {{ __('strings.employees_directory') }} 
                  </h1>
              </div>                
              <div class="table-responsive mb-4">
                  <table id="employees-table" class="table hover">
                      <thead class="thead-ligth">
                          <tr>
                              <th></th>
                              <th>{{__('strings.employee_number')}}</th>
                              <th>{{__('strings.name')}}</th>
                              <th>{{__('strings.department')}}</th>
                          </tr>
                      </thead>
                  </table>
              </div>
              <form id="form_employee_directory" action="{{route('vehicle_attach_employee', ['vehicle_id' => $vehicle->id])}}" method="post">
                  {{ csrf_field() }}
                  <input type="submit" class="btn btn-primary" value="{{ __('strings.attach_employees_to_vahicle', ['alias' => $vehicle->alias ?? '']) }}" />
              </form>
          </div>
        </div>
      </div>
    </div>

</div>

@endsection('content')

@push('scripts')
<script src="{{asset('js/daterangepicker.js')}}" type="text/javascript"></script>
<script src="{{asset('js/dataTables.checkboxes.min.js')}}" type="text/javascript"></script>

<script>

var empTable; // employees table
var carEmpTable;
$(document).ready(function() {
  //initialize datetable
  empTable = $('#employees-table').DataTable({
      responsive: false,
      paging: false,	
      searching: true,
      serverSide: false,
      ordering: false,
      scrollY: "450px",
      ajax: {
          url: "{{route('api_employees_for_car')}}",
          type: "POST",
          data: {
              user_token: "{{Auth::user()->SECURE_TOKEN}}",
              vehicle_id: '{{$vehicle->id ?? ''}}'
          }
      },
      columns: [
              { data: 'id',  checkboxes: true },
              { data: 'employee_number', defaultContent:"---"},
              { data: 'name', defaultContent:"---"},
              { data: 'department', defaultContent:"---"},
      ],
      select: {
          style: 'multi'
      },
      dom: 'frtip',
      "language" : {
              url: "{!! asset('datatables/languages/spanish.json') !!}"
      }
  });
  
  carEmpTable = $('#vehicle-employees-table').DataTable({
                                responsive: false,
                                paging: false,	
                                searching: true,
                                serverSide: false,
                                ordering: false,
                                ajax: {
                                    url: "{{route('api_vehicle_employees_datatable')}}",
                                    type: "POST",
                                    data: {
                                        user_token: "{{Auth::user()->SECURE_TOKEN}}",
                                        vehicle_id: '{{$vehicle->id ?? ''}}'
                                    }
                                },
                                columns: [
                                        { data: 'employee_number', defaultContent:"---"},
                                        { data: 'name', defaultContent:"---"},
                                        { data: 'department', defaultContent:"---"},
                                        { data: 'id', render: function(data, type, row, meta) {
                                            return '<button class="btn btn-icon btn-danger" onclick="detachEmployee(this,' + data + ')"><i class="fas fa-times"></i></button>';
                                        }},
                                ],
                                select: {
                                    style: 'multi'
                                },
                                dom: 'frtip',
                                "language" : {
                                        url: "{!! asset('datatables/languages/spanish.json') !!}"
                                }
                });
});

$("#form_employee_directory").on('submit', function(e) {
    var form = this;
    var rows_selected = empTable.column(0).checkboxes.selected();

    if(!rows_selected.length) {
        $.alert("{{__('strings.no_employees_selected')}}");
        return false;
    }
    // Iterate over all selected checkboxes
    $.each(rows_selected, function(index, rowId){
         // Create a hidden element
         $(form).append(
             $('<input>')
                .attr('type', 'hidden')
                .attr('name', 'employees[]')
                .val(rowId)
         );
    });
});


function detachEmployee(button, employeeId) {
  console.log(employeeId);
  $(button).toggleClass('btn-loading');
  $.post("{{route('vehicle_detach_employee')}}", {
    user_token: "{{Auth::user()->SECURE_TOKEN}}",
    vehicle_id: '{{$vehicle->id ?? ''}}',
    employee_id: employeeId
  }, function(){
    // reload data from datatables
    carEmpTable.ajax.reload();
    empTable.ajax.reload();
  }).fail(function(err){
    console.log(err);
    $(button).toggleClass('btn-loading');
  });
}
</script>


@endpush('scripts')