@extends('layout.padrao')
@section('title', 'List - MSC Integration - Confirmation of the dates')

@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('listIntegrationMSC') }}" 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: </label>
                                {!! Form::select('loading_ports_id[]', $select['destinationPort'],
                                old('loading_ports_id',
                                $select['destinationPort']), ['class' => 'loadingPorts
                                form-control','multiple'=>'multiple'])
                                !!}
                            </div>
                            <div class="col col-lg-12 margin-bottom-30">
                                <label for="port_destinations[]">Destination: </label>
                                {!! Form::select('port_destinations[]', $select['destinationPort'] ,
                                old('port_destinations',$select['destinationPort']), ['class' =>
                                'destinationPort
                                form-control','multiple'=>'multiple']) !!}
                            </div>
                        </div>

                        <div class="w-100 sep-line3 blue margin-bottom-30"></div>
                        
                        <div class="blueBg row">
                            <div class="col col-lg-6 margin-bottom-30 fromCol">
                                <label for="dt_start">From: </label>
                                {!! 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>
                            <div class="col col-lg-6 margin-bottom-30 toCol">
                                <label for="dt_end">To: </label>
                                {!! Form::date('dt_end', null , ['class' => 'form-control end_date ', 'min' =>
                                '2019-01-01',
                                'max' => '2080-01-01']) !!}
                            </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 '/mscIntegration/tableMscIntegration' )-->
                        {{-- @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('mscIntegration.tableMscIntegration')
    </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");

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

        $(function () {
            $table.bootstrapTable({
                cache: false,
                height: 1000,
                striped: true,
                pagination: false,
            });
        })

        function fromPlace(cell, row, value) {
            return '<i class="fas fa-ship blueText"></i> ' + cell + ' - (' + row.fromPlace + ' - ' + row.fromCountry +
                ')';
        }

        function toPlace(cell, row, value) {
            return '<i class="fas fa-map-marker-alt blueText"></i> ' + cell + ' - (' + row.toPlace + ' - ' + row
                .toCountry + ')';
        }

        function dateBrazilFormat(value, row, index) {
            var parts = value.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].join('')
        }

        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 = ((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 showVoyages(cell, row, value) {
            const myArray = cell.map(({
                voyage,
                vessel_name
            }) => '(' + voyage + ' : ' + vessel_name + ') <br>');
            let unique = [...new Set(myArray)];
            let finalField = '';
            unique.forEach(value => {
                finalField = finalField + ' ' + value
            });

            return '<small>' + finalField + '</small>';
        }

        function detailFormatter(index, row) {
            var html = []
            console.log(row.integration_message_structured_data)
            html.push('<table class="table table-striped">')
            html.push(
                '<thead><th>Service</th><th>Vessel Name</th><th>Voyage</th><th>Port of Origin</th><th>Terminal</th><th>Dates</th><th>Datetime</th></thead>'
            )

            let controlVoyage = '';
            let controlVesselName = '';
            $.each(row.integration_message_structured_data, function (key, value) {

                if ((controlVoyage != '' && controlVoyage != value.voyage) || (controlVesselName != '' &&
                        controlVesselName != value.vessel_name)) {
                    html.push('<tr><td colspan=16> New Voyage and Vessel Data</td></tr>')
                }

                controlVoyage = value.voyage;
                controlVesselName = value.vessel_name;

                html.push(' <tr>')
                $.each(value, function (key2, value2) {
                    let defValue2 = value2

                    if (key2 == 'call_dates_type') {
                        switch (value2) {
                            case 'DCCUTOFF':
                                defValue2 = 'IMO Draft Deadline';
                                break;
                            case 'SI':
                                defValue2 = 'Draft Deadline (SI)';
                                break;
                            case 'VGM':
                                defValue2 = 'VGM Deadline';
                                break;
                            case 'CYCUTOFF':
                                defValue2 = 'Cargo & Clearance DL (CY)';
                                break;
                            case 'REFCUTOFF':
                                defValue2 = 'Cargo & Clearance DL (REF)';
                                break;
                        }
                    }

                    if (key2 == 'call_dates_callDateTime') defValue2 = dateTimeBrazilFormat(value2, {},
                        '')

                    if (key2 != 'id' && key2 != 'integration_messages_id') html.push('<td>' +
                        defValue2 + '</td>')
                })
                html.push('</tr>')
            })
            html.push('</thead>')
            return html.join('')
        }

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

    @endSection