@extends('layouts.app')

@section('custom-styles')
  <!-- Select2 -->
  <link rel="stylesheet" href="/plugins/select2/css/select2.min.css">
  <link rel="stylesheet" href="/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
  <link rel="stylesheet" href="/css/tva-select2.css">
@endsection

@section('content-header')
    <div class="col-sm-6">
        <h1 class="m-0"><i class="nav-icon fas fa-receipt fa-xs"></i> {{ __('Recibos') }}</h1>
    </div><!-- /.col -->
    <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item">Recibos</li>
        <li class="breadcrumb-item active">Nuevo Recibo</li>
        </ol>
    </div><!-- /.col -->
@endsection

@section('content')

  <!-- Main content -->
  <section class="content">

    <div class="container-fluid">

        <div class="row">

            <div class="col-md-9">
                <!-- jquery validation -->
                <div class="card card-primary">

                    <div class="card-header">
                        <h3 class="card-title">Nuevo Recibo</h3>   
                        <a class="btn btn-default btn-sm float-right text-primary" data-toggle="modal" data-target="#modal-help" title="Ayuda" style="cursor:pointer;">
                            <i class="fas fa-info-circle"></i> Ayuda
                        </a>                     
                    </div>
                    <!-- /.card-header -->
                    
                    <!-- form start -->
                    <form id="editForm" action="{{ route('recibos.store') }}" method="POST">
                    @csrf
                    <input type="hidden" name="total" id="total" value="0"/>
                    <input type="hidden" name="moneda_id" value="{{ $moneda_id }}"/>
                    <input type="hidden" name="estado_id" value="{{ $estado_id }}"/>
                    <input type="hidden" name="origenes_pago[]" value="1"/>

                    <div class="card-body">

                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif                        
                        
                        <!-- Main content -->
                        <div class="invoice p-3 mb-3">

                            <!-- title row -->
                            <div class="row">
                                <div class="col-12">
                                    
                                    <div class="form-group row">
                                        <label for="destino" class="col-sm-3 col-form-label">Destino del recibo</label>
                                        <div class="col-sm-9 align-content-center">
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="destino" value="socio">
                                                <label class="form-check-label">Socio</label>                                                
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="destino" value="inquilino">
                                                <label class="form-check-label">Inquilino</label>
                                            </div>
                                            <span id="destino-error" class="error invalid-feedback"></span>
                                        </div>
                                    </div>

                                    <div class="form-group row">

                                        <label for="socio_id" class="col-sm-3 col-form-label selector-socio d-none">Socio</label>
                                        <div class="col-sm-6 selector-socio d-none">
                                            <select class="select2bs4" data-placeholder="Seleccione el Socio" name="socio_id" id="socio_id">
                                                <option value="" selected>Seleccione el socio</option>                                                    
                                            </select>
                                            <span id="socio_id-error" class="error invalid-feedback"></span>
                                        </div>

                                        <label for="inquilino_id" class="col-sm-3 col-form-label selector-inquilino d-none">Inquilino</label>
                                        <div class="col-sm-6 selector-inquilino d-none">
                                            <select class="select2bs4" data-placeholder="Seleccione el inquilino" name="inquilino_id" id="inquilino_id">
                                                <option value="" selected>Seleccione el inquilino</option>                                                    
                                            </select>
                                            <span id="inquilino_id-error" class="error invalid-feedback"></span>
                                        </div>

                                        <div class="col-sm-2 d-none" id="contenedor-selector">
                                            <button type="button" id="buscar-pendientes" class="btn btn-info" title="Buscar registros"><i class="fas fa-sync-alt"></i></button>
                                            <div class="spinner-border text-info d-none" role="status" id="buscar-pendientes-spinner">
                                                <span class="sr-only">Loading...</span>
                                            </div>
                                        </div>

                                    </div>                                                                                

                                    <div class="form-group row">
                                        <label for="fecha" class="col-sm-3 col-form-label">Fecha</label>
                                        <div class="col-sm-3">
                                            <div class="input-group date" id="fecha" data-target-input="nearest">
                                                <input type="text" class="form-control datetimepicker-input" data-target="#fecha" name="fecha" value="{{ \Carbon\Carbon::now()->format('d/m/Y') }}">
                                                <div class="input-group-append" data-target="#fecha" data-toggle="datetimepicker">
                                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                                </div>
                                            </div>
                                            
                                            <span id="fecha-error" class="error invalid-feedback"></span>
                                        </div>
                                    </div>

                                    <div class="form-group row" id="origenes-contenedor">
                                        <span id="total-error" class="text-right error invalid-feedback"></span>
                                        <label for="origen_pago_id-1" class="col-sm-3 col-form-label">Forma de Pago</label>
                                        <div class="col-sm-4">
                                            <select name="origen_pago_id-1" id="origen_pago_id-1" class="form-control" required>
                                            <option value="" selected>Seleccione el origen</option>
                                            @foreach($origenes as $id=>$descripcion )
                                                <option value="{{ $id }}">{{ $descripcion }}</option>
                                            @endforeach
                                            </select>
                                            <span id="origen_pago_id-1-error" class="error invalid-feedback"></span>
                                        </div>
                                        <label for="origen_pago_importe-1" class="col-sm-1 col-form-label">Importe</label>
                                        <div class="col-sm-2">
                                            {{-- <input type="text" name="origen_pago_importe-1" class="form-control" id="origen_pago_importe-1" placeholder="Importe" value="0.00" data-inputmask="'alias': 'currency', 'prefix': '', 'groupSeparator': '.', 'radixPoint': ',', 'removeMaskOnSubmit': true"> --}}
                                            <input type="text" name="origen_pago_importe-1" class="form-control" id="origen_pago_importe-1" placeholder="Importe" value="0" data-inputmask="'alias': 'integer'">
                                            <span id="origen_pago_importe-1-error" class="error invalid-feedback"></span>
                                        </div>
                                        <div class="col-sm-1" id="origenes-botones-contenedor-1">
                                            <a class="btn btn-info btn-sm agregar-origen" title="Agregar otra forma de pago" style="cursor:pointer;">
                                                <i class="fas fa-plus-square"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="nota" class="col-sm-3 col-form-label">Nota</label>
                                        <div class="col-sm-6">
                                            <input type="text" name="nota" class="form-control @error('nota') is-invalid @enderror" id="nota" placeholder="Nota" value="{{ old('nota') }}">
                                            <span id="nota-error" class="error invalid-feedback"></span>
                                            @error('nota')
                                                <span class="error invalid-feedback is-invalid" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                                                            
                                </div>
                                <!-- /.col -->
                            </div>
                            
                            <div class="row">
                                <div class="col-12">
                                    <hr>
                                    <h4 class="text-info">Seleccione las deudas a incluir en el recibo:</h4><br>
                                </div>
                            </div>

                            <!-- Table row -->
                            <div class="row">
                                <div class="col-12 table-responsive">
                                    <table class="table table-striped table-sm" id="registros-table">
                                        <thead>
                                            <tr>
                                                <th class="text-center"></th>
                                                <th class="text-center">Descripción</th>
                                                <th class="text-center">Fec. venc.</th>
                                                <th class="text-center">Estado</th>
                                                <th class="text-center">Importe</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td colspan="5" class="text-center">No existen registros según su selección.</td>                                                    
                                            </tr>                                        
                                        </tbody>
                                    </table>
                                </div>
                                <!-- /.col -->
                            </div>
                            <!-- /.row -->

                            <div class="row">
                                <!-- accepted payments column -->
                                <div class="col-8">
                                    {{-- <p class="lead">Payment Methods:</p>
                                    <img src="/img/credit/visa.png" alt="Visa">
                                    <img src="/img/credit/mastercard.png" alt="Mastercard">
                                    <img src="/img/credit/american-express.png" alt="American Express">
                                    <img src="/img/credit/paypal2.png" alt="Paypal">

                                    <p class="text-muted well well-sm shadow-none" style="margin-top: 10px;">
                                        Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles, weebly ning heekya handango imeem
                                        plugg
                                        dopplr jibjab, movity jajah plickers sifteo edmodo ifttt zimbra.
                                    </p> --}}
                                </div>
                                <!-- /.col -->
                                <div class="col-4">
                                    {{-- <p class="lead">Amount Due 2/22/2014</p> --}}

                                    <div class="table-responsive">
                                        <table class="table">                                                
                                            <tr>
                                                <th>Total:</th>
                                                <td class="text-right" id="total-front">$ 0</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                                <!-- /.col -->
                            </div>
                            <!-- /.row -->
                            
                        </div>
                        <!-- /.invoice -->
                        
                    </div>
                    <!-- /.card-body -->
                    
                    <div class="card-footer text-right">
                    
                        <!-- this row will not appear when printing -->
                        <div class="row no-print">
                            <div class="col-12">
                                <button type="submit" class="btn btn-success float-right"><i class="fas fa-receipt"></i> Generar recibo</button>
                            </div>
                        </div>
                        
                    </div>

                    </form>
                    
                </div>
                <!-- /.card -->

            </div>
            <!-- /.col (left) -->

        </div>

    </div>

    <div class="modal fade" id="modal-help" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"><i class="fas fa-info-circle"></i> Ayuda</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <dl>
                        <dt>1. Destino del recibo</dt>
                        <dd>Indique si el recibo es para un Socio o un Inquilino.</dd>
                        <dd>A continuación se desplegará un campo para seleccionar el Socio/Inquilino.</dd>
                        <dt>2. Socio/Inquilino</dt>
                        <dd>Indique el Socio/Inquilino al que se le emitirá el recibo.</dd>
                        <dt>3. Haga clic sobre el botón <button type="button" class="btn btn-info btn-xs"><i class="fas fa-sync-alt"></i></button> para obtener las deudas.</dt>
                        <dd>Se obtendrán las deudas pendientes, parciales o vencidas.</dd>
                        <dt>4. Fecha</dt>
                        <dd>Indique la fecha de emisión del Recibo. Por defecto la fecha del día.</dd>
                        <dt>5. Forma de pago.</dt>
                        <dd>Indique el origen del dinero recibido.</dd>
                        <dt>6. Seleccione las deudas a incluir en el Recibo.</dt>
                        <dd>Haga clic en el selector <input type="checkbox"checked="checked"> ubicado al principio de cada fila.</dd>
                        <dt>7. Haga clic en el botón Guardar Recibo para finalizar.</dt>
                        <dd>Esto generará el Recibo en el sistema y los movimientos en la Cuenta principal y la cuenta del Socio/Inquilino.</dd>
                    </dl>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

  </section>
  <!-- /.content -->

@endsection

@section('custom-scripts')
    <!-- jquery-validation -->
    <script src="/plugins/jquery-validation/jquery.validate.min.js"></script>
    <script src="/plugins/jquery-validation/additional-methods.min.js"></script>
    <!-- InputMask -->
    <script src="/plugins/moment/moment.min.js"></script>
    <script src="/plugins/inputmask/jquery.inputmask.min.js"></script>
    <!-- Select2 -->
    <script src="/plugins/select2/js/select2.full.min.js"></script>    
  <script>

    $(function () {

        moment.locale('es');

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

        //Initialize Select2 Elements
        $('.select2bs4').select2({
            theme: 'bootstrap4'
        })

        //Datemask dd/mm/yyyy
        // $('#datemask').inputmask('dd/mm/yyyy', { 'placeholder': 'dd/mm/yyyy' })
        //Datemask2 mm/dd/yyyy
        // $('#datemask2').inputmask('mm/dd/yyyy', { 'placeholder': 'mm/dd/yyyy' })
        //Money Euro
        $('[data-mask]').inputmask()

        //Date picker
        $('#fecha').datetimepicker({
            format: 'DD/MM/YYYY',
            autoclose:true,
            language: 'es',
        });

        let identificadorOrigen = 1;

        $.validator.addMethod("origenesVsTotal", function(value, element) {            
            
            // return this.optional(element) || (parseFloat(value) > 0);

            console.log("addMethod: origenesVsTotal", element, value);

            if (isNaN(parseFloat(value)) || parseFloat(value) <= 0) {
                return false;
            }

            console.log(element, value);
            
            let totalOrígenes = 0;
            
            $("input[name^='origen_pago_importe-']").each(function() {
                // let importeVal = $(this).val().replace(/\./g, '').replace(',', '.');
                let importeVal = $(this).val().replace(',', '.');
                console.log(importeVal);
                totalOrígenes += parseFloat(importeVal);
            });
            
            console.log('totalOrígenes', totalOrígenes);
            
            return parseFloat(totalOrígenes.toFixed(2)) === parseFloat(parseFloat(value).toFixed(2));

        }, "* El total del recibo debe coincidir con el total de las formas de pago ingresadas.");

        $('#editForm').validate({
            ignore: [],
            rules: {
                destino: {
                    required: true,
                },
                origen_pago_id: {
                    required: true,
                },
                moneda_id: {
                    required: true,
                },
                total : { 
                    origenesVsTotal: true,
                }
            },
            messages: {
                destino: {
                    required: "Por favor selecciona el destino del recibo",
                },
                origen_pago_id: {
                    required: "Por favor selecciona el origen del pago",
                },
                moneda_id: {
                    required: "Por favor selecciona la moneda",
                },
            },
            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) {
                form.submit();
            }
        });

        $("input[name='destino']").change(function() {
            
            var val = $("input[type='radio'][name='destino']:checked").val();

            $('#buscar-pendientes-spinner').removeClass('d-none');

            if(val == 'socio'){
                populateDropDown($('#socio_id'), 'socio');
                $('.selector-socio').removeClass("d-none");
                $('.selector-inquilino').addClass("d-none");
                $('#inquilino_id').val('');
            }else{
                populateDropDown($('#inquilino_id'), 'inquilino');
                $('.selector-socio').addClass("d-none");
                $('.selector-inquilino').removeClass("d-none");
                $('#socio_id').val('');
            }

            $('#contenedor-selector').removeClass("d-none");
            $('#buscar-pendientes-spinner').addClass('d-none');
            
        });

        $('#buscar-pendientes').click(function(){
            
            $('#buscar-pendientes').addClass('d-none');
            $('#buscar-pendientes-spinner').removeClass('d-none');

            let destino = $("input[type='radio'][name='destino']:checked").val();
            let identificador = (destino == 'socio') ? $('#socio_id').val() : $('#inquilino_id').val();

            if(identificador != 0){
                let registros = registrosSearch(destino, identificador);            
            }else{
                alert("Debe indicar un Socio o Inquilino para buscar");
                $('#buscar-pendientes').removeClass('d-none');
                $('#buscar-pendientes-spinner').addClass('d-none');
            }
                    
        });

        $(document).on('click', '.agregar-origen', function() {

            identificadorOrigen += 1;

            let nuevoOrigenHTML = '<label for="origen_pago_id-'+identificadorOrigen+'" class="col-sm-3 col-form-label">Forma de Pago</label>'+
                '<div class="col-sm-4">'+
                    '<select name="origen_pago_id-'+identificadorOrigen+'" id="origen_pago_id-'+identificadorOrigen+'" class="form-control" required>'+
                    '<option value="" selected>Seleccione el origen</option>'+
                    '@foreach($origenes as $id=>$descripcion )'+
                        '<option value="{{ $id }}">{{ $descripcion }}</option>'+
                    '@endforeach'+
                    '</select>'+
                    '<span id="origen_pago_id-'+identificadorOrigen+'-error" class="error invalid-feedback"></span>'+
                '</div>'+
                '<label for="origen_pago_importe-'+identificadorOrigen+'" class="col-sm-1 col-form-label">Importe</label>'+
                '<div class="col-sm-2">'+
                    '<input type="text" name="origen_pago_importe-'+identificadorOrigen+'" class="form-control" id="origen_pago_importe-'+identificadorOrigen+'" placeholder="Importe" value="0" data-inputmask="\'alias\': \'integer\', \'removeMaskOnSubmit\': true">'+
                    '<span id="origen_pago_importe-'+identificadorOrigen+'-error" class="error invalid-feedback"></span>'+
                '</div>'+
                '<div class="col-sm-1" id="origenes-botones-contenedor-'+identificadorOrigen+'">'+
                    '<a class="btn btn-warning btn-sm quitar-origen" title="Quitar forma de pago" style="cursor:pointer;">'+
                        '<i class="fas fa-minus-square"></i>'+
                    '</a>'+
                '</div>';
            
                
            $('#origenes-contenedor').append(nuevoOrigenHTML);
            $('[data-mask]').inputmask();
            
            let nuevoOrigenFormHTML = '<input type="hidden" name="origenes_pago[]" value="'+identificadorOrigen+'">';
            $('#editForm').append(nuevoOrigenFormHTML);
        });

        $(document).on('click', '.quitar-origen', function() {

            let origenIndex = $(this).parent().attr("id").split('-').pop();

            $("input[name='origenes_pago[]'][value='"+origenIndex+"']").remove();

            $('#origen_pago_id-'+origenIndex).parent().prev().remove();
            $('#origen_pago_id-'+origenIndex).parent().remove();
            $('#origen_pago_importe-'+origenIndex).parent().prev().remove();
            $('#origen_pago_importe-'+origenIndex).parent().remove();
            $('#origenes-botones-contenedor-'+origenIndex).remove();

        });

        $(document).on('change', '.selector', function() {
        
            const coleccionId = this.id.split("-");

            actualizarRegistrosSeleccionados(this.checked, coleccionId[1]);
            obtenerTotal();

        });
    
    });

    function registrosSearch(destino, identificador)
    {
        //   let parameters = {_token:"{{ csrf_token() }}",proveedor_id:proveedorId};
        // $('.overlay').css("display", "flex");
        let destinoURL = (destino == 'socio') ? '/socio-cuentas/movimientos-por-socio-json/' + identificador : '/inquilino-cuentas/movimientos-por-inquilino-json/' + identificador;

        $.ajax({
            url: destinoURL,
            type: 'GET',
            headers:{"content-type" : "application/json"},
        //   data: JSON.stringify(parameters),
            success: function(response) {
            $('#buscar-pendientes').removeClass('d-none');
            $('#buscar-pendientes-spinner').addClass('d-none');
            populateRegistros(response, destino);
            },
            error: function(error) {
            $('#buscar-pendientes').removeClass('d-none');
            $('#buscar-pendientes-spinner').addClass('d-none');
            console.error('Error fetching data:', error);
            }
        });
    }

    function populateRegistros(registros, destino)
    {
        // console.log('populateRegistros registros', registros);

        $('#registros-table tbody tr').empty();
        $('#editForm input[name="registros[]"]').remove();
        $('#total-front').text('$ 0.00');
        $('#total').val(0);

        if(registros.length > 0){

            // let cantidadServiciosHTML = '<div class="info-box"><span class="info-box-icon bg-info"><i class="far fa-envelope"></i></span><div class="info-box-content"><span class="info-box-text">Cantidad de cuentas</span><span class="info-box-number">' + servicios.length + '</span></div></div>';
                
            // $('#servicios-asociados').append(cantidadServiciosHTML);
            
            registros.forEach(element => {
                let registro = element;

                let fechaVencimiento = (registro.fecha_vencimiento == null) ? '' : moment(registro.fecha_vencimiento).format('DD/MM/YYYY');

                let registroRowHtml = '<tr id="row-'+registro.registro_id+'" class="text-center"><td><input type="checkbox" class="selector" name="selector-'+registro.registro_id+'" id="selector-'+registro.registro_id+'" checked></td><td class="text-left">'+registro.descripcion+'</td><td class="text-center">'+fechaVencimiento+'</td><td class="text-center">'+registro.estado+'</td><td class="text-right">'+registro.moneda_simbolo+ ' ' + Number.parseFloat(registro.importe).toFixed(2) +'<input type="hidden" name="total-'+registro.registro_id+'" id="total-'+registro.registro_id+'" value="'+registro.importe+'"></td></tr>';

                $('#registros-table tbody').append(registroRowHtml);
                
                actualizarRegistrosSeleccionados(true, registro.registro_id);

            });

            obtenerTotal();

        }else{
            $('#registros-table tbody').append('<tr><td colspan="5" class="text-center">El '+ destino +' seleccionado no tiene registros pendientes de pago.</td></tr>');
        }

    }

    function populateDropDown(dropdown, destino)
    {

      let destinoURL = (destino == 'socio') ? '/socios/obtener-activos' : '/inquilinos/obtener-activos';
      dropdown.children('option:not(:first)').remove();

      $('.overlay').css("display", "flex");

      $.ajax({
          url: destinoURL,
          type: 'GET',
          headers:{"content-type" : "application/json"},
          // data: JSON.stringify(parameters),
          success: function(response) {
            
            $.each(response, function(index, item) {
              dropdown.append($("<option />").val(item.id).text(item.nombre));
            });

            $('.overlay').css("display", "none");
          },
          error: function(error) {
            $('.overlay').css("display", "none");
            console.error('Error fetching data:', error);
          }
      });            

    }

    function obtenerTotal(){
        let total = 0;

        $('input[name^="registros"]').each(function(){
            nota += $(this).val() + ', ';
            let totalSelected = $("#total-"+$(this).val());
            total += parseInt(totalSelected.val());
        });

        $('#total-front').text('$ ' + parseInt(total));
        $('#total').val(total);
    }

    function actualizarRegistrosSeleccionados(seleccionado, registroId){

        if(seleccionado) {
            $('#editForm').append('<input type="hidden" name="registros[]" value="' + registroId + '">');
        }else{
            $('input[name="registros[]"][value="' + registroId + '"]').remove();
        }

    }

  </script>
@endsection