@extends('layout.template')
@section('title', 'SICCAP ICATEP')
@section('content')
    <div class="content-body">
        <!-- row -->
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Buscar Modelos de Negocio</h4>
                        </div>
                        <div class="card-body">
                            <p>Modelo de Negocio seleccionado: <span id="modeloSeleccionado">-----</span><input type="hidden" name="idMod" id="idModInput"></p>
                            <div class="row"> <!-- $ total de ingreso por capacitandos, $ total de ingreso por madres, $ total de pago al instructor -->
                                <div class="col-3 border border-secondary rounded p-3">
                                    <div class="row"> <!-- # capacitandos, $ por capacitando, $ total de ingreso de los capacitandos -->
                                        <div class="col">
                                            <label for="numeroDeCapacitandos" class="form-label"># de Capacitandos</label>
                                            <input type="text" class="form-control select-on-click filtro-busqueda" id="numeroDeCapacitandos" name="numeroDeCapacitandos" autocomplete="off" placeholder="" value="0"
                                            pattern="[0-9]*" inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                            <div class="invalid-feedback"></div>
                                        </div>
                                        <div class="col">
                                            <label for="ingresoPorCapacitando" class="form-label">$ por Capacitando</label>
                                            <input type="text" class="form-control select-on-click filtro-busqueda" id="ingresoPorCapacitando" name="ingresoPorCapacitando" autocomplete="off" placeholder="" value="0"
                                            pattern="^\d+(\.\d{1,2})?$" inputmode="decimal"
                                            oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1'); this.value = this.value.replace(/^(\d+(\.\d{0,2})?).*$/, '$1');">
                                            <div class="invalid-feedback"></div>
                                        </div>
                                    </div>
                                    <div class="row"> <!-- # madres, $ por madre, $ total de ingreso de las madres -->
                                        <div class="col">
                                            <label for="numeroDeMadres" class="form-label"># de Madres Solteras</label>
                                            <input type="text" class="form-control select-on-click filtro-busqueda" id="numeroDeMadres" name="numeroDeMadres" autocomplete="off"  placeholder="" value="0"
                                            pattern="[0-9]*" inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                            <div class="invalid-feedback"></div>
                                        </div>
                                        <div class="col">
                                            <label for="ingresoPorMadre" class="form-label">$ por Madre Soltera</label>
                                            <input type="text" class="form-control select-on-click filtro-busqueda" id="ingresoPorMadre" name="ingresoPorMadre" autocomplete="off" placeholder="" value="0"
                                            oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1'); this.value = this.value.replace(/^(\d+(\.\d{0,2})?).*$/, '$1');">
                                            <div class="invalid-feedback"></div>
                                        </div>
                                    </div>
                                    <div class="row"> <!-- # de horas, $ pago por hora, $ pago total del instructor -->
                                        <div class="col">
                                            <label for="horasDelCurso" class="form-label"># de Horas</label>
                                            <input type="text" class="form-control select-on-click filtro-busqueda" id="horasDelCurso" name="horasDelCurso" autocomplete="off"  placeholder="" value="0"
                                            pattern="[0-9]*" inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                            <div class="invalid-feedback"></div>
                                        </div>
                                        <div class="col">
                                            <label for="pagoPorHoraAlPSC" class="form-label">$ por Hora a PSC <small>(sin impuestos)</small></label>
                                            <input type="text" class="form-control select-on-click filtro-busqueda" id="pagoPorHoraAlPSC" name="pagoPorHoraAlPSC" autocomplete="off" placeholder="" value="0"
                                            pattern="^\d+(\.\d{1,2})?$" inputmode="decimal"
                                            oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1'); this.value = this.value.replace(/^(\d+(\.\d{0,2})?).*$/, '$1');">
                                            <div class="invalid-feedback"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-8 border border-secondary rounded p-3">
                                    <div class="row">
                                        <div id="resultadoBusquedaMN">
                                            <!-- Aquí se mostrarán los resultados de la búsqueda en una tabla con datatable y scroll vertical -->
                                             <table id="tablaResultadosMN" class="table table-hover table-bordered" style="width:100%">
                                                <thead>
                                                    <tr>
                                                        <th>Modelo de Negocio</th>
                                                        <th># Capacitandos</th>
                                                        <th>$ x Capacitando</th>
                                                        <th># Madres Solteras</th>
                                                        <th>$ x Madre Soltera</th>
                                                        <th># Horas</th>
                                                        <th>$ x Hora PSC</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <!-- Los datos se llenarán dinámicamente mediante AJAX -->
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
<script>
    $(document).ready(function() {

        $('#tablaResultadosMN').DataTable({
            scrollY: '300px',
            scrollCollapse: true,
            ordering: false,
            paging: false,
            searching: false,
            info: false
        });

        let timeout = null;

        $('.filtro-busqueda').on('input', function () {
            console.log('Input detectado en filtro de búsqueda');
            // Evita ejecutar AJAX por cada tecla (debounce)
            clearTimeout(timeout);

            timeout = setTimeout(() => {
                realizarBusqueda();
            }, 400); // milisegundos
        });

        function realizarBusqueda() {

            let data = {
                numeroDeCapacitandos    : $('#numeroDeCapacitandos').val(),
                ingresoPorCapacitando   : $('#ingresoPorCapacitando').val(),
                numeroDeMadres          : $('#numeroDeMadres').val(),
                ingresoPorMadre         : $('#ingresoPorMadre').val(),
                horasDelCurso           : $('#horasDelCurso').val(),
                pagoPorHoraAlPSC        : $('#pagoPorHoraAlPSC').val(),
                _token                  : '{{ csrf_token() }}'
            };

            $.ajax({
                url: "{{ route('buscarModelosDeNegocio') }}", // ajusta la ruta
                method: "POST",
                data: data,
                success: function (response) {
                    actualizarTabla(response);
                },
                error: function () {
                    console.error('Error al buscar modelos de negocio');
                }
            });
        }

        function actualizarTabla(data) {
            let tbody = $('#tablaResultadosMN tbody');
            tbody.empty();

            if (data.length === 0) {
                tbody.append(`
                    <tr>
                        <td colspan="7" class="text-center">Sin resultados</td>
                    </tr>
                `);
                return;
            }
            data.forEach(item => {
                tbody.append(`
                    <tr data-mod-clave="${item.mod_clave}" data-mod-id="${item.mod_id}">
                        <td>${item.mod_clave}</td>
                        <td>${item.mod_numero_capacitandos}</td>
                        <td>${item.mod_costo_capacitando}</td>
                        <td>${item.mod_numero_madres_solteras}</td>
                        <td>${item.mod_costo_madre_soltera}</td>
                        <td>${item.mod_horas}</td>
                        <td>${item.mod_hora_instructor}</td>
                    </tr>
                `);
            });
        }

    });

    $(document).on('click', '#tablaResultadosMN tbody tr', function () {
        // Quitar selección previa
        $('#tablaResultadosMN tbody tr').removeClass('selected');
        // Marcar fila seleccionada
        $(this).addClass('selected');
        // Obtener mod_clave
        let modClave = $(this).data('mod-clave');
        let modId = $(this).data('mod-id');
        // Mostrar en el span
        $('#modeloSeleccionado').text(modClave);
        $('#idModInput').val(modId);
    });
</script>
@endpush