@extends('layout.padrao')
@section('content')
@section('title', 'Vessel Status')

<div class="row folha-interna col col-lg-12 col-sm-12 col-md-12">

    <div class="row folha-interna shadow folha-branca-contornada col col-lg-12 col-sm-12 col-md-12 rounded">

        <div class="col-12">
            <div class="row">
                <div class="col-lg-12 col-sm-12 col-md-12 titleVesselStatusShow">
                    <div class="row">
                        <div class="col backButton">
                            <h5>
                                <a href="/vessel/vesselStatus">
                                    <button class="btn btn-primary centralize">
                                        <i class="fas fa-reply"></i> Back
                                    </button>
                                </a>
                            </h5>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-sm-12 col-md-12 titleVesselStatusShow">
                    <div class="row rowOfBlocks">
                        <div class="col background1List bgTitleSpan">
                            <h5><label name="title1Lable" class="vesselLabel"></label></h5>
                        </div>
                        <div class="col-4 background2List bgTitleSpan">
                            <h5><label name="title2Lable" class="etaLabel"></label></h5>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-sm-12 col-md-12 titleVesselStatusShow">
                    <div class="row rowOfBlocks">

                        <!-- 
                        Classes com cores dos cards da primeira tela de vesselStatus

                        Classe .bg1 -> Tom azul escuro da primeira linha
                        Classe .bg2 -> Tom azul da segunda linha (carriers)
                        Classe .bg3 -> Tom azul da terceira linha (clients) 
                        -->
                        <div class="col centralize bgTitleOption bgTitleSpan">
                            <h5><label name="title3Lable" class="titleOptionSelected"></label></h5>
                        </div>
                    </div>
                </div>

                <div class="col-lg-5 col-sm-12 col-md-12 titleVesselStatusShow">
                    <div class="row rowOfBlocks">
                        <!-- 
                        Classes com outros tons de cores dos cards da primeira tela de vesselStatus

                        Classe .bg-tom1 -> Tom azul escuro da primeira linha
                        Classe .bg-tom2 -> Tom azul da segunda linha (carriers)
                        Classe .bg-tom3 -> Tom azul da terceira linha (clients) 
                        -->
                        <div class="col centralize bgLoadingTerminal bgTitleSpan">
                            <h5><label name="title4Lable" class="loadingTerminal"></label></h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>

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

        <div class="col-12 backgroundimg2" style="margin-top: 10px !important;">
            <div class="table-responsive"></div>
            @include('vessel.vesselStatus.tables.script')
            <!-- Importando tabelas -->
            <script>
                queryStringVessel = window.location.search;

                function getParameterByName(name, url = window.location.search) {
                    name = name.replace(/[\[\]]/g, '\\$&');
                    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
                    results = regex.exec(url);
                    if (!results) return null;
                    if (!results[2]) return '';
                    return decodeURIComponent(results[2].replace(/\+/g, ' '));
                }

                var tableType = getParameterByName('tabletype');

                if(tableType == 1){
                    // week    -> tabletype=1
                    $('.table-responsive').html(
                        '<div id="toolbar"></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="true" data-show-pagination-switch="true" data-show-refresh="true"' +
                            'data-click-to-select="true" data-show-fullscreen="true" data-pagination="true" data-locale="en-US"' +
                            'data-toolbar="#toolbar" data-show-toggle="true" data-height="750" data-show-export="true"' +
                            'data-export-data-type="all" data-query-params="queryParams" data-url="/vessel/vesselStatus/show'+ queryStringVessel +'"' +
                            'data-show-columns="true" style="border: 3px solid #3686EF !important">' +
                            '<thead>' +
                                '<tr class="trSuperBlue">'+
                                    '@can("internalRoutine", App\Usuario::class)'+
                                        '<th class="icon-action" id="floatButton" data-field="id" data-formatter="floatButton"></th>' +
                                    '@endcan'+
                                    
                                    '<th class="display-none" data-field="loadingType" data-sortable="true">loadingType</th>' +
                                    '<th class="display-none" data-field="SAOE" data-sortable="true">SAOE</th>' +
                                    '<th class="text-center" data-field="clients_fantasyName" data-sortable="true">Client</th>' +
                                    '<th class="text-center" data-field="carriers.fantasyName" data-sortable="true">Carrier</th>' +
                                    '<th class="text-center" data-field="booking" data-sortable="true">Booking</th>' +
                                    '<th class="text-center" data-field="platforms.descricao" data-sortable="true">Product</th>' +
                                    '<th class="text-center" data-field="code_of_ports1.id" data-formatter="getfullname" data-sortable="true">POD</th>' +
                                    '<th class="text-center" data-field="container_types.descricao" data-sortable="true">Equipment</th>' +
                                    '<th class="text-center" data-field="containerQty" data-sortable="true">Qty</th>' +
                                    '<th class="text-center" data-field="transitTime" data-sortable="true">T/T Days</th>' +
                                '</tr>' +
                            '</thead>' +
                        '</table>' 
                    );
                    $('.bgTitleOption').addClass('bg1');
                    $('.bgLoadingTerminal').addClass('bg-tom1');
                    
                } else if (tableType == 2){
                    // carrier -> tabletype=2
                    $('.table-responsive').html(
                        '<div id="toolbar"></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="true" data-show-pagination-switch="true" data-show-refresh="true"' +
                            'data-click-to-select="true" data-show-fullscreen="true" data-pagination="true" data-locale="en-US"' +
                            'data-toolbar="#toolbar" data-show-toggle="true" data-height="750" data-show-export="true"' +
                            'data-export-data-type="all" data-query-params="queryParams" data-url="/vessel/vesselStatus/show'+ queryStringVessel +'"' +
                            'data-show-columns="true" style="border: 3px solid #3686EF !important">' +
                            '<thead>' +
                                '<tr class="trSuperBlue">'+
                                    '@can("internalRoutine", App\Usuario::class)'+
                                        '<th class="icon-action" id="floatButton" data-field="id" data-formatter="floatButton"></th>' +
                                    '@endcan'+
                                    '<th class="display-none" data-field="loadingType" data-sortable="true">loadingType</th>' +
                                    '<th class="display-none" data-field="SAOE" data-sortable="true">SAOE</th>' +
                                    '<th class="text-center" data-field="clients_fantasyName" data-sortable="true">Client</th>' +
                                    '<th class="text-center" data-field="booking" data-sortable="true">Booking</th>' +
                                    '<th class="text-center" data-field="platforms.descricao" data-sortable="true">Product</th>' +
                                    '<th class="text-center" data-field="code_of_ports1.id" data-formatter="getfullname" data-sortable="true">POD</th>' +
                                    '<th class="text-center" data-field="container_types.descricao" data-sortable="true">Equipment</th>' +
                                    '<th class="text-center" data-field="containerQty" data-sortable="true">Qty</th>' +
                                    '<th class="text-center" data-field="transitTime" data-sortable="true">T/T Days</th>' +
                                '</tr>' +
                            '</thead>' +
                        '</table>' 
                    );
                    $('.bgTitleOption').addClass('bg2');
                    $('.bgLoadingTerminal').addClass('bg-tom2');

                } else if (tableType == 3){
                    // client  -> tabletype=3
                    $('.table-responsive').html(
                        '<div id="toolbar"></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="true" data-show-pagination-switch="true" data-show-refresh="true"' +
                            'data-click-to-select="true" data-show-fullscreen="true" data-pagination="true" data-locale="en-US"' +
                            'data-toolbar="#toolbar" data-show-toggle="true" data-height="750" data-show-export="true"' +
                            'data-export-data-type="all" data-query-params="queryParams" data-url="/vessel/vesselStatus/show'+ queryStringVessel +'"' +
                            'data-show-columns="true" style="border: 3px solid #3686EF !important">' +
                            '<thead>' +
                                '<tr class="trSuperBlue">'+
                                    '@can("internalRoutine", App\Usuario::class)'+
                                        '<th class="icon-action" id="floatButton" data-field="id" data-formatter="floatButton"></th>' +
                                    '@endcan'+
                                    '<th class="display-none" data-field="loadingType" data-sortable="true">loadingType</th>' +
                                    '<th class="display-none" data-field="SAOE" data-sortable="true">SAOE</th>' +
                                    '<th class="text-center" data-field="carriers.fantasyName" data-sortable="true">Carrier</th>' +
                                    '<th class="text-center" data-field="booking" data-sortable="true">Booking</th>' +
                                    '<th class="text-center" data-field="platforms.descricao" data-sortable="true">Product</th>' +
                                    '<th class="text-center" data-field="loading_ports.descricao" data-sortable="true">POL</th>' +
                                    '<th class="text-center" data-field="code_of_ports1.id" data-formatter="getfullname" data-sortable="true">POD</th>' +
                                    '<th class="text-center" data-field="container_types.descricao" data-sortable="true">Equipment</th>' +
                                    '<th class="text-center" data-field="containerQty" data-sortable="true">Qty</th>' +
                                    '<th class="text-center" data-field="transitTime" data-sortable="true">T/T Days</th>' +
                                '</tr>' +
                            '</thead>' +
                        '</table>' 
                    );
                    $('.bgTitleOption').addClass('bg3');
                    $('.bgLoadingTerminal').addClass('bg-tom3');
                }

                function getfullname(value, row, index){
                  return [
                      row['code_of_ports1']['place'] + ', ' + row['code_of_ports1']['country']
                  ].join('')
                }

                function floatButton(value, row, index) {
                    var bookingId = row['id'];
                    var loadingType = row['loadingType'];
                    var SAOE = row['SAOE'];

                    var strFirstFour = SAOE.substring(0,4);

                    if(loadingType == "BKP"){
                        if(strFirstFour == "SAOI"){
                            return [
                            '<div class="btn-group dropup">' +
                            '   <div style="z-index: 9;"class="btn-group-fab-table botaoFlutuante circle" name="circle" role="group" aria-label="FAB Menu" > ' +
                            '       <div type="button" class="btn btn-main-fab-table dropdown-toggle" title="Menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
                            '           <img src="{!! asset("/image/Icon3Lines.svg") !!}" class="btnFabTable1">' +
                            '       </div>' +
                            '       <div class="dropdown-menu openButton">' +
                            '           <a href="/loadingPlan/import/'+bookingId+'/edit?tipo=loadingBkImport" title="Edit" target="_blank">' +
                            '               <div type="button" class="btn dropdown-item btn-sub-fab-table openButton firstButton">' +
                            '                   <i class="fas fa-pencil-alt"></i>' +
                            '               </div>' +
                            '           </a>' +
                            '           <a class="link" data-toggle="modal" data-target="#deleteReason" title="Delete" data-catid="'+ bookingId +'" href="" >' +
                            '               <div type="button" class="btn dropdown-item btn-sub-fab-table openButton">' +
                            '                   <i class="fas fa-trash-alt"></i>' +
                            '               </div>' +
                            '           </a>' +
                            '           <a class="link" data-toggle="modal" data-target="#reason" title="Transfer" data-catid="'+ bookingId +'" href="">' +
                            '               <div type="button" class="btn dropdown-item btn-sub-fab-table openButton">' +
                            '                   <i class="fas fa-random" style="color: #3686ef"></i>' +
                            '               </div>' +
                            '           </a>' +
                            '       </div>' +
                            '   </div>' +
                            '</div>'
                            ].join('')
                        }else{
                            return [
                            '<div class="btn-group dropup">' +
                            '   <div style="z-index: 9;"class="btn-group-fab-table botaoFlutuante circle" name="circle" role="group" aria-label="FAB Menu" > ' +
                            '       <div type="button" class="btn btn-main-fab-table dropdown-toggle" title="Menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
                            '           <img src="{!! asset("/image/Icon3Lines.svg") !!}" class="btnFabTable1">' +
                            '       </div>' +
                            '       <div class="dropdown-menu openButton">' +
                            '           <a href="/loadingPlan/bk/'+bookingId+'/edit" title="Edit" target="_blank">' +
                            '               <div type="button" class="btn dropdown-item btn-sub-fab-table openButton firstButton">' +
                            '                   <i class="fas fa-pencil-alt"></i>' +
                            '               </div>' +
                            '           </a>' +
                            '           <a class="link" data-toggle="modal" data-target="#deleteReason" title="Delete" data-catid="'+ bookingId +'" href="" >' +
                            '               <div type="button" class="btn dropdown-item btn-sub-fab-table openButton">' +
                            '                   <i class="fas fa-trash-alt"></i>' +
                            '               </div>' +
                            '           </a>' +
                            '           <a class="link" data-toggle="modal" data-target="#reason" title="Transfer" data-catid="'+ bookingId +'" href="">' +
                            '               <div type="button" class="btn dropdown-item btn-sub-fab-table openButton">' +
                            '                   <i class="fas fa-random" style="color: #3686ef"></i>' +
                            '               </div>' +
                            '           </a>' +
                            '       </div>' +
                            '   </div>' +
                            '</div>'
                            ].join('')
                        }
                    } else{
                        return [
                            '<div class="btn-group dropup">' +
                            '   <div style="z-index: 9;"class="btn-group-fab-table botaoFlutuante circle" name="circle" role="group" aria-label="FAB Menu" > ' +
                            '       <div type="button" class="btn btn-main-fab-table dropdown-toggle" title="Menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
                            '           <img src="{!! asset("/image/Icon3Lines.svg") !!}" class="btnFabTable1">' +
                            '       </div>' +
                            '       <div class="dropdown-menu openButton">' +
                            '           <a href="/loadingPlan/'+ bookingId +'/edit" title="Edit" target="_blank">' +
                            '               <div type="button" class="btn dropdown-item btn-sub-fab-table openButton firstButton">' +
                            '                   <i class="fas fa-pencil-alt"></i>' +
                            '               </div>' +
                            '           </a>' +
                            '           <a class="link" data-toggle="modal" data-target="#deleteReason" title="Delete" data-catid="'+ bookingId +'" href="" >' +
                            '               <div type="button" class="btn dropdown-item btn-sub-fab-table openButton">' +
                            '                   <i class="fas fa-trash-alt"></i>' +
                            '               </div>' +
                            '           </a>' +
                            '           <a class="link" data-toggle="modal" data-target="#reason" title="Transfer" data-catid="'+ bookingId +'" href="">' +
                            '               <div type="button" class="btn dropdown-item btn-sub-fab-table openButton">' +
                            '                   <i class="fas fa-random" style="color: #3686ef"></i>' +
                            '               </div>' +
                            '           </a>' +
                            '       </div>' +
                            '   </div>' +
                            '</div>'
                        ].join('')
                    }
                }
            </script>
        </div>
    </div>
</div>
@include('include.modal_delete_reason', ["rota" => "loadingPlan"])
@include('include.modal_reason', ["rota" => "LoadingTransfer"])
@include('vessel.vesselStatus.style')
@include('bibliotecas.bootstrapTable2WithModal')
@endsection