@extends('layout.padrao')
@section('title', 'Detention Analysis')
@section('content')

    <style>
        .alert-yellow {
            color: #ffcc00;
        }
    </style>

<div class="cardAnalisys">
    <div class="row folha-interna shadow col col-lg-12 col-sm-12 col-md-12 p-3 mb-5 rounded"
        style="background: #fff !important;">
        <div class="row folha-interna shadow col col-lg-12 col-sm-12 col-md-12 p-3 mb-5 rounded detentionAnalysisCard"
            id="folha-interna-white" style="background: #f9f9f9 !important; border: 1px solid #3686ef;">

            <div class="col" style="text-align: left; margin: 1%;">
                <div>
                    <img src="{{ asset('/image/carriers/logo/' . ((isset($registers->carriers->imageName) && $registers->carriers->imageName != null) ? $registers->carriers->imageName : 'nologo.png' )) }}" style="height: 88px; width: 88px;" alt="Carrier Logo">
                </div>
            </div>
            <div class="col" style="margin-top: 1%;">
                <div class="col"><label id="titleLabel">{{$registers->vessel->descricao ?? ''}}</label>
                </div>
                <div class="col"><label>Carrier: <label id="carrierLabel">{{$registers->carriers->descricao ?? ''}}</label></label></div>
                <div class="col"><label>POL: <label id="polLabel">{{$registers->loading_ports->descricao ?? ''}}</label></label></div>
            </div>
            <div class="col" style="margin-top: 1%;">
                <div class="col"><label id="vLabel">V. 051E</label></div>
                <div class="col"><label>Qty: <label id="qtyLabel">{{$registers->containerQty ?? ''}}</label></label></div>
                <div class="col"><label>POD: <label id="podLabel">{{$registers->code_of_ports1->place ?? ''}}</label></label></div>
            </div>
            <div class="col" style="margin-top: 1%;">
                <div class="col"><label>Booking: <label id="bookingLabel">{{$registers->booking ?? ''}}</label></label></div>
                <div class="col"><label>Product: <label id="productLabel">{{$registers->platforms->descricao ?? ''}}</label></label></div>
                <div class="col"><label>ETA: <label id="etaLabel">{{isset($registers->etaPol) ? date('d-m-Y', strtotime($registers->etaPol)) : ''}}</label></label></div>
                @isset($registers->loading_confirmations[0]->BlDate)
                    <div class="col"><label>BL Date: <label id="dlLabel">{{date('d-m-Y', strtotime($registers->loading_confirmations[0]->BlDate)) ?? ''}}</label></label></div>
                @endisset

            </div>
            <div class="col" style="margin: 1%; text-align: right">
                <div class="btn btn-blue" style="cursor: default;">
                    <h4>Free Time</h4>
                    <h3>{{$registers->freeTimeOrigin ?? '-'}} Days</h3>
                </div>
            </div>
        </div>

        <!--------- Detention Table -------->
        <div class="row folha-interna col col-lg-12 col-sm-12 col-md-12 p-3 mb-5 rounded detentionTable" style="margin-bottom:0px !important" id="folha-interna-white">
            <div class="col">
                <table class="table table-responsive-md bg-white table-hover table-striped" style="box-shadow: 3px 3px 15px #e6e6e6; margin-left: 0.7%; margin-right: 1%">
                    <thead>
                        <tr style="border-top: 5px solid #3686ef">
                            <th scope="col" class="detentionAnalysisTable" style="text-align: center;">Container #</th>
                            <th scope="col" class="detentionAnalysisTable" style="text-align: center;">Empty Release</th>
                            <th scope="col" class="detentionAnalysisTable" style="text-align: center;">Full Delivery</th>
                            <th scope="col-2" class="detentionAnalysisTable" style="text-align: center;">Status</th>
                            <th scope="col" class="detentionAnalysisTable" style="text-align: center;">Time Line</th>
                        </tr>
                    </thead>
                    <tbody>

                    @php $countDetention = 0; @endphp
                    @isset($registers->loadingRequestContainers)


                        @forelse($registers->loadingRequestContainers as $containers)

                            @if($containers->status == 'Inactive')
                                @continue
                            @endif

                            @php
                                $varEmptyReleaseDate = null;
                                $deadLine = null;
                                $varFullDeliveryDate = null;
                                $startDate = null;
                                $endDate = null;

                                $diffDateInDays = null;
                                $diffDateInDaysDeadLine = null;
                                $alertDate = null;

                                $percentageDeadLine = null;

                                $showDots = false;

                                $dotCalc = 0;

                                if (isset($containers->emptyReleaseDate)) {
                                    $varEmptyReleaseDate = \Carbon\Carbon::parse($containers->emptyReleaseDate)->format('Y-m-d');
                                    $deadLine = \Carbon\Carbon::parse($containers->emptyReleaseDate)->addDays($registers->freeTimeOrigin ?? 0)->format('Y-m-d');
                                    $showDots = true;
                                }
                                if (isset($containers->fullDeliveryDate)) $varFullDeliveryDate = \Carbon\Carbon::parse($containers->fullDeliveryDate)->format('Y-m-d');


                                if (isset($varEmptyReleaseDate)) {
                                    $startDate = \Carbon\Carbon::parse($varEmptyReleaseDate);
                                    $endDate = isset($varFullDeliveryDate) ? \Carbon\Carbon::parse($varFullDeliveryDate)->format('Y-m-d') : \Carbon\Carbon::now()->format('Y-m-d');

                                    $diffDateInDays = $startDate->diffInDays($endDate);
                                    $diffDateInDaysDeadLine = $startDate->diffInDays($deadLine);


                                    $alertDate = ($diffDateInDays > $diffDateInDaysDeadLine) /*|| (!isset($varFullDeliveryDate) )*/ ? 'fa fa-exclamation-triangle icon-style-danger' : 'fas fa-check-square icon-style';
                                    if (!isset($varFullDeliveryDate) && $alertDate == 'fas fa-check-square icon-style') $alertDate = 'fa fa-exclamation-triangle alert-yellow';

                                    if ($alertDate == 'fa fa-exclamation-triangle icon-style-danger' && isset($varFullDeliveryDate))
                                        $finalDateTimeLine = $varFullDeliveryDate;
                                    else $finalDateTimeLine = $deadLine;

                                    if (($diffDateInDays > $diffDateInDaysDeadLine) || (!isset($varFullDeliveryDate))) $countDetention += 1;
                                    if ($diffDateInDaysDeadLine > 0)
                                        $percentageDeadLine = round(($diffDateInDays * 100 / $diffDateInDaysDeadLine),2);
                                    else $percentageDeadLine = 0;


                                    $dotCalc = 0;
                                    if     (($percentageDeadLine >= 0)  && ($percentageDeadLine <= 10)) $dotCalc = 1;
                                    elseif (($percentageDeadLine >= 11) && ($percentageDeadLine <= 20)) $dotCalc = 2;
                                    elseif (($percentageDeadLine >= 21) && ($percentageDeadLine <= 30)) $dotCalc = 3;
                                    elseif (($percentageDeadLine >= 31) && ($percentageDeadLine <= 40)) $dotCalc = 4;
                                    elseif (($percentageDeadLine >= 41) && ($percentageDeadLine <= 50)) $dotCalc = 5;
                                    elseif (($percentageDeadLine >= 51) && ($percentageDeadLine <= 60)) $dotCalc = 6;
                                    elseif (($percentageDeadLine >= 61) && ($percentageDeadLine <= 70)) $dotCalc = 7;
                                    elseif (($percentageDeadLine >= 71) && ($percentageDeadLine <= 80)) $dotCalc = 8;
                                    elseif (($percentageDeadLine >= 81) && ($percentageDeadLine <= 90)) $dotCalc = 9;
                                    elseif (($percentageDeadLine >= 91) ) $dotCalc = 10;

                                } else {$diffDateInDays = -1;}
                            @endphp


                            <tr class="centralizedObject">
                                <th scope="row" class="centralizedObject"><label id="containerLabel">{{($containers->containerNumber ?? '')}}</label></th>
                                <td><label id="emptyReleaseLabel">{{ (isset($varEmptyReleaseDate)) ? date('d-m-Y', strtotime($varEmptyReleaseDate)) : ' ' }}</label></td>
                                <td><label id="fullDeliveryLabel">{{ (isset($varFullDeliveryDate)) ? date('d-m-Y', strtotime($varFullDeliveryDate)) : ' ' }}</label></td>
                                <td>
    {{--                                @if(isset($varFullDeliveryDate))--}}
                                        <i class="{{$alertDate ?? 'fa fa-exclamation-triangle icon-style-danger'}}" aria-hidden="true"></i>
    {{--                                @else--}}
    {{--                                    <i class="fa fa-exclamation-triangle icon-style-danger"  style="color: #ffcc00;" aria-hidden="true"></i>--}}
    {{--                                @endif--}}
                                </td>
                                <td>
                                    <div class="{{!$showDots && false ? 'd-none' : ''}}">
                                        <div class="col {{$diffDateInDays == -1 ? 'd-none' : ''}}">

                                            <!-- Primeira bolinha -->
                                            <div class="col mini-text text-dot-1" id="date-dot-1">{{ $varEmptyReleaseDate ?? ''}}<div class="col">
                                                    <div class="verticalLineGray line-dot"></div>
                                                </div>
                                            </div>

                                            <!-- Bolinha Intermediaria -->
                                            @if(isset($dotCalc) && $dotCalc > 2 &&  $dotCalc < 8 )
                                                <div class="col mini-text text-dot-{{$dotCalc ?? '0'}}" id="date-dot-{{$dotCalc ?? '0'}}" >{{$endDate ?? ' - '}}
                                                    <div class="col">
                                                        <div class="verticalLineGray line-dot"></div>
                                                    </div>
                                                </div>
                                            @endif

                                            <!-- Decima bolinha -->
                                            <div class="col mini-text text-dot-10" id="date-dot-10">{{ $finalDateTimeLine ?? ''}}<div class="col">
                                                    <div class="verticalLineGray line-dot"></div>
                                                </div>
                                            </div>

                                        </div>
                                        <span class="dot dot-1  {{ (isset($dotCalc) && $dotCalc >= 1) ? 'dot-green' : '' }}"></span>
                                        <span class="dot dot-2  {{ (isset($dotCalc) && $dotCalc >= 2) ? 'dot-green' : '' }}"></span>
                                        <span class="dot dot-3  {{ (isset($dotCalc) && $dotCalc >= 3) ? 'dot-green' : '' }}"></span>
                                        <span class="dot dot-4  {{ (isset($dotCalc) && $dotCalc >= 4) ? 'dot-green' : '' }}"></span>
                                        <span class="dot dot-5  {{ (isset($dotCalc) && $dotCalc >= 5) ? 'dot-green' : '' }}"></span>
                                        <span class="dot dot-6  {{ (isset($dotCalc) && $dotCalc >= 6) ? 'dot-green' : '' }}"></span>
                                        <span class="dot dot-7  {{ (isset($dotCalc) && $dotCalc >= 7) ? 'dot-green' : '' }}"></span>
                                        <span class="dot dot-8  {{ (isset($dotCalc) && $dotCalc >= 8) ? 'dot-green' : '' }}"></span>
                                        <span class="dot dot-9  {{ (isset($dotCalc) && $dotCalc >= 9) ? 'dot-red' : '' }}"></span>
                                        <span class="dot dot-10 {{ (isset($dotCalc) && $dotCalc >= 10) ? 'dot-red' : '' }}"></span>
                                    </div>
                                </td>
                            </tr>

                        @empty
                            <tr class="text-center">
                                <td colspan="6">No Containers</td>
                            </tr>
                        @endforelse


                    @endisset






{{--                        <tr class="centralizedObject">--}}
{{--                            <th scope="row" class="centralizedObject"><label id="containerLabel">MRKU5178750</label></th>--}}
{{--                            <td><label id="emptyReleaseLabel">10.12.2020</label></td>--}}
{{--                            <td><label id="fullDeliveryLabel">16.12.2020</label></td>--}}
{{--                            <td><i class="far fa-check-square icon-style" aria-hidden="true"></i></td>--}}
{{--                            <td>--}}
{{--                                <div class="col">--}}

{{--                                    <!-- Primeira bolinha -->--}}
{{--                                    <div class="col mini-text text-dot-1" id="date-dot-1">10.12.2020<div class="col">--}}
{{--                                            <div class="verticalLineGray line-dot"></div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}

{{--                                    <!-- Setima bolinha -->--}}
{{--                                    <div class="col mini-text text-dot-7" id="date-dot-7">16.12.2020<div class="col">--}}
{{--                                            <div class="verticalLineGray line-dot"></div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}

{{--                                    <!-- Decima bolinha -->--}}
{{--                                    <div class="col mini-text text-dot-10" id="date-dot-10">25.12.2020<div class="col">--}}
{{--                                            <div class="verticalLineGray line-dot"></div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}

{{--                                </div>--}}
{{--                                <span class="dot dot-1 dot-green"></span>--}}
{{--                                <span class="dot dot-2 dot-green"></span>--}}
{{--                                <span class="dot dot-3 dot-green"></span>--}}
{{--                                <span class="dot dot-4 dot-green"></span>--}}
{{--                                <span class="dot dot-5 dot-green"></span>--}}
{{--                                <span class="dot dot-6 dot-green"></span>--}}
{{--                                <span class="dot dot-7 dot-green"></span>--}}
{{--                                <span class="dot dot-8"></span>--}}
{{--                                <span class="dot dot-9"></span>--}}
{{--                                <span class="dot dot-10"></span>--}}
{{--                            </td>--}}
{{--                        </tr>--}}
{{--            <tr class="centralizedObject">--}}
{{--                <th scope="row" class="centralizedObject"><label id="containerLabel">MRKU5178750</label>--}}
{{--                </th>--}}
{{--                <td><label id="emptyReleaseLabel">10.12.2020</label></td>--}}
{{--                <td><label id="fullDeliveryLabel">16.12.2020</label></td>--}}
{{--                <td><i class="far fa-check-square icon-style" aria-hidden="true"></i>--}}
{{--                </td>--}}
{{--                <td>--}}
{{--                    <div>--}}

{{--                        <!-- Primeira bolinha -->--}}
{{--                        <div class="col mini-text text-dot-1">10.12.2020<div class="col">--}}
{{--                                <div class="verticalLineGray line-dot"></div>--}}
{{--                            </div>--}}
{{--                        </div>--}}

{{--                        <!-- Decima bolinha -->--}}
{{--                        <div class="col mini-text text-dot-10">25.12.2020<div class="col">--}}
{{--                                <div class="verticalLineGray line-dot"></div>--}}
{{--                            </div>--}}
{{--                        </div>--}}

{{--                        <span class="dot dot-1 dot-green"></span>--}}
{{--                        <span class="dot dot-2 dot-green"></span>--}}
{{--                        <span class="dot dot-3 dot-green"></span>--}}
{{--                        <span class="dot dot-4 dot-green"></span>--}}
{{--                        <span class="dot dot-5 dot-green"></span>--}}
{{--                        <span class="dot dot-6 dot-green"></span>--}}
{{--                        <span class="dot dot-7 dot-green"></span>--}}
{{--                        <span class="dot dot-8 dot-green"></span>--}}
{{--                        <span class="dot dot-9 dot-green"></span>--}}
{{--                        <span class="dot dot-10 dot-green"></span>--}}
{{--                    </div>--}}
{{--                </td>--}}
{{--            </tr>--}}
{{--            <tr class="centralizedObject">--}}
{{--                <th scope="row" class="centralizedObject"><label id="containerLabel">MRKU5178750</label>--}}
{{--                </th>--}}
{{--                <td><label id="emptyReleaseLabel">10.12.2020</label></td>--}}
{{--                <td><label id="fullDeliveryLabel">16.12.2020</label></td>--}}
{{--                <td><i class="fa fa-exclamation-triangle icon-style-danger" aria-hidden="true"></i></td>--}}
{{--                <td>--}}
{{--                    <div>--}}
{{--                        <!-- Primeira bolinha -->--}}
{{--                        <div class="col mini-text text-dot-1">10.12.2020<div class="col">--}}
{{--                                <div class="verticalLineGray line-dot"></div>--}}
{{--                            </div>--}}
{{--                        </div>--}}

{{--                        <!-- Setima bolinha -->--}}
{{--                        <div class="col mini-text text-dot-7">16.12.2020<div class="col">--}}
{{--                                <div class="verticalLineGray line-dot"></div>--}}
{{--                            </div>--}}
{{--                        </div>--}}

{{--                        <!-- Decima bolinha -->--}}
{{--                        <div class="col mini-text text-dot-10">25.12.2020<div class="col">--}}
{{--                                <div class="verticalLineGray line-dot"></div>--}}
{{--                            </div>--}}
{{--                        </div>--}}

{{--                        <span class="dot dot-1 dot-green"></span>--}}
{{--                        <span class="dot dot-2 dot-green"></span>--}}
{{--                        <span class="dot dot-3 dot-green"></span>--}}
{{--                        <span class="dot dot-4 dot-green"></span>--}}
{{--                        <span class="dot dot-5 dot-green"></span>--}}
{{--                        <span class="dot dot-6 dot-green"></span>--}}
{{--                        <span class="dot dot-7 dot-green"></span>--}}
{{--                        <span class="dot dot-8 dot-green"></span>--}}
{{--                        <span class="dot dot-9 dot-red"></span>--}}
{{--                        <span class="dot dot-10 dot-red"></span>--}}
{{--                    </div>--}}
{{--                </td>--}}
{{--            </tr>--}}
            </tbody>
            </table>
        </div>

        <!-- Buttons -->
        <div class="col col-lg-12 col-md-12 col-sm-12 form-group detentionAnalysisCard" style="text-align: right">

            <div class="row">
                <div class="col" style="text-align: left; position: absolute; margin-top: 30px;"><label>Number of Equipments in Detention: <label id="carrierLabel">{{$countDetention}} </label></label></div>
                <div class="col-7"></div>

                <div class="col-5">
                    <a title="" href="javascript:history.back()"  style="width:50px;">
                        <button class="btn btn-style" type="button" style='width:50px;'><i
                                class="fa fa-arrow-circle-left" aria-hidden="true"
                                style="font-size: 25px; color: white" ></i>
                        </button>
                    </a>

                    <a title="" href="{{\Request::getRequestUri() . '&export'}}" style="width:50px; margin-left: 40px; margin-right: 6%">
                        <i class="fas fa-download icon-style" style="font-size: 25px;"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
</div>


@endsection