@extends('layouts.app')

@section('content')
    <!-- end sidebar menu -->
    <!-- start page content -->
    <div class="page-content-wrapper">
        <div class="page-content">
            <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="pull-right">
                        <!-- <button class="btn btn-info" type="submit"><i class="fa fa-random"></i> Adelantar Cobros</button>
                            <button class="btn btn-primary" type="submit"><i class="fa fa-eraser"></i> Limpiar</button> -->

                    </ol>
                </div>
            </div>
            <!-- start widget -->
            <!-- start admited patient list -->
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <div class="card  card-box">
                        <div class="card-head">
                            <header>Pago de Producto</header>
                        </div>
                        <div class="card-body ">
                            <div class="row">
                                <div class="col-6">
                                    <label for="encargado" class="form-label">Cliente</label>
                                    <div class="input-group mb-3">
                                        {!! Form::select('cliente', [], null, [
                                            'id' => 'cliente',
                                            'class' => 'form-control',
                                            'style' => 'width: 90%;',
                                            'placeholder' => 'Seleccionar',
                                        ]) !!}
                                        <div class="input-group-append">
                                            <a class="btn btn-info" data-toggle="modal" data-target="#staticModal"><i
                                                    class="fa fa-plus"></i></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="input-group mb-3">
                                        <div class="form-group">
                                            <label for="saldo" class="form-label">Valor Total</label>
                                            <input disabled placeholder="{{ $simbolo_moneda . ' 0.00' }}" class="form-control"
                                                type="text" value="0.00" name="saldo" id="saldo"
                                                data-thousands="." data-decimal="," data-prefix="₡ " />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <label for="encargado" class="form-label">Vendedor</label>
                                    <div class="input-group mb-3">
                                        {!! Form::select('vendedor', [], null, [
                                            'id' => 'vendedor',
                                            'class' => 'form-control',
                                            'style' => 'width: 90%;',
                                            'placeholder' => 'Seleccionar',
                                        ]) !!}
                                    </div>
                                </div>
                                <div class="col-6">
                                    <label for="administra" class="form-label">¿Pago Prima?</label><br>
                                    <input type="checkbox" id="pago_prima" name="pago_prima" data-off="No" data-on="Si"
                                        {{ isset($edit) ? ($edit->pago_prima ? 'checked' : '') : '' }} data-toggle="toggle"
                                        data-onstyle="primary" data-offstyle="danger">
                                </div>
                            </div>
                        </div>

                        <div class="card-head">
                            <header>Detalle Producto(s)</header>
                        </div>
                        <div class="card-body ">
                            <div class="row">
                                <div class="col-3">
                                    <div class="input-group mb-3">
                                        <label for="encargado" class="form-label">Tipo de Servicio <span
                                                class="text-danger">*</span></label>
                                        <div class="input-group mb-3">
                                            {!! Form::select('tipo_servicio', $tipos_servicios, null, [
                                                'id' => 'tipo_servicio',
                                                'class' => 'form-control',
                                                'style' => 'width: 100%;',
                                                'placeholder' => 'Seleccionar',
                                            ]) !!}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="input-group mb-3">
                                        <label for="encargado" class="form-label">Servicio <span
                                                class="text-danger">*</span></label>
                                        <div class="input-group mb-3">
                                            {!! Form::select('servicio', [], null, [
                                                'id' => 'servicio',
                                                'class' => 'form-control',
                                                'style' => 'width: 100%;',
                                                'placeholder' => 'Seleccionar',
                                            ]) !!}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-2">
                                    <div class="input-group mb-3">
                                        <label for="encargado" class="form-label">Cantidad Producto <span
                                                class="text-danger">*</span></label>
                                        <div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
                                            <span class="input-group-btn input-group-prepend">
                                                <button id="disminuir_servicio"
                                                    class="btn btn-info bootstrap-touchspin-down" type="button">
                                                    <i class="fa fa-minus"></i>
                                                </button>
                                            </span>
                                            <input type="text" id="cantidad_producto" name="cantidad_producto"
                                                value="1" placeholder="Cantidad Producto"
                                                data-krajee-touchspin="TouchSpin_1068f96a" class="form-control">
                                            <span class="input-group-btn input-group-append">
                                                <button id="aumentar_servicio"
                                                    class="btn btn-primary bootstrap-touchspin-up" type="button">
                                                    <i class="fa fa-plus"></i>
                                                </button>
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-2">
                                    <div class="input-group mb-3">
                                        <label for="encargado" class="form-label">Valor <span
                                                class="text-danger">*</span></label>
                                        <div class="input-group mb-3">
                                            <input placeholder="{{ $simbolo_moneda . ' 0.00' }}" class="form-control"
                                                type="text" value="0.00" name="producto_servicio_valor"
                                                id="producto_servicio_valor" data-thousands="." data-decimal=","
                                                data-prefix="₡ " />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-1">
                                    <button style="margin-top: 2.2rem" onclick="agregarServicio()"
                                        class="btn btn-success" type="button"><i class="fa fa-plus"></i> Agregar
                                        Servicio</button>
                                </div>

                            </div>

                            <!-- Tabla aqui -->

                            <div class="table-wrap">
                                <div class="table-responsive">
                                    <table id="tbl_servicios"
                                        class="table table-striped table-sm display product-overview mb-30">
                                        <thead>
                                            <tr>
                                                <th><b>Servicio</b></th>
                                                <th><b>Cantidad</b></th>
                                                <th><b>Valor</b></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <input type="hidden" name="total_cobros" id="total_cobros">
                                        </tbody>
                                    </table>
                                </div>
                            </div>


                        </div>
                    </div>


                    <!-- <div class="col-12">
                            <div class="alert alert-info" role="role">
                                El cliente no tiene cobros pendientes de pago para este servicio.
                            </div>
                        </div> -->

                    <div class="card  card-box">

                        <div class="card-head">
                            <h4 style="margin-left: 2rem">Medios de Pago</h4>
                        </div>
                        <div class="card-body ">
                            <div class="row">
                                <div class="col-3">
                                    {!! Form::select(
                                        'medio_pago',
                                        $medios_pago,
                                        [],
                                        [
                                            'id' => 'medio_pago',
                                            'class' => 'form-control select2',
                                            'style' => 'width: 80%;',
                                            'onchange' => 'medioPagoHandler(event)',
                                        ],
                                    ) !!}
                                </div>
                                <div class="col-3">
                                    <div class="form-group">
                                        <input disabled class="form-control" type="text" value=""
                                            name="comprobante" id="comprobante" placeholder="Comprobante..." />
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="form-group">
                                        <input disabled placeholder="{{ $simbolo_moneda . ' 0.00' }}" class="form-control"
                                            type="text" value="0.00" name="servicio_valor" id="servicio_valor"
                                            data-thousands="." data-decimal="," data-prefix="₡ " />
                                    </div>
                                </div>
                                <div class="col-3">
                                    <button onClick="agregarMedioPagoHandler()" class="btn btn-primary" type="button"><i
                                            class="fa fa-plus"></i> Agregar Medio</button>
                                </div>
                            </div>

                            <div class="table-wrap">
                                <div class="table-responsive">
                                    <table id="tabla_medio_pago"
                                        class="table table-striped table-sm display product-overview mb-30">
                                        <thead>
                                            <tr>
                                                <th><b>Medio de Pago</b></th>
                                                <th><b>Comprobante</b></th>
                                                <th><b>Valor</b></th>
                                                <th><b>Acciones</b></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @if (count($data) > 0)
                                                @foreach ($data as $item)
                                                    <tr>
                                                        <td>{{ $contador++ }}</td>
                                                        <td>
                                                            {{ $item->pago_contrato_id }}
                                                        </td>
                                                        <td>{{ $item->pago_consecutivo_manual }}</td>
                                                        <td class="center">
                                                            <div class="btn-group">
                                                                <a href="{{ url('/') }}" title="Actualizar">
                                                                    <button class="btn btn-danger" type="button"><i
                                                                            class="fa fa-trash"></i> Eliminar</button>
                                                                </a>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            @endif
                                            <tr>
                                                <td colspan="2"></td>
                                                <td>
                                                    TOTAL PAGADO
                                                </td>
                                                <td>
                                                    ₡ <span id="s_total_pagado">0.00</span>
                                                    <input type="hidden" name="total_pagado" id="total_pagado"
                                                        value="0">
                                                    {{--  <td>₡<span id="s_total_pagado">0.00</span></td> --}}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2"></td>
                                                <td>
                                                    DIFERENCIA
                                                </td>
                                                <td>
                                                    {{--  {{$simbolo_moneda}}<span id="diferencia"></span> --}}
                                                    ₡ <span id="s_diferencia">0.00</span>
                                                    <input type="hidden" name="diferencia" id="diferencia"
                                                        value="0">
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <input type="hidden" name="productos[]" id="productos[]">
                            <div class="col-4">
                                {!! Form::mtextAr('observacion', null, 'Observaciones', $errors, 12, false, false) !!}
                            </div>
                            <div class="col-4">
                                Fecha de Pago <span style="color:red">*</span>
                                {!! Form::date('fecha', 'Fecha de Pago', ['id' => 'fecha', 'class' => 'form-control']) !!}
                            </div>
                            <div class="col-4">
                                <br>
                                <div class="d-flex justify-content-around">
                                    <button onclick="confirmarPago()" class="btn btn-success mx-1" type="button"><i
                                            class="fa fa-save"></i> Registrar Pago</button>
                                    <a href="{{ asset('') . 'pagos/oficina/caja/activa' }}" class="btn btn-danger mx-1"
                                        type="button"><i class="fa fa-arrow-left"></i> Cancelar</a>
                                </div>

                            </div>

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

    <div class="modal fade" id="staticModal" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticModalLabel">Agregar Cliente</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form role="form" id="quickFormClientePago">
                    <div class="clearfix"></div>
                    <div class="modal-body">
                        <div id="alerta"></div>

                        <div class="row col-md-12">
                            <div class="col-md-12">
                                <div id="idMsjCliente" style="display:none;" class="alert alert-danger" role="alert">

                                </div>
                            </div>
                            <div class="col-6">
                                <label for="sede" class="form-label">Sede</label>
                                {!! Form::select('sede_perteneciente', $sedes, isset($edit) ? '' : session()->get('data_entidad')->entidad_id, [
                                    'id' => 'sede_perteneciente',
                                    'class' => 'form-control',
                                    'placeholder' => 'Seleccionar',
                                ]) !!}
                            </div>
                            <div class="col-6">
                                <label for="tipo_identificacion" class="form-label">Tipo Identificación</label>
                                {!! Form::select('tipo_identificacion', $tipo_identificacion, isset($edit) ? '' : null, [
                                    'id' => 'tipo_identificacion',
                                    'class' => 'form-control',
                                    'placeholder' => 'Seleccionar',
                                ]) !!}
                            </div>
                        </div>
                        <div class="row col-md-12">
                            {!! Form::mtext('documento', null, 'Documento', $errors, 6, false, true, [
                                ['onkeyup' => 'javascript:this.value=this.value.toUpperCase()'],
                                ['onchange' => 'validarDocumento()'],
                            ]) !!}

                            {!! Form::mtext('nombres', null, 'Nombres', $errors, 6, true, true, [
                                ['onkeyup' => 'javascript:this.value=this.value.toUpperCase()'],
                            ]) !!}


                        </div>
                        <div class="row col-md-12">
                            {!! Form::mtext('paterno', null, 'Primer Apellido', $errors, 6, true, true, [
                                ['onkeyup' => 'javascript:this.value=this.value.toUpperCase()'],
                            ]) !!}

                            {!! Form::mtext('materno', null, 'Segundo Apellido', $errors, 6, false, [
                                ['onkeyup' => 'javascript:this.value=this.value.toUpperCase()'],
                            ]) !!}
                        </div>
                        <div class="row col-md-12">
                            <div class="col-6">
                                <label for="sexo" class="form-label">Sexo</label>
                                {!! Form::select(
                                    'sexo',
                                    ['Masculino' => 'Masculino', 'Femenino' => 'Femenino', 'No Aplica' => 'No Aplica'],
                                    null,
                                    ['id' => 'sexo', 'class' => 'form-control', 'placeholder' => 'Seleccionar'],
                                ) !!}
                            </div>
                            {!! Form::mDate(
                                'fecha_nacimiento',
                                isset($edit) ? $edit->cliente_fecha_nacimiento : null,
                                'Fecha de Nacimiento',
                                $errors,
                                6,
                            ) !!}
                        </div>
                        <div class="row col-md-12">
                            {!! Form::mtext('celular', null, 'Celular', $errors, 6, false, true, [
                                ['onkeypress' => 'return event.charCode > 47 && event.charCode < 58;'],
                                ['maxlength' => '8'],
                            ]) !!}

                            {!! Form::mtextTags('telefonos', null, 'Otros Teléfonos', $errors, 6, false, true, [
                                ['onkeypress' => 'return event.charCode > 47 && event.charCode < 58;'],
                            ]) !!}
                        </div>
                        <div class="row col-md-12">
                            {!! Form::mtextAr(
                                'observaciones',
                                isset($edit) ? $edit->cliente_direccion : null,
                                'Observación Fija',
                                $errors,
                                6,
                                false,
                                false,
                                'onkeyup="javascript:this.value=this.value.toUpperCase()"',
                            ) !!}
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn bg-success">Guardar</button>
                        <a class="btn bg-warning text-white" data-dismiss="modal" aria-label="Close">Cancelar</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script type="text/javascript">
        $("#servicio").change(function() {
            /* get cantidad set 1 */
            $("#cantidad_producto").val(1)
        });

        var html = '';
        var textLabel = document.getElementById('idMsjCliente');

        var medios_pago_seleccionados = []
        var total_pagado_aux = '0.00'
        var valor_base_servicio = 0
        var cantidad_servicios = 1
        var servicios = null
        var total_diferencia = 0
        var valor_total_servicio = 0
        var servicios_agregados = []
        $(document).ready(function() {

            /* set today date to fecha */
            $('#fecha').val(moment().format('YYYY-MM-DD'))

            $('#vendedor').select2({
                ajax: {
                    dataType: 'json',
                    url: '{{ url('pagos/debito_automatico/pago/producto/empleado/data') }}',
                    delay: 250,
                    minimumInputLength: 3,
                    data: function(params) {
                        var query = {
                            search: params.term.toUpperCase(),
                        }

                        console.log('query :', query)
                        return query;
                    },
                    processResults: function(data, page) {
                        return {
                            results: data
                        };
                    },
                    theme: "classic"
                }
            });

            // $( "#servicio" ).attr('disabled','disabled');

            $("#saldo").maskMoney();
            $("#servicio_valor").maskMoney();
            $("#producto_servicio_valor").maskMoney();
            $("#total_pagado").html('0,00');
            $("#diferencia").html('0,00');

            $('#contrato_empleado_id').select2();
            $('#tipo_servicio').select2();
            $('#servicio').select2();

            $('#cliente').select2({
                ajax: {
                    dataType: 'json',
                    url: '{{ url('cliente/data/ajax') }}',
                    delay: 250,
                    //minimumInputLength: 3,
                    data: function(params) {
                        var query = {
                            search: params.term
                        }

                        console.log('query :', query)
                        return query;
                    },
                    processResults: function(data, page) {
                        return {
                            results: data
                        };
                    },
                    theme: "classic"
                }
            });
            $('#contrato').select2({
                ajax: {
                    dataType: 'json',
                    url: '{{ url('cliente/data/ajax') }}',
                    delay: 250,
                    //minimumInputLength: 3,
                    data: function(params) {
                        var query = {
                            search: params.term
                        }

                        console.log('query :', query)
                        return query;
                    },
                    processResults: function(data, page) {
                        return {
                            results: data
                        };
                    },
                    theme: "classic"
                }
            });

            $('#tipo_servicio').change(() => {
                let val = $('#tipo_servicio').val()
                // console.log('val :>> ', val);

                let route = "pagos/getservicio/" + val
                $.ajax({
                    dataType: 'json',
                    // type: 'POST',
                    url: "{{ asset('') . 'pagos/getservicio/' }}" + val,
                    success: (res) => {
                        servicios = res
                        $('#servicio').empty().trigger("change");
                        for (const data of res) {
                            var newOption = new Option(data.text, data.id, false, false);
                            $('#servicio').append(newOption)
                        }
                    }
                })
            })

            $('#servicio').change(() => {
                let val = $('#servicio').val()
                // console.log('val :>> ', val);

                let route = "pagos/getserviciovalor/" + val
                $.ajax({
                    dataType: 'json',
                    // type: 'POST',
                    url: "{{ asset('') . 'pagos/getserviciovalor/' }}" + val,
                    success: (res) => {

                        let valor = parseFloat(res).toFixed(2)

                        valor_base_servicio = valor
                        $('#producto_servicio_valor').val(valor)

                        $('#producto_servicio_valor').focus()
                    }
                })
            })

            $('#aumentar_servicio').click(() => {
                console.log('aumentando servicio');
                let cantidad = parseInt($('#cantidad_producto').val())

                let res = cantidad + 1
                $('#cantidad_producto').val(res)
                /* calc_producto(res) */
            })
            $('#disminuir_servicio').click(() => {
                console.log('disminuyendo servicio');
                let cantidad = parseInt($('#cantidad_producto').val())

                let res = cantidad === 1 ? cantidad : cantidad - 1
                $('#cantidad_producto').val(res)

                //calc_producto(res)
            })

        })

        function calc_producto(cantidad) {
            cantidad_servicios = cantidad
            let res = parseFloat(valor_base_servicio * cantidad).toFixed(2)
            console.log('res :>> ', res);
            $('#producto_servicio_valor').val(res)
            $('#producto_servicio_valor').focus()
        }

        function medioPagoHandler() {
            let medio_pago = $('#medio_pago').val();
            console.log('medio_pago :>> ', medio_pago);

            if (medio_pago == 1) {
                $("#comprobante").val('');
                $("#comprobante").attr('disabled', 'disabled');
            } else {
                $("#comprobante").prop("disabled", false);
            }
        }
        var servicios_adds = []

        function agregarServicio() {
            let dollarUSLocale = Intl.NumberFormat('en-US');
            let randInt = Math.floor(Date.now() / 1000)


            let servicio_seleccionado = servicios.filter(s => s.id === parseInt($('#servicio').val()))[0].text
            let service_added = servicios.filter(s => s.id === parseInt($('#servicio').val()))[0].id



            if (servicios_agregados.includes(service_added)) {
                return Swal.fire(
                    'Error!',
                    'El servicio ya fue agregado.',
                    'error'
                )
            }
            /*  servicios_agregados.push(service_added) */

            if (servicio_seleccionado == undefined) {
                Swal.fire(
                    'Error!',
                    'Por favor seleccione un servicio.',
                    'error'
                )
                return
            }
            let cantidad_servicios = $('#cantidad_producto').val()
            if (cantidad_servicios == undefined) {
                Swal.fire(
                    'Error!',
                    'Por favor ingrese una cantidad de servicios.',
                    'error'
                )
                return
            }


            let valor_servicio = reformatNumber($('#producto_servicio_valor').val())
            // var cont = content.find('tr').length;
            let cont = $('#tbl_servicios tr').length;

            $('#tbl_servicios tr:first').after(`
                <tr id="${randInt}" class="servicios_agregados">
                    <td>
                        ${servicio_seleccionado}
                    </td>
                    <td>
                        ${cantidad_servicios}
                        <input name="OrdenProductoDetalles['+cont+'][orden_producto_detalle_cantidad]" type="hidden" id="addSer" value="${cantidad_servicios}" />
                    </td>
                    <td>
                        ₡${valor_servicio}
                        <input type="hidden" id="addSer" value="${servicio_seleccionado}" />
                    </td>
                    <td>
                        <button onClick="removeElement2('${randInt}', '${valor_servicio}', '${service_added}')" 
                        class="btn btn-danger" type="button">
                        <i class="fa fa-trash"></i> Remover</button>
                    </td>
                </tr>
            `);


            total_diferencia = valor_servicio + total_diferencia
            console.log('total_diferencia :>> ', total_diferencia);
            console.log('valor_servicio :>> ', valor_servicio);
            console.log('cont :>> ', cont);
            valor_total_servicio = total_diferencia * cantidad_servicios

            let servi_values = parseInt(cantidad_servicios) * parseFloat(valor_total_servicio)





            let valor = parseFloat(valor_total_servicio).toFixed(2)
            $('#saldo').val(valor)
            $("#saldo").prop("disabled", false);
            /*  $('#saldo').focus() */
            $("#saldo").attr('disabled', 'disabled');
            $("#servicio_valor").val(valor)
            $('#servicio_valor').focus()
            $("#diferencia").html(dollarUSLocale.format(total_diferencia).replace('.', ','))
            // $('#servicio_valor').val('')
            // $('#comprobante').val('')

            //("#servicio_valor").val(valor)

            $("#saldo").maskMoney().maskMoney('mask');
            $("#servicio_valor").maskMoney().maskMoney('mask');
            /*   for (let i = 1; i <= cont; i++) {
                  servicios_adds.push({
                      servicio: $('#servicio').val(),
                      cantidad: cantidad_servicios,
                      valor: valor_servicio
                  })
              } */

            do {
                let nu = 1;
                servicios_adds.push({
                    servicio: $('#servicio').val(),
                    cantidad: cantidad_servicios,
                    valor: valor_servicio
                })
                nu++;
            } while (count < nu)

        }

        function agregarMedioPagoHandler() {

            var valor_pagar = $('#total_pagado').val();
            let valorAPagar = $('#servicio_valor').val();
            let valor_comprobante = $('#servicio_valor').val();
            /* clean valor_comprobante if ₡ exists in the value */
            valor_comprobante = valor_comprobante.toString().replace('₡ ', '');

            let dollarUSLocale = Intl.NumberFormat('en-US');
            let servicio_valor = reformatNumber($('#servicio_valor').val());
            var id_medio_pago = document.getElementById('medio_pago');

            var text_comprobante = $('#comprobante').val();

            if (servicio_valor < '0.01') {
                Swal.fire(
                    'Error!',
                    'Por favor ingrese un valor de pago diferente de "0" para agregar.',
                    'error'
                )
                return
            }

            if (id_medio_pago.value == '') {
                return Swal.fire(
                    'Error!',
                    'Por favor seleccione un medio de pago.',
                    'error'
                )

            }

            if (id_medio_pago.value != '') {
                var requerido = id_medio_pago.value.split('_')[0];
                if (requerido != 1 && text_comprobante == '')
                    return Swal.fire(
                        'Error!',
                        'Por favor ingrese un comprobante.',
                        'error'
                    )
            }

            // Para remover fila 
            // $('#myTableRow').remove();

            let randInt = Math.floor(Date.now() / 1000)

            /* let total_pagado = reformatNumber($('#total_pagado').html());
            let diferencia = reformatNumber($('#diferencia').html()); */


            let valor_pagar_new = $("#saldo").val().replaceAll('₡ ', '').replaceAll('.', '').replaceAll(',', '.');
            let valor_cobro = $("#servicio_valor").val().replaceAll('₡ ', '').replaceAll('.', '').replaceAll(',', '.');
            let nuevo_total_2 = parseFloat(valor_pagar_new) - parseFloat(valor_cobro);

            $("#s_total_pagado").html(dollarUSLocale.format(valor_cobro).replace('.', ','))


            medios_pago_seleccionados.push({
                medio_pago: $('#medio_pago').val(),
                comprobante: $('#comprobante').val(),
                valor: servicio_valor,
                randInt: randInt
            })

            console.log('medios_pago_seleccionados :>> ', medios_pago_seleccionados)

            let medios_pagos = JSON.parse(`@php echo $medios_pago @endphp`)
            // console.log('medios_agos :>> ', medios_pagos);

            let nombre_medio_pago = medios_pagos[$('#medio_pago').val()]
            $('#tabla_medio_pago tr:first').after(`
                <tr id="${randInt}" class="medios_pago_agregados">
                    <td>
                        ${nombre_medio_pago}
                    </td>
                    <td>
                        ${$('#comprobante').val()}
                    </td>
                    <td>
                        {{ $simbolo_moneda }}${valor_cobro.replace('.',',')}
                    </td>
                    <td>
                        <button onClick="removeElement('${randInt}',${nuevo_total_2})" class="btn btn-danger" type="button"><i class="fa fa-trash"></i> Remover</button>
                    </td>
                </tr>
            `);

            $('#servicio_valor').val('')
            $('#comprobante').val('')
        }

        function confirmarPago() {
            console.log('medios_pago_seleccionados :>> ', medios_pago_seleccionados);

            /* validate cliente and empleado_id */
            if (!$('#cliente').val()) {
                Swal.fire(
                    'Error!',
                    'Debe seleccionar un cliente.',
                    'error'
                )
                return
            }

            if (!$('#vendedor').val()) {
                Swal.fire(
                    'Error!',
                    'Debe seleccionar un vendedor.',
                    'error'
                )
                return
            }

            if (medios_pago_seleccionados.length <= 0) {
                Swal.fire(
                    'Error!',
                    'Debe seleccionar al menos un medio de pago.',
                    'error'
                )
                return
            }

            if (!$('#fecha').val()) {
                Swal.fire(
                    'Error!',
                    'Debe seleccionar la fecha del pago.',
                    'error'
                )
                return
            }
            /* convert servicios_agregados to array */



            let body = {
                medios_pago: medios_pago_seleccionados,
                observacion: $('#observacion').val(),
                fecha_pago: $('#fecha').val(),
                contrato_empleado_id: $('#vendedor').val(),
                cliente: $('#cliente').val(),
                total_pagado: total_pagado_aux,
                servicio: /* services_add */ JSON.stringify(servicios_agregados),
                tipo_servicio: $('#tipo_servicio').val(),
                valor_total_servicio: valor_total_servicio,
                pago_prima: $("#pago_prima").prop('checked') == true ? 1 : 0,
                empleado_id: $('#vendedor').val(),
                cantidad_servicios: cantidad_servicios,
                forma_pago: 5,
                servicios_adds,
                caja_ingresos_id: {{ $caja_ingresos_id }},
            }

            $.ajax({
                type: "POST",
                url: "{{ asset('') . 'verificar-pago-producto-duplicado' }}",
                beforeSend: function(xhr) {
                    showLoadingAlert();
                },
                data: {
                    "_token": "{{ csrf_token() }}",
                    "pago_cliente_id": $('#cliente').val(),
                    "pago_contrato_id": null,
                    medios_pago: medios_pago_seleccionados,
                    "fecha_pago": $('#fecha').val(),
                    "servicios": JSON.stringify(servicios_agregados),
                    "valor": valor_total_servicio
                },

                success: function(res) {



                    if (res.ok) {


                        return Swal.fire({
                            title: 'Ya existe un pago registrado con los mismos datos',
                            text: res.mensaje,
                            icon: 'info',
                            showCancelButton: false,
                            confirmButtonColor: '#3085d6'
                        })


                    } else {


                        $.ajax({
                            /* url: 'registrarpagoproducto', */
                            url: "{{ asset('') . 'pagos/registrarpagoproducto/' }}" +
                                {{ $caja_ingresos_id }},
                            type: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            data: body,
                            beforeSend: function(xhr) {
                                showLoadingAlert();
                            },
                            success: (res) => {
                                let mensaje = res.data

                                if (res.exito) {

                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Notificación',
                                        text: mensaje,
                                        showCancelButton: false,
                                        confirmButtonText: 'Aceptar',
                                        customClass: {
                                            confirmButton: 'btn btn-primary',
                                        }
                                    }).then((result) => {
                                        if (result.isConfirmed) {
                                            window.location.href =
                                                "{{ asset('') . 'pagos/oficina/caja/activa/' }}" +
                                                {{ $caja_ingresos_id }};
                                        }
                                    })

                                } else {
                                    $.toast({
                                        heading: 'Error',
                                        text: mensaje,
                                        icon: 'warning',
                                        position: 'top-right',
                                    })
                                }
                            },
                            error: (err) => {
                                console.log(`error`, err)
                                $("#submit").prop('disabled', false)
                                $.toast({
                                    heading: 'Error',
                                    text: 'Algo ha ocurrido ...',
                                    icon: 'error',
                                    position: 'top-right',
                                })
                            }
                        })
                    }
                }





            })

        }

        function showLoadingAlert() {
            Swal.fire({
                title: 'Cargando!',
                text: 'Espere un momento...', // add html attribute if you want or remove
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                },
            });
        }

        function removeElement(elementId, servicio_valor) {
            total_pagado_aux = '0.00'

            let dollarUSLocale = Intl.NumberFormat('en-US');
            total_diferencia = servicio_valor + total_diferencia


            // if (total_diferencia < 0) total_diferencia = total_diferencia * -1
            //  $("#s_diferencia").html( dollarUSLocale.format(total_diferencia) )

            $('#' + elementId).remove();

            for (var i = medios_pago_seleccionados.length - 1; i >= 0; i--) {
                if (medios_pago_seleccionados[i].randInt === parseInt(elementId)) {
                    medios_pago_seleccionados.splice(i, 1);
                    console.log('medios_pago_seleccionados deleteado:>> ', medios_pago_seleccionados);
                }
            }
            calcular()
        }

        function calcular() {
            var total_cobrar = parseFloat($('#saldo').val().replace('₡ ', '').replace('.', '').replace(',', '.')).toFixed(
            2);
            var valor_pagar = $('#total_pagado').val()
            var resultado = Number(valor_pagar) - Number(total_cobrar);
            console.log('resultado :>> ', total_cobrar, valor_pagar);
            if (resultado <= 0) {
                resultado = 0;
                $("#s_total_pagado").html(0)
                $("#s_diferencia").html(0)
            }
            $("#saldo").val(resultado.toFixed(2))
            $("#s_total_pagado").html(resultado)
            $("#total_pagado").val(resultado)
            document.getElementById('s_diferencia').innerHTML = `<div class="text-danger">₡${resultado.toFixed(2)}</div>`
            $("#servicio_valor").val(Number(total_cobrar))
        }

        function removeElement2(elementId, valor_servicio, service_added) {
            let dollarUSLocale = Intl.NumberFormat('en-US');
            total_diferencia = valor_servicio - total_diferencia
            console.warn(parseFloat(total_diferencia).toFixed(2))
            if (total_diferencia < 0) total_diferencia = total_diferencia * -1
            $("#diferencia").html(parseFloat(total_diferencia).toFixed(2))

          

            servicios_agregados = servicios_agregados.filter(function(item) {
                return item !== parseInt(service_added)
            })
            console.log({
                servicios_agregados,
                service_added
            })
            $('#' + elementId).remove();
            if (total_diferencia <= 0) {
                $("#servicio_valor").val(0)
                $("#saldo").val(0)
                $("#s_total_pagado").html(0)
                $("#s_diferencia").html(0)
            } else {
                $("#servicio_valor").val(parseFloat(total_diferencia).toFixed(2))
                $("#saldo").val(parseFloat(total_diferencia).toFixed(2))
                $("#s_total_pagado").html(parseFloat(total_diferencia).toFixed(2))
                $("#s_diferencia").html(parseFloat(total_diferencia).toFixed(2))
            }
            servicios_adds = servicios_adds.filter(function(item) {
                return item.servicio !== parseInt(service_added)
            })
            servicios_adds = [servicios_agregados]
            $("#servicio_valor").focus()
        }

        function reformatNumber(value) {
            return parseFloat(value.replace('₡ ', '').replaceAll('.', '').replaceAll(',', '.'))
        }

        function anularPago(id) {
            Swal.fire({
                icon: 'warning',
                title: 'Anular',
                text: '¿Está seguro que desea anular el registro?',
                showCancelButton: true,
                confirmButtonText: 'Si',
                cancelButtonText: 'No',
                customClass: {
                    confirmButton: 'btn btn-primary',
                    cancelButton: 'btn btn-danger'
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    var url = "{{ URL::asset('') }}";
                    let ruta = "pagos/temporales/anular"
                    console.log(url + ruta + '/' + id);

                    window.location.replace(url + ruta + '/' + id)

                    // $.ajax({
                    //     url: url+ruta+'/'+id,
                    //     headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}'},
                    //     type: 'GET',
                    //     success: function(e) {
                    //         console.log(e);
                    //         if(e.success == 0){
                    //             Swal.fire(
                    //                 'Notificacion!',
                    //                 e.message,
                    //                 'error'
                    //             )
                    //         }else{
                    //             if(redirigir != null)
                    //                 window.location.replace(url+redirigir);
                    //             else 
                    //                 window.location.replace(url+ruta+'s');
                    //         }
                    //     },
                    //     error:function (e) {
                    //         console.log('Error'+e);
                    //     }
                    // });
                }
            });
        }

        function limpiar() {
            $('#cliente_id').val('');
            $('#contrato_id').val('');
            $('#consecutivo_t').val('');
            $('#consecutivo_manual').val('');
            $('#observaciones').val('');
            $('#fecha').val('');

            $('#cliente_id').val('').change();
            $('#estado').val('').change();

            document.getElementById("frmFiltros").submit();
        }

        $(function() {
            //$('#asociacion').select2();
        });

        function buscar(e, tipo) {
            $('#accion').val(1);
            // var textoSelect = $('#'+tipo).val();
            // if (e.keyCode === 13 && !e.shiftKey){
            //     document.getElementById("frmFiltros").submit();
            // }else if(tipo == 'asociacion'){
            //     if(textoSelect =! '')
            //         document.getElementById("frmFiltros").submit();
            // }else if(tipo == 'nombre'){
            //     if(textoSelect =! '')
            //         document.getElementById("frmFiltros").submit();
            // }else if(tipo == 'estado'){
            //     if(textoSelect =! '')
            //         document.getElementById("frmFiltros").submit();
            // }
        }

        function validarDocumento() {

            var textDocumento = $('#documento').val();
            let body = {
                "_token": "{{ csrf_token() }}",
                "documento": textDocumento
            }
            $.ajax({
                type: "POST",
                url: "{{ asset('') . 'ajax/cliente/validar/documento' }}",
                data: body,
                success: function(res) {
                    if (res != '') {
                        html =
                            `El documento que acaba de ingresar <strong>${textDocumento}</strong>,ya se encuentra registrado en la base de datos con el nombre de cliente <strong>${res.cliente_nombres} ${res.cliente_apellido1} ${res.cliente_apellido2}</strong>`;
                        textLabel.style.display = 'block';
                        textLabel.innerHTML = html;
                        $('#documento').val('');
                        return true;
                    } else {
                        textLabel.style.display = 'none';
                        return false;
                    }
                },
                dataType: "json"
            });
        }


        $('#quickFormClientePago').validate({
            rules: {
                tipo_identificacion: {
                    required: true,
                },
                documento: {
                    required: true,
                },
                nombres: {
                    required: true,
                },
                paterno: {
                    required: true,
                },
                fecha_nacimiento: {
                    required: true,
                },
            },
            messages: {
                tipo_identificacion: {
                    required: "El campo tipo de indentificación es requerido.",
                },
                documento: {
                    required: "El campo documento es requerido.",
                },
                nombres: {
                    required: "El campo nombres es requerido.",
                },
                paterno: {
                    required: "El campo primer apellido es requerido.",
                },
                fecha_nacimiento: {
                    required: "El campo fecha de nacimiento es requerido.",
                },
            },
            errorElement: 'span',
            errorPlacement: function(error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function(element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            },
            submitHandler: function(form) {
                var celular = $('#celular').val();
                var telefonos = $('#telefonos').val();
                if (celular == '' && telefonos == '') {
                    html = 'Debe ingresar un número celular o de teléfono.';
                } else {
                    html = '';
                }
                if (html != '') {
                    textLabel.style.display = 'block';
                    textLabel.innerHTML = html;
                } else {
                    textLabel.style.display = 'none';
                    saveCliente();
                }

            }
        });

        function saveCliente() {
            console.log("{{ asset('') . 'empleado/save/modal' }}");
            var sede = $('#sede_perteneciente').val();
            var tipo_identificacion = $('#tipo_identificacion').val();
            var documento = $('#documento').val();
            var nombres = $('#nombres').val();
            var paterno = $('#paterno').val();
            var materno = $('#materno').val();
            var sexo = $('#sexo').val();
            var fecha_nacimiento = $('#fecha_nacimiento').val();
            var celular = $('#celular').val();
            var telefonos = $('#telefonos').val();
            var observaciones = $('#observaciones').val();

            $.ajax({
                type: "POST",
                url: "{{ asset('') . 'cliente/data/save/ajax' }}",
                data: {
                    "_token": "{{ csrf_token() }}",
                    sede: sede,
                    tipo: tipo_identificacion,
                    documento: documento,
                    nombres: nombres,
                    paterno: paterno,
                    materno: materno,
                    sexo: sexo,
                    fecha: fecha_nacimiento,
                    celular: celular,
                    telefonos: telefonos,
                    observaciones: observaciones
                },
                success: function(res) {
                    console.log(res);
                    document.getElementById("cliente").options[document.getElementById("cliente").options
                        .length] = new Option(res.data.nombre, res.data.id);
                    $('#cliente').val(res.data.id).append();
                    $('#staticModal').modal('hide');
                    Swal.fire(
                        'Alerta',
                        'Registro almacenado con éxito!',
                        'success'
                    )
                },
                dataType: "json"
            });
        }
    </script>
@endsection