@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.registered_routes')}}</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>Alias</th>
                          <th>{{__('strings.date')}}</th>
                          <th>{{__('strings.time')}}</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_routes_datatable')}}",
                                      type: "POST",
                                      data: {
                                          user_token: "{{Auth::user()->SECURE_TOKEN}}"
                                      }
                                  },
                                  columns: [
                                          { data: 'id'},
                                          { data: 'alias', defaultContent:"---"},
                                          { data: 'created_at', render: function(data, type, row, meta) {
                                                  return moment.utc(data).local().format('YYYY-MM-DD');
                                              },
                                              defaultContent:"---"
                                          },
                                          { data: 'created_at', render: function(data, type, row, meta) {
                                                  return moment.utc(data).local().format('HH:mm:ss');
                                              },
                                              defaultContent:"---"
                                          },                                                                                 
                                          { data: 'id', render: function(id, type, row, meta){
                                              var url = "{{route('routes_config_new', ':id')}}";
                                              url = url.replace(':id', id);
                                              return '<a href="' + url + '" class="btn btn-icon btn-info"><i class="fas fa-cog mr-1"></a>';
                                            }, defaultContent:"---"
                                          },
                                          { data: 'id', render: function(routeId, type, row, meta){
                                              return '<button class="btn btn-icon btn-danger" onclick="deleteRoute(this,' + routeId + ')"><i class="fe fe-trash-2 mr-1"></button>';
                                            }, defaultContent:"---"
                                          }
                                  ],
                                  dom: 'Bfrtip',
                                  buttons: [
                                    'pageLength','copy', 'excel'
                                  ],
                                  "language" : {
                                          url: "{!! asset('datatables/languages/spanish.json') !!}"
                                  }
                  });
  });

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