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

<!-- 
    D3.js - biblioteca JavaScript para produzir visualizações de dados 
    interativas e dinâmicas em navegadores 
    -->
<script src="https://d3js.org/d3.v6.min.js"></script>
<!-- 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 p-3 mb-5 rounded cardOfWeek backgroundimg">

    <!-- Carousel - Cards dos Navios -->
    <div id="carouselVesselStatus" class="carousel slide" data-ride="carousel" data-interval="false" data-pause="hover"
        style="margin-top: 45px">

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

            <!--First slide-->
            <div class="carousel-item active">
                <div style="margin-top: 40px;">
                    <div class="row justify-content-between">
                        <div class="col-3 frameBackground shadow">
                            <div class="row rowOfBlocks styleMargin">
                                <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 class="w-100"></div>
                                <!-- Teus e Containers -->
                                <a class="col bg1 vesselBlocks blockBig" href="/vesselstatus/show/" target="_blank">
                                    <h5><label>TEUS</label></h5>
                                    <h2><label name="teusLbl[]">69</label></h2>
                                </a>
                                <a class="col bg-tom1 vesselBlocks blockBig" href="/vesselstatus/show/" target="_blank">
                                    <h5><label>CONTAINERS</label></h5>
                                    <h2><label name="containersLbl[]">20</label></h2>
                                </a>
                                <div class="w-100"></div>
                                <div class="col divisorVessel">CARRIERS</div>
                                <div class="w-100"></div>

                                <div class="col-12">
                                    <div class="lateralDireita">
                                        <div id="container" class="svg-container">
                                            <div id="carriers-1"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="w-100"></div>
                                <div class="col divisorVessel">CLIENTS</div>
                                <div class="w-100"></div>
                                <div class="col-12">
                                    <div class="lateralDireita">
                                        <div id="container" class="svg-container">
                                            <div id="clients-1"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-3 frameBackground shadow">
                            <div class="row rowOfBlocks styleMargin">
                                <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 class="w-100"></div>

                                <!-- Teus e Containers -->
                                <a class="col bg1 vesselBlocks blockBig" href="/vesselstatus/show/" target="_blank">
                                    <h5><label>TEUS</label></h5>
                                    <h2><label name="teusLbl[]">69</label></h2>
                                </a>
                                <a class="col bg-tom1 vesselBlocks blockBig" href="/vesselstatus/show/" target="_blank">
                                    <h5><label>CONTAINERS</label></h5>
                                    <h2><label name="containersLbl[]">20</label></h2>
                                </a>
                                <div class="w-100"></div>

                                <div class="col divisorVessel">CARRIERS</div>
                                <div class="w-100"></div>
                                <div class="col-12">
                                    <div class="lateralDireita">
                                        <div id="container" class="svg-container">
                                            <div id="carriers-2"></div>
                                        </div>
                                    </div>
                                </div>

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

                                <div class="col divisorVessel">CLIENTS</div>
                                <div class="w-100"></div>
                                <div class="col-12">
                                    <div class="lateralDireita">
                                        <div id="container" class="svg-container">
                                            <div id="clients-2"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-3 frameBackground shadow">
                            <div class="row rowOfBlocks styleMargin">
                                <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 class="w-100"></div>
                                <!-- Teus e Containers -->
                                <a class="col bg1 vesselBlocks blockBig" href="/vesselstatus/show/" target="_blank">
                                    <h5><label>TEUS</label></h5>
                                    <h2><label name="teusLbl[]">69</label></h2>
                                </a>
                                <a class="col bg-tom1 vesselBlocks blockBig" href="/vesselstatus/show/" target="_blank">
                                    <h5><label>CONTAINERS</label></h5>
                                    <h2><label name="containersLbl[]">20</label></h2>
                                </a>
                                <div class="w-100"></div>

                                <div class="col divisorVessel">CARRIERS</div>
                                <div class="w-100"></div>
                                <div class="col-12">
                                    <div class="lateralDireita">
                                        <div id="container" class="svg-container">
                                            <div id="carriers-3"></div>
                                        </div>
                                    </div>
                                </div>

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

                                <div class="col divisorVessel">CLIENTS</div>
                                <div class="w-100"></div>
                                <div class="col-12">
                                    <div class="lateralDireita">
                                        <div id="container" class="svg-container">
                                            <div id="clients-3"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!--/First slide-->

            <!--Second slide-->
            <div class="carousel-item">
                <div style="margin-top: 40px;">
                    <div class="row justify-content-between">

                        <div class="col-3 frameBackground shadow">
                            <div class="row rowOfBlocks styleMargin">
                                <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 class="w-100"></div>
                                <!-- Teus e Containers -->
                                <a class="col bg1 vesselBlocks blockBig" href="/vesselstatus/show/" target="_blank">
                                    <h5><label>TEUS</label></h5>
                                    <h2><label name="teusLbl[]">69</label></h2>
                                </a>
                                <a class="col bg-tom1 vesselBlocks blockBig" href="/vesselstatus/show/" target="_blank">
                                    <h5><label>CONTAINERS</label></h5>
                                    <h2><label name="containersLbl[]">20</label></h2>
                                </a>
                                <div class="w-100"></div>

                                <div class="col divisorVessel">CARRIERS</div>
                                <div class="w-100"></div>
                                <div class="col-12">
                                    <div class="lateralDireita">
                                        <div id="container" class="svg-container">
                                            <div id="carriers-4"></div>
                                        </div>
                                    </div>
                                </div>

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

                                <div class="col divisorVessel">CLIENTS</div>
                                <div class="w-100"></div>
                                <div class="col-12">
                                    <div class="lateralDireita">
                                        <div id="container" class="svg-container">
                                            <div id="clients-4"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-3 frameBackground shadow">
                            <div class="row rowOfBlocks styleMargin">
                                <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 class="w-100"></div>
                                <!-- Teus e Containers -->
                                <a class="col bg1 vesselBlocks blockBig" href="/vesselstatus/show/" target="_blank">
                                    <h5><label>TEUS</label></h5>
                                    <h2><label name="teusLbl[]">69</label></h2>
                                </a>
                                <a class="col bg-tom1 vesselBlocks blockBig" href="/vesselstatus/show/" target="_blank">
                                    <h5><label>CONTAINERS</label></h5>
                                    <h2><label name="containersLbl[]">20</label></h2>
                                </a>
                                <div class="w-100"></div>

                                <div class="col divisorVessel">CARRIERS</div>
                                <div class="w-100"></div>
                                <div class="col-12">
                                    <div class="lateralDireita">
                                        <div id="container" class="svg-container">
                                            <div id="carriers-5"></div>
                                        </div>
                                    </div>
                                </div>

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

                                <div class="col divisorVessel">CLIENTS</div>
                                <div class="w-100"></div>
                                <div class="col-12">
                                    <div class="lateralDireita">
                                        <div id="container" class="svg-container">
                                            <div id="clients-5"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-3 frameBackground shadow">
                            <div class="row rowOfBlocks styleMargin">
                                <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 class="w-100"></div>
                                <!-- Teus e Containers -->
                                <a class="col bg1 vesselBlocks blockBig" href="/vesselstatus/show/" target="_blank">
                                    <h5><label>TEUS</label></h5>
                                    <h2><label name="teusLbl[]">69</label></h2>
                                </a>
                                <a class="col bg-tom1 vesselBlocks blockBig" href="/vesselstatus/show/" target="_blank">
                                    <h5><label>CONTAINERS</label></h5>
                                    <h2><label name="containersLbl[]">20</label></h2>
                                </a>
                                <div class="w-100"></div>

                                <div class="col divisorVessel">CARRIERS</div>
                                <div class="w-100"></div>
                                <div class="col-12">
                                    <div class="lateralDireita">
                                        <div id="container" class="svg-container">
                                            <div id="carriers-6"></div>
                                        </div>
                                    </div>
                                </div>

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

                                <div class="col divisorVessel">CLIENTS</div>
                                <div class="w-100"></div>
                                <div class="col-12">
                                    <div class="lateralDireita">
                                        <div id="container" class="svg-container">
                                            <div id="clients-6"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!--/Second slide-->

            <a class="carousel-control-prev" href="#carouselVesselStatus" 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>
            <a class="carousel-control-next" href="#carouselVesselStatus" 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>
        <!--/Slides-->
    </div>
    <!--/Carousel Wrapper-->
    <Br /><Br />
</div>

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