@extends('layout.padrao')
@section('content')
@section('title', 'Insurance Certificate Request - Draft')
@include('include.attach_edit_list')

@if($errors->any())
<div class="alert alert-danger">
    @foreach($errors->all() as $error)
        {{ $error }} <br>
    @endforeach
</div>
@endif

@php
    $clientAccess = Auth::user()->checkCharacteristics(['1', '2', '3']) || Auth::user()->type == 'Client';
    $insuranceCompanyAccess = Auth::user()->checkCharacteristics(['1', '2', '3']) || Auth::user()->type == 'Insurance Company';
@endphp

<!-- Script para mascarar os inputs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script>

<form method="POST" action="{{route('insuranceCertificate.store') }}" accept-charset="UTF-8" enctype="multipart/form-data" id="form_insuranceCertificate">

    {{ csrf_field() }}
    <input type="hidden" name="loading_requests_id" value="{{$loadingRequest->id}}">

    <div class="row folha-interna shadow col col-lg-12 col-sm-12 col-md-12 rounded">

        <!---------------------------- < Primeiro bloco - Dados Seguro > ---------------------------->
        <div class="folha-interna shadow col col-lg-12 col-sm-12 col-md-12 rounded folhaForm">
            <div class="row">
                <div class="col dadosSeguro">
                    <h3>Dados Seguro</h3>
                </div>
                <div class="col-2 text-right position-absolute" style="right: 0%;">
                    <img src="{!! asset('/image/csa_Logo.png') !!}" height="100">
                </div>
            </div>

            <div class="row">
                <div class="col-2">
                    <label for="booking" class="w-100 control-label">Booking:</label>
                    <span name="booking" id="booking">{{$loadingRequest->booking ?? ''}}</span>
                </div>
                <div class="col-8">
                    <label for="BlDate" class="w-100 control-label">BL Date:</label>
                    <span name="BlDate" id="BlDate">{{$loadingRequest->loading_confirmations->pluck('BlDate') && count($loadingRequest->loading_confirmations->pluck('BlDate')) > 0 ? date( 'd-m-Y' , strtotime($loadingRequest->loading_confirmations->pluck('BlDate')->implode(' '))) : '-'  }}</span>
                </div>
            </div>
        </div>
        <!---------------------------- </ Primeiro bloco - Dados Seguro > ---------------------------->

        <!---------------------------- < Segundo bloco - Valor Segurado > ---------------------------->
        <div class="folha-interna shadow col col-lg-8 col-sm-8 col-md-8 rounded folhaForm display-flex justify-content-center">
            <div class="row col align-content-center">
                <div class="col-4 text-center align-self-center">
                    <img class="imgMain img-fluid" src="{!! asset('/image/icons/house-key.png') !!}"></br>
                    <div class="row place-content-center">
                        <div class="text-left col-11 {{ $errors->has('insuranceValue') ? 'has-error' : ''}}">
                            <label for="insuranceValue" class="w-100 control-label">Valor Segurado:</label>

                            <div class="form-control place-content-center text-center wrapperForm" id="wrapperForm2" onclick="$('#insuranceValue').focus()">
                                <div class="row">
                                    <div class="col-label" style="width: 33px;">
                                        <span>USD </span>
                                    </div>
                                    <div class="col p-left-0">
                                        <input type="text" name="insuranceValue" id="insuranceValue" value="{{ old('insuranceValue',($loadingRequest->oldestInsuranceCertificate->insuranceValue ?? '')) }}"
                                        {{$clientAccess ? '' : 'readonly'}}>
                                    </div>
                                </div>
                            </div>
                        </div>
                    
                        <div class="text-left margin-top-10 col-11 {{ $errors->has('clients_id') ? 'has-error' : ''}}">
                        {!! Form::label('clients_id', 'Seguradora:', [ 'class' => 'w-100 control-label']) !!}
                        {!! Form::select('clients_id', $select['clients'], old('clients_id', $loadingRequest->oldestInsuranceCertificate->clients_id ?? null), ['class' => '  form-control', $clientAccess ? '' : 'readonly']) !!}
                        </div>
                    </div>
                </div>

                <div class="col">
                    <div class="{{ $errors->has('beneficiaryInformation') ? 'has-error' : ''}}">
                        <label for="beneficiaryInformation" class="w-100 control-label">Dados do Beneficiário:</label>
                        <textarea class="form-control textsArea" name="beneficiaryInformation" id="beneficiaryInformation"
                            cols="30" rows="10" style="height: 55px"
                            {{$clientAccess ? '' : 'readonly'}}>{{ old('beneficiaryInformation',($loadingRequest->oldestInsuranceCertificate->beneficiaryInformation ?? '')) }}</textarea>
                    </div>

                    <div class="margin-top-10 {{ $errors->has('importerInformation') ? 'has-error' : ''}}">
                        <label for="importerInformation" class="w-100 control-label">Dados do Importador:</label>
                        <textarea class="form-control textsArea" name="importerInformation" id="importerInformation"
                            cols="30" rows="10" style="height: 55px"
                            {{$clientAccess ? '' : 'readonly'}}>{{ old('importerInformation',($loadingRequest->oldestInsuranceCertificate->importerInformation ?? '')) }}</textarea>
                    </div>

                    <div class="margin-top-10 {{ $errors->has('commodityDescription') ? 'has-error' : ''}}">
                        <label for="commodityDescription" class="w-100 control-label">Descrição da Mercadoria:</label>
                        <textarea class="form-control textsArea" name="commodityDescription" id="commodityDescription"
                            cols="30" rows="10" style="height: 55px"
                            {{$clientAccess ? '' : 'readonly'}}>{{ old('commodityDescription',($loadingRequest->oldestInsuranceCertificate->commodityDescription ?? '')) }}</textarea>
                    </div>

                    <div class="margin-top-10 {{ $errors->has('additionalInformation') ? 'has-error' : ''}}">
                        <label for="additionalInformation" class="w-100 control-label">Informações Adicionais:</label>
                        <textarea class="form-control textsArea" name="additionalInformation" id="additionalInformation"
                            cols="30" rows="10" style="height: 55px"
                            {{$clientAccess ? '' : 'readonly'}}>{{ old('additionalInformation',($loadingRequest->oldestInsuranceCertificate->additionalInformation ?? '')) }}</textarea>
                    </div>
                </div>
            </div>
        </div>
        <!---------------------------- </ Segundo bloco - Valor Segurado > ---------------------------->



        <div class="row col" style="margin-left: 1%;">
            <!------------------------------- < Terceiro bloco - Transporte > ----------------------------->
            <div class="folha-interna shadow col col-lg-12 col-sm-12 col-md-12 rounded folhaForm align-self-center text-center">
                <div class="row pdIntern align-items-center">
                    <div class="col text-center align-self-center">
                        <i class="fas fa-ship imgSecondary"></i> </br>
                        <label for="meansOfTransport" class="w-100 control-label marginIcon">Meio de Transporte:</label>
                        <span name="meansOfTransport">By <span name="meio">Sea</span> -
                            <span name="vessel_id" id="vessel_id">{{$loadingRequest->vessel->descricao ?? ''}}</span>
                            <span name="voyage" id="voyage">{{$loadingRequest->voyage ?? ''}}</span>
                        </span>
                    </div>
                    <div class="col">
                        <div class="row">
                            <div class="col">
                                <label for="startLocation" class="w-100 control-label">Local de Início:</label>
                                <span name="startLocation">{{$loadingRequest->loading_ports->countries->descricao ?? ''}}</span></br>
                            </div>
                            <div class="col">
                                <label for="destinationLocation" class="w-100 control-label">Local de Destino:</label>
                                <span name="destinationLocation">{{$loadingRequest->code_of_ports1->country ?? ''}}</span></br>
                            </div>

                            <div class="w-100"></div>
                            <div class="col marginIcon">
                                <label for="loading_ports_id" class="w-100 control-label">Viagem De:</label>
                                <span name="loading_ports_id" id="loading_ports_id">{{$loadingRequest->loading_ports->descricao ?? ''}}</span>
                            </div>
                            <div class="col marginIcon">
                                <label for="port_destinations" class="w-100 control-label">Viagem Para:</label>
                                <span name="port_destinations" id="port_destinations">{{$loadingRequest->code_of_ports1->place ?? ''}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!------------------------------- </ Terceiro bloco - Transporte > ----------------------------->



            <!--------------------------------- < Quarto bloco - Mercadoria > ------------------------------>
            <div class="folha-interna shadow col col-lg-12 col-sm-12 col-md-12 rounded folhaForm align-self-center">
                <div class="row pdIntern">
                    <div class="col-4 text-center align-self-center">
                        <i class="fas fa-info-circle imgSecondary"></i></br>
                        <label for="platforms_id" class="w-100 control-label marginIcon">Mercadoria</label>
                        <span name="platforms_id" id="platforms_id">{{$loadingRequest->platforms->descricao ?? ''}}</span>
                    </div>
                    <div class="col {{ $errors->has('containerQty') ? 'has-error' : ''}}" >
                        <div class="row">
                            <div class="col " >
                                <label for="qtdMercadoria" class="w-100 control-label" style="margin-left: 15px;">Quantidade:</label>
                                <span name="qtdMercadoria" id="qtdMercadoria" class="col">
    
    
                                <!-- +-----------------------------------------------------------+
                                    |  Adicionar classe "red-alert" ao input id="containerQty" |
                                    |  quando a quantidade for maior que a quantidade          |
                                    |             de Container do Booking                      |
                                    +-----------------------------------------------------------+
                                -->
                                
                                    <input type="number" class="form-control text-center" min="0" name="containerQty" id="containerQty" 
                                        value="{{ old('containerQty',($loadingRequest->containerQty ?? '')) }}" readonly>
                                
    
                                    <span name="unit" id="unit"> x {{$loadingRequest->container_types->descricao ?? 0}}</span>
                                </span> </br>
                            </div>
                        </div>

                        @if ($loadingRequest->container_types_id == 1 || $loadingRequest->container_types_id == 2 )
                            <div class="row topQtd" >
                                <div class="col-6 {{ $errors->has('packing_types_id') ? 'has-error' : ''}}">
                                    {!! Form::label('packing_types_id', 'Package Type', [ 'class' => 'w-100 control-label']) !!}
                                    {!! Form::select('packing_types_id', $select['packing_types_id'], old('packing_types_id', $loadingRequest->oldestInsuranceCertificate->packing_types_id ?? null), ['class' => '  form-control', $clientAccess ? '' : 'readonly']) !!}                    
                                </div>
                                <div class="col-6 {{ $errors->has('packing_qty') ? 'has-error' : ''}}">
                                    <label for="packing_qty" class="w-100 control-label">Package Qty:</label>
                                    <input type="text" name="packing_qty" id="packing_qty" class="form-control text-center"  value="{{ old('packing_qty',($loadingRequest->oldestInsuranceCertificate->packing_qty ?? '')) }}"
                                        {{($clientAccess || 
                                          (isset($loadingRequest->oldestInsuranceCertificate->packing_types_id) && $loadingRequest->oldestInsuranceCertificate->packing_types_id == 8))  ? '' : 'readonly'}}>
                                </div>
                            </div>
                        @endif

                        <div class="row topQtd">
                            <div class="col-6 {{ $errors->has('netWeight') ? 'has-error' : ''}}">
                                <label for="netWeight" class="w-100 control-label">Peso Líquido:</label>
                                <input type="text" name="netWeight" id="netWeight" class="form-control text-center"  value="{{ old('netWeight',($loadingRequest->oldestInsuranceCertificate->netWeight ?? '')) }}"
                                    {{$clientAccess ? '' : 'readonly'}}>
                            </div>
                            <div class="col-6 {{ $errors->has('grossWeight') ? 'has-error' : ''}}">
                                <label for="grossWeight" class="w-100 control-label">Peso Bruto:</label>
                                <input type="text" name="grossWeight" id="grossWeight" class="form-control text-center"  value="{{ old('grossWeight',($loadingRequest->oldestInsuranceCertificate->grossWeight ?? '')) }}"
                                    {{$clientAccess ? '' : 'readonly'}}>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
            <!--------------------------------- </ Quarto bloco - Mercadoria > ------------------------------>
        </div>


        <!--------------------------------- < Quinto bloco - Attachments & botões > ------------------------------>
        <div class="folha-interna col col-lg-12 col-sm-12 col-md-12 rounded" style="margin-top: 20px;">
            <div class="row">
                <div class="col-3">
                    <div class="row place-content-center">                
                        <div class="col {{ $errors->has('insurancePremium') ? 'has-error' : ''}}">  
                            <label for="insurancePremium" class="w-100 control-label">Preenchimento Seguradora</label>          
                            <div class="form-control wrapperForm" style="height:38px !important" id="wrapperForm" onclick="$('#insurancePremium').focus()">
                                <div class="row">
                                    <div class="col-label" style="width: 135px;">
                                        <span>Prêmio Seguro: USD </span>
                                    </div>
                                    <div class="col p-left-0">
                                        <input type="text" name="insurancePremium" id="insurancePremium" value="{{ old('insurancePremium',($loadingRequest->oldestInsuranceCertificate->insurancePremium ?? '')) }}"
                                        {{$insuranceCompanyAccess ? '' : 'readonly'}}>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col">
                    <div class="row place-content-center">
                        <label for="attach-child" class="w-100 control-label" style="margin-left: 14px;">Attachments</label>
                        <div class="col col-lg-12 col-sm-12 col-md-12 input-group control-group increment-attach"
                            id="increment-attach">
                            <span id="attach-child">
                                <div
                                    class="col col-lg-4 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']) !!}  
                                </div>
                                <div class="col col-lg-7 col-sm-12 col-md-12 pb-3 increment archives ">
                                    <input type="file" name="nmAnexo[]" class="form-control filenameForm"
                                        multiple="multiple"  style="height:40px;">
                                </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>
                    
                </div>

                <div class="w-100 spaceTop"></div>
                <div class="col">
                    <label class="w-100 control-label">Attachments</label>
                    <div class="col col-lg-12 col-sm-12 col-md-12 ">
                        <!-- Ao adicionar $attachments ao controller desta tela, 'descomentar' o código abaixo -->
                        @yield('attach_edit_list')
                    </div>
                </div>
                <div class="col">
                    <label class="w-100 control-label">Amendments</label>

                    <div class="table-responsive">
                        <table class="table-striped text-center" id="table" 
                        data-toggle="table" 
                        data-detail-formatter="detailFormatter" 
                        data-page-list="[100, 200, 300, 400, all]" 
                        data-show-footer="true"
                        data-click-to-select="true"
                        data-pagination="true" 
                        data-toolbar="#toolbar" 
                        data-height="auto" 
                        data-export-data-type="all" >
                            <thead>
                                <tr class="trSuperBlue">
                                    <th data-field="SAOE" data-sortable="true" class="text-center">Solicitante</th>
                                    <th data-field="clients.fantasyName" data-sortable="true" class="text-center">Data</th>
                                    <th data-field="platforms.descricao" data-sortable="true" class="text-center">amendment</th>
                                </tr>
                            </thead>
                            <tbody>
                                @isset($loadingRequest->oldestInsuranceCertificate->insuranceCertificateDetails)
                                    @foreach ($loadingRequest->oldestInsuranceCertificate->insuranceCertificateDetails as $icd)
                                        @if ($icd->amendment == '') @continue  @endif
                                        <tr>
                                            <td>{{$icd->listUserCreate->nome}}</td>
                                            <td>{{$icd->created_at}}</td>
                                            <td>{{$icd->amendment ?? ''}}</td>
                                        </tr>                                    
                                    @endforeach                                    
                                @endisset
                            </tbody>
                        </table>
                    </div>
                    <span class='sep-line align-items-center'></span>
                </div>

                <!-- --------------------------- Sets de botões --------------------------- -->
                <div class="w-100"></div>

                <div class="col-12 buttonSet" id="setBtn1">
                    @if ($clientAccess)

                        @if (isset($loadingRequest->oldestInsuranceCertificate->insuranceCertificateDetails))

                            @if ($loadingRequest->oldestInsuranceCertificate->status == 'Waiting for Approval')
                                <button class="btn btn-padrao" id="aproveBtn" name="aproveBtn" value="submit" type="submit">Aprove</button>
                            @endif

                            <div class="btn btn-padrao" id="amendBtn" name="amendBtn" data-toggle="modal" data-target="#amend">Amend</div>
                        @endif

                    @endif
                    <button class="btn btn-padrao" id="saveBtn" name="saveBtn" value="submit" type="submit">Save</button>
                    <a href="{{route('insuranceCertificate.index')}}" class="btn btn-padrao" id="cancelBtn" name="cancelBtn">Cancel</a>
                </div>

            </div>
        </div>
        <!--------------------------------- </ Quinto bloco - Attachments & botões > ------------------------------>

    </div>

  <div class="modal modal-danger fade" id="amend" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div style="width: 70%;" class="modal-dialog modal-lg">
      <div class="modal-content">
        {{ csrf_field() }}
        <input type="hidden" name="loading_requests_id" value="{{$loadingRequest->id}}">
        <div class="modal-header">
          <head>
            <div class="col" style="padding:12px; font-size: 16px;">
              <div class="row">
                <div class="col">
                  <h3> Insurance Amend </h3>
                </div>
                <div class="col-2">
                  <img src="{!! asset('/image/tabex_Logo344x235.png') !!}" alt="logo" height="90" style="margin-top: -2px;">
                </div>
              </div>
            </div>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" onClick="$('.modal-backdrop').remove()" style="margin-top:-17px;">
              <span aria-hidden="true">&times;</span>
            </button>
          </head>
        </div>

        <div class="modal-body styleOfModalBody">
          <label for="beneficiaryInformation" class="w-100 control-label" style="font-size: 1.5rem;">Alterações:</label>
          <textarea class="form-control textsArea" name="amendment" id="amendment" cols="30" rows="10" maxLength="500" style="height: 55px" onkeyup="countChar(this)" onchange="countChar(this)" onclick="countChar(this)"></textarea>
          <div id="counter" class="text-right"></div>
        </div>
        <div class="footer text-right">
          <button class="btn btn-style" type="submit" value="submit" style="margin-right: 1%">Save</button>
          <button class="btn btn-style" data-dismiss="modal" aria-label="Close" type="button" onClick="$('.modal-backdrop').remove()"> Cancel </button>
        </div>
      </div>
    </div>
  </div>
</form>
<script>
    // Aplicando máscara aos inputs 
     $(document).ready(function(){
        $('#insuranceValue').mask('#.##0,00', {reverse: true});
        $('#netWeight').mask('#.##0,00', {reverse: true});
        $('#grossWeight').mask('#.##0,00', {reverse: true});
        $('#insurancePremium').mask('#.##0,00', {reverse: true});
    });

    // Conta caracteres no input do modal
    function countChar(val) {
        var len = val.value.length;

        if (len > 490) {
            $('#counter').css({
                "color": "red"
            });
        } else {
            $('#counter').css({
                "color": "#8c8c8c"
            });
        }

        if (len >= 499) {
            if (len == 500) {
                $('#counter').text(0 + " characters left");
            } else {
                $('#counter').text((500 - len) + " character left");
            }
        } else {
            $('#counter').text((500 - len) + " characters left");
        }
    };
</script>

<script src="https://unpkg.com/bootstrap-table@1.18.1/dist/bootstrap-table.min.js"></script>
@include('bibliotecas.floattheadOverflow')
@include('insuranceCertificate.style')
@include('include.modal_deletar', ["rota" => "Anexo"])
<script>
        $(document).ready(function() {
            /********** ENTER PULA UMA LINHA NO COMMENTS */
            $('input[type=text], textarea').keypress(function(event) {
                if (event.which == 13) {
                    event.preventDefault();
                    this.value = this.value + "\n";
                }
            });

            if ($('#packing_types_id').val() == '8') {
                $('#packing_qty').val($('#containerQty').val());
                $('#packing_qty').prop('readonly', true);
            }
            else {
                $('#packing_qty').prop('readonly', false);
            }

        })

        $( document ).on('input','[name^="packing_types_id"]',function() {
            $(this).change(function() {
                if ($(this).val() != '') {
                    if ($(this).val() == '8') {
                        $('#packing_qty').val($('#containerQty').val());
                        $('#packing_qty').prop('readonly', true);
                    }
                    else {
                        $('#packing_qty').prop('readonly', false);
                    }
                }
            });
        });


</script>
@endsection