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

<style>
    @media (max-width: 800px) {
        .logoArea{
            display: none;
        }
    }
</style>

<!-- D3.js - biblioteca JavaScript para produzir visualizações de dados interativas e dinâmicas em navegadores -->
<script src="https://d3js.org/d3.v7.min.js"></script>

<!-- Barra de Pesquisa -->
<div class="col-12 text-right logoArea">
    <img src="{!! asset('/image/csa_Logo.png') !!}" class="logoCSA">
</div>

<form class="form-inline w-100 justify-content-center" method="GET" action="{{ route('bookingSearch','bookingSearch') }}">
    <div class="col col-lg-12 col-md-12 col-sm-12 display-flex justify-content-center">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" name="bookingSearch" style="width: 38% !important;">
        <button class="btn btn-primary" type="submit">
            <i class="fas fa-search"></i>
            Search
        </button>
    </div>
</form>

<!--Carousel - Menu de semanas -->
<div class="row margin-top-100">
    <!-- Semana -->
    <div class="col-12 col-lg-12 col-md-12 col-sm-12">

        <div class="row display-flex justify-content-center">
            <div class="col-lg-4 col-md-7 col-sm-8">
            <!-- Slides -->
                <div id="carouselWeeks">

                    @foreach ($registers as $item)
                     
                        <div class="week-{{$item->week_number}}">
                            <div class="col-12 text-webkit-center">
                                <div class="card littleMenuWeeks display-flex justify-content-center">
                                    <div class="row">
                                        <div class="col-3 text-right">
                                            <h4>Week</h4> 
                                        </div>
                                        <div class="col-3">
                                            <div class="squareNumber">
                                                <label class="dayOfWeek" name="dayOfWeek">{{$item->week_number}}</label>
                                            </div>
                                        </div>
                                        <div class="col-3 margin-top-10 fontSizeWeek">
                                            <h4>
                                                <label name="firstDayOfWeek">{{$item->week_start}}</label>
                                            </h4>
                                        </div>
                                        <div class="col-3 margin-top-30 fontSizeWeek" style="margin-left:-4%">
                                            <h4>
                                                <label name="lastDayOfWeek">{{$item->week_end}}</label>
                                            </h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
<!--/Carousel -->

<div class="row folha-interna shadow col-12 col-lg-12 col-md-12 col-sm-12 p-3 mb-5 rounded cardOfWeek backgroundimg">

    <!-- Carousel - Cards dos Navios -->
    <div class="areaCarousel">   
        <a class="left carousel-control carousel-prev">
            <i class="fas fa-angle-left margin-top-25" style="font-size:50px; color: #00496b"></i>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control carousel-next">
            <i class="fas fa-angle-right margin-top-25" style="font-size:50px; color: #00496b"></i>
            <span class="sr-only">Next</span>
        </a>
    
        <!--Slides-->
        <div id="carouselVesselStatus">
       
            @foreach ($registers as $item)
                <div class="week-{{$item->week_number}} row col-lg-12 col-sm-12 col-md-12 ">
                    <div class="row">
                    

                        <div class="justify-content-center carriersClientsCarousel padding-15">       
                            <!-- Slides -->
                            @foreach ( $item->vessels as $vessel)
                              @php
                                $sHref = sprintf(
                                    'vessel_id=%s&etaPol_start=%s&etaPol_end=%s'
                                  , $vessel->vessel_id
                                  , $vessel->week_start_json
                                  , $vessel->week_end_json
                                );
                              @endphp

                                <div class="col-4 frameBackground shadow" id="{{$vessel->vessel_id}}{{$item->week_number}}" style="min-width: 300px; max-width: 300px">   
                                    <div class="row rowOfBlocks styleMargin">
                                        <span class="display-none" id="id{{$vessel->vessel_id}}">{{$vessel->vessel_id}}</span>
                                        <span class="display-none" id="start{{$vessel->vessel_id}}">{{$vessel->week_start_json}}</span>
                                        <span class="display-none" id="end{{$vessel->vessel_id}}">{{$vessel->week_end_json}}</span>
                                        <div class="col background1">
                                            <h5><label name="title1Lable[]">{{$vessel->vessel}}</label></h5>
                                        </div>
                                        <div class="col-4 background2">
                                            <h5><label name="title2Lable[]">ETA {{$vessel->vessel_date}}</label></h5>
                                        </div>
                                        <div class="w-100"></div>
                                        
                                        <!-- Teus e Containers -->
                                        <a class="col bg1 vesselBlocks bigBlock montaJsonBooking" href="/vessel/vesselStatus/table/?{{ $sHref }}&teus={{$vessel->Teus}}&vessel={{$vessel->vessel}}&eta=ETA {{$vessel->vessel_date}}&tabletype=1" target="_blank">
                                        <h5><label>TEUS</label></h5>
                                        <h2><label name="teusLbl[]">{{$vessel->Teus}}</label></h2>
                                        </a>
                                        <a class="col bg-tom1 vesselBlocks bigBlock" href="/vessel/vesselStatus/table/?{{ $sHref }}&containers={{$vessel->Containers}}&vessel={{$vessel->vessel}}&eta=ETA {{$vessel->vessel_date}}&tabletype=1" target="_blank">
                                        <h5><label>CONTAINERS</label></h5>
                                        <h2><label name="containersLbl[]">{{$vessel->Containers}}</label></h2>
                                        </a>

                                        <!-- Campo Carriers -->
                                        <div class="w-100"></div>
                                        <div class="col divisorVessel">CARRIERS</div>
                                        <div class="w-100"></div>
                                        <div class="col-12">
                                            <div class="lateralDireita">
                                                <div class="svg-container">
                                                <div id="carriers-{{$vessel->vessel_id}}{{$item->week_number}}"></div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Campo Clients -->
                                        <div class="w-100"></div>
                                        <div class="col divisorVessel">CLIENTS</div>
                                        <div class="w-100"></div>
                                        <div class="col-12">
                                            <div class="lateralDireita">
                                                <div class="svg-container">
                                                    <div id="clients-{{$vessel->vessel_id}}{{$item->week_number}}"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>  
                            @endforeach
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        <!--/Slides-->
    </div>
    <!--/Carousel Wrapper-->
</div>

<script>
    $(document).ready(function(){
        var carriersClientsCarousel = $('.carriersClientsCarousel');
        var maxCarriersClients = Math.round(carriersClientsCarousel.parent('div').width() / 351);

        if(carriersClientsCarousel.children('div').length < maxCarriersClients) {
            maxCarriersClients = carriersClientsCarousel.children('div').length;
        } else{
            maxCarriersClients = 5;
        }

        carriersClientsCarousel.slick({
            infinite: false,
            slidesToShow: maxCarriersClients,
            slidesToScroll: 4,
            arrows: false,
            swipe: true,
            dots: true,
            autoplay: false,
            variableWidth: true, 
            centerMode: false,
            fade: false
        });
    });

    // Customizando setas do Carousel
    $('.carousel-prev').click(function(){ 
        $(this).parent().find('.carriersClientsCarousel').slick('slickPrev');
    } );

    $('.carousel-next').click(function(e){
        e.preventDefault(); 
        $(this).parent().find('.carriersClientsCarousel').slick('slickNext');
    } );
     
</script>

@include('vessel.vesselStatus.style')
@include('vessel.vesselStatus.script.script')
@endsection