@extends('layout.padrao')
@section('title', 'Schedules')

@section('content')

<script src="{!! asset ('/typeahead/dist/typeahead.bundle.min.js')!!}"></script>
<script src="{!! asset ('/typeahead/dist/bloodhound.min.js')!!}"></script>
{{-- @dd(http_build_query($params)) --}}
<!-- Barra de Pesquisa -->
<div class="row col margin-top-30">
    <div class="col col-lg-3 col-sm-12 col-md-3 folha-interna shadow folha-branca-contornada radius-5 formArea margin-bottom-15 padding-0">
        <div class="padding-top-25 padding-bottom-7">
            <div class="col">
                <div class="formulario" id="formPesquisa">
                    <form class="form-inline" method="GET" action="{{ route('listSchedules') }}" id="loadingForm">
                        <div class="col-1 shipImg">
                            <img src="{!! asset('/image/shipSchedules.svg') !!}" class="shipLbl">
                        </div>
                        <div class="col-11 form1">
                            <div class="col col-lg-12 margin-bottom-30">
                                <label for="loading_ports_id[]">Origin: <div class="red"> *</div></label>
                                {!! Form::select('loading_ports_id[]', $select['destinationPort'],
                                old('loading_ports_id',
                                $select['destinationPort']), ['class' => 'loadingPorts
                                form-control','multiple'=>'multiple', 'required'=>'required'])
                                !!}
                            </div>
                            <div class="col col-lg-12 margin-bottom-30">
                                <label for="port_destinations[]">Destination: <div class="red"> *</div></label>
                                {!! Form::select('port_destinations[]', $select['destinationPort'] ,
                                old('port_destinations',$select['destinationPort']), ['class' =>
                                'destinationPort
                                form-control','multiple'=>'multiple', 'required'=>'required']) !!}
                            </div>
                        </div>

                        <div class="w-100 sep-line3 blue margin-bottom-30"></div>
                        
                        <div class="blueBg row padding-15">
                            <div class="col col-lg-6 margin-bottom-30">
                                <label for="dt_start">From: <div class="red"> *</div></label>
                                {!! Form::text('tipo', 'loading', ['class' => 'form-control', 'hidden'=>'hidden']) !!}
                                {!! Form::date('dt_start', null , ['class' => 'form-control start_date', 'id' => 'startDate', 'min' =>
                                '2019-01-01',
                                'max' => '2080-01-01', 'required'=>'required']) !!}
                            </div>
                            <div class="col col-lg-6 margin-bottom-30">
                                <label for="dt_end">To: <div class="red"> *</div></label>
                                {!! Form::date('dt_end', null , ['class' => 'form-control end_date ', 'min' =>
                                '2019-01-01',
                                'max' => '2080-01-01', 'required'=>'required']) !!}
                            </div>
                        </div>

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

                        <div class="col col-lg-12 col-md-12 col-sm-12 margin-bottom-30 margin-top-15">
                            <label for="voyage_vessel">Search by: Voyage, Vessel: </label>
                            <input class="form-control" type="search" name="voyage_vessel" placeholder="Search by Voyage, Vessel" style="width: 100% !important;">
                        </div>
                        <div class="col col-lg-12 col-md-12 col-sm-12 margin-bottom-30">
                            <label for="service_name">Service Name: </label>
                            <input class="form-control" type="search" name="service_name" placeholder="Please enter the Service Name" style="width: 100% !important;">
                        </div>

                        <!-- Botões de Busca e de Limpar os Filtros -->


                        <div class="col col-lg-6 clearBtn form-group margin-top-10 margin-bottom-20 text-center">
                            <button
                                onclick="if(tipo){window.location = window.location.pathname+'?tipo=clear'+tipo}else{window.location = window.location.pathname};"
                                id="searchclearSelect2" class="btn btn-primary clBtn" type="button">
                                Clear Filter
                            </button>
                        </div>

                        <div class="col col-lg-6 searchBtn form-group margin-top-10 margin-bottom-20 text-center">
                            <button class="btn btn-primary submitBtn" type="submit">
                                <i class="fas fa-search"></i> Search
                            </button>
                        </div>

                        <!--Filtro Tag return (foi movido para '/schedules/tableSchedules' )-->
                        {{-- @include('include.filtro_result') --}}
                </div>
            </div>
            </form>
            <!-- Botão para recolher a pesquisa -->
            <div class="col-12 btn-recolhe-pesquisa" 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-up"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col col-9 img-wrapper radius-5 margin-bottom-15">
        <img src="{!! asset('/image/wallpapers/backgroundSchedules.jpg') !!}" class="bgSchedules radius-5">
        @include('schedules.tableSchedules')
    </div>

    {{-- @dd("/mscIntegration/json" . "?" . http_build_query($params)) --}}

    <script>
        var $table = $('#table')
        var $button = $('#button')

        var spanSearch = document.getElementById("spanSearch");
        var icone = document.getElementById("openBtn");

        // Atribuindo a data e hora de hoje
        var date = new Date();
        var day = date.getDate();
        var month = date.getMonth() + 1;
        var year = date.getFullYear();
        if (month < 10) month = "0" + month;
        if (day < 10) day = "0" + day;
        var today = year + "-" + month + "-" + day;
        document.getElementById("startDate").value = today;

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

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

        $(".loadingPorts, .destinationPort").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');
                $("#loadingForm").submit();
            });
        });

    </script>
    <!-- Delete Model -->
    @include('bibliotecas.floattheadOverflow')
    @include('bibliotecas.bootstrapExport')
    @include('mscIntegration.style')
    @include('schedules.style')

    @endSection