@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-primary">Pago Manual Servicios</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">Pago Manual Servicios</li>
                </ol>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 col-sm-12 mb-3">
                <div class="float-right">
                    <a data-toggle="modal" data-target="#modal_adelantar_cobros" class="btn btn-info"><i
                            class="fa fa-random"></i>Adelantar Cobros</a>
                    <a onclick="limpiar()" class="btn btn-primary"><i class="fa fa-eraser"></i>Limpiar</a>
                </div>
            </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>Información Basica</header>
                    </div>
                    @if(isset($edit))
                    {!! Form::model($edit,['url' => ['puesto/actualizar/'.$edit->puesto_id],'method'=>'PATCH','id'=>'frmClientes']) !!}
                    @else
                    {!! Form::open(['url' => 'puesto','method'=>'POST','role'=>'form','id'=>'frmContratos']) !!}
                    @endif
                    <div class="card-body">
                        <div class="row col-md-12">
                            {!! Form::mselect('cliente',$clientes,null,'Cliente',$errors,6,false,true,false,
                            'consultar_contrato()') !!}



                            {!!
                            Form::mselect('contrato',[],null,'Contrato',$errors,6,false,true,false,'consultar_servicios()')
                            !!}
                        </div>
                        <div class="row col-md-12">

                            {!! Form::mselect('servicio',[],null,'Servicio',
                            $errors,6,false,true,false,'consultar_valor()') !!}

                            {{-- {!! Form::select('servicio',
                            $servicios,$servicio,['id'=>'servicio','class'=>'form-control select2','style'=>'width:
                            30%;','onchange'=>"consultar_valor()",'placeholder'=>'Servicios']) !!} --}}

                            {!! Form::mMonedaFormato('valor',null,'Valor',$errors,6) !!}

                        </div>
                    </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 col-sm-12">
                <div id="alerta_cobro" style="display:none">
                    <div class="alert alert-warning d-flex align-items-center" role="alert">
                        <div>
                            <i class="fa fa-exclamation-circle"></i> El cliente tiene cobros pendientes de pago para
                            este servicio.
                        </div>
                    </div>
                </div>
                <div id="info_cobro" style="display:none">
                    <div class="alert alert-primary d-flex align-items-center" role="alert">
                        <div>
                            <i class="fa fa-exclamation-triangle"></i> El cliente no tiene cobros pendientes de pago
                            para este servicio.
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" id="cobros_pendientes" style="display:block">
            <div class="col-md-12 col-sm-12">
                <div class="card  card-box">
                    <div class="card-head">
                        <header>Cobros Pendientes</header>
                    </div>
                    <div class="card-body">
                        <div class="row col-md-12">
                            <div class="table-responsive">
                                <table class="table table-wrap">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Contrato</th>
                                            <th>Cuota</th>
                                            <th>Concepto</th>
                                            <th>Recibo Asociado</th>
                                            <th>Valor</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody id="rowsCobros">

                                    </tbody>
                                    <tfooter>
                                        <tr>
                                            <td colspan="5" class="text-right"><strong>TOTAL COBROS</strong></td>
                                            <input type="hidden" name="total_cobros" id="total_cobros" value="0">
                                            <td>₡<span id="total_cobro">0.00</span></td>
                                        </tr>
                                    </tfooter>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12 col-sm-12">
                <div class="card  card-box">
                    <div class="card-head">
                        <header>Medio de Pago</header>
                    </div>

                    {!! Form::open([  'method'=>'POST','role'=>'form','id'=>'frmContract', 'onsubmit' => 'return registrar_pago()']) !!}

                    <div class="card-body">
                        <div class="row col-md-12">
                            <div class="table-responsive">
                                <table class="table table-wrap" id="tbl_metodos">
                                    <thead>
                                        <tr>
                                            <th width="50%">Medio de Pago</th>
                                            <th width="20%">Comprobante</th>
                                            <th width="20%">Valor</th>
                                            <th width="10%">Acciones</th>
                                        </tr>
                                        <tr>
                                            <input type="hidden" name="contratoID" id="contrato">
                                            <th>
                                                {!!
                                                Form::mselect('medio_pago',$medios_pagos,null,'Seleccionar',$errors,12,false,true,false,'requerir_comprobante()')
                                                !!}
                                            </th>
                                            <th>
                                                {!!
                                                Form::mtext('comprobante',null,'',$errors,12,false,true,[['disabled'=>'disabled
                                                ']]) !!}
                                            </th>
                                            <th><br>
                                                {!!
                                                Form::mMonedaFormato('valor_cobrar',null,'Valor',$errors,12,false,false)
                                                !!}
                                            </th>
                                            <th>
                                                <a onclick="agrega_medio()" class="btn btn-primary"><i
                                                        class="fa fa-plus"></i>Agregar Medio</a>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody id="rowMedios">

                                    </tbody>
                                    <tfooter>
                                        <tr>
                                            <td colspan="3" class="text-right">TOTAL PAGADO</td>
                                            <input type="hidden" name="total_pagado" id="total_pagado" >
                                            <td>₡<span id="s_total_pagado">0.00</span></td>
                                        </tr>
                                        <tr>
                                            <td colspan="3" class="text-right">DIFERENCIA</td>
                                            <input type="hidden" name="diferencia" id="diferencia" value="0">
                                            <td><span id="s_diferencia">0.00</span></td>
                                        </tr>
                                    </tfooter>
                                </table>
                            </div>
                        </div>
                        <div class="row col-md-12"><br>
                            {!! Form::mtextAr('descripcion',isset($edit) ? $edit->puesto_descripcion :
                            null,'Descripción',$errors,5,false,false,'onkeyup="javascript:this.value=this.value.toUpperCase()"')
                            !!}

                            {!! Form::mDate('inicio',date('Y-m-d'),'Fecha de Pago',$errors,5) !!}

                            <div class="col-2">
                                <button
                                    class="btn bg-success text-white btn-lg"
                                    type="submit">
                                    <i class="fa fa-save"></i>
                                    Registrar Pago
                               </button>
                            </div>
                        </div>
                    </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
</div>
<!----Adelantar cobros------>
<div class="modal fade" id="modal_adelantar_cobros" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-info">
                <h4 class="modal-title text-white" id="exampleModalLabel"><i class="fa fa-random"></i> Adelantar Cobros
                </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row col-md-12">
                    <p>
                        Seleccione los contratos del cliente sobre los cuales desea adelantar saldo, adicional mente
                        indique el numero de cobros que desea adelantar.
                    </p>
                </div>
                <div class="row col-md-12">
                    <div class="col-md-6">
                        {!! Form::select('modale_contratos',[],null,['class'=>'form-control','id'=>'modale_contratos'])
                        !!}
                    </div>
                    {!! Form::mNumber('procentaje_interes_serv',null,'',$errors,6,false,false) !!}
                </div>
            </div>
            <div class="modal-footer text-center">
                <input type="hidden" name="id_registro" id="id_registro" value="">
                <button onclick="generar_cobros()" type="button" class="btn btn-primary" data-dismiss="modal"><i
                        class="fa fa-random"></i> Generar Cobros</button>
                <button type="button" class="btn btn-warning" data-dismiss="modal"><i class="fa fa-times"></i>
                    Cancelar</button>
            </div>
        </div>
    </div>
</div>
<!----condonar cobros------>
<div class="modal fade" id="modal_condonar_cobros" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-info">
                <h4 class="modal-title text-white" id="exampleModalLabel"><i class="fa fa-thumbs-o-up"></i> Condonar
                    Cobro</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row col-md-12">
                    <p>
                        Si realmente desea condonar el cobro seleccionado, por favor especifique el motivo de la
                        condonación.
                    </p>
                </div>
                <div class="row col-md-12">
                    {!! Form::mtextAr('motivo',null,'Motivo de la condonación...',$errors,12,false) !!}
                </div>
            </div>
            <div class="modal-footer text-center">
                <input type="hidden" name="id_registro" id="id_registro" value="">
                <button onclick="generar_cobros()" type="button" class="btn btn-primary" data-dismiss="modal"><i
                        class="fa fa-thumbs-o-up"></i> Condonar Cobro</button>
                <button type="button" class="btn btn-warning" data-dismiss="modal"><i class="fa fa-times"></i>
                    Cancelar</button>
            </div>
        </div>
    </div>
</div>
<!----Ver detalle cobros------>
<div class="modal fade" id="modal_detalle_cobros" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="exampleModalLabel">Ver Detalle Cobro</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row col-md-12">
                    <div class="float-right">
                        <strong>Concepto: </strong> M/DICIEMBRE - APERTURA NICHO +IVA + FINANCIACIÓN<br>
                        <strong>Fecha aplicación: </strong>2021-12-01
                    </div>
                </div>
                <div class="row col-md-12">
                    <div class="text-center">
                        <strong>
                            <h4>APERTURA NICHO +IVA + FINANCIACIÓN (Por Cobrar - Cobro Principal)</h4>
                        </strong>
                    </div>
                </div>
                <div class="row col-md-12">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Concepto</th>
                                    <th>Producto o Servicio Cobrado</th>
                                    <th>Valor Cobrado</th>
                                    <th>Valor Pagado</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer text-center">
                <input type="hidden" name="id_registro" id="id_registro" value="">
                <button type="button" class="btn btn-warning" data-dismiss="modal"><i class="fa fa-times"></i>
                    Cerrar</button>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script>

    let data_servicios = [];

    consultar_valor();
    consultar_contrato();

    function consultar_valor() {

        var id_contrato = $('#contrato').val();
        var servicio_id = $('#servicio').val();

        var servicio = data_servicios.find(element => element.id == servicio_id);
        var url = "{{ URL::asset('pagos/asociacion/manual/cobros/ajax') }}" + "/" + id_contrato + '/' + servicio.servicio_id;

        $.get(url, function (res) {
            var obj = $.parseJSON(res);

            var html = '';
            var total_conbro = 0;

            if (obj.length != 0) {
                document.getElementById('alerta_cobro').style.display = 'block';
                document.getElementById('cobros_pendientes').style.display = 'block';
                document.getElementById('info_cobro').style.display = 'none';

            }
            else {
                document.getElementById('info_cobro').style.display = 'block';
                document.getElementById('alerta_cobro').style.display = 'none';
                document.getElementById('cobros_pendientes').style.display = 'none';
            }

            for (var i = 0; i < obj.length; i++) {
                var idFila = Math.floor(Math.random() * 99999);
                html += `<tr id="fila_cobros_${idFila}">
                                <td>${i + 1}</td>
                                <td>${obj[i].contrato_codigo}</td>
                                <td>${obj[i].cobro_cuota}/${obj[i].cobro_mes}/${obj[i].cobro_ano}</td>
                                <td>${obj[i].cobro_cuota}/${obj[i].cobro_mes} - ${servicio.nombre}</td>
                                <td></td>
                                <td>₡${obj[i].cobro_valor}
                                    <input type="hidden" id="cobro_${idFila}" value="${obj[i].cobro_valor}">
                                </td>
                                <td>
                                    <a onclick="remover_row(${idFila})" class="btn btn-danger"><i class="fa fa-trash"></i>Remover</a>
                                    <a data-toggle="modal" data-target="#modal_detalle_cobros" onclick="detalle_cobro(${obj[i].cobro_id})" class="btn btn-info"><i class="fa fa-eye"></i>Ver Detalle</a>
                                    <a data-toggle="modal" data-target="#modal_condonar_cobros" class="btn btn-primary"><i class="fa fa-thumbs-o-up"></i>Condonar Cobro</a>
                                </td>
                            </tr>`;
                total_conbro += Number(obj[i].cobro_valor);
            }

            document.getElementById('rowsCobros').innerHTML = html;
            $('#valor_cobrar').val(Number(total_conbro).toFixed(2));
            document.getElementById('total_cobro').innerHTML = (Number(total_conbro).toFixed(2));
            $('#total_cobros').val(Number(total_conbro).toFixed(2));
            calcular();
        });
    }



    function limpiar() {
        location.reload();
    }
    function detalle_cobro(id) {
        //console.log(id);
    }
    function calcular() {
        var total_cobrar = $('#total_cobros').val();
        var valor_pagar = $('#total_pagado').val();
        var resultado = Number(valor_pagar) - Number(total_cobrar);
        $('#diferencia').val(resultado);
        document.getElementById('s_diferencia').innerHTML = resultado < 0 ? `<div class="text-danger">₡${resultado.toFixed(2)}</div>` : `<div class="text-success">₡${resultado.toFixed(2)}</div>`;
    }
    function requerir_comprobante() {
        var id_medio_pago = document.getElementById('medio_pago');
        var text_medio_pago = id_medio_pago.options[id_medio_pago.selectedIndex].text;
        var r_prompro = document.getElementById('comprobante');
        var data_medio = id_medio_pago.value.split('_');
        if (data_medio[1] == '1') {
            r_prompro.disabled = false;
            r_prompro.value = '';
        }
        else {
            r_prompro.disabled = true;
            r_prompro.value = '';
        }
        //console.log(data_medio);
    }
    function agrega_medio() {
        var id_medio_pago = document.getElementById('medio_pago');
        var text_medio_pago = id_medio_pago.options[id_medio_pago.selectedIndex].text;
        var text_comprobante = $('#comprobante').val();
        var valor_comprobante = $('#valor_cobrar').val();
        var valor_pagar = $('#total_pagado').val();
        var error = '';
        if (id_medio_pago.value != '') {
            var requerido = id_medio_pago.value.split('_')[1];

            if (valor_comprobante == '')
                error = 'Por favor ingrese un valor de pago mayor de "0" para agregar.';

            if (requerido == 1 && text_comprobante == '')
                error = 'Se requiere un número de comprobante para el medio de pago seleccionado.';

            if (error == '') {
                //console.log(valor_comprobante.search('₡'));
                if (valor_comprobante.search('₡') == 0)
                    valor_comprobante = Number(valor_comprobante.replace('₡ ', '').replace('.', '').replace(',', '.'));
                else
                    valor_comprobante = Number(valor_comprobante);
                //console.log(valor_comprobante);
                var idFila = Math.floor(Math.random() * 99999);

                var html = `<tr id="m_fila_${idFila}">
                                    <td>${text_medio_pago}</td>
                                    <td>${text_comprobante}</td>
                                    <td>₡${valor_comprobante.toFixed(2)}
                                        <input type="hidden" id="valor_comprobante_${idFila}" value="${valor_comprobante}">
                                    </td>
                                    <td>
                                        <a onclick="remover_row_comprobante(${idFila})" class="btn btn-danger"><i class="fa fa-trash"></i>Remover</a>
                                    </td>
                                </tr>`;

                $('#rowMedios').append(html);

                valor_pagar = Number(valor_pagar) + valor_comprobante;
                //console.log(valor_pagar);
                $('#total_pagado').val(valor_pagar);
                document.getElementById('s_total_pagado').innerHTML = Number(valor_pagar).toFixed(2);
                $('#valor_cobrar').val('');
                calcular();
            } else {
                Swal.fire({
                    icon: 'warning',
                    title: 'Advertencia.',
                    text: error,
                });
            }
        }
    }

    function registrar_pago(){
        event.preventDefault();

        var id_contrato = $('#contrato').val();
        let formS =  $("#frmContract");
          var url = "{{ URL::asset('pagos/pago_servicios/manual/') }}" + "/" + id_contrato

        swal.fire({
            title: 'Seguro Quieres Procesar el Pago ?',
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: 'Cancelar',
            confirmButtonText: 'Pagar'
        }).then((result) => {
            if (result.value) {
              formS.attr("action", url)
              formS.submit();

            }
        });
    }

    function remover_row(row) {
        //console.log(row);
        var total_cobros = $('#total_cobros').val();
        var row_cobro = $('#cobro_' + row).val();
        var res_remove = Number(total_cobros) - Number(row_cobro);

        $('#total_cobros').val(Number(res_remove).toFixed(2));
        $('#valor_cobrar').val(Number(res_remove).toFixed(2));
        document.getElementById('total_cobro').innerHTML = res_remove.toFixed(2);
        $('#fila_cobros_' + row).remove();
        calcular();
    }
    function remover_row_comprobante(row) {
        var total_compro = $('#total_pagado').val();
        var valor_row = $('#valor_comprobante_' + row).val();
        var res = Number(total_compro) - Number(valor_row);
        $('#total_pagado').val(res);
        document.getElementById('s_total_pagado').innerHTML = res.toFixed(2);
        calcular();
        $('#m_fila_' + row).remove();
    }
    function consultar_servicios() {
        var id_contrato = $('#contrato').val();
        //console.log(id_contrato);
        if (id_contrato != '') {
            var url = "{{ URL::asset('pagos/asociacion/manual/servicios/ajax') }}" + "/" + id_contrato;
            $.get(url, function (res) {
                var obj = $.parseJSON(res);
                document.getElementById('servicio').innerHTML = "";
                document.getElementById("servicio").options[document.getElementById("servicio").options.length] = new Option('Seleccionar', ' ');
                for (var i = 0; i < obj.length; i++) {
                    document.getElementById("servicio").options[document.getElementById("servicio").options.length] = new Option(obj[i].servicio_nombre + '-' + (obj[i].contrato_servicio_estado == 1 ? '(Activo)' : '(Inactivo)'), obj[i].contrato_servicio_id, obj[i].contrato_servicio_servicio_id, obj[i].contrato_servicio_contrato_id);
                    data_servicios.push({
                        'id': obj[i].contrato_servicio_id,
                        'nombre': obj[i].servicio_nombre,
                        'estado': obj[i].contrato_servicio_estado,
                        'valor': obj[i].contrato_servicio_saldo_actual,
                        'servicio_id': obj[i].contrato_servicio_servicio_id,
                        'contrato': obj[i].contrato_servicio_contrato_id
                    });
                }
            });

        }
    }
    function consultar_contrato() {
        data_servicios = [];
        var id_cliente = $('#cliente').val();//'1';//$('#cliente').val();
        if (id_cliente != '') {
            var url = "{{ URL::asset('pagos/asociacion/manual/contratos/ajax') }}" + "/" + id_cliente;
            //console.log(url);
            $.get(url, function (res) {
                var obj = $.parseJSON(res);
                document.getElementById('modale_contratos').innerHTML = "";
                document.getElementById("modale_contratos").options[document.getElementById("contrato").options.length] = new Option('Seleccionar', ' ');

                /*  document.getElementById("frmContratos").options[document.getElementById("contrato").options.length]=new Option('Seleccionar', ' '); */

                document.getElementById('contrato').innerHTML = "";
                document.getElementById("contrato").options[document.getElementById("contrato").options.length] = new Option('Seleccionar', ' ');
                for (var i = 0; i < obj.length; i++) {
                    document.getElementById("contrato").options[document.getElementById("contrato").options.length] = new Option(('Contrato Nro.:' + obj[i].contrato_codigo), obj[i].contrato_id);
                    document.getElementById("modale_contratos").options[document.getElementById("modale_contratos").options.length] = new Option((obj[i].contrato_codigo), obj[i].contrato_id);
                }
            });

        }
        //$('#contrato').select2();
    }
    function consultar_servicio() {
        data_servicios = [];
        var id_cliente = $('#cliente').val();//'1';//$('#cliente').val();
        if (id_cliente != '') {
            var url = "{{ URL::asset('pagos/asociacion/manual/servicios/ajax') }}" + "/" + id_cliente;

            $.get(url, function (res) {
                var obj = $.parseJSON(res);
                document.getElementById('servicios').innerHTML = "";
                document.getElementById("servicios").options[document.getElementById("servicios").options.length] = new Option('Seleccionar', ' ');

                document.getElementById('servicios').innerHTML = "";
                document.getElementById("servicios").options[document.getElementById("servicios").options.length] = new Option('Seleccionar', ' ');
                for (var i = 0; i < obj.length; i++) {
                    document.getElementById("servicios").options[document.getElementById("servicios").options.length] = new Option(('Contrato Nro.:' + obj[i].contrato_codigo), obj[i].contrato_id);
                    document.getElementById("servicios").options[document.getElementById("servicios").options.length] = new Option((obj[i].contrato_codigo), obj[i].contrato_id);
                }
            });

        }
        //$('#contrato').select2();
    }

    $(document).ready(function () {

        //Initialize Select2 Elements
        $('.select2').select2()

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

        $('#frmContratos').validate({
            rules: {
                nombre: {
                    required: true
                },
                estado: {
                    required: true
                },
            },
            messages: {
                nombre: {
                    required: "Campo nombre es requerido"
                },
                estado: {
                    required: "Campo estado 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');
            }
        });
    });


</script>
@endsection