@extends('layout.padrao')
@section('title', 'Extra Service Payment Request')
@section('content')

@include('extraServicePaymentRequest.script')
@include('extraServicePaymentRequest.style')


<div class="row folha-interna folha-branca-soft shadow col col-lg-12 col-sm-12 col-md-12 p-3 mb-5 rounded" style="padding: 25px !important">
        <div class="col-9 display-inline-flex">
            <form action="{{ route('extraServicePaymentRequest.create') }}" method="GET" accept-charset="UTF-8">
                <div class="row align-items-center">
                    <label for="searchBooking">SAOE ou Booking:</label>
                    <div class="col-4">
                        <input class="form-control" type="text" id="searchBooking" name="searchBooking" oninvalid="this.setCustomValidity('Favor preencher com o número do Booking ou SAOE')" oninput="this.setCustomValidity('')" required>
                    </div>
                    <button class="btn btn-blue" id="btnSearch" value="view" name="btnSearch" type="submit">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </form>
        </div>
        @isset($loadingRequest)


        <form class="row justify-content-center" 
                action="{{route('extraServicePaymentRequest.store')}}"  
                method="POST"
                files="true"
                accept-charset="UTF-8" enctype="multipart/form-data" 
                id="mainForm">
                    {{ method_field('PUT') }}
                    {{ csrf_field() }}
            <input type="hidden" name="loading_requests_id" value="{{$loadingRequest->id}}">
        <div class="folha-interna folha-branca-contornada shadow col col-lg-12 col-sm-12 col-md-12 rounded margin-top-30">
                <div class="col col-lg-12 col-sm-12 col-md-12">
                    <div class="row">
                        <div class="col col-lg-1 col-sm-1 col-md-1">
                            <img src="{!! asset('/image/csa_Logo78x74.png') !!}">
                        </div>
                        <div class="col align-items-center">
                            <h3>Booking Information</h3>
                        </div>
                        <div class="w-100"></div>
                        <div class="sep-line3"></div>

                        <div class="col-6">
                            <label for="clients_id">Client:</label>
                            <span id="clients_id" name="clients_id">{{$loadingRequest->clients->name ?? ''}}</span>
                            <br>

                            <label for="booking">Booking:</label>
                            <span id="booking" name="booking">{{$loadingRequest->booking ?? ''}}</span>
                            <br>

                            <label for="platforms_id">Product:</label>
                            <span id="platforms_id" name="platforms_id">{{$loadingRequest->platforms->descricao ?? ''}}</span>
                            <br>

                            <label for="carriers_id">Carrier:</label>
                            <span id="carriers_id" name="carriers_id">{{$loadingRequest->carriers->descricao ?? ''}}</span>
                            <span> - </span>
                            <label for="vessel_id">Vessel:</label>
                            <span id="vessel_id" name="vessel_id">{{$loadingRequest->vessel->descricao ?? ''}}</span>
                            <span> - </span>
                            <label for="voyage">Voyage:</label>
                            <span id="voyage" name="voyage">{{$loadingRequest->voyage ?? ''}}</span>
                            <br>

                            <label for="port_destinations">Destination Port:</label>
                            <span id="port_destinations" name="port_destinations">{{$loadingRequest->code_of_ports1->place ?? ''}}</span>
                        </div>

                        <div class="col">
                            <label for="BlDate">BL Date:</label>
                            <span id="BlDate" name="BlDate">{{ isset($loadingRequest->loading_confirmations) && $loadingRequest->loading_confirmations->pluck('BlDate') && count($loadingRequest->loading_confirmations->pluck('BlDate')) > 0 ? date( 'd-m-Y' , strtotime($loadingRequest->loading_confirmations->pluck('BlDate')->implode(' '))) : '-'  }}</span>
                            <br>

                            <label for="BlNumber">BL Nº:</label>
                            <span id="BlNumber" name="BlNumber">{{isset($loadingRequest->loading_confirmations) && $loadingRequest->loading_confirmations->pluck('BlDate') && count($loadingRequest->loading_confirmations->pluck('BlNumber')) > 0 ? $loadingRequest->loading_confirmations->pluck('BlNumber')->implode(' ') : '-'  }}</span>
                            <br>

                            <label for="loading_ports_id">POL:</label>
                            <span id="loading_ports_id" name="loading_ports_id">{{$loadingRequest->loading_ports->descricao ?? ''}}</span>
                            <br>

                            <label for="qtyEquipments">Qty Equipments:</label>
                            <span id="qtyEquipments" name="qtyEquipments">{{$loadingRequest->containerQty ?? ''}}</span>
                            <br>

                            <label for="container_types_id">Equipment Type:</label>
                            <span id="container_types_id" name="container_types_id">{{$loadingRequest->container_types->descricao ?? ''}}</span>
                            <br>
                        </div>
                    </div>
                </div>
        </div>
        <div class="w-100"></div>

        <div class="row col margin-top-30">
            <div class="col-4" style="max-width: 300px">
                <label for="paymentTo">Payment To:</label>
                <div class="row">
                    <select class="form-control" name="paymentTo" id="paymentTo" style="margin-left: 15px;" required>
                        @foreach($select['client_types_id'] as $key => $paymentTo)
                            <option value="{{$key}}">{{$paymentTo}}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="col-4" style="max-width: 700px">
                <label for="clients_id">Client:</label>
                <div class="row">
                    <select class="form-control clients_id" name="clients_id" id="clients_id" style="margin-left: 15px;" required>
                        <option value="required">- select required -</option>
                    </select>
                </div>
            </div>
            
            <div class="col-2" style="max-width: 126px">
                <label for="currencie">Currency:</label>
                <div class="row">
                    <select class="form-control" name="currencie" id="currencie" style="margin-left: 15px;" required>
                        <option value="21">BRL</option>
                        <option value="148">USD</option>
                    </select> 
                </div>
            </div>
        </div>

        {{-- <div class="sep-line3 margin-top-30 margin-bottom-20"></div> --}}

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

        <style>

        .invoice-style{
            margin-left: 0px !important;
        }

        legend{
            margin-bottom: 3px !important; 
            margin-top: 3px !important;
            font-size: 0.6em !important;
            border-bottom: none !important; 
        }

        table{
            margin-top: 15px;
            width: 100%;
            text-align: center;
            overflow:hidden;
            border-collapse:separate;
            border: solid #ccc 1px;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
                    border-radius: 6px;
        }
        </style>
        {{-- <div class="row col margin-top-15"> --}}
        <div class="row col margin-top-20 justify-content-center">
            <div class="col col-lg-12 col-md-12 col-sm-12 margin-top-15">
                <table class="table table-striped" id="amount-table">
                    <thead>
                        <tr class="trSuperBlue">
                            <th class="text-center"></th>
                            <th class="text-center">Service Type</th>
                            <th class="text-center" width="60px"></th>
                            <th class="text-center">Qty</th>
                            <th class="text-center price_th">Price (BRL)</th>
                            <th class="text-center">Total</th>
                            <th class="text-center">Loss</th>
                            <th class="text-center">Buyer</th>
                        </tr>
                    </thead>
                    <tbody class="tbody-main">
                        <tr class="text-center tr-clone">
                            <!-- < Botão delete > -->
                            <td style="height: 77px">
                                <div type="button" name="remove[]" class="btn deleteLinha disabled" id="deleteLineTr0">
                                    <img src="/image/minus.svg" class="botao-circular-delete">
                                </div>
                            </td>
                            <!-- < Select Service Type > -->
                            <td class="vertical-align-middle">
                                <select class="form-control serviceType" name="serviceType[]" required>
                                    <option value="required">- select required -</option>
                                </select>
                            </td>

                            <td></td>

                            <!-- < Input Qty > -->
                            <td class="vertical-align-middle">
                                <input type="number" class="form-control" min="0" name="itemQty[]" id="itemQty0" required>
                            </td>

                            <!-- < Input Price > -->
                            <td class="vertical-align-middle">
                                <input type="text" class="form-control maskReal vltotalS"  name="itemPrice[]" id="itemPrice0" required onblur="calcular()">
                            </td>

                            <!-- < Input Valor total - usado nos calculos > -->
                            <td class="vertical-align-middle">
                                <input style="display: none;" type="text" class="form-control soma" id="vltotal[]" name="vltotal0" onblur="calcular()">
                                <input type="text" class="form-control somaS" id="vltotalS" readonly>
                            </td>

                            <!-- < Checkbox Loss > -->
                            <td class="vertical-align-middle">
                                <input type="radio" name="itemLossBuyer[0]" id="itemLoss0" checked  value="loss" class="itemLoss">
                            </td>

                            <!-- < Checkbox itemBuyer > -->
                            <td class="vertical-align-middle">
                                <input type="radio" name="itemLossBuyer[0]" id="itemBuyer0" value="buyer" class="itemBuyer">
                            </td>

                        </tr>

                    </tbody>
                    <tfoot>
                        <tr>
                            <td class="text-center align-items-center justify-content-center" style="height: 77px">
                                <div type="button" name="add" id="add" class="btn margin-top-10" data-toggle="tooltip" data-placement="top" title="Add one more line">
                                    <div class="circleIcon">
                                        <img src="{!! asset('/image/plus.svg') !!}" class="botao-circular-add">
                                    </div>
                                </div>
                            </td>

                            <td></td>
                            <td></td>
                            <td></td>

                            <td class="text-right vertical-align-middle">
                                <span class="price_td">
                                    Total Amount (BRL)
                                </span>
                            </td>
                            <td class="justify-content-center"><input type="text" class="total form-control" id="totalAmount" name="totalAmount" style="margin-top:14px" readonly></td>

                            <td></td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>

        <div class="w-100 margin-top-20"></div>
        <div class="row col">
            <div class="col-lg-3 col-sm-12 col-md-12 ">
                {!! Form::label('payment_date', '*Payment Date:', [ 'class' => 'control-label']) !!}
                <input  name="payment_date" type="date" min="{{date('Y-m-d')}}" max="2080-01-01" class="control-label form-control" >         
                <legend>Preencher com o dia do vencimento indicado na fatura.</legend>
            </div>
            <div class="col-lg-3 col-sm-12 col-md-12 ">
                {!! Form::label('invoice_issue_date', '*Invoice Date:', [ 'class' => 'control-label']) !!}
                <input  name="invoice_issue_date" type="date" min="2022-01-01" max="2080-01-01" class="control-label form-control" >         
                <legend>Preencher com a data de emissão da fatura.</legend>
            </div>
            <div class="col-lg-4 col-sm-12 col-md-12">
                {!! Form::label('invoice_number', '*Invoice Number:', [ 'class' => 'control-label']) !!}
                <input  name="invoice_number" id="invoice_number_field" type="text" class="control-label form-control invoice-style">         
                <legend>Preencher com o número da Fatura.</legend>
                <div class="w-100 text-right display-flex justify-content-end" style="margin-top: -16px; align-items: flex-start">
                    <input type="checkbox" name="invoice_number_none" value="Yes" id='invoice_number_check' style="margin: 2px 5px 0 0 !important">
                    <label for="invoice_number_none" style="font-size: 1.2rem"> Sem número da Fatura </label>
                </div>
            </div>
        </div>
        <style>
            .invoice-style{
                font-size: 16px;
                color: #4e4e4e;
                margin-left:4px;
                border: 1px solid #ccc;
                padding: 10px;
                border-radius: 5px;
                text-transform: uppercase;
            }
        </style>
        <script>
            $('#invoice_number_check').click(function (val) {
                if($("#invoice_number_check").is(':checked')){
                    $('#invoice_number_field').val(null)
                    $('#invoice_number_field').attr('disabled',true)
                }else{
                    $('#invoice_number_field').prop('disabled',false)
                }
            });
        </script>

        <div class="w-100"></div>
        <div class="col margin-bottom-10">
            <h3 class="margin-bottom-20">Banking Details</h3>
           
            <div class="row col main-box" style="margin-left: 4px">
                <div class="col box-banks">
                    <div class="row">
                        <div class="col-1">
                            <input type="radio" class="form-check-input idBankDetails" name="itemBanking" value="1">
                        </div>
                        <div class="col">
                            <div class="folha-interna2 folha-branca-contornada rounded shadow text-center" style="max-width: 160px; font-size: 1.1rem">

                                <span class="companyName">Hamburg Sud Brasil Ltda</span><br>
                                CNPJ <span class="CNPJ">323232323</span><br>
                                Dados Bancários<br>
                                <span class="bank">Itau</span> (<span class="bankCode">341</span>)<br>
                                Agência <span class="agency">0910</span><br>
                                C/C <span class="conta">05118-4</span>

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

        <div class="sep-line3 margin-top-30 margin-bottom-30"></div>

        <div class="col col-sm-12 col-md-6 col-lg-6 border-divider-right">
            <h3 class="margin-bottom-20">Attachments</h3>

            <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="row col col-sm-12 col-md-12 col-lg-4 {{ $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="row col col-sm-12 col-md-12 col-lg-8 pb-3 increment archives">
                        <input type="file" name="nmAnexo[]" class="form-control filenameForm" 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-attachment attach-success" style="height:40px;">
                            <div class="circleIcon">
                                <img src="{!! asset('/image/plus.svg') !!}" class="botao-circular-add">
                            </div>
                        </div>
                    </div>
                </span>
            </div>
        </div>

        <div class="col col-sm-12 col-md-6 col-lg-6 border-divider-left">
            <h3 class="margin-bottom-20">Additional Comments</h3>
            <textarea class="form-control textsArea" name="additionalComments" id="additionalComments" 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>

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

    <div class="col col-sm-12 col-md-12 col-lg-12 text-right">
        @isset($loadingRequest)
            <button class="btn btn-blue" id="btnSave" value="save" name="btnSave" type="submit" >Save</button>
        @endisset
        <button class="btn btn-blue" id="btnCancel" name="btnCancel">Cancel</button>
    </div>
</div>
</form>
<!-- MODAL -->
<div class="modal modal-danger fade" id="AmountCompare" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <div class="row col">
                    <!-- Botão de fechar o modal -->
                    <div class="col-12">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" onClick="$('.modal-backdrop').remove()">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <!-- Informações do modal -->
                    <div class="w-100"></div>
                    <div class="col align-self-center">
                      <h3 class="title" style="fonte-size:12px !important;"> Checagens de Solicitações </h3>
                    </div>
                    <div class="col logoModal text-right">
                        <img src="{!! asset('/image/tabex_Logo344x235.png') !!}" alt="Logo Tabex" height="80px">
                    </div>
                </div>
                <Br />
            </div>

            <!-- Body -->
            <div class="modal-body text-center">
                <p class="modal-title"  style="fonte-size:10px !important; "> 
                    Solicitação de pagamento com o mesmo valor já solicitado, tem certeza que deseja realizar mais uma?
                </p>
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="submit"  class="btn btn-padrao"  value='LoadingController' id='SendForm'>Yes</button>
                <button class="btn btn-danger" data-dismiss="modal" aria-label="Close" onClick="$('.modal-backdrop').remove()">Cancel</button>
            </div>
        </div>
    </div>
</div>

<script>

    $(document).ready(function() {

        $('#currencie').on('change', function(){
            if($(this).val() != 21){
            $('.price_th').text('Price (USD)');
            $('.price_td').text('Total Amount (USD)');
            $('.currencie').val(148);
            } else {
            $('.price_th').text('Price (BRL)');
            $('.price_td').text('Total Amount (BRL)');
            $('.currencie').val(21);
            }
        });
        
        $(".attach-success").click(function () {
            /**attchment type control */
            $('[name="nmAnexo[]"]').each(function(index,value){
                $('[name="attach_qty[]"]').eq(index).val(this.files.length);
            });
            $('[name^="nmAnexo[]"]').on("change", function(e){
                $('[name="nmAnexo[]"]').each(function(index,value){
                    $('[name="attach_qty[]"]').eq(index).val(this.files.length);
                })
            });
            $('[name^="anexo_types_id"]').on("click", function(e){
                $('[name="nmAnexo[]"]').each(function(index,value){
                    $('[name="attach_qty[]"]').eq(index).val(this.files.length);
                })
            });

          });

        let myElement=$('.box-banks:first').clone();
        $('.box-banks').empty();

        $( document ).on('input','[name="paymentTo"]',function() {
            $(this).change(function () {
                $element=$(this);
                $('.main-box').empty();
                if ($element.val() != '') {
                    $.ajax({
                        url: '/extraServicePaymentRequest/client/' + $element.val(),
                        type: "get",
                        dataType: 'json',
                        success: function (response) {
                            $('.serviceType').find('option').remove();
                            $('.serviceType').append($('<option>', {value: '', text: '--- Select Required ---'}));

                            $.each(response, function (key, data) {
                                $.each(data.general_service_types, function (key1, data1) {
                                    $('.serviceType').append($('<option data-tokens="'+data1['id']+'"></option>').val(data1['id']).html(data1['description']));
                                })
                            })
                        },
                        error: function () {
                            console.error('Oops! Something went wrong.')
                        }
                    });
                }
            });
                
            $(this).change(function () {
                $element=$("#paymentTo option:selected");
                // console.log('aqui', $element.text(), $element.val())
                $('.clients_id').empty();
                $('.main-box').empty();
                if ($element.val() != '') {
                    
                    let finalRoute=($element.text() == 'CARRIER' ? '/carriers/type/' : '/clients/type/') + $element.text(); 
                    $.ajax({
                        url: finalRoute,
                        type: "get",
                        cache: "false",
                        dataType: 'json',
                        success: function (response) {
                            $('.clients_id').empty();
                            $('.clients_id').append($('<option>', {value: '', text: '--- Select Required---'}));

                            $.each(response, function (key, data) {
                                
                                    $('.clients_id').append($('<option data-tokens="'+data['id']+'"></option>').val(data['id']).html(data['name']));
                                
                            })
                        },
                        error: function () {
                            console.error('Oops! Something went wrong.')
                        }
                    });

                }
            });

        });

        $( document ).on('input','[name="clients_id"]',function() {
            $('.main-box').empty();

            let finalURL=($('#paymentTo option:selected').text() == 'CARRIER' ? '/carriers/bankdetails/id/' : '/clients/bankdetails/id/') + $(this).val()
        
            $(this).change(function () {
                $element=$(this);
                if ($element.val() != '') {
                    
                    $.ajax({
                        url: finalURL,
                        cache: false,
                        type: "get",
                        dataType: 'json',
                        success: function (response) {
                            $('.main-box').empty();
                            $.each(response, function (key, data) {
                                let myEmpty='';
                                
                                $.each(data.banking_details_client, function (key1, data1) {
                                    let localElement=myElement;

                                    localElement.find('.idBankDetails').val(data1.id);
                                    localElement.find('.CNPJ').text(data1.CNPJ);
                                    localElement.find('.bank').text(data1.bank);
                                    localElement.find('.bankCode').text(data1.bankCode);
                                    localElement.find('.agency').text(data1.bankAgency);
                                    localElement.find('.conta').text(data1.bankAccount);
                                    localElement.find('.companyName').text(data1.agencyName);
                                
                                    if (localElement.html() != 'undefined') myEmpty += localElement.html();
                                })
                                
                                $.each(data.bank_details, function (key1, data1) {
                                    let localElement=myElement;
                                    
                                    localElement.find('.idBankDetails').val(data1.id);
                                    localElement.find('.CNPJ').text(data1.CNPJ);
                                    localElement.find('.bank').text(data1.bank);
                                    localElement.find('.bankCode').text(data1.bankCode);
                                    localElement.find('.agency').text(data1.bankAgency);
                                    localElement.find('.conta').text(data1.bankAccount);
                                    localElement.find('.companyName').text(data1.agencyName);
                                    
                                    if (localElement.html() != 'undefined') myEmpty += localElement.html();
                                })
                                $('.main-box').append(myEmpty);
                            })
                        },
                        error: function () {
                            console.error('Oops! Something went wrong.')
                        }
                    });
                }
            });
        });
    });

    /****pegar PHP o valor...nao pode utilizar no script */
    $("#btnSave").on("click", function(e) {
        var modal='No';
        var amount_field=$("input[name='totalAmount']").val();
        var data=[];
        
        data.map(function(valor, i) {
            amount_field=amount_field.replace(".", "");
            amount_field=amount_field.replace(",", ".");
            if(amount_field == valor){
                modal='Yes';
            }
        });

        if (modal == 'Yes'){
            e.preventDefault();
            $('#AmountCompare').modal('show');          
        } else{
            $().submit();
        }
    });
    $("#SendForm").on("click", function(e) {
        $("#mainForm").submit();
    });

</script>


@endsection