@extends('layout.padrao')
@section('title', 'Operational Dashboard')

@section('content')

<style>
    .smallFont {
        font-size: 85%;
    }

    .form-control {
        width: 100% !important;
    }

    .table-striped.text-center.table.table-bordered.table-hover {
        z-index: 1;
        position: absolute;
        margin-top: 20px !important;
    }

    .fixed-table-toolbar {
        margin-top: 85px !important;
    }

    .btn-group-fab-table.active .fundoDaListagemVessel {
        background: rgba(54, 134, 239, 0.30);
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.23);
        backdrop-filter: blur(12.5px);
        -webkit-backdrop-filter: blur(12.5px);
        position: absolute;
        border-radius: 21px;
        width: 42px !important;
        height: 196px !important;
        margin-left: 48px;
        margin-top: -241px;
        z-index: 9;
    }

    tr {
        background: #f9f9f9 !important;
        border: 2px solid #f9f9f9 !important;
    }

    .blueIcon {
        color: #3686ef;
        transition: 0.6s;
    }

    .blueIcon:hover {
        color: #2765b8;
    }

    .btnAdd {
        margin-top: 80px;
        position: absolute;
        z-index: 1;
    }

    .cardAnalisys {
        color: #1F78B4;
        margin-right: 35px;
        border-radius: 16px;
    }

    /* Alterando o estilo dos elementos select2 */
    .select2-selection.select2-selection--multiple {
        display: block !important;
        width: 100% !important;
        padding: .375rem .75rem !important;
        font-size: 1.2rem !important;
        line-height: 1.5 !important;
        color: #495057 !important;
        background-color: #fff !important;
        border: 1px solid #ced4da !important;
        border-radius: 4px !important;
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
    }

    .select2-selection.select2-selection--multiple:focus {
        border-color: #66afe9 !important;
        outline: 0 !important;
        -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%) !important;
        box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%) !important;
    }

    .select2-selection.select2-selection--multiple:active {
        border-color: #66afe9 !important;
        outline: 0 !important;
        -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%) !important;
        box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%) !important;
    }

    .select2.select2-container.select2-container--default.select2-container--below.select2-container--focus.select2-container--open {
        border-color: #66afe9 !important;
        outline: 0 !important;
        -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%) !important;
        box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%) !important;
    }

    .select2-selection__choice {
        background-color: #3686ef24 !important;
        border: 1px solid #3686ef !important;
        color: #003659 !important;
    }

    .select2-selection__choice__remove {
        color: #384eaa !important;
    }

</style>
<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="row folha-interna shadow folha-branca-contornada col col-lg-12 col-sm-12 col-md-12 rounded"
    style="padding-top: 25px;">
    <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="" style="margin-bottom:9px">
                <div class="col" style="max-width: 190px">
                    <input class="form-control dt_start" type="date" name="dateFromTxt" id="dateFromTxt">
                    <div class="smallFont">From</div>
                </div>
                <div class="col" style="max-width: 190px">
                    <input class="form-control dt_end" type="date" name="dateToTxt" id="dateToTxt">
                    <div class="smallFont">To</div>
                </div>
                <div class="col">
                    <input class="form-control" type="search" name="searchByTxt" id="searchByTxt">
                    <div class="smallFont">Search by: Fantasy Name, User Name, Booking Number, Product, Cargoo
                        Reference,
                        SAO
                    </div>
                </div>
                <div class="w-100" style="margin-top: 30px"></div>


                <div class="col {{ $errors->has('loading_ports.0')? 'has-error':''}}">
                    {!! Form::select('loading_ports[]',$select['loadingPorts'],
                    null, ['class' => 'form-control selectFormControl loading_ports', 'name' => 'loading_ports',
                    'style'=>'','multiple'=>'multiple']) !!}
                    <div class="smallFont">Loading Port</div>
                </div>
                <div class="col {{ $errors->has('port_destinations.0')? 'has-error':''}}">
                    {!! Form::select('port_destinations[]',$select['destinationPorts'],
                    null, ['class' => 'form-control selectFormControl port_destinations', 'name' => 'port_destinations',
                    'style'=>'','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-lg-12 col-md-12 col-sm-12" style="margin-top: 10px; text-align: end">
                    <button class="btn btn-blue" id="search" type="submit">
                        <i class="fas fa-search"></i> Search
                    </button>
                    <!-- <button class="btn btn-blue" id="clear" type="reset">
                        Clear Filter
                    </button> -->
                    <button onclick="clearSelect2()" id="searchclearSelect2" class="btn btn-primary" type="reset">Clear
                        Filter</button></div>
        </div>
        </form>
    </div>

    <!-- Botão para recolher a pesquisa  -->
    <div class="col-12" style="text-align: center; margin-top: -16px;">
        <div class="btn" id="dropSearch">
            <div id="openBtn" title="Open Search" style="color: #0d6397 !important">
                <i class="fas fa-chevron-down"></i>
            </div>
        </div>
    </div>

</div>
</div>

<div class="row col col-lg-12 col-sm-12 col-md-12 rounded" style="margin-top: 30px; padding: 20px;">
    <div class="col-3 folha-interna shadow folha-branca-contornada cardAnalisys">
        <div class="row">
            <div class="col" style="text-align: center">
                <img src="{!! asset('/image/analysis.svg') !!}" style="height: 100px;">
            </div>
            <div class="col" style="margin-top: 15px">
                <label for="openShipmentsTxt">Open Shipments:</label>
                <span class="openShipmentsTxt" id="openShipmentsTxt" name="openShipmentsTxt">533</span>
                <br />

                <label for="containersQtyTxt">Container Qty:</label>
                <span class="containersQtyTxt" id="containersQtyTxt" name="containersQtyTxt">4532</span>
                <br />

                <label for="teusTxt">TEUs:</label>
                <span class="teusTxt" id="teusTxt" name="teusTxt">8532</span>
            </div>
        </div>
    </div>

    <div class="col-3 folha-interna shadow folha-branca-contornada cardAnalisys">
        <div class="row">
            <div class="col" style="text-align: center">
                <img src="{!! asset('/image/statistics.svg') !!}" style="height: 100px;">
            </div>
            <div class="col" style="margin-top: 15px">
                <label for="openShipmentsTxt">Open Shipments:</label>
                <span class="openShipmentsTxt" id="openShipmentsTxt" name="openShipmentsTxt">533</span>
                <br />

                <label for="containersQtyTxt">Container Qty:</label>
                <span class="containersQtyTxt" id="containersQtyTxt" name="containersQtyTxt">4532</span>
                <br />

                <label for="teusTxt">TEUs:</label>
                <span class="teusTxt" id="teusTxt" name="teusTxt">8532</span>
            </div>
        </div>
    </div>
</div>


<div class="row folha-interna shadow folha-branca-contornada col col-lg-12 col-sm-12 col-md-12 rounded"
    style="margin-top: 50px; padding: 20px;">
    <div class="table-responsive" style="margin-top: -92px;">
        <div id="toolbar">
            <div class="col" style="align-self: end; text-align: end;">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <button id="addBookingPlanBtn" class="btn btn-padrao">+ Add Booking Plan</button>
                    <button id="addLogisticPlanBtn" class="btn btn-padrao">+ Add Logistcs Plan</button>
                </div>
            </div>
        </div>
        <table class="table-striped text-center" id="table" data-toggle="table" data-search="true"
            data-detail-formatter="detailFormatter" data-page-list="[100, 200, 300, 400, all]" data-show-footer="false"
            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="850" data-show-export="true" data-export-data-type="all" data-query-params="queryParams"
            data-url="/FrontEndTest" data-show-columns="true">
            <thead>
                <tr class="trLineBlue">
                    <th class="icon-action" data-field="id" data-formatter="floatButton"></th>
                    <th data-field="teste1" data-sortable="true">Process Number</th>
                    <th data-field="teste1" data-sortable="true">Client</th>
                    <th data-field="teste1" data-sortable="true">Product</th>
                    <th data-field="teste1" data-sortable="true">Booking</th>
                    <th data-field="teste1" data-sortable="true" data-formatter="dateFormatBLDate">ETA Port</th>
                    <th data-field="teste1" data-sortable="true">Logistics Plan</th>
                    <th data-field="teste1" data-sortable="true">Iso/Flexitank Plan</th>
                    <th data-field="teste1" data-sortable="true">Plant Load</th>
                    <th data-field="teste1" data-sortable="true">Stuffing</th>
                    <th data-field="teste1" data-sortable="true">BL Draft</th>
                    <th data-field="teste1" data-field="id" data-formatter="vgmBtn">VGM</th>
                    <th data-field="teste1" data-field="id" data-formatter="loadingConfirmationBtn">Loading Confirmation
                    </th>
                </tr>
            </thead>
        </table>
    </div>
</div>
<script>
    var $table = $('#table')
    var $button = $('#button')

    function dateFormatBLDate(value, row, index) {
        let date = row['BlDate'];
        date = new Date(date);
        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 vgmBtn(value, row, index) {
        return [
            '<div class="blueIcon"> ' +
            '<i class="fas fa-truck-loading" name="vgm-' + row['id'] + '" id="vgm-' + row['id'] + '"></i> ' +
            '</div>'
        ].join('')
    }

    function loadingConfirmationBtn(value, row, index) {
        return [
            '<div class="blueIcon"> ' +
            '<i class="fas fa-anchor" name="loadingConfirmation-' + row['id'] + '" id="loadingConfirmation-' + row[
                'id'] + '"></i> ' +
            '</div>'
        ].join('')
    }

    function floatButton(value, row, index) {
        $(function () {
            var i = 0;

            $('.circle' + row['id'] + '').on('click', '.btn', function () {
                for (i = 0; i <= 1000; i++) {
                    if ($('.circle' + i + '').hasClass('active')) {

                        $('.circle' + row['id'] + '').toggleClass('active');
                        $('.circle' + i + '').removeClass('active');
                    } else {
                        $('.circle' + row['id'] + '').toggleClass('active');
                    }
                }

            });
        });

        return [
            '<div style="z-index: 9;"class="btn-group-fab-table botaoFlutuante circle' + row['id'] +
            '"name="circle' + row['id'] +
            '" role="group" aria-label="FAB Menu" id="botao-' + row['id'] +
            '"> <div class="fundoDaListagemVessel"></div>' +
            '   <div class="marginForButton">' +
            '       <div type="button" class="btn btn-main-fab-table" title="Menu">' +
            '           <img src="{!! asset("/image/Icon3Lines.svg") !!}" class="btnFabTable1">' +
            '       </div>' +
            '       <div type="button" class="btn btn-sub-fab-table" title="Link">' +
            '           <i class="fas fa-link btnFabTable2"></i>' +
            '       </div>' +
            '       <div type="button" class="btn btn-sub-fab-table" title="Send">' +
            '          <i class="fas fa-paper-plane btnFabTable2"></i>' +
            '       </div>' +
            '       <div type="button" class="btn btn-sub-fab-table" title="Clone">' +
            '           <i class="fas fa-clone btnFabTable2"></i>' +
            '       </div>' +
            '       <div type="button" class="btn btn-sub-fab-table" title="Delete">' +
            '           <i class="fas fa-trash-alt btnFabTable2"></i>' +
            '       </div>' +
            '       <div type="button" class="btn btn-sub-fab-table" title="Edit">' +
            '           <i class="fas fa-pencil-alt btnFabTable2"></i>' +
            '       </div>' +
            '       </a>' +
            '   </div>' +
            '</div>'
        ].join('')
    }

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

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

    })

    function clearSelect2() {
        $(".loading_ports").val(null).trigger('change');
        $(".port_destinations").val(null).trigger('change');
    }

    $(document).ready(function () {
        $('.port_destinations').select2();
        $('.loading_ports').select2();
    });

</script>

@include('bibliotecas.bootstrapTable2')
@include('bibliotecas.select2')
@endsection