@extends('layout.padrao')
@section('content')
@section('title', 'Upload Carriers PDF files')


<div class="row folha-interna shadow col col-lg-12 col-sm-12 col-md-12 p-3 mb-5 rounded folhaForm">
    
    @if($errors->any())
        <div class="row col-lg-6 alert alert-danger m-4">
            @foreach($errors->all() as $error)
                {{ $error }} <br>
            @endforeach
        </div>
    @endif


    <!-- Tabela Responsiva -->
    <div class="table-responsive">
        <table class="table-striped text-center" id="table" 
        data-toggle="table" 
        data-search="true"
        data-page-size= "50"
        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="auto" 
        data-show-export="true" 
        data-export-data-type="all" 
        data-query-params="queryParams"
        data-url= "/scrapeFiles/details/json?id={{$id}}"
        data-show-columns="true">
            <thead>
                <tr class="trSuperBlue">
                    <th data-field="scrape_file.carrier.fantasyName" data-sortable="true" class="text-center">Carrier</th>
                    {{-- <th data-field="scrape_file.file_name" data-sortable="true" class="text-center">File</th> --}}
                    <th data-field="vessel_description" data-sortable="true" class="text-center">Vessel</th>
                    <th data-field="voyage" data-sortable="true" class="text-center">Voyage</th>
                    
                    <th data-field="terminal_description" data-sortable="true" class="text-center">Terminal Description</th>
                    <th data-field="code_of_port" data-sortable="true" class="text-center">Port</th>

                    <th data-field="etaPol" data-sortable="true" data-formatter="dateTimeBrazilFormat"  class="text-center">ETA Pol</th>
                    <th data-field="etaPod" data-sortable="true" data-formatter="dateTimeBrazilFormat"  class="text-center">ETA Pod</th>
                    <th data-field="draftCutoffDate" data-sortable="true" data-formatter="dateTimeBrazilFormat"   class="text-center">Draft Cutoff Date</th>
                    <th data-field="cargoCutoffDate" data-sortable="true"  data-formatter="dateTimeBrazilFormat" class="text-center">Cargo Cutoff Date</th>
                    <th data-field="vgmCutoffDate" data-sortable="true" data-formatter="dateTimeBrazilFormat" class="text-center">VGM Cutoff Date</th>
                    {{-- <th data-field="extra_information" data-sortable="true" class="text-center">Extra Information</th> --}}
                </tr>
            </thead>
        </table>
    </div>

</div>


<script>     



    function dateTimeBrazilFormat(value, row, index) {

    if (value == null) return '';
    let originalDate = value;
    originalDate = new Date(originalDate);

    // var parts = value.match(/(\d+)/g);
    // var date =  new Date(parts[0], parts[1]-1, parts[2]); 
    
    var data_format_due = ((originalDate.getDate() > 9) ? originalDate.getDate() : ('0' + originalDate.getDate())) +
        '-' + ((originalDate.getMonth() > 8) ? (originalDate.getMonth() + 1) : ('0' + (originalDate.getMonth() + 1))) +
        '-' + originalDate.getFullYear();    


    return [data_format_due + ' ' + originalDate.toLocaleTimeString()].join('')

    }

</script>


@include('scrapeFile.style')
@include('bibliotecas.bootstrapExport')



@endsection