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

<style>
    .align-top h2{
        display: none;
    } 
</style>

<div class="row folha-interna shadow 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
    
    <form method="POST" action="{{ route('scrapeFiles.upload') }}" accept-charset="UTF-8" enctype="multipart/form-data" id="form_scraped_pdf" class="col-lg-12">
        {{ csrf_field() }}
        <div class="row">

            <div class="col-12 margin-bottom-15">
                <h2>Upload de Arquivos</h2>  
            </div>

            <div class="col col-lg-6 col-sm-12 col-md-6 form-group {{ $errors->has('carriers_id')? 'has-error':''}}">
                <label for="carriers_id" class="font-weight-500">Armador</label>
                {!! Form::select('carriers_id', $select['carrier'],null, ['class' => 'dynamicCarrier form-control']) !!} 
                <p class="control-label">Favor indicar de qual armador será realizado a leitura do Arquivo de CutOff Dates</p>
            </div>

            <div class="w-100"></div>  
                
            <div class="col col-lg-12 col-sm-12 col-md-12 margin-top-10 form-group {{ $errors->has('nmAnexo')? 'has-error':''}}">
                <input class="form-control overflow-hidden" placeholder="" name="nmAnexo[]" id="nmAnexo" type="file" 
                        style="white-space: nowrap; text-overflow: ellipsis; height: 40px;" accept="application/pdf, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                        multiple>
                <p class="control-label">Selecione o arquivo do armador</p>
            </div>

            <div class="col-12 margin-bottom-15 text-right">
                <button id="btnSubmit" type="submit" class="btn btn-padrao" onclick='submitDisable()'> Upload File </button>
                <button type="reset" class="btn btn-padrao" onClick="history.go(-1)"> Cancel </button>
            </div>
        </div>
    </form>

    <div class="sep-line3 w-100"></div>

    <div class="col-8 margin-bottom-15">
        <h2>Arquivos enviados</h2> 
    </div>

    <div class="col-4 display-flex align-items-center justify-content-end">
        <a href="/scrapeFiles/conference" target="_blank">
            <button class="btn btn-blue">
                <i class="fas fa-table"></i> 
                Conference and Update 
            </button>
        </a>
    </div>

    <div class="col-12">
         <!-- 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/json"
            data-show-columns="true">
                <thead>
                    <tr class="trSuperBlue">
                        <th data-field="id" data-formatter="operateFormatter"></th>          
                        <th data-field="carrier.fantasyName" data-sortable="true" class="text-center">Armador</th>
                        <th data-field="file_name" data-sortable="true" class="text-center">Nome do arquivo</th>
                        {{-- <th data-field="file_path" data-sortable="true" class="text-center">Path</th> --}}
                        <th data-field="send_datetime" data-sortable="true" data-formatter="dataFormatSendDatetime" class="text-center">Data de Envio</th>
                        <th data-field="send_usuario.nome" data-sortable="true" class="text-center">Responsável pelo envio</th>           
                        <th data-field="processing_datetime" data-sortable="true" data-formatter="dataFormatProcessingDatetime" class="text-center">Data de Processamento</th>
                        <th data-field="status" data-sortable="true" class="text-center">Status</th>
                        <th data-field="extra_information" data-sortable="true" class="text-center">Extra Information</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

</div>


<script>     

    function operateFormatter(value, row, index) {
        var Buttons = '<a href="/scrapeFiles/details?id='+ value + '" class="icone-padding"><i class="fas fa-th-list"></i></a>';

        return [
            Buttons
        ].join('')
    }
    

    function dataFormatSendDatetime(value, row, index) {

        if (row['send_datetime'] == null) return '';

        let originalDate = row['send_datetime'];
        originalDate = new Date(originalDate);

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

        return [data_format_due + ' ' + originalDate.toLocaleTimeString() ].join('')
    }
    function dataFormatProcessingDatetime(value, row, index) {

        if (row['processing_datetime'] == null) return '';

        let originalDate = row['processing_datetime'];
        originalDate = new Date(originalDate);

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

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

</script>


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

@endsection