@extends('layout.padrao')
@section('title', ($tipo <> 'pending' && $tipo <> 'clearpending') ? 'Operational Dashboard':'Pending Transferences')
        @section('content')

        <script src="{!! asset ('/typeahead/dist/typeahead.bundle.min.js')!!}"></script>
        <script src="{!! asset ('/typeahead/dist/bloodhound.min.js')!!}"></script>
        @if($tipo == 'pending' || $tipo == 'clearpending')


            <div class="col" style="text-align: end; top: -25px;">
                <img src="{!! asset('/image/csa_Logo.png') !!}" style="height: 100px; margin-top: -23px">
            </div>

            <!-- Barra de Pesquisa -->
            <div class="col col-lg-12 col-sm-12 col-md-12 folha-interna shadow folha-branca-contornada rounded"  style="margin-bottom: 50px;">
                <div style="padding-top: 25px; padding-bottom: 7px; margin-botton: 20px;">
                    <div class="col" style="margin-right: 0px !important; margin-left: 0px !important;">
                        <div class="formulario" id="formPesquisa" style="display: none;">
                            <form class="form-inline" method="GET" action="{{ route('listLoading','loading') }}" id="loadingForm">
                                {!! Form::text('tipo', 'pending', ['class' => 'form-control', 'hidden'=>'hidden']) !!}
                                <div class="col col-lg-6">
                                    <input class="form-control" type="search" name="loading_plan"
                                        style="width: 100% !important;">
                                    <div class="smallFont">Search by: Shipper Ref., Booking Number, Product, Fantasy Name, User Name,  SAOE, Cargoo Reference or Vessel </div>
                                </div>
                                {{-- <div class="w-100" style="margin-top: 30px"></div> --}}
                                <div class="col col-lg-6">
                                    {!! Form::select('commercial_edit_status[]', $select['commercial_edit_status'],
                                    old('commercial_edit_status',
                                    null), ['class' => 'loadingPorts
                                    form-control','multiple'=>'multiple']) !!}
                                    <div class="smallFont">Commercial Edit Status</div>
                                </div>
                                {{-- <div class="w-100"></div> --}}
                                <!-- Botões de Busca e de Limpar os Filtros -->
                                <div class="col col-lg-12 form-group " style="margin-top: 10px; margin-bottom: 20px; text-align: right;">
                                    <button class="btn btn-primary " type="submit">
                                        <i class="fas fa-search"></i> Search
                                    </button>
                                    <button
                                        onclick="if(tipo){window.location = window.location.pathname+'?tipo=clear'+tipo}else{window.location = window.location.pathname};"
                                        id="searchclearSelect2" class="btn btn-primary " type="button">Clear Filter</button>
                                </div>
                        </div>
                    </div>
                    </form>

                    <!-- Botão para recolher a pesquisa -->
                    <div class="col-12" style="text-align: center; margin-top: -16px;">
                        <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>
            </div>



                {{-- <div class="col col-lg-12 col-sm-12 col-md-12" style="margin-bottom: 10px;">
                    <div class="row">
                        <div class="col"></div>
                        <div class="col-8">
                            <form class="form-inline w-100 search-listas-int" method="GET" action="{{ route('listLoading','loading') }}" style="margin-top: 0px; margin-bottom: 0px">
                                {!! Form::text('tipo', 'pending', ['class' => 'form-control', 'hidden'=>'hidden']) !!}

                                <div class="row">
                                    <div class="col col-lg-5">
                                        <input class="form-control col-lg-10 mr-sm-2 " type="search"
                                        placeholder="Search by: Shipper Ref., Booking Number, Product, Fantasy Name, User Name,  SAOE, Cargoo Reference or Vessel  "
                                        name="loading_plan" >
                                    </div>

                                    <div class="col col-lg-5">
                                        {!! Form::select('loading_ports_id[]', $select['loadingPorts'],
                                        old('loading_ports_id',
                                        $returnSearchSelect['loadingPorts']), ['class' => 'loadingPorts
                                        form-control','multiple'=>'multiple']) !!}
                                        <div class="smallFont">Loading Port</div>
                                    </div>

                                    <div class="col col-lg-2">
                                        <button class="btn btn-primary" type="submit" style="margin-top:-14px"><i class="fas fa-search"></i> Search</button>
                                    </div>

                                </div>
                            </form>
                        </div>
                        <div class="col"></div>
                    </div>
                </div> --}}
        @else

        <div class="col" style="text-align: end; top: -25px;">
            <img src="{!! asset('/image/csa_Logo.png') !!}" style="height: 100px; margin-top: -23px">
        </div>

        <!-- Barra de Pesquisa -->
        <div class="col col-lg-12 col-sm-12 col-md-12 folha-interna shadow folha-branca-contornada rounded" >
            <div style="padding-top: 25px; padding-bottom: 7px">
                <div class="col" style="margin-right: 0px !important; margin-left: 0px !important;">
                    <div class="formulario" id="formPesquisa" style="display: none;">
                        <form class="form-inline" method="GET" action="{{ route('listLoading','loading') }}"
                            id="loadingForm">

                            <div class="col" style="max-width: 190px">
                                {!! Form::text('tipo', 'loading', ['class' => 'form-control', 'hidden'=>'hidden']) !!}
                                {!! Form::date('dt_start', null , ['class' => 'form-control start_date ', 'min' => '2019-01-01', 'max' => '2080-01-01']) !!}
                                <div class="smallFont">From</div>
                            </div>
                            <div class="col" style="max-width: 190px">
                                {!! Form::date('dt_end', null , ['class' => 'form-control end_date ', 'min' => '2019-01-01', 'max' => '2080-01-01']) !!}
                                <div class="smallFont">To</div>
                            </div>
                            <div class="col">
                                <input class="form-control" type="search" name="loading_plan"
                                    style="width: 100% !important;">
                                <div class="smallFont">Search by: User Name, Booking Number, Product, Cargoo Reference, SAO</div>
                            </div>
                            <div class="w-100" style="margin-top: 30px"></div>
                            <div class="col col-lg-4">
                                {!! Form::select('clients_id[]', $select['clients'], old('clients_id', $returnSearchSelect['clients']), ['class' => 'clients
                                form-control','multiple'=>'multiple']) !!}
                                <div class="smallFont">Clients</div>
                            </div>
                            <div class="col col-lg-4">
                                {!! Form::select('loading_ports_id[]', $select['loadingPorts'],
                                old('loading_ports_id',
                                $returnSearchSelect['loadingPorts']), ['class' => 'loadingPorts
                                form-control','multiple'=>'multiple']) !!}
                                <div class="smallFont">Loading Port</div>
                            </div>
                            <div class="col col-lg-4 col-md-6 col-sm-12">
                                {!! Form::select('port_destinations[]', $select['destinationPort'] ,
                                old('port_destinations',$returnSearchSelect['destinationPort']), ['class' =>
                                'destinationPort
                                form-control','multiple'=>'multiple']) !!}
                                <div class="smallFont">Port of Destination</div>
                            </div>
                            <div class="w-100"></div>
                            <!-- Botões de Busca e de Limpar os Filtros -->
                            <div class="col col-lg-12 form-group " style="margin-top: 10px; margin-bottom: 20px; text-align: right;">
                                <button class="btn btn-primary " type="submit">
                                    <i class="fas fa-search"></i> Search
                                </button>
                                <button
                                    onclick="if(tipo){window.location = window.location.pathname+'?tipo=clear'+tipo}else{window.location = window.location.pathname};"
                                    id="searchclearSelect2" class="btn btn-primary " type="button">Clear Filter</button>
                            </div>
                    </div>
                </div>
                </form>

                <!-- Botão para recolher a pesquisa -->
                <div class="col-12" style="text-align: center; margin-top: -16px;">
                    <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>
        </div>

        
        @endif
        <script>

            $(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)";
                }

            })

            $(" .loadingPorts, .destinationPort, .clients").select2({
                placeholder: "Select and Search",
                allowClear: true,
                default: null,
                maximumSelectionLength: 100,

            });

            function clearSelect2() {
                $("#loadingPorts").val(null).trigger('change');

            }
            $(function () {
                $("#searchclearSelect2").click(function () {
                    $(".loadingPorts").select2('val', 'All');
                    $(".destinationPort").select2('val', 'All');
                    $(".clients").select2('val', 'All');
                    $("#loadingForm").submit();
                });
            });

        </script>

        <!--Filtro Tag return-->
        @include('include.filtro_result')


        @can('create', App\Usuario::class)
        <div class="row" style="margin-top: 93px;">
            @include('include.btn_adicionar',["btn" => "loading"])
        </div>
        @endcan

        <!-- Card Open Shipments -->
        
        <div class="col-3 folha-interna shadow folha-branca-contornada cardAnalisys">
            <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="row folha-interna shadow folha-branca-contornada col col-lg-12 col-sm-12 col-md-12 rounded"
            style="padding: 20px; border-radius: 5px !important; margin-top: -14px;">
            {!! Form::text('tipo', 'loading', ['class' => 'form-control', 'hidden'=>'hidden']) !!}
            <div class="table-responsive tableLayout">
                @include('loading.loadingPlan.table',['resgisters' => $registers, 'tipo' => $tipo])
            </div>
            <div align="center" class="d-flex justify-content-center">
                {{ $registers->links() }}
            </div>
        </div>

        <script>
            $(document).ready(function () {
                $(".tool-information").tooltip({
                    placement: 'right'
                });
            });           
        </script>
        <!-- Delete Model -->
        @include('include.modal_delete_reason', ["rota" => "loadingPlan"])
        @include('include.modal_deletar', ["rota" => "ReturnToAllocation"])
        @include('loading.loadingPlan.modal_vgmdraft', ["rota" => ""])
        @include('include.modal_reason', ["rota" => "LoadingTransfer"])
        @include('include.modal_imoApproval', ["rota" => "IMOApproval"])
        @include('include.modal_link', ["rota" => "link"])
        @include('include.modal_history')
        @include('include.modal_migrationsRemaining')
        @include('include.modal_tradeMigrationRemaining')
        @include('allocation.modal_commercial_edit', ["rota" => "loadingPlan"])
        @include('loading.loadingPlan.modal_splitBookingBeforeLoadingConfirmation')     
        @include('loading.modalTimeline.modal_timeline')

        @include('loading.loadingPlan.listStyle')

        
        @endSection