@extends('layout.padrao')
@section('title', 'Documentary Instruction')
@section('content')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css" />

<!-- Save, cancel and icon-->
<div class="col col-lg-12 col-md-12 col-sm-12 form-group" style="text-align: right; margin-top: -35px">
    <button class="btn btn-style" type="submit" style="margin-right: 1%">Save</button>
    <button class="btn btn-style" type="button" style="margin-right: 1%">Cancel</button>
    <a title="Export" href="#" style='width:50px;' class="btn">
        <i class="fas fa-download icon-style" style="font-size: 25px; margin-right: 6%"></i>
    </a>
</div>

<!-- Documentary Instruction -->
<div class="row folha-interna shadow col col-lg-12 col-sm-12 col-md-12 p-3 mb-5 rounded">
    <div class="col rounded" id="internBorderRounded">
        <div class="row" style="margin:8px;">
            <div class="col">
                <label class="w-100 control-label">Contract nº: <label id="contractNumberLabel"
                        class=""></label></label>
                <label class="w-100 control-label">Buyer: <label id="buyerLabel"></label></label>
                <label class="w-100 control-label">Booking: <label id="controlLabel"></label></label>
            </div>
            <div class="col" style="margin-left:10px;">
                <label class="w-100 control-label">Product: <label id="productLabel"></label></label>
                <label class="w-100 control-label">Net Weight: <label id="netWeightLabel"></label></label>
                <label class="w-100 control-label">Gross Weight: <label id="grossWeightLabel"></label></label>
            </div>
            <div class="col" style="margin-left:10px;">
                <label class="w-100 control-label">Vessel: <label id="vesselLabel"></label></label>
                <label class="w-100 control-label">Voyage: <label id="voyageLabel"></label></label>
                <label class="w-100 control-label">Carrier: <label id="carrierLabel"></label></label>
            </div>
            <div class="col" style="margin-left:10px;">
                <label class="w-100 control-label">POL: <label id="polLabel"></label></label>
                <label class="w-100 control-label">POD: <label id="podLabel"></label></label>
            </div>
            <div class="col" style="margin-left:10px;">
                <label class="w-100 control-label">ETD POL: <label id="etaPolLabel"></label></label>
                <label class="w-100 control-label">ETA POD: <label id="etaPodLabel"></label></label>
            </div>
            <div class="col" style="margin-left:10px;">
                <label class="w-100 control-label">Cargo DDL: <label id="cargoDdlLabel"></label></label>
                <label class="w-100 control-label">Draft DDL: <label id="draftDdlLabel"></label></label>
                <label class="w-100 control-label">VGM DDL: <label id="vgmDdlLabel"></label></label>
            </div>
        </div>
    </div>
</div>

<!-- Contract Details -->
<h2>Contract Details</h2>

<div class="row">
    <div class="col">
        <div class="row folha-interna shadow col col-lg-12 col-sm-12 col-md-12 p-3 mb-5 bg-white rounded">
            <div class="col rounded" id="internBorderRounded">
                <div class="row" style="margin:8px;">
                    <div class="col">
                        <label class="w-100 control-label">Broker: <label id="brokerLabel"></label></label>
                        <label class="w-100 control-label">Broker Ref: <label id="brokerRefLabel"></label></label>
                    </div>
                    <div class="col" style="margin-left:10px;">
                        <label class="w-100 control-label">Contract Date: <label id="contractDateLabel"></label></label>
                        <label class="w-100 control-label">Buyer's Ref: <label id="buyersRefLabel"></label></label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col">
        <div class="row folha-interna shadow col col-lg-12 col-sm-12 col-md-12 p-3 mb-5 bg-white rounded">
            <div class="col rounded" id="internBorderRounded">
                <div class="row" style="margin:8px;">
                    <div class="col-4" style="margin-left:10px;">
                        <label class="w-100 control-label">Incoterm: <label id="incotermLabel"></label></label>
                        <label class="w-100 control-label">Price m/ton: <label id="buyerLabel"></label></label>
                    </div>
                    <div class="col" style="margin-left:10px;">
                        <label class="w-100 control-label">Payment Terms: <label id="paymentTermsLabel"></label></label>
                        <label class="w-100 control-label">Prepayment Date: <label
                                id="prepaymentDateLabel"></label></label>
                    </div>
                    <div class="col" style="margin-left:10px;">
                        <label class="w-100 control-label">Prepayment Amount: <label
                                id="prepaymentAmountLabel"></label></label>
                        <label class="w-100 control-label">L/C Number: <label id="lcNumberLabel"></label></label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Presentation Information -->
<h2>Presentation Information</h2>
<form class="documentaryInstructionForm">
    <div class="row">
        <div class="col-sm-6">
            <div class="row folha-interna shadow col col-lg-12 col-sm-12 col-md-12 p-3 mb-5 rounded"
                style="min-height: 350px; background: #fff !important;">
                <div class="col rounded" style="margin:2px;">
                    <div class="row" style="margin:2px;">

                        <table class="table table-responsive-md bg-white" id="myTable" style="margin-left:30px;">
                            <thead>
                                <tr style="border-bottom: 5px solid #3686ef">
                                    <th scope="col" id="firstColumnTable" style="width: 30px;"></th>
                                    <th scope="col">Courier Cia</th>
                                    <th scope="col" style="text-align: center;"># Set of Dox</th>
                                    <th scope="col" style="text-align: center;">Presentation Dt</th>
                                    <th scope="col" style="text-align: center;">Dispatch Dt</th>
                                    <th scope="col" style="text-align: center;">Courier #</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <!-- Centralizar o botão -->
                                    <th scope="row">
                                        <div class="btn" onclick="addLinesPresInfo()" style="">
                                            <div class="circleIcon">
                                                <img src="{!! asset('/image/plus.svg') !!}" class="botao-circular-add">
                                            </div>
                                        </div>
                                    </th>
                                    <div class="row">
                                        <td style="min-width: 130px">
                                            <select id="courrierCiaSelect" name="courrierCiaSelect[]"
                                                class="form-control">
                                                <option value="a">FEDEX</option>
                                                <option value="b">b</option>
                                                <option value="c">c</option>
                                            </select>
                                        </td>
                                    </div>
                                    <td class="centralizedObject">
                                        <input name='Dox[]' type="number" class=" form-control" min="0"
                                            id="setOfDoxInput"></td>
                                    <td class="centralizedObject">
                                        <input class="form-control dateInput" type="date" min="2019-01-01" max="2080-01-01" id="presentationDateInput"
                                            name="presentationDateInput[]">
                                    </td>
                                    <td class="centralizedObject">
                                        <input class="form-control dateInput" type="date" min="2019-01-01" max="2080-01-01" id="dispatchDateInput"
                                            name="dispatchDateInput[]">
                                    </td>
                                    <td class="centralizedObject">
                                        <input class="form-control" id="courierInput" name="courierInput[]">
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="row folha-interna shadow col col-lg-12 col-sm-12 col-md-12 bg-white rounded"
                style="min-height: 350px; background: #fff !important;">
                <div class="col rounded" style="margin:2px;">
                    <div class="row" style="margin:2px;">
                        <!-- Bank Instructions -->
                        <h5 style="margin-top: 3%"> Bank Instructions </h5>
                        <textarea class="form-control textsAreaMedium" id="bankInstructionsTxtArea"
                            name="bankInstructionsTxtArea"></textarea>



                        <!-- Dox Dispatched to -->
                        <h5 style="margin-top: 3%"> Dox Dispatched to </h5>
                        <textarea class="form-control textsAreaMedium" id="doxDispatchedToTxtArea"
                            name="doxDispatchedToTxtArea"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Documentation Timeline -->
    <h2 style="text-align: center; margin-bottom: 50px; ">
        <div class="card" style="max-width: 50%; margin-left: 25%">Documentation Timeline</div>
    </h2>
    <div class="row folha-interna col col-lg-12 col-sm-12 col-md-12 p-3 mb-5 rounded">
        <div class="col rounded" style="margin:8px;">

            <div class="row">

                <!-- First Column -->
                <div class="col form-group">
                    <div class="row">

                        <div class="container" style="text-align: center; margin-top: 2%">
                            <div class="row">
                                <div class="col">
                                    <div class="verticalLine-timeline margin-line-timeline" style="margin-bottom:4px">
                                        <div class="dot-timeline"></div>
                                        <div class="dot-icon-timeline" style="padding-right: 6px;"><i
                                                class="fas fa-anchor icon-timeline"></i></div>
                                    </div>
                                </div>
                                <div class="col" style="margin-top:30px">BL Release</div>
                                <div class="col">
                                    <div class="verticalLine-timeline margin-line-timeline">
                                        <div class="dot-timeline"></div>
                                        <div class="dot-icon-timeline doxIssuance-icon-color"
                                            style="padding-right: 6px;">
                                            <i class="fas fa-envelope-open-text icon-timeline"></i></div>
                                    </div>
                                </div>
                                <div class="col" style="margin-top:30px">Set Ready</div>
                                <div class="col">
                                    <div class="verticalLine-timeline margin-line-timeline">
                                        <div class="dot-timeline"></div>
                                        <div class="dot-icon-timeline presentation-icon-color"
                                            style="padding-right: 6px;"><i class="fas fa-dollar-sign icon-timeline"></i>
                                        </div>
                                    </div>
                                </div>

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

                                <div class="col">
                                    <div class="card">
                                        <div class="card-body" style="color:#fff; background: #265087;">
                                            <div id="blDateNumber">30-01-2021</div>

                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="card">
                                        <div class="card-body" style="color:#fff; background: #2666B7;">
                                            <div id="blReleaseNumber">02-02-2021</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="card">
                                        <div class="card-body" style="color:#fff; background: #2477E1;">
                                            <div id="doxIssuanceNumber">In Progress</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="card">
                                        <div class="card-body" style="color:#fff; background: #69A3EE;">
                                            <div id="setReadyNumber">12-02-2021</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="card">
                                        <div class="card-body" style="color:#fff; background: #AACAF3;">
                                            <div id="presentationNumber">15-02-2021</div>
                                        </div>
                                    </div>
                                </div>

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

                                <div class="col" style="margin-top:4px">BL Date</div>
                                <div class="col">
                                    <div class="verticalLine-timeline margin-line-timeline invert-object-timeline"
                                        style="margin-top:5px">
                                        <div class="dot-timeline"></div>
                                        <div class="dot-icon-timeline blRelease-icon-color"
                                            style="padding-right: 6px; padding-top: 2px">
                                            <i class="fas fa-file-invoice icon-timeline invert-icon-timeline"></i></div>
                                    </div>
                                </div>
                                <div class="col" style="margin-top:4px">Dox Issuance</div>
                                <div class="col">
                                    <div class="verticalLine-timeline margin-line-timeline invert-object-timeline"
                                        style="margin-top:5px">
                                        <div class="dot-timeline"></div>
                                        <div class="dot-icon-timeline setReady-icon-color"
                                            style="padding-right: 6px; padding-top: 2px">
                                            <i class="far fa-check-square icon-timeline invert-icon-timeline"></i></div>
                                    </div>
                                </div>
                                <div class="col" style="margin-top:4px">Presentation</div>
                            </div>
                        </div>

                        <!-- Second Column -->
                        <div class="col" style="margin-left:2%;">
                            <div class="row">

                                <div class="col" style="text-align: center">
                                    <div class="col">
                                        <h3>Time Dox Ready</h3>
                                        <h1>
                                            <div class="card">
                                                <div class="card-body documentationTimelineCard">
                                                    <p class="card-text">
                                                        <div id="readyDate">12</div>
                                                    </p>
                                                    <p class="card-text" style="margin-top:-16px">Days</p>
                                                </div>
                                            </div>
                                        </h1>
                                    </div>
                                </div>

                                <div class="col" style="text-align: center">
                                    <div class="col">
                                        <h3>Time Dox Presented</h3>
                                        <h1>
                                            <div class="card">
                                                <div class="card-body documentationTimelineCard TimelineCardColor">
                                                    <p class="card-text">
                                                        <div id="presentedDate">15</div>
                                                    </p>
                                                    <p class="card-text" style="margin-top:-16px">Days</p>
                                                </div>
                                            </div>
                                        </h1>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--  Attachment-->
    <h2>Attachment</h2>

    <div class="col col-lg-12 col-sm-12 col-md-12 input-group control-group increment-attach" id="increment-attach" style="margin-left: 4%">
        <span id="attach-child">
            <div class="col col-xl-3 col-lg-3 col-sm-12 col-md-12 {{ $errors->has('anexo_types_id.0')? 'has-error':''}}">
                {!! Form::select('anexo_types_id[]',[''=>'------ Select Required ------']+$select['anexo_types_id'],
                null, ['class' => 'form-control', 'style'=>'height:40px; width: 400px; min-width: 400px;']) !!}
            </div>

            <div class="col col-lg-7 col-sm-12 col-md-12 pb-3 increment" style="display: inline-flex; width: 80%;">
                <input type="file" name="filename[]" class="form-control" multiple="multiple" style="height:40px;">
                <input type="hidden" name="attach_qty[]">
            </div>
            
            <div id='btn_attach_change' class="col col-lg-1 col-sm-1 col-md-1 input-group-btn">
            <div class="btn btn-attachment attach-success" type="button" style="height:40px;"> 
                        <div class="circleIcon">
                            <img src="{!! asset('/image/plus.svg') !!}" class="botao-circular-add">
                        </div>
                    </div>
            </div>
        </span>
    </div>

    <div class="col col-lg-12 col-md-12 col-sm-12 form-group" style="text-align: right">
        <button class="btn btn-style" type="submit" value="submit" style="margin-right: 1%">Save</button>
        <button class="btn btn-style" type="button" style="margin-right: 2%">Cancel</button></div>
    </div>
</form>

@include('documentaryInstruction.script')

@endsection