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

<!-- Semantic UI -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
<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" style="background: white">
    <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>

<!-- List of Documents -->
<h2>List of Documents</h2>
<form class="documentaryInstructionForm">
    <div class="row">
        <div class="col-sm-7">
            <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" style="margin:8px;">
                    <div class="row" style="margin:10px;">

                        <table class="table table-responsive-md table-bordered bg-white table-hover" id="blueStyleTable"
                            style="margin-left:30px;">
                            <thead>
                                <tr>
                                    <th scope="col" id="firstColumnTable" style="width: 30px;"></th>
                                    <th scope="col">Document:</th>
                                    <th scope="col" style="text-align: center;">Originals</th>
                                    <th scope="col" style="text-align: center;">Copies</th>
                                    <th scope="col-2" style="text-align: center;">Issued By</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th scope="row"><input class="form-check-input" type="checkbox" value=""
                                            id="flexCheckInvoice"></th>
                                    <td>Invoice</td>
                                    <td class="centralizedObject"><input type="number" class=" form-control"
                                            readonly="readonly" min="0" id="originalsInvoiceLabel"></td>
                                    <td class="centralizedObject"><input type="number" class=" form-control"
                                            readonly="readonly" min="0" id="copiesInvoiceLabel"></td>

                                    <div class="row">
                                        <td>

                                            <div class="btn btn-block ui floating dropdown labeled search icon button"
                                                id="issuedByInvoice" type="button" disabled="">

                                                <i class="angle down icon"></i>
                                                <span class="text">Select</span>
                                                <div class="menu">
                                                    <div class="item">Shipper</div>
                                                    <div class="item">Third Party</div>
                                                </div>

                                            </div>
                                    </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th scope="row"><input class="form-check-input" type="checkbox" value=""
                                            id="flexCheckPacking"></th>
                                    <td>Packing List</td>
                                    <td class="centralizedObject"><input type="number" class=" form-control" min="0"
                                            readonly="readonly" id="originalsPackingLabel"></td>
                                    <td class="centralizedObject"><input type="number" class=" form-control" min="0"
                                            readonly="readonly" id="copiesPackingLabel"></td>
                                    <td>
                                        <div class="btn btn-block ui floating dropdown labeled search icon button"
                                            id="issuedByPacking" disabled="">

                                            <i class="angle down icon"></i>
                                            <span class="text">Select</span>
                                            <div class="menu">
                                                <div class="item">Shipper</div>
                                                <div class="item">Third Party</div>
                                            </div>

                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th scope="row"><input class="form-check-input" type="checkbox" value=""
                                            id="flexCheckCertOrigin"></th>
                                    <td>Cert. Origin</td>
                                    <td class="centralizedObject"><input type="number" class=" form-control" min="0"
                                            readonly="readonly" id="originalsCertOriginLabel"></td>
                                    <td class="centralizedObject"><input type="number" class=" form-control" min="0"
                                            readonly="readonly" id="copiesCertOriginLabel"></td>
                                    <td>
                                        <div class="btn btn-block ui floating dropdown labeled search  icon button "
                                            id="issuedByCertOrigin" disabled="">

                                            <i class="angle down icon"></i>
                                            <span class="text">Select</span>
                                            <div class="menu">
                                                <div class="item">Shipper</div>
                                                <div class="item">Third Party</div>
                                            </div>

                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th scope="row"><input class="form-check-input" type="checkbox" value=""
                                            id="flexCheckPhytocert"></th>
                                    <td>Phytocertificate</td>
                                    <td class="centralizedObject"><input type="number" min="0" class=" form-control"
                                            readonly="readonly" id="originalsPhytocertLabel"></td>
                                    <td class="centralizedObject"><input type="number" min="0" class=" form-control"
                                            readonly="readonly" id="copiesPhytocertLabel"></td>
                                    <td>
                                        <div class="btn btn-block ui floating dropdown labeled search icon button"
                                            id="issuedByPhytocert" disabled="">

                                            <i class="angle down icon"></i>
                                            <span class="text">Select</span>
                                            <div class="menu">
                                                <div class="item">Shipper</div>
                                                <div class="item">Third Party</div>
                                            </div>


                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th scope="row"><input class="form-check-input" type="checkbox" value=""
                                            id="flexCheckCertAnalysis"></th>
                                    <td>Cert. of Analysis</td>
                                    <td class="centralizedObject"><input type="number" class=" form-control" min="0"
                                            readonly="readonly" id="originalsCertAnalysisLabel"></td>
                                    <td class="centralizedObject"><input type="number" class=" form-control" min="0"
                                            readonly="readonly" id="copiesCertAnalysisLabel"></td>
                                    <td>
                                        <div class="btn btn-block ui floating dropdown labeled search icon button"
                                            id="issuedByCertAnalysis" disabled="">

                                            <i class="angle down icon"></i>
                                            <span class="text">Select</span>
                                            <div class="menu">
                                                <div class="item">Shipper</div>
                                                <div class="item">Third Party</div>
                                            </div>

                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th scope="row"><input class="form-check-input" type="checkbox" value=""
                                            id="flexCheckFumigation"></th>
                                    <td>Fumigation Certificate</td>
                                    <td class="centralizedObject"><input type="number" class=" form-control" min="0"
                                            readonly="readonly" id="originalsFumigationLabel"></td>
                                    <td class="centralizedObject"><input type="number" class=" form-control" min="0"
                                            readonly="readonly" id="copiesFumigationLabel"></td>
                                    <td>
                                        <div class="btn btn-block ui floating dropdown labeled search icon button"
                                            id="issuedByFumigation" disabled="">

                                            <i class="angle down icon"></i>
                                            <span class="text">Select</span>
                                            <div class="menu">
                                                <div class="item">Shipper</div>
                                                <div class="item">Third Party</div>
                                            </div>

                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th scope="row"><input class="form-check-input" type="checkbox" value=""
                                            id="flexCheckBillLanding"></th>
                                    <td>Bill of Landing</td>
                                    <td class="centralizedObject"><input type="number" min="0" class=" form-control"
                                            readonly="readonly" id="originalsBillLandingLabel"></td>
                                    <td class="centralizedObject"><input type="number" min="0" class=" form-control"
                                            readonly="readonly" id="copiesBillLandingLabel"></td>
                                    <td>
                                        <div class="btn btn-block ui floating dropdown labeled search icon button"
                                            id="issuedByBillLanding" disabled="">

                                            <i class="angle down icon"></i>
                                            <span class="text">Select</span>
                                            <div class="menu">
                                                <div class="item">Shipper</div>
                                                <div class="item">Third Party</div>
                                            </div>

                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th scope="row"><input class="form-check-input" type="checkbox" value=""
                                            id="flexCheckLegalization"></th>

                                    <td colspan="4"> Legalization

                                        <div class="btn btn-block ui floating fluid multiple search selection dropdown button"
                                            id="LegalizationSelect" disabled="">
                                            <!-- "ui fluid multiple search selection dropdown" -->
                                            <i class="dropdown icon"></i>
                                            <span class="text">Select</span>
                                            <div class="menu">
                                                <div class="item">Option 1</div>
                                                <div class="item">Option 2</div>
                                                <div class="item">Option 3</div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>

                            </tbody>
                        </table>

                        <!-- Comments Area -->
                        <label for="documentaryCommentTxtArea" class="w-100 control-label">Comments</label>
                        <textarea class="form-control textsAreaMedium" id="documentaryCommentTxtArea"
                            name="documentaryCommentTxtArea" rows="3"></textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-5">
            <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" style="margin:8px;">
                    <div class="row" style="margin:10px;">

                        <table class="table table-responsive-md table-bordered bg-white table-hover" id="blueStyleTable"
                            style="margin-left:-15px;">
                            <thead>
                                <tr>
                                    <th scope="col">Requested On:</th>
                                    <th scope="col" style="text-align: center;">Released On</th>
                                </tr>
                            </thead>

                            <!-- Date Inputs -->
                            <tbody>
                                <tr>
                                    <td><input class="form-control dateInput" type="date" min="2019-01-01" max="2080-01-01" id="requestInvoiceDateInput"
                                            readonly="readonly" name="requestInvoiceDateInput"></td>
                                    <td><input class="form-control dateInput" type="date" min="2019-01-01" max="2080-01-01" id="releasedInvoiceDateInput"
                                            readonly="readonly" name="releasedInvoiceDateInput"></td>
                                </tr>
                                <tr>
                                    <td><input class="form-control dateInput" type="date" min="2019-01-01" max="2080-01-01" id="requestPackingDateInput"
                                            readonly="readonly" name="requestPackingDateInput"></td>
                                    <td><input class="form-control dateInput" type="date" min="2019-01-01" max="2080-01-01" id="releasedPackingDateInput"
                                            readonly="readonly" name="releasedPackingDateInput"></td>
                                </tr>
                                <tr>
                                    <td><input class="form-control dateInput" type="date" min="2019-01-01" max="2080-01-01"
                                            id="requestCertOriginDateInput" readonly="readonly"
                                            name="requestCertOriginDateInput"></td>
                                    <td><input class="form-control dateInput" type="date" min="2019-01-01" max="2080-01-01"
                                            id="releasedCertOriginDateInput" readonly="readonly"
                                            name="releasedCertOriginDateInput"></td>
                                </tr>
                                <tr>
                                    <td><input class="form-control dateInput" type="date" min="2019-01-01" max="2080-01-01" id="requestPhytocertDateInput"
                                            readonly="readonly" name="requestPhytocertDateInput"></td>
                                    <td><input class="form-control dateInput" type="date" min="2019-01-01" max="2080-01-01"
                                            id="releasedPhytocertDateInput" readonly="readonly"
                                            name="releasedPhytocertDateInput"></td>
                                </tr>
                                <tr>
                                    <td><input class="form-control dateInput" type="date" min="2019-01-01" max="2080-01-01"
                                            id="requestCertAnalysisDateInput" readonly="readonly"
                                            name="requestCertAnalysisDateInput"></td>
                                    <td><input class="form-control dateInput" type="date" min="2019-01-01" max="2080-01-01"
                                            id="releasedCertAnalysisDateInput" readonly="readonly"
                                            name="releasedCertAnalysisDateInput"></td>
                                </tr>
                                <tr>
                                    <td><input class="form-control dateInput" type="date" min="2019-01-01" max="2080-01-01"
                                            id="requestFumigationDateInput" readonly="readonly"
                                            name="requestFumigationDateInput"></td>
                                    <td><input class="form-control dateInput" type="date" min="2019-01-01" max="2080-01-01"
                                            id="releasedFumigationDateInput" readonly="readonly"
                                            name="releasedFumigationDateInput"></td>
                                </tr>
                                <tr>
                                    <td><input class="form-control dateInput" type="date" min="2019-01-01" max="2080-01-01"
                                            id="requestBillLandingDateInput" readonly="readonly"
                                            name="requestBillLandingDateInput"></td>
                                    <td><input class="form-control dateInput" type="date" min="2019-01-01" max="2080-01-01"
                                            id="releasedBillLandingDateInput" readonly="readonly"
                                            name="releasedBillLandingDateInput"></td>
                                </tr>
                            </tbody>
                            
                        </table>

                        <div class="col-8" style="margin-left: 18%">
                            <div class="col"> Full Set Ready </div>
                            <div class="col"><input class="form-control" type="date" min="2019-01-01" max="2080-01-01" id="dateInput-15"
                                    name="dateInput-15">
                            </div>
                        </div>

                        <label for="documentaryCommentTwoTxtArea" class="w-100 control-label"
                            style="margin-top: 22px">Comments</label>
                        <textarea class="form-control textsAreaMedium" id="documentaryCommentTwoTxtArea"
                            name="documentaryCommentTwoTxtArea" rows="3"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- List of Documents -->
    <h2>Document Information</h2>
    <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" style="margin:8px;">

            <!-- Shipper Input -->
            <div class="row" style="margin:8px;">
                <div class="col">
                    <label for="shipperInput" class="w-100 control-label">Shipper</label>
                    <input class="form-control" id="shipperInput" name="shipperInput" style="height: 30px;">
                </div>
                <div class="col" style="margin-left:10px;"></div>
                <div class="col" style="margin-left:10px;"></div>
            </div>

            <div class="row" style="margin:8px;">

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

                    <label for="shipperDescriptionTxtArea" class="w-100 control-label">Shipper Description</label>
                    <textarea class="form-control textsArea" id="shipperDescriptionTxtArea"
                        name="shipperDescriptionTxtArea"></textarea>

                    <label for="consigneeTxtArea" class="w-100 control-label">Consignee</label>
                    <textarea class="form-control textsArea" id="consigneeTxtArea" name="consigneeTxtArea"></textarea>

                    <label for="notifyTxtArea" class="w-100 control-label">Notify</label>
                    <textarea class="form-control textsArea" id="notifyTxtArea" name="notifyTxtArea"></textarea>

                    <label for="secondNotifyTxtArea" class="w-100 control-label">2nd Notify</label>
                    <textarea class="form-control textsArea" id="secondNotifyTxtArea"
                        name="secondNotifyTxtArea"></textarea>

                    <label for="thirdNotifyTxtArea" class="w-100 control-label">3nd Notify</label>
                    <textarea class="form-control textsArea" id="thirdNotifyTxtArea"
                        name="thirdNotifyTxtArea"></textarea>

                    <label for="packingDescriptionTxtArea" class="w-100 control-label">Packing Description</label>
                    <textarea class="form-control textsArea" id="packingDescriptionTxtArea"
                        name="packingDescriptionTxtArea"></textarea>
                </div>

                <!-- Second Column -->
                <div class="col" style="margin-left:10px;">

                    <label for="descriptionOfGoodsTxtArea" class="w-100 control-label">Description of Goods</label>
                    <textarea class="form-control textsArea" id="descriptionOfGoodsTxtArea"
                        name="descriptionOfGoodsTxtArea"></textarea>

                    <label for="marksAndNumbersTxtArea" class="w-100 control-label">Marks & Numbers</label>
                    <textarea class="form-control textsArea" id="marksAndNumbersTxtArea"
                        name="marksAndNumbersTxtArea"></textarea>

                    <label for="qualityEspecificationTxtArea" class="w-100 control-label">Quality Specification</label>
                    <textarea class="form-control textsArea" id="qualityEspecificationTxtArea"
                        name="qualityEspecificationTxtArea"></textarea>

                    <label for="blCommentsTxtArea" class="w-100 control-label">BL Comments</label>
                    <textarea class="form-control textsArea" id="blCommentsTxtArea" name="blCommentsTxtArea"></textarea>

                    <label for="documentaryImportantTxtArea" class="w-100 control-label">Important</label>
                    <textarea class="form-control textsAreaBig" id="documentaryImportantTxtArea"
                        name="documentaryImportantTxtArea" rows="3"></textarea>
                </div>
            </div>
        </div>
    </div>

    <!--  Attachment-->
    <p>Attachment</p>

    <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>

<script>
    // Dropdown - Semantic IO
    $('.ui.dropdown').dropdown();

</script>

@endsection