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

<!-- Barra de Pesquisa -->
<div class="col col-lg-12 col-md-12 col-sm-12">
    <div class="col col-lg-12 col-md-12 col-sm-12" style="height: 140px">
        <form class="form-inline w-100 search-listas-int" method="GET"
            action="{{ route('bookingSearch','bookingSearch') }}">
            <input class="form-control mr-sm-2 text-primary" type="search" placeholder="Search" name="bookingSearch"
                style="width: 38% !important;margin-left:25%;margin-top:30px;">
            <button class="btn btn-primary btnBarraDePesquisa" type="submit">
                <i class="fas fa-search"></i>
                Search
            </button>
        </form>
        <div class="col" style="text-align: end; top: 27px">
            <img src="{!! asset('/image/csa_Logo.png') !!}" style="height: 100px; margin-top: -23px">
        </div>
    </div>
</div>

<!--Carousel - Menu de semanas -->
<div class="row">
    <!-- Seta esquerda -->
    <div class="col-4 col-lg-4 col-md-4 col-sm-4">
        <a class="carousel-control-prev" id="seta-esquerda-semana" href="#carouselWeeks" role="button"
            data-slide="prev">
            <i class="fas fa-caret-left arrow-left" style="width:40px; height:40px;"></i>
            <span class="sr-only">Previous</span>
        </a>
    </div>

    <!-- Semana -->
    <div class="col-4 col-lg-4 col-md-4 col-sm-4">
        <div id="carouselWeeks" class="carousel slide" data-ride="carousel" data-interval="false" data-pause="hover">

            <!-- Slides -->
            <div class="carousel-inner" role="listbox">

                <!-- Slide 1 -->
                <div class="carousel-item active">
                    <div class="col-12">
                        <div class="card littleMenuWeeks">
                            <div class="row">
                                <div class="col-3">
                                    <h4 class="weeks">Week</h4>
                                </div>
                                <div class="col-3 colDayofWeek">
                                    <div class="contornoNumero">
                                        <label class="dayOfWeek" name="dayOfWeek">40</label>
                                    </div>
                                </div>
                                <div class="col-3 colFirstDayofWeek">
                                    <h4>
                                        <label class="firstDayOfWeek" name="firstDayOfWeek">27th Oct</label>
                                    </h4>
                                </div>
                                <div class="col-3 colLastDayofWeek">
                                    <h4>
                                        <label class="lastDayOfWeek" name="lastDayOfWeek">03rd Nov</label>
                                    </h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Slide 2 -->
                <div class="carousel-item">
                    <div class="col-12">
                        <div class="card littleMenuWeeks">
                            <div class="row">
                                <div class="col-3">
                                    <h4 class="weeks">Week</h4>
                                </div>
                                <div class="col-3 colDayofWeek">
                                    <div class="contornoNumero">
                                        <label class="dayOfWeek" name="dayOfWeek">41</label>
                                    </div>
                                </div>
                                <div class="col-3 colFirstDayofWeek">
                                    <h4>
                                        <label class="firstDayOfWeek" name="firstDayOfWeek">27th Oct</label>
                                    </h4>
                                </div>
                                <div class="col-3 colLastDayofWeek">
                                    <h4>
                                        <label class="lastDayOfWeek" name="lastDayOfWeek">03rd Nov</label>
                                    </h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Seta Direita -->
    <div class="col-4 col-lg-4 col-md-4 col-sm-4">
        <a class="carousel-control-next" id="seta-direita-semana" href="#carouselWeeks" role="button" data-slide="next">
            <i class="fas fa-caret-right arrow-right" style="width:40px; height:40px;"></i>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>
<!-- /Carousel -->

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

    <div class="row folha-interna shadow folha-branca-contornada col col-lg-12 col-sm-12 col-md-12 rounded"
        style="margin-top: 80px">

        <div class="col-4 titleVesselStatusShow">
            <div class="row rowOfBlocks">
                <div class="col background1">
                    <h5><label name="title1Lable">M/V CAP SAN RAPHAEL</label></h5>
                </div>
                <div class="col-4 background2">
                    <h5><label name="title2Lable">ETA Oct 2nd</label></h5>
                </div>
            </div>
        </div>

        <div class="col-3 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 roxo da terceira linha (clients) 
                -->
                <div class="col centralize bg1">
                    <h5><label name="title3Lable">HAPAG 30</label></h5>
                </div>
            </div>
        </div>

        <div class="col-3 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 roxo da terceira linha (clients) 
                -->
                <div class="col centralize bg-tom1">
                    <h5><label name="title4Lable">LOADING TERMINAL BTP</label></h5>
                </div>
            </div>
        </div>

        <div class="col-2 titleVesselStatusShow">
            <div class="row rowOfBlocks">
                <div class="col backButton">
                    <h5>
                        <a href="/vesselstatus">
                            <button class="btn btn-primary centralize">
                                <i class="fas fa-reply"></i> Back
                            </button>
                        </a>
                    </h5>
                </div>
            </div>
        </div>

        <div class="w-100"></div>
        <div class="col-12 backgroundimg2" style="margin-top: 10px !important;">
            <div class="table-responsive">
                <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="/FrontEndTest"
                    data-show-columns="true" style="border: 3px solid #3686EF !important">
                    <thead>
                        <tr class="trSuperBlue">
                            <th class="icon-action" data-field="id" data-formatter="floatButton"></th>
                            <th data-field="teste1" data-sortable="true">Booking</th>
                            <th data-field="teste1" data-sortable="true">Product</th>
                            <th data-field="teste2" data-sortable="true">POD</th>
                            <th data-field="teste1" data-sortable="true">Equipment</th>
                            <th data-field="teste3" data-sortable="true">Qty</th>
                            <th data-field="teste2" data-sortable="true">T/T Days</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <script>
                function floatButton(value, row, index) {           
                    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">' +
                        '           <div type="button" class="btn dropdown-item btn-sub-fab-table openButton firstButton" title="Edit">' +
                        '               <i class="fas fa-pencil-alt" style="margin-left:-6px; margin-bottom:6px"></i>' +
                        '           </div>' +
                        '           <div type="button" class="btn dropdown-item btn-sub-fab-table openButton" title="Delete">' +
                        '               <i class="fas fa-trash-alt" style="margin-left:-6px; margin-bottom:6px"></i>' +
                        '           </div>' +
                        '           <a type="button" class="btn dropdown-item btn-sub-fab-table openButton" title="">' +
                        '               <i class="fas fa-random" style="margin-left:-6px; margin-bottom:6px; color: #3686ef"></i>' +
                        '           </a>' +
                        '       </div>' +
                        '   </div>' +
                        '</div>'
                    ].join('')
                }
            </script>
        </div>
    </div>
</div>

@include('vesselStatus.style')
@include('bibliotecas.bootstrapTable2')
@endsection