@extends('layouts.app')

@section('content')
    <!-- end sidebar menu -->
    <!-- start page content -->

    {{-- @dump($data) --}}
    {!! Form::open(['url' => ['orden-letra-store/' . $id],'method'=>'POST','enctype'=>'multipart/form-data','role'=>'form','id'=>'frmEmpleados']) !!}
    <div class="page-content-wrapper">
        <div class="page-content" style="min-height:1200px">
            <div class="page-bar">
                <div class="page-title-breadcrumb">
                    <!--<div class="pull-left">
                            <div class="page-title text-danger">Sin Sucursal</div>
                        </div>-->
                    <ol class="breadcrumb page-breadcrumb pull-right">
                        <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item"
                                href="{{ url('/dashboard') }}">Inicio</a>&nbsp;<i class="fa fa-angle-right"></i>
                        </li>
                        <li class="active">Agregar Detalle</li>
                    </ol>
                </div>
            </div>

            <h2>Información de letra de cambio</h2>
            <div class="card p-5">
                <div class="row">
                    <div class="col-sm-12 col-md-6">
                        <table class="table table-striped">
                            <tr>
                                <td>Orden #</td>
                                <td>{{ $data->orden_producto_numero }}</td>
                            </tr>
                            <tr>
                                <td>Cliente</td>
                                <td>{{ $data->cliente_nombres }} {{ $data->cliente_apellido1 }}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-sm-12 col-md-6">
                        <table class="table table-striped">
                            <tr>
                                <td>Beneficiario </td>
                                @if ($beneficiario)
                                    
                                <td> {{ $beneficiario->cliente_nombres }} {{ $beneficiario->cliente_apellido1 }} </td>
                                @endif
                            </tr>
                            <tr>
                                <td>Valor total</td>
                                <td>
                                    ₡
                                    {{ number_format($valor_a_pagar, 2, '.', ',') }}
                                   
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>

            </div>

            <div class="card mt-5 p-5">
                <div class="box box-success">
                    <div class="box-body">
                        <div class="row">
                            <div class="col-sm-6">


                                <div
                                    class="form-group highlight-addon field-ordenproducto-orden_producto_letra_cambio has-success">
                                    

                                        <div class="col-6">
                                            <label for="subalterno" class="form-label">Incluye Letra Cambio?</label><br>
                                            <input type="checkbox" name="incluye_letra_cambio" id="subalterno" data-off="No" data-on="Si"    data-toggle="toggle" data-onstyle="primary" data-offstyle="danger"  onchange="habilitarCamposLetra(this)">
                                        </div>


                                    <div class="help-block"></div>

                                </div>

                            </div>

                            <div class="col-sm-6" style="">
                               

                                <div
                                    class="form-group highlight-addon field-ordenproducto-orden_producto_letra_cambio_numero">
                                    <label class="control-label has-star"

                                        for="ordenproducto-orden_producto_letra_cambio_numero">Letra de cambio #</label>

                                    <input 
                                        type="text" 
                                        id="ordenproducto-orden_producto_letra_cambio_numero"
                                        class="form-control" 
                                        name="orden_producto_letra_cambio_numero"
                                        placeholder="Letra de cambio #"
                                        >

                                </div>

                            </div>

                        </div>

                        <div class="row">
                            <div class="col-sm-6" style="">


                                <div class="form-group highlight-addon field-ordenproducto-orden_producto_letra_cambio_valor">

                                    <label 
                                        class="control-label has-star"
                                        for="ordenproducto-orden_producto_letra_cambio_valor"
                                        >Valor Letra De Cambio</label>

                                    <input 
                                        type="text" 
                                        id="ordenproducto-orden_producto_letra_cambio_valor"
                                        class="text-right form-control"
                                        name="ordenproducto_orden_producto_letra_cambio_valor_disp"
                                        data-thousands="." 
                                        data-decimal="," 
                                        data-prefix="₡ "
                                        onchange="recalculoCuota()"
                                        >

                                     {{--    <input type="hidden"
                                        id="ordenproducto-orden_producto_letra_cambio_valor" 
                                        class="text-right"
                                        name="letra_valor"
                                        data-krajee-maskmoney="maskMoney_e1f65289"
                                        > --}}

                                    <div class="help-block"></div>

                                </div>

                            </div>

                            <div class="col-sm-6" style="">


                                <div
                                    class="form-group highlight-addon field-ordenproducto-orden_producto_letra_cambio_cuotas">
                                    <label 
                                        class="control-label has-star"
                                        for="ordenproducto-orden_producto_letra_cambio_cuotas">Cantidad de Cuotas
                                    </label>                                   
                                    <input type="number" 
                                        name="numero_cuotas" 
                                        id="ordenproducto-orden_producto_letra_cambio_cuotas" 
                                        class="form-control" 
                                        onchange="calcularCobrosLetra()"
                                    >

                                </div>

                            </div>

                        </div>

                        <div class="row">
                            <div class="col-sm-6">

                                <input type="hidden" name="producto" value="{{$id}}">
                                <div class="form-group highlight-addon field-ordenproducto-orden_producto_valor_a_pagar">
                                    <label class="control-label has-star"
                                        for="ordenproducto-orden_producto_valor_a_pagar">Valor Primer Pago en Caja</label>
                                    <input type="hidden" name="primer_pago" id="primer_pago">
                                    <input 
                                        type="text" 
                                        id="ordenproducto-orden_producto_valor_a_pagar-disp"
                                        class="text-right form-control"
                                        name="ordenproducto_orden_producto_valor_a_pagar_disp" 
                                        readonly
                                        data-thousands="." 
                                        data-decimal="," 
                                        data-prefix="₡ "
                                        >

                                </div>

                            </div>

                            <div class="col-sm-6" style="">


                                <div
                                    class="form-group highlight-addon field-ordenproducto-orden_producto_letra_cambio_file">
                                    <label class="control-label has-star"
                                        for="ordenproducto-orden_producto_letra_cambio_file">Letra de Cambio
                                        Adjunto</label>

                                  <input type="file" name="file" id="" class="form-control">
                                   
                                </div>

                            </div>

                        </div>

                        <div class="row">
                            <div class="col-sm-6">


                                <div class="form-group highlight-addon field-ordenproducto-orden_producto_observacion">
                                    <label class="control-label has-star"
                                        for="ordenproducto-orden_producto_observacion">Observacion</label>

                                    <textarea id="ordenproducto-orden_producto_observacion" class="form-control"
                                        name="orden_producto_observacion" placeholder="Observacion"></textarea>

                                    <div class="help-block"></div>

                                </div>

                            </div>

                            <div class="col-sm-6">

                                <input 
                                    type="hidden" 
                                    id="ordenproducto-valor_total" 
                                    name="valor_total"
                                    placeholder="Valor Total"
                                    value="{{ $valor_a_pagar }}"
                                    
                                    >
                            </div>

                        </div>

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


            <div class="card mt-5 p-5">
                <div class="box box-warning">
                    <div class="box-body">
                        <!-- DETALLE LETRA -->
                        <div class="tab-pane" id="detalle-letra">
                            <div class="row col-md-12 text-right" id="content-param-letra">
                                <a class="btn btn-info" 
                                onclick="calcularCobrosLetra()" 
                                data-toggle="tooltip" 
                                data-title="Calcular los cobros para la letra de cambio.">
                                <i class="fa fa-calculator">
                                </i> Calcular Cobros</a>					
                            </div>
        
                            <!-- LISTA DE COBROS -->
                            <div class="row" id="content-cobros">
                                <hr>
                                <div class="col-md-12">
                                    <table class="table  table-striped">
                                        <thead>
                                            <tr>
                                                <th>Concepto</th>
                                                <th>Fecha Aplicación</th>
                                                <th>Fecha Limite</th>
                                                <th>valor</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        
                                        
                                     
                                        <tbody id="content_cobros-items">
                                          
                                        </tbody>

                                       


                                    </table>
                                </div>                            
                            </div>
                            <div class="card-footer text-center">
                                <div class="text-center">
                                    {{-- orden-letra-create/ --}}
                                    @if (auth()->user()->hasPermissionTo('bill-of-exchangeOrden-producto'))
                                        <button onclick="validarCamposLetra()" type="button" class="btn bg-success" id="btnValid">Guardar y seguir</button>
                                    @endif
                                    <a class="btn bg-danger" href="{{url('orden/' .$id. '/ver')}}">Cancelar</a>
                                </div>
                            </div>
                           
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    {!! Form::close() !!}
@endsection

@section('script')
<script>
    let servicios_arr = [];
    document.getElementById('btnValid').disabled = true;
    
        $(document).ready(function(){
            $("#ordenproducto-orden_producto_letra_cambio_valor").change(function(){
              /*   calcularValores(); */
                calcularCobrosLetra();
                $("#ordenproducto-orden_producto_valor_a_pagar-disp").maskMoney().maskMoney('mask');
              
            });
            $(".field-ordenproducto-orden_producto_letra_cambio_cuotas").change(function(){

                /* console.log("holaa") */
                /* calcularValores(); */
                calcularCobrosLetra();
                $("#ordenproducto-orden_producto_valor_a_pagar-disp").maskMoney().maskMoney('mask');
            });
        });
            
        function habilitarCamposLetra(valor){
           
           /*  let mostrar = false;
            if( valor ){
                mostrar = true;
            }
            console.log(valor) */
            $(".field-ordenproducto-orden_producto_letra_cambio_numero").parent().toggle();
            $(".field-ordenproducto-orden_producto_letra_cambio_cuotas").parent().toggle();
            $(".field-ordenproducto-orden_producto_letra_cambio_valor").parent().toggle();
            $(".field-ordenproducto-orden_producto_letra_cambio_file").parent().toggle();
            $("#div_detalle_letra").toggle();
            $("#li-letra").toggle();
            $("#a-detalle").click();
            $("#ordenproducto-orden_producto_letra_cambio_valor").maskMoney().maskMoney('mask');
            $("#ordenproducto-orden_producto_valor_a_pagar-disp").maskMoney().maskMoney('mask');

            /* verify is ordenproducto-orden_producto_letra_cambio_numero is visible add attr required */
            if($("#ordenproducto-orden_producto_letra_cambio_cuotas").is(':visible')){
                /* $("#ordenproducto-orden_producto_letra_cambio_cuotas").attr('required', true); */

            }else{
                $("#ordenproducto-orden_producto_letra_cambio_cuotas").removeAttr('required');
            }
            
        }
                
        function removeItem(ele, eliminar, servicio_id){
                
            if(eliminar){
                let index = servicios_arr.indexOf(String(servicio_id));
                servicios_arr.splice(index, 1);
            }
            $(ele).parent().parent().remove();
            calcularValores();
        }
                
        function calcularValores(){
            document.getElementById('btnValid').disabled = false;

            let valor_total = $("#ordenproducto-valor_total").val().replaceAll('₡', '') || 0;
           /*  valor_total = $('#ordenproducto-valor_total').val().replaceAll('₡', ''); */
          

            valor_total = parseInt(valor_total.replaceAll('.', ''));
            
            let valor_letra = $("#ordenproducto-orden_producto_letra_cambio_valor").val().replaceAll('₡', '') || 0;
           /*  valor_letra = $('#ordenproducto-orden_producto_letra_cambio_valor').val().replaceAll('₡', ''); */
           valor_letra = parseFloat(valor_letra.replaceAll('.', ''));
            
            let valor_a_pagar = valor_total - valor_letra;
            $("#ordenproducto-orden_producto_valor_a_pagar").val(valor_a_pagar);
           /*  console.log(typeof valor_total) */
           
            $("#ordenproducto-orden_producto_valor_a_pagar-disp").val(valor_a_pagar);
            $("#primer_pago").val(Number(valor_a_pagar).toFixed(2));
        }

        function recalculoCuota(){
            let valor_total = $("#ordenproducto-valor_total").val().replaceAll('₡', '') || 0;
            valor_total = parseFloat(valor_total);

            let valor_letra = $("#ordenproducto-orden_producto_letra_cambio_valor").val().replaceAll('₡', '') || 0;
           /*  valor_letra = $('#ordenproducto-orden_producto_letra_cambio_valor').val().replaceAll('₡', ''); */
           valor_letra = parseFloat(valor_letra.replaceAll('.', ''));
            
            let valor_a_pagar = parseFloat(valor_total - valor_letra);
            
          
           /*  console.log(typeof valor_total) */
           
            $("#ordenproducto-orden_producto_valor_a_pagar-disp").val(Number(valor_a_pagar).toFixed(2));

            $("#ordenproducto-orden_producto_valor_a_pagar-disp").maskMoney().maskMoney('mask');
            $("#primer_pago").val(Number(valor_a_pagar).toFixed(2));
        }
       
        function validarCamposLetra(){
           let is_valid = false;
           
           let valor_letra = $("#ordenproducto-orden_producto_letra_cambio_valor").val().replaceAll('₡', '');
            valor_letra = parseFloat(valor_letra.replaceAll('.', ''));
            let valor_total = $("#ordenproducto-valor_total").val().replaceAll('₡', '');
            valor_total = parseFloat(valor_total.replaceAll('.', ''));
            let message = '';
            if($("#subalterno").is(':checked')){
                
                if ($("#ordenproducto-orden_producto_letra_cambio_numero").val() == '') {
                    message ="Debe ingresar el número de la letra de cambio.";
                    is_valid = false;
                    return Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: message,
                    });
                }else{
                    is_valid = true;
                }
                    
                if ($("#ordenproducto-orden_producto_letra_cambio_cuotas").val() == '' || $("#ordenproducto-orden_producto_letra_cambio_cuotas").val() < 1) {
                   message = "Dede ingresar la cantidad de cuotas.";
                   is_valid = false;
                   return Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: message,
                    });
                }else{
                    is_valid = true;
                }
                
                if ( valor_letra == 0) {
                    message = "Debe ingresar el valor de la letra de cambio.";
                    is_valid = false;
                    return Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: message,
                    });
                }else{
                    is_valid = true;
                }
                    
                if( (valor_letra > valor_total)){
                    message = "El valor de la letra de cambio es mayor al valor total a pagar.";
                    is_valid = false;
                    return alert(message)
                    return Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: message,
                    });
                }else{
                    is_valid = true;
                }

            }
          
            if(is_valid){
                submit();
            }else{
                return Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: message,
                });
            }
        }

        function submit(){
            $("#frmEmpleados").submit();
        }
                    
        function calcularCobrosLetra(){
    
           /*  if(!validarCamposLetra()){
                return false;
            } */
                    
            let cantidad_cuotas = $("#ordenproducto-orden_producto_letra_cambio_cuotas").val();
            let valor_letra = $("#ordenproducto-orden_producto_letra_cambio_valor").val().replaceAll('₡', '');
            valor_letra = parseFloat(valor_letra.replaceAll('.', ''));
            console.log(valor_letra)
            valor_letra = parseFloat(valor_letra)
            valor_letra = Number(valor_letra).toFixed(2)
            let valor_cuota = parseFloat(parseFloat(valor_letra)/cantidad_cuotas).toFixed(2);
            let valor_cuota_aux = 0;
            $("#content_cobros-items").html('');                
         
            
            var HTML = '';
            let concepto = '';
            let fecha_aplicacion_text = '';
            let fecha_limite_text = '';
            let fecha_aplicacion = new Date();
            let fecha_limite = new Date();
            let content = $("#content_cobros-items");
            let valores = $('#valores');
            let cont = 0;
                    
            fecha_limite.setDate(fecha_limite.getDate() + 30);
                    
            for(i=0; i<cantidad_cuotas; i++){
                cont = content.find('tr').length;
              /*   console.log({cont, cantidad_cuotas}) */
                fecha_aplicacion.setDate(fecha_aplicacion.getDate() + 30);
                fecha_limite.setDate(fecha_limite.getDate() + 30);
                    
                fecha_aplicacion_text = fecha_aplicacion.toJSON().slice(0,10);
                fecha_limite_text = fecha_limite.toJSON().slice(0,10);
                concepto = 'Pago cuota del ' + fecha_aplicacion_text;
                    
                if(i == (cantidad_cuotas -1)){
                    valor_cuota = parseFloat(valor_letra - valor_cuota_aux).toFixed(2);
                }
                valor_cuota_aux = parseFloat(valor_cuota_aux) + parseFloat(Number(valor_cuota).toFixed(2));
               
              

                content.append("<tr><td><input type='hidden' name='Cobros["+cont+"][cobro_concepto]' value='"+concepto+"'/>"+concepto+"</td><td><input type='hidden' name='Cobros["+cont+"][cobro_fecha_aplicacion]' value='"+fecha_aplicacion_text+"'/>"+fecha_aplicacion_text+"</td><td><input type='hidden' name='Cobros["+cont+"][cobro_fechalimite]' value='"+fecha_limite_text+"'/>"+fecha_limite_text+"</td><td> <input type='hidden' name='Cobros["+cont+"][cobro_valor]' value='"+valor_cuota+"' />"+valor_cuota+"</td><td><button type='button' onclick='removeItem(this,false, 0)' class='btn btn-danger delete-row'>Borrar</button></td></tr>")               

                

            }
        }
                
       /*  $("#frmEmpleados").on('submit',function(){
            return validarCamposLetra();
        }); */

        
       /*  function submit(){
            
            let form = document.getElementById('frmEmpleados');
            let formData = new FormData(form);

            let content = $("input[name='cobroconcepto[EstoPriceInput]']");

            console.log(content)
        

            formData.append('cobroconcepto[]', [])


        } */
                
        habilitarCamposLetra();
        calcularValores();
        calcularCobrosLetra();
        
    </script>


@endsection