@extends('layout.padrao')
@section('title', 'Loading Confirmation ')

@section('content')
<br>
<script src="{!! asset ('/typeahead/dist/typeahead.bundle.min.js')!!}"></script>
<script src="{!! asset ('/typeahead/dist/bloodhound.min.js')!!}"></script>
<div class="col col-lg-12 col-sm-12 col-md-12 folha-interna folha-branca-contornada rounded shadow p-3 mb-5">
    <form class="form-inline2 w-100 search-listas-int2" id="formPesquisa" method="GET"
        action="{{ route('listLoadingConfirmation','loading') }}" style="margin-top: 25px; display: none; z-index: 9">
        <div class="col col-lg-12 col-sm-12 col-md-12">
          <div class="col col-lg-12">

            {!! Form::text('tipo', 'confirmation', ['class' => 'form-control', 'hidden'=>'hidden']) !!}
            <div class="col col-lg-2 form-group text-align-left">
                <label for="from" style="margin-right: 5px !important; font-weight: normal;">From:</label>
                <input type="date" id="dtFrom" class="form-control start_date" style='padding: 6px;margin-right: 15px;' type="search" placeholder="BL Date" name="dt_start" onchange="regras()">
            </div>
            <div class="col col-lg-2 form-group text-align-left">
                <label for="from" style="margin-right: 5px !important; font-weight: normal;">To:</label>
                <input type="date" min="2019-01-01" max="2080-01-01" id="dtTo" class="form-control end_date" style='padding: 6px;margin-right: 15px;' type="search" placeholder="BL Date" name="dt_end" onchange="regras()">
            </div>
            <div class="col col-lg-4 form-group text-align-left">
                <label for="from" style="margin-right: 5px !important; font-weight: normal;">Search For:</label>
                <span class="minText"><i class="fas fa-info-circle"></i> Min: 3 characters</span>
                <input class="form-control searchFor inputRegra" id="searchFor" style='margin-right: 15px;' type="search" placeholder="Type Here" name="loading_plan" onkeyup="countNumberofCharacters(this)">
                <legend style="font-size:9px;text-align:left;border:none;">Search by: Shipper Ref., User Name, Booking Number, BL Number, Cargoo Reference, SAOE or Vessel</legend>
            </div>
            <div class="col col-lg-2 form-group text-align-left">
                <label for="from" style="margin-right: 5px !important; font-weight: normal;">Port of Discharge (POD):</label>
                {!! Form::select('code_of_ports[]', $select['destinationPort'], old('code_of_ports[]'), ['class' => 'type form-control dynamicFilter ', 'id' => 'podInput', 'multiple'=>'multiple', 'onchange'=>'regras()']) !!}

            </div>
            <div class="col col-lg-2 form-group text-align-left" style="margin-top:34px">
              <input class="checkbox-form-box" type="checkbox" name="open_payments" value="Y"> 
              <label class='form-check-label-profile' for="open_payments">Open Payments</label>
            </div>
          </div>

          <div class="col col-lg-12">
            <div class="col col-lg-3 form-group text-align-left">
              {!! Form::label('platforms_id', ' Product', ['style' => 'margin-right: 5px !important; font-weight: normal;']) !!}
              {!! Form::select('platforms_id[]', $select['platforms'], old('platforms_id[]', null), ['class' => 'form-control platforms_id', 'multiple'=>'multiple']) !!}
            </div>

            <div class="col col-lg-3 form-group text-align-left">
              {!! Form::label('carrier_id', ' Carrier', ['style' => 'margin-right: 5px !important; font-weight: normal;']) !!}
              {!! Form::select('carrier_id[]', $select['carriers'], old('carrier_id[]', null), ['class' => 'form-control carrier_id', 'multiple'=>'multiple']) !!}
            </div>

            <div class="col col-lg-3 form-group text-align-left">
              {!! Form::label('loading_ports_id', ' Loading Port', ['style' => 'margin-right: 5px !important; font-weight: normal;']) !!}
              {!! Form::select('loading_ports_id[]', $select['loading_ports'], old('loading_ports_id[]', null), ['class' => 'form-control loading_ports_id', 'multiple'=>'multiple']) !!}
            </div>
            <div class="col col-lg-3 form-group text-align-left">
              {!! Form::label('clients_id', 'Clients ', ['style' => 'margin-right: 5px !important; font-weight: normal;']) !!}
              {!! Form::select('clients_id[]', $select['clients'], old('clients_id[]', null), ['class' => 'form-control clients_id', 'multiple'=>'multiple']) !!}
            </div>
          </div>

            <div class="col col-lg-9 form-group"> <input type="hidden" name="searchAll" id="searchAll" value="N">
            </div>
            <div class="col col-lg-12 form-group" style="text-align: right; margin-bottom: -30px">
                <button class="btn btn-primary btnSearch disabled" type="submit">Search</button>
                <button class="btn btn-padrao" type="submit" onClick="$('#searchAll').val('Y');submitDisable();" id="searchclearSelect2">List All</button>
            </div>

            <style>
                .inputRegra{
                    border: 1px solid #c22d2d !important;
                }

                .inputRegra:focus{
                    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(233 102 102 / 60%);
                    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(233 102 102 / 60%);
                }

                .text-align-left{
                    text-align: left !important;
                }

                .minText{
                    border-radius: 5px;
                    color: #920b18;
                    background: #ffdee2;
                    padding: 3px;
                }
            </style>

            <script>
                function regras(){
                    var podInput = document.getElementById('podInput').value;
                    var textSearchFor = document.getElementById('searchFor').value;
                    var dataFrom = document.getElementById('dtFrom').value;
                    var dataTo = document.getElementById('dtTo').value;

                    // caso não haja nenhuma data e nenhum search for, mas o campo de POD estiver preenchido liberar o botão.
                    if(
                        // textSearchFor == '' && dataFrom == '' && dataTo == '' && 
                        podInput != ''){
                        $('.btnSearch').removeClass('disabled');
                    } 
                    // caso esteja vazio e com as datas preenchidas botão de search deve aparecer
                    else if(textSearchFor == '' && dataFrom != '' && dataTo != '' && podInput == ''){
                        $('.btnSearch').removeClass('disabled');
                    } 
                    else{
                        $('.btnSearch').addClass('disabled');               
                    } 
                }
                
                function countNumberofCharacters(text){
                    const cont = 1;
                    const caracteres = text.value.length;
                    var numCaracteres = parseFloat(caracteres * cont);

                    if (numCaracteres >= 3){                    
                        $('.searchFor').removeClass('inputRegra');
                        $('.btnSearch').removeClass('disabled');
                        $('.minText').addClass('display-none');
                    } 
                    else{
                        regras();
                        $('.searchFor').addClass('inputRegra');
                        $('.minText').removeClass('display-none');
                    }
                }

                function configDate(){   
                    // hoje -> pegando a data moment() e aplicando o formato YYYY-MM-DD. 
                    var today = moment().format('YYYY-MM-DD');
                    // 1 ano atrás -> subtraindo 1 ano da data moment() e aplicando o formato YYYY-MM-DD.    
                    var oneYearAgo = moment().subtract(1, 'years').format('YYYY-MM-DD');
                    
                    // input from
                    document.getElementById("dtFrom").value = oneYearAgo;
                    // min e max
                    document.getElementById("dtFrom").min = oneYearAgo;
                    document.getElementById("dtFrom").max = today;
                    datafrom = 1;

                    // input to
                    document.getElementById("dtTo").value = today;
                    // min e max
                    document.getElementById("dtTo").min = oneYearAgo;
                    document.getElementById("dtTo").max = today;
                    dataTo = 1;

                    regras();
                }

                window.onload = function () {
                    configDate();
                    // $('.start_date').inputmask("99-99-9999");
                    // $('.end_date').inputmask("99-99-9999");  
                }
            </script>
        </div>
    </form>

    <!-- Botão para recolher a pesquisa -->
    <div style="text-align: center; margin-top: 1px; z-index: 2">
        <div class="btn" id="dropSearch">
            <div title="Open Search" style="color: #0d6397 !important; font-size: 1.1 rem;">
                <span id="spanSearch" style="margin-bottom:-23px">Search</span> </br><i id="openBtn" class="fas fa-chevron-down"></i>
            </div>
        </div>
    </div>
</div>
<br><br><br>
<!-- <small id="total" class="form-text text-info">Open Shipments: {{$totais['processos']}}</small>
<small id="total" class="form-text text-info" style="width: 200px;">Container Qty: {{$totais['containerQty']}}</small>
<small id="total" class="form-text text-info" style="width: 200px;">TEU's: {{$totais['countTeus']}}</small> -->

<!-- Card Open Shipments -->
<div class="col-3 folha-interna shadow folha-branca-contornada cardAnalisys" style="margin-top: -75px; margin-bottom: 12px;">
    <div class="row">
        <div class="col-5" style="text-align: center">
            <img src="{!! asset('/image/analysis.svg') !!}"
                style="height: 100px; filter: invert(100%) sepia(1) saturate(9737%) hue-rotate(158deg) brightness(0.6)">
        </div>
        <div class="col" style="margin-top: 15px">
            <label for="openShipmentsTxt">Open Shipments: </label>
            <span class="openShipmentsTxt" id="openShipmentsTxt" name="openShipmentsTxt">{{$totais['processos']}}</span>
            <br />

            <label for="containersQtyTxt">Container Qty:</label>
            <span class="containersQtyTxt" id="containersQtyTxt"
                name="containersQtyTxt">{{$totais['containerQty']}}</span>
            <br />

            <label for="teusTxt">TEUs:</label>
            <span class="teusTxt" id="teusTxt" name="teusTxt">{{$totais['countTeus']}}</span>
        </div>
    </div>
</div>


<div class="col col-lg-2 col-sm-2 col-md-2 input-group control-group btnOperational"
    style="text-align: right; margin-top: -39px; left: 85%">
        <a title="Export This Consult" href="{{ action('LoadingController@index', ['tipo' => 'export']) }}"
            style='width:50px; margin-bottom:9px;' class="btn btn-padrao">
            <i class="fas fa-download"></i>
        </a>
</div>

@include('include.filtro_result')
<div class="col col-lg-12 col-sm-12 col-md-12 folha-interna folha-branca-contornada rounded shadow p-3 mb-5" style="padding: 20px !important">
    <div class="table-responsive tableLayout">
        @include('loading.loadingConfirmation.table',$registers)
    </div>
</div>
<div align="center" class="d-flex justify-content-center">
    @if (isset($pagenumber) && $pagenumber == 'none')
    @else
    {{ $registers->links() }}
    @endif
</div>
<!-- Delete Model -->
@include('include.modal_deletar', ["rota" => "loadingConfirmation"])

@include('bibliotecas.floatthead')
<script>
    $(document).ready(function () {
        $(".tool-information").tooltip({
            placement: 'right'
        });
    });

    $(document).on('click', '#dropSearch', function (click) {
        var formulario = document.getElementById("formPesquisa");
        var seta = document.getElementById("dropSearch");
        var spanSearch = document.getElementById("spanSearch");
        var icone = document.getElementById("openBtn");

        $('.table').floatThead('reflow')

        if (formulario.style.display == "none") {
            formulario.style.display = "block";
            spanSearch.style.display = "none";
            icone.style.transition = "0.3s";
            icone.style.transform = "rotate(180deg)";
        } else {
            formulario.style.display = "none";
            spanSearch.style.display = "block";
            icone.style.transition = "0.3s";
            icone.style.transform = "rotate(0deg)";
        }

    });
    $(" .dynamicFilter, .platforms_id, .carrier_id, .loading_ports_id, .clients_id").select2({
        placeholder: "Select one or more items",
        allowClear:true,
        maximumSelectionLength: 1000,
    });

</script>

@include('bibliotecas.momentJs')
@include('loading.loadingPlan.listStyle')
@include('loading.modalTimeline.modal_timeline')
@endSection