@extends('layout.padrao')
@section('title', 'BL Draft')
@section('content')

<!-- Botao para dowload do pdf -->
<div class="row w-100 col-lg-12 col-sm-12 col-md-12">
    <div class="col" style="text-align: end; margin-bottom: 10px; margin-right: 4%;">
        <button class="btn-pdf" value="PDF print" id="btnPrint" onclick="CriaPDF()">
            Download <i class="far fa-file-pdf"></i>
        </button>
    </div>
</div>

<div class="row w-100 col-lg-12 col-sm-12 col-md-12" id="pdf">
    <style>
        table.table-bordered {
            border: 2px solid black;
            margin-top: 20px;
        }

        table.table-bordered>thead>tr {
            border: 2px solid black;
            background: #fff;
            color: black;
        }

        table.table-bordered>tbody>tr>td,
        .table-bordered>tbody>tr>th,
        .table.table-bordered>tbody>tr,
        .table-bordered>thead>tr>th,
        table-bordered>tbody>tr>th {
            border: 1px solid black !important;
        } 

        label, p, tr, .sealNumber, .descriptionOfPackages {
            font-size: 10px !important;
        }

        .lateral-superior-esquerda-redonda {
            border-radius: 15px 0px 0px 0px;
        }

        .lateral-superior-direita-redonda {
            border-radius: 0px 15px 0px 0px;
        }

        .lateral-inferior-esquerda-redonda {
            border-radius: 0px 0px 0px 15px;
        }

        .lateral-inferior-direita-redonda {
            border-radius: 0px 0px 15px 0px;
        }
    </style>

    <div class="row tamanhoPDF" style="width: 90%; margin-left: 5%">
        <!-- Pagina 1 -->
        <!-- Logo -->
        <div class="col borderBackground lateral-superior-esquerda-redonda noBordersBottom">
            <div class="row">
                <div style="min-width: 130px">
                    <img src="{!! asset('/image/tabex_export.png') !!}" alt="logo" style="padding:6px; width: 130px;">
                </div>
                <div class="col">
                    <h5>{{$register->loading_requests->carriers->name ?? ''}}</h5>
                    <p style="font-weight: bold">
                        {{$register->loading_requests->carriers->address ?? ''}} 
                        {{$register->loading_requests->carriers->CEP ?? ''}}, 
                        {{$register->loading_requests->carriers->cities->descricao ?? ''}},
                        {{$register->loading_requests->carriers->countries->descricao ?? ''}}
                    </p>
                    <p style="margin-top: -10px; font-weight: bold">Website: {{$register->loading_requests->carriers->url ?? null}}</p>
                    <p style="text-align: end"></p>
                </div>
            </div>
        </div>
        <div class="col-6 borderBackground lateral-superior-direita-redonda noBordersLeft noBordersBottom">
            <div class="row">
                <div class="col-6">
                    <h5 style="font-weight: bold">
                        BILL OF LADING No. <Br /><Br />
                        NON-NEGOTIABLE COPY <Br />
                    </h5>
                </div>
                <div class="col">
                    <h5 style="font-weight: bold">
                        <label name="billOfLandingNoLabel" style="font-size: 14px !important">{{$register->loading_requests->latestLoading_confirmations->BlNumber ?? '-'}}</label>
                    </h5>
                    <h6 style="text-align: end">
                        <p>"Port-To-Port" or "Combined</p>
                        <p style="margin-top: -10px;">Transport"(see Clause 1)</p>
                    </h6>
                </div>
                <div class="w-100"></div>
                <div class="col-6 borderBackground noBordersLeft noBordersBottom" style="height: 60px">
                    <p>
                        NO.& SEQUENCE OF ORIGINAL B/L's
                    </p>
                    <div style="text-align: center">
                        <label class="fontNormal" name="noSequenceOriginalBlLabel"></label>
                    </div>
                </div>
                <div class="col borderBackground noBordersLeft noBordersBottom" style="border-right: none">
                    <p>
                        NO. OF RIDER PAGES
                    </p>
                    <div style="text-align: center">
                        <label class="fontNormal" name="noRiderPagesLabel"></label>
                    </div>
                </div>
            </div>
        </div>

        <div class="w-100"></div>
        
        <div class="row col col-lg-12 col-sm-12 col-md-12 p-0 m-0">
            {{-- Lado esquerdo --}}
            <div class="col col-lg-6 col-sm-6 col-md-6 p-0 m-0">
                <div class="col-12 borderBackground noBordersBottom" style="height: 130px">

                    <p style="margin-top: 10px">SHIPPER</p>
                    <div class="shipperLabel">
                        <div class="marginForLabel">
                            <label class="miniTexts" name="shipperTitleLabel">{!!App\Http\Controllers\BlController::get_companie_address($register->id, 'shipper')!!}</label>
                        </div>
                        
                    </div>
                </div>
                <div class="col-12 borderBackground noBordersBottom" style="height: 130px">
                    <p style="margin-top: 10px">CONSIGNEE: This B/L is not negotiable unless marked "To Order" or "To Order of
                        ..." here</p>
                    <div class="consigneeLabel">
                        <div class="marginForLabel">
                            <label class="miniTexts" name="consigneeTitleLabel">{!!App\Http\Controllers\BlController::get_companie_address($register->id, 'consignee')!!}</label>
                        </div>
                        
                    </div>
                </div>

                <div class="col-12 borderBackground noBordersBottom" style="height: 130px">
                    <p style="margin-top: 10px">
                        NOTIFY PARTIES : (No responsibility shall attach to Carrier or to his Agent for
                        failure to notify - see
                        Clause 20)
                    </p>
                    <div class="notifyPartiesLabel">
        
                        <div class="marginForLabel"><label class="miniTexts" name="notifyPartiesTitleLabel">{!!App\Http\Controllers\BlController::get_companie_address($register->id, 'notify')!!}</label></div>
                        
        
                    </div>
                </div>
            </div>
            {{-- Lado direito --}}
            <div class="col col-lg-6 col-sm-6 col-md-6 p-0 m-0">
                <div class="col-12 borderBackground noBordersLeft noBordersBottom" style="height: 130px">
                    <p style="margin-top: 10px">CARRIER'S AGENTS ENDORSEMENTS: (Include Agent(s) at POD)</p>
                    <b>
                        <p class="miniTexts">SHIPPER'S LOAD, COUNT AND SEALED</p>
                        <p class="miniTexts" style="margin-top: -10px;">FCL/FCL</p>
                    </b>
                </div>

                <div class="col-12 borderBackground noBordersLeft noBordersBottom noBordersTop" style="height: 130px">
                    <label class="miniTexts" for="lloydsImoNumberLabel" style="margin-top: 35px">Lloyds/IMO Number:</label>
                    <label class="miniTexts" name="lloydsImoNumberLabel">{{$register->loading_requests->u_n_s->code ?? '-'}}</label>
                    <b>
                        <p class="miniTexts" style="margin-top: -5px;">
                            {{$register->loading_requests->u_n_s->descricao ?? ' '}}
                        </p>
                    </b>
                </div>
        
                
                <div class="col-12 borderBackground noBordersLeft noBordersBottom noBordersTop" style="height: 130px">
                    <div class="row">
                        <div class="col-6">
                            {{-- <p>PORT OF DISCHARGE AGENT:</p> --}}
                            {{-- <div class="marginForLabel">
                                <label class="miniTexts" name="portDischargeAgentLabel1">TESTE</label>
                            </div>
                            <div class="marginForLabel">
                                <label class="miniTexts" name="portDischargeAgentLabel2">TESTE</label>
                            </div>
                            <div class="marginForLabel">
                                <label class="miniTexts" name="portDischargeAgentLabel3">TESTE</label>
                            </div>
                            <div class="marginForLabel">
                                <label class="miniTexts" name="portDischargeAgentLabel4">TESTE</label>
                            </div>
                            <div class="marginForLabel">
                                <label class="miniTexts" for="portDischargeAgentLabel5">Phone :</label>
                                <label class="miniTexts" name="portDischargeAgentLabel5">TESTE</label>
                            </div>
                            <div class="marginForLabel">
                                <label class="miniTexts" for="portDischargeAgentLabel6">Fax :</label>
                                <label class="miniTexts" name="portDischargeAgentLabel6">TESTE</label>
                            </div> --}}
                        </div>
                        <div class="col-6" style="text-align: center">
                            <div class="codigo" style="margin-top: 20px;"></div>
                        </div>
                    </div>
        
                </div>

            </div>
        </div>
        
        
        <div class="col-4 borderBackground noBordersBottom" style="height: 74px">
            <p style="margin-top: 10px">
                VESSEL AND VOYAGE NO (see Clause 8 & 9)
            </p>
            <div class="vesselAndVoyageNoLabel">
                <label name="vesselAndVoyageNoLabel">{{$register->vessel}} / {{$register->voyage}}</label><br />
            </div>
        </div>
        <div class="col-4 borderBackground noBordersLeft noBordersBottom">
            <p style="margin-top: 10px">
                PORT OF LOADING
            </p>
            <div class="portOfLoadingLabel">
                <label name="portOfLoadingLabel">{{$register->port_of_loading}}</label><br />
            </div>
        </div>
        <div class="col-4 borderBackground noBordersLeft noBordersBottom">
            <p style="margin-top: 10px">
                PLACE OF RECEIPT: (Combined Transport ONLY - see Clause 1 & 5.2)
            </p>
            <div class="placeOfReceiptLabel">
                <label name="placeOfReceiptLabel">{{$register->place_of_receipt}}</label><br />
            </div>
        </div>

        <div class="w-100"></div>
        <div class="col-4 borderBackground lateral-inferior-esquerda-redonda" style="height: 77px">
            <div class="row">
                <div class="col-4">
                    <p style="margin-top: 10px">
                        BOOKING REF.
                    </p>
                    <div class="bookingRefLabel">
                        <label name="bookingRefLabel">{{$register->loading_requests->booking}}</label><br />
                    </div>
                </div>
                <div class="col-4">
                    <p style="margin-top: 10px; text-align: center">
                        (or)
                    </p>
                </div>
                <div class="col-4">
                    <p style="margin-top: 10px">
                        SHIPPER'S REF.
                    </p>
                    <div class="shippersRefLabel">
                        <label name="shippersRefLabel">{{$register->loading_requests->shipperReference}}</label><br />
                    </div>
                </div>
            </div>
        </div>
        <div class="col-4 borderBackground noBordersLeft">
            <p style="margin-top: 10px">
                PORT OF DISCHARGE
            </p>
            <div class="portOfDischargeLabel">
                <label name="portOfDischargeLabel">{{$register->port_of_discarge}}</label><br />
            </div>
        </div>
        <div class="col-4 borderBackground lateral-inferior-direita-redonda noBordersLeft">
            <p style="margin-top: 10px">
                PLACE OF DELIVERY : (Combined Transport ONLY - see Clause 1 & 5.2)
            </p>
            <div class="placeOfDeliveryLabel">
                <label name="placeOfDeliveryLabel">{{$register->final_destination}}</label><br />
            </div>
        </div>

        <div class="w-100"></div>
        <!-- Logo -->
        <div class="col" style="text-align:end; position:absolute; padding-right: 10%; margin-top: 890px; z-index:9;">
            <img src="{!! asset('/image/tabex_export_transp_marcadagua.png') !!}" alt="logo"
                style="padding:12px; width: 300px; opacity: 0.3;">
        </div>

        <div class="w-100"></div>
        <div class="col-12 borderBackground"
            style="margin-top: 12px; height: 40px; text-align: center; border-radius: 15px 15px 0px 0px;">
            <p style="margin-top: 12px; font-size: 13px">
                <b style="letter-spacing: 2px;">
                    PARTICULARS FURNISHED BY THE SHIPPER - NOT CHECKED BY CARRIER - CARRIER NOT RESPONSIBLE
                </b>
                <b>
                    (see Clause 14)
                </b>
            </p>
        </div>

        <div class="w-100"></div>
        <div class="col-12 borderBackground noBordersTop">
            <div class="row" style="text-align: center">
                <div class="col-sm-3 borderBackground noBordersTopLeftBottom">
                    <b>
                        <p style="margin-top:10px">Container Numbers, Seal</p>
                        <p style="margin-top:-5px">Numbers and Marks</p>
                    </b>
                </div>
                <div class="col-sm-5 borderBackground noBordersTopLeftBottom">
                    <b>
                        <p style="margin-top:10px">Description of Packages and Goods</p>
                    </b>
                    <p style="margin-top:-5px">Continued on attached Bill of Lading Rider pages(s), if applicable)</p>
                </div>
                <div class="col-sm-2 borderBackground noBordersTopLeftBottom">
                    <b>
                        <p style="margin-top:10px">Gross Cargo</p>
                        <p style="margin-top:-5px">Weight</p>
                    </b>
                </div>
                <div class="col-sm-2 borderBackground noBordersTopLeftBottom noBordersRight">
                    <b>
                        <p style="margin-top:15px">Measurement</p>
                    </b>
                </div>
            </div>
        </div>

        <div class="w-100"></div>
        <div class="col-12 borderBackground noBordersTop" style="border-radius: 0px 0px 15px 15px;">
            <div class="row">
                <div
                    class="col-sm-3 borderBackground noBordersTopLeftBottom heightParticularsFurnished lateral-inferior-esquerda-redonda">
                    {{-- <label class="fontNormal" name="containerNumberLabel" style="margin-top:10px">TESTE</label> --}}
                </div>
                <div class="col-sm-5 borderBackground noBordersTopLeftBottom heightParticularsFurnished">
                    <b>
                        <p style="margin-top:10px">Please see attached RIDER for Container / Cargo Description(s).</p>
                    </b>
                    <label class="fontNormal" name="descriptionPackagesLabel1" style="margin-top:-5px">
                        {{$register->loading_requests->containerQty}} x {{$register->loading_requests->container_types->descricao}}
                    </label>

                    <div class="tableTotal" style="margin-left: 15%">
                        <table>
                            <tbody>
                                <tr>
                                    <th class="fontNormal" name="totalItems">Total Items :</th>
                                    <td name="totalItemsTd">{{$register->loading_requests->containerQty}}</td>
                                </tr>
                                <tr>
                                    <th class="fontNormal" name="totalGross">Total Gross Weight :</th>
                                    <td name="totalGrossTd">{{$register->gross_weight_total}} Kgs.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="col-sm-2 borderBackground noBordersTopLeftBottom heightParticularsFurnished">
                    <label class="fontNormal" name="grossCargoWeightLabel" style="margin-top:10px"></label>
                </div>

                <div
                    class="col-sm-2 borderBackground noBordersTopLeftBottom noBordersRight heightParticularsFurnished lateral-inferior-direita-redonda">
                    <label class="fontNormal" name="measurementLabel" style="margin-top:10px"></label>
                </div>
            </div>
        </div> 

        <div class="w-100"></div>
        <div class="col-12 borderBackground" style="margin-top: 5px; border-radius: 15px 15px 0px 0px;">
            <p style="margin-top: 10px">
                FREIGHT & CHARGES
                Cargo shall not be delivered unless Freight & Charges are paid (see Clause 16)
            </p>
            <div class="row">
                <div class="col-7 borderBackground noBordersLeft noBordersBottom">

                    <div class="freightTable" style="margin-top: 5px">
                        <table class="table table-bordered" style="height: 175px;">
                            <thead style="font-size: 10px">
                                <tr>
                                    <th scope="col" style="text-align: center">FREIGHT & CHARGES</th>
                                    <th scope="col" style="text-align: center">BASIS</th>
                                    <th scope="col-2" style="text-align: center">RATE</th>
                                    <th scope="col-3" style="text-align: center">PREPAID</th>
                                    <th scope="col" style="text-align: center">COLLECT</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th class="fontNormal" id="pg1FreightCharges" name="pg1FreightCharges" scope="row">Disponível apenas no BL Original Fretado</th>
                                    <td id="pg1Rate" name="pg1Rate"></td>
                                    <td id="pg1Unit" name="pg1Unit"></td>
                                    <td id="pg1Currency" name="pg1Currency"></td>
                                    <td id="pg1Prepaid" name="pg1Prepaid"></td>
                                </tr>
                                <tr>
                                    <th class="fontNormal" id="pg1FreightCharges" name="pg1FreightCharges" scope="row">Disponível apenas no BL Original Fretado</th>
                                    <td id="pg1Rate" name="pg1Rate"></td>
                                    <td id="pg1Unit" name="pg1Unit"></td>
                                    <td id="pg1Currency" name="pg1Currency"></td>
                                    <td id="pg1Prepaid" name="pg1Prepaid"></td>
                                </tr>
                                <tr>
                                    <th class="fontNormal" id="pg1FreightCharges" name="pg1FreightCharges" scope="row">Disponível apenas no BL Original Fretado</th>
                                    <td id="pg1Rate" colspan="2" name="pg1Rate"></td>
                                    <td id="pg1Currency" name="pg1Currency"></td>
                                    <td id="pg1Prepaid" name="pg1Prepaid"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="col">
                    <p style="font-size: 8px !important">
                        RECEIVED by the Carrier in apparent good order and condition (unless otherwise
                        stated herein) the total number or quantity of Containers or other packages or units
                        indicated in the box entitled Carrier s Receipt for carriage subject to all the terms
                        and conditions hereof from the Place of Receipt or Port of Loading to the Port of
                        Discharge or Place of Delivery, whichever is applicable. IN ACCEPTING THIS BILL
                        OF LADING THE MERCHANT EXPRESSLY ACCEPTS AND AGREES TO ALL
                        THE TERMS AND CONDITIONS, WHETHER PRINTED, STAMPED OR
                        OTHERWISE INCORPORATED ON THIS SIDE AND ON THE REVERSE SIDE OF
                        THIS BILL OF LADING AND THE TERMS AND CONDITIONS OF THE
                        CARRIER S APPLICABLE TARIFF AS IF THEY WERE ALL SIGNED BY THE
                        MERCHANT.
                    </p>
                    <p style="font-size: 8px !important">
                        If this is a negotiable (To Order / of) Bill of Lading, one original Bill of Lading, duly
                        endorsed must be surrendered by the Merchant to the Carrier (together with
                        outstanding Freight and charges) in exchange for the Goods or a Delivery Order. If
                        this is a non-negotiable (straight) Bill of Lading, the Carrier shall deliver the Goods
                        or issue a Delivery Order (after payment of outstanding Freight and charges)
                        against the surrender of one original Bill of Lading or in accordance with the
                        national law at the Port of Discharge or Place of Delivery whichever is applicable.
                    </p>
                    <p style="font-size: 8px !important">
                        IN WITNESS WHEREOF the Carrier or their Agent has signed the number of Bills
                        of Lading stated at the top, all of this tenor and date, and wherever one original Bill
                        of Lading has been surrendered all other Bills of Lading shall be void.
                    </p>

                </div>
            </div>
        </div>

        <div class="w-100"></div>
        <div class="col-12">
            <div class="row">
                <div class="col-3 borderBackground noBordersTop noBordersRight">
                    <p style="margin-top: 10px; margin-bottom: -3px"><b>DECLARED VALUE</b> 
                    (Only applicable if Ad Valorem
                    </p>
                    <p style="margin-bottom: -1px">charges paid - see
                        Clause 7.3)</p>
                    {{-- <label name="declaredValueLabel">TESTE</label> --}}
                </div>
                <div class="col-4 borderBackground noBordersTop">
                    <p style="margin-top: 10px; margin-bottom: -2px"><b>CARRIER'S RECEIPT</b>
                        (No. of Cntrs or Pkgs rcvd by Carrier - see Clause 14.1)</p>
                    <label name="declaredValueLabel">{{$register->loading_requests->containerQty}} cntrs</label>
                </div>
                <div class="col borderBackground noBordersTop noBordersLeft noBordersBottom">
                    <p style="margin-top: 10px; margin-bottom: -3px">
                        {{-- <b>SIGNED</b> on behalf of the Carrier MSC
                        Mediterranean Shipping
                        Company S.A. --}}
                    </p>
                    <p>
                        {{-- by MSC - Mediterranean Shipping do Brasil Ltda. As Agent --}}
                    </p>
                </div>
            </div>
        </div>
        <div class="w-100"></div>
        <div class="col-12">
            <div class="row">
                <div class="col-3 borderBackground noBordersTop noBordersRight lateral-inferior-esquerda-redonda">
                    <p style="margin-top: 10px; margin-bottom: -2px"><b>PLACE AND DATE OF ISSUE</b></p>
                    {{-- <label name="placeLabel" style="margin-bottom: -1px">TESTE</label><br />
                    <label class="dateLabelSize" name="dateLabel">TESTE</label>
                    <p style="text-align:end; margin-top: -10px">Standard Edition - 02/2015</p> --}}
                </div>
                <div class="col-4 borderBackground noBordersTop">
                    <p style="margin-top: 10px; margin-bottom: -1px"><b>SHIPPED ON BOARD DATE</b></p>
                    <label class="dateLabelSize" name="boardDateLabel">{{$register->loading_requests->latestLoading_confirmations->BlDate ?? '-'}}</label>
                    {{-- <p style="text-align:center;">TERMS CONTINUED ON REVERSE</p> --}}
                </div>
                <div class="col borderBackground noBordersTop noBordersLeft lateral-inferior-direita-redonda"
                    style="text-align: center">
                    <div class="assinatura"></div>
                </div>
            </div>
        </div>

        <!-- Pagina 2 -->
        @php
            $linhas = 0;
        @endphp
        <section class='row p-0 m-0'>
            {{-- header pag 2 --}}
            <div class="col-6 borderBackground" style="margin-top: 50px; border-radius: 15px 0px 0px 15px;">
                <div class="row">
                    <div style="min-width: 130px">
                        <img src="{!! asset('/image/tabex_export.png') !!}" alt="logo" style="padding:6px; width: 130px;">
                    </div>
                    <div class="col">
                        <h5>{{$register->loading_requests->carriers->name}}</h5>
                        <p style="font-weight: bold">
                            {{$register->loading_requests->carriers->address ?? ''}} 
                            {{$register->loading_requests->carriers->CEP ?? ''}}, 
                            {{$register->loading_requests->carriers->cities->descricao ?? ''}},
                            {{$register->loading_requests->carriers->countries->descricao ?? ''}}
                        </p>
                        <p style="margin-top: -10px; font-weight: bold">Website: {{$register->loading_requests->carriers->url ?? null}}</p>
                    </div>
                </div>
            </div>
            <div class="col-6 borderBackground noBordersLeft" style="margin-top: 50px; border-radius: 0px 15px 15px 0px;">
                <div class="row">
                    <div class="col-6">
                        <h5 style="font-weight: bold">
                            BILL OF LADING No. <Br /><Br />
                            RIDER PAGE <Br /><Br />
                            Page 1 of 1
                        </h5>
                    </div>
                    <div class="col">
                        <h5 style="font-weight: bold">
                            <label name="billOfLandingNoLabel" style="font-size: 14px !important">{{$register->loading_requests->latestLoading_confirmations->BlNumber ?? '-'}}</label>
                        </h5>
                    </div>
                </div>
            </div>

            <div class="w-100"></div>
            <div class="col-12 borderBackground noBordersTop"
                style="height: 40px; text-align: center; border-radius: 15px 15px 0px 0px;">
                <p style="margin-top: 12px; font-size: 13px">
                    <b style="letter-spacing: 2px;">
                        CONTINUATION PARTICULARS FURNISHED BY THE SHIPPER - NOT CHECKED BY CARRIER - CARRIER NOT RESPONSIBLE
                    </b>
                    <b>(see Clause 14)</b>
                </p>

            </div>
            <div class="w-100"></div>
            {{-- Nome das colunas --}}
            <div class="col-12 borderBackground noBordersTop">
                <div class="row" style="text-align: center">
                    <div class="col-sm-3 borderBackground noBordersTopLeftBottom">
                        <b>
                            <p style="margin-top:10px">Container Numbers, Seal</p>
                            <p style="margin-top:-5px">Numbers and Marks</p>
                        </b>
                    </div>
                    <div class="col-sm-5 borderBackground noBordersTopLeftBottom">
                        <b>
                            <p style="margin-top:10px">Description of Packages and Goods</p>
                        </b>
                        <p style="margin-top:-5px">Continued on attached Bill of Lading Rider pages(s), if applicable)</p>
                    </div>
                    <div class="col-sm-2 borderBackground noBordersTopLeftBottom">
                        <b>
                            <p style="margin-top:10px">Gross Cargo</p>
                            <p style="margin-top:-5px">Weight</p>
                        </b>
                    </div>
                    <div class="col-sm-2 borderBackground noBordersTopLeftBottom noBordersRight">
                        <b>
                            <p style="margin-top:15px">Measurement</p>
                        </b>
                    </div>
                </div>
            </div>

            <div class="w-100"></div>
            <!-- Logo background-->
            <div class="col"
                style="text-align:center; position:absolute; padding-right: 10%; margin-top: 2000px; z-index:9;">
                <img src="{!! asset('/image/tabex_export_transp_marcadagua.png') !!}" alt="logo"
                    style="padding:12px; width: 600px; opacity: 0.3;">
            </div>

            {{-- preenchimento com os dados da carga --}}
            <div class="w-100"></div>
            <div class="col-12 borderBackground noBordersTop" name="" style="border-radius: 0px 0px 15px 15px;">
                <!-- dados da tabela: duplicar a row -->
                <div class="row" name="dadosTabela">
                    {{-- Container Number --}}
                    @foreach ($register->loading_request_equipment as $equipament)
                            <div class="col-sm-3 borderBackground noBordersTopLeftBottom  lateral-inferior-esquerda-redonda" style=" padding-bottom:25px;">
                                <label name="containerNumberPg2Label" style="margin-top:10px">{{$equipament->equipmentNumber ?? null}}</label><br />
                                <label name="infoNumberPg2Label" style="margin-top:5px">{{$equipament->container_types->descricao ?? null}}</label>
                                <div class="sealNumber" style="margin-top:15px;">
                                    <b> Seal Number: {{$equipament->seal_shipper ?? null}}</b>
                                </div>
                                <label name="sealNumberPg2Label" style="margin-top:5px">Seal Number: {{$equipament->seal_carrier ?? null}}</label>
                            </div>
                            {{-- carga --}}
                            <div class="col-sm-5 borderBackground noBordersTopLeftBottom" style=" padding-bottom:25px;">
                                <div class="descriptionOfPackages" style="margin-top:10px">
                                    @php
                                        $linhas += substr_count(str_replace("\n",'(*))',($equipament->loading_request_equipment_details[0]->cargo_description)),'(*)');
                                        $gross_total = ($gross_total ?? 0 ) + $equipament->gross_weight_total;
                                        $vol_total = ($vol_total ?? 0 ) + $equipament->volume_total;
                                        $pack_total = ($pack_total ?? 0 ) + $equipament->packages_total;

                                     @endphp
                                    <label name="numberOfBagsLabel">{!! str_replace("\n",'<br />',($equipament->loading_request_equipment_details[0]->cargo_description ?? null)) !!}</label><br />                                   
                                </div>                             
                            </div>
                            {{-- gross --}}
                            <div class="col-sm-2 borderBackground noBordersTopLeftBottom "
                                style="text-align: center; padding-bottom:25px;">
                                <label class="fontNormal" name="grossCargoWeightPg2Label" style="margin-top:10px">{{$equipament->gross_weight_total}}</label>
                                <label class="fontNormal">kgs.</label>
                            </div>
                            {{-- measurement --}}
                            <div class="col-sm-2 borderBackground noBordersTopLeftBottom noBordersRight lateral-inferior-direita-redonda"
                                style="text-align: center; padding-bottom:25px;">
                                <label class="fontNormal" name="measurementPg2Label" style="margin-top:10px">{{ $equipament->volume_total}}</label>
                                <label class="fontNormal">cu. m</label>
                            </div>                        
                    @endforeach
                </div>
                {{-- totais Finais --}}
                <div class="row" name="totalRow">
                    <div class="col-sm-3 borderBackground noBordersTopLeftBottom"></div>
                    <div class="col-sm-5 borderBackground noBordersTopLeftBottom" style="text-align: end; margin-top: 2px">
                        Total: </div>
                    <div class="col-sm-2 borderBackground noBordersLeft" style="text-align: center;">
                        <label name="totalGrossCargoLabel">{{ $gross_total ?? 0 }}</label>
                        <label>kgs.</label>
                    </div>
                    <div class="col-sm-2 borderBackground noBordersLeft noBordersRight" style="text-align: center;">
                        <label name="totalMeasurementLabel">{{ $vol_total ?? 0 }}</label>
                        <label>cu. m</label>
                    </div>
                </div>

                <div class="row" name="endRow">
                    <div class="col-sm-3 borderBackground noBordersTopLeftBottom lateral-inferior-esquerda-redonda"
                        style="height: 350px"></div>
                    <div class="col-sm-5 borderBackground noBordersTopLeftBottom" style="height: 350px"></div>
                    <div class="col-sm-2 borderBackground noBordersTopLeftBottom" style="height: 350px"></div>
                    <div class="col-sm-2" style="height: 350px"></div>
                </div>
            </div>

            <div class="w-100"></div>
            <div class="col-12" style="margin-top: 5px">
                <div class="row">
                    <div class="col-3 borderBackground noBordersRight"
                        style="border-radius: 15px 0px 0px 15px; height: 130px">
                        <p style="margin-top: 10px; margin-bottom: -1px">
                            <b>PLACE AND DATE OF ISSUE</b>
                        </p>
                        <label name="placeLabel"></label><br />
                        <label class="dateLabelSize" name="dateLabel"></label>
                    </div>
                    <div class="col-4 borderBackground" style="height: 130px">
                        <p style="margin-top: 10px; margin-bottom: 25px">
                            <b>SHIPPED ON BOARD DATE</b>
                        </p>
                        <div style="text-align: center">
                            <label class="dateLabelSize" name="boardDateLabel"></label>
                        </div>
                    </div>
                    <div class="col borderBackground noBordersLeft"
                        style="border-radius: 0px 15px 15px 0px; height: 130px;">
                        <p style="margin-top: 10px; margin-bottom: -3px">
                            {{-- <b>SIGNED</b> on behalf of the Carrier MSC
                            Mediterranean Shipping
                            Company S.A. --}}
                        </p>
                        <p>
                            {{-- by MSC - Mediterranean Shipping do Brasil Ltda. As Agent --}}
                        </p>
                        <div class="assinatura" style="text-align: center"></div>
                    </div>
                </div>
            </div>

            <div class="w-100"></div>
            <div class="col-12" style="margin-top: 5px">
                <div class="row">
                    <div class="col-3">
                    </div>
                    <div class="col-4">
                        {{-- <p>Standard Edition - 02/2015</p> --}}
                    </div>
                    <div class="col">
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>

@include('blMsc.script')
@endSection