@extends('layout.padrao')
@section('title', 'Follow Up Cargoo Integrations')
@section('content')

  <style>
    /* Ajuste no quadrado azul que aparece abaixo da tabela */
    tr {
      background: #f5f5f5 !important;
      border: 2px solid #f5f5f5 !important;
    }
  </style>

        <div class="table-responsive">
            <table class="table-striped text-center" id="table"
            data-toggle="table"
            data-search="true"
            data-detail-formatter="detailFormatter"
            data-page-list="[100, 200, 300, 400, all]"
            data-show-footer="true"
            data-show-pagination-switch="true"
            data-show-refresh="true"
            data-click-to-select="true"
            data-show-fullscreen="true"
            data-pagination="true"
            data-toolbar="#toolbar"
            data-show-toggle="true"
            data-height="600"
            data-show-export="true"
            data-export-data-type="all"
            data-query-params="queryParams"
            data-url="/microserviceFollowUp/json/"
            data-show-columns="true" >
            <thead>
              <tr class="trSuperBlue">
                  <th data-field="id" data-sortable="true">ID</th>
                  <th data-field="tabex_follow_ups.service" data-sortable="true">SERVICE</th>
                  <th data-field="information" data-sortable="true">INFORMATION</th>
                  <th data-field="created_at" data-formatter="dateFormat" data-sortable="true">TIMESTAMP</th>
              </tr>
            </thead>
        </table>
      </div>
    </form> 
  
    <script>
  
        var $table = $('#table');

        $(function() {
        $table.bootstrapTable({
                        cache: false,
                        height: 1000,
                        striped: true,
                        pagination: true,
                        pageSize: 100, //specify 5 here
                        pageList: [100, 200, 300,400,500]//list can be specified here
        });      
        })

        function dateFormat(value, row, index){ 
        let date = row['created_at'];
        date = new Date(date);

        var hours = date.getHours();
        // Minutes part from the timestamp
        var minutes = "0" + date.getMinutes();
        // Seconds part from the timestamp
        var seconds = "0" + date.getSeconds();

     
        var  data_format_due =  ((date.getDate() > 9) ? date.getDate() : ('0' + date.getDate())) 
                                  + '-' + 
                                  ((date.getMonth() > 8) ? (date.getMonth() + 1) : ('0' + (date.getMonth() + 1))) 
                                  + '-' + date.getFullYear();
        data_format_due = data_format_due + ' ' + hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
        return [
            data_format_due
        ].join('')
    }
    
               
    </script>
  @include('bibliotecas.bootstrapExport')
@endSection