@include('header_nuevo_generico')
<div class="d-flex flex-column align-items-center justify-content-center" style="height: 90vh;">
    <!-- Botón de Volver al Menú -->
    <div class="position-absolute end-0 me-3" style="top: 80px;">
        <a href="/administrador-ia" class="btn btn-outline-fidelitas  px-4 py-2 shadow-sm rounded-pill">Volver al Menú</a>        
    </div>

    <!-- Título del panel -->
    <div class="text-center mb-4">
        <h1 class="display-4 text-fidelitas">Generar Batch con AI</h1>
        <p class="text-muted">
            Utilice esta interfaz para generar un lote de edictos del día, que se enviará al modelo de AI seleccionado para su análisis y procesamiento automático.
        </p>
    </div>

    <!-- Formulario -->
    <div class="row justify-content-center mb-5 col-md-6">
        <form id="frmBatchForm" class="p-5 border rounded bg-white shadow-lg">
            <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">

            <div class="d-flex mb-4 gap-4">
                <div class="flex-grow-1">
                    <label for="fechaBatch" class="form-label">Fecha de Consulta</label>
                    <input type="text" class="form-control datepicker" name="fechaBatch" id="fechaBatch" placeholder="Seleccione una fecha" required>
                </div>
                <div class="flex-grow-1">
                    <label for="modeloGpt" class="form-label">Modelo de AI</label>
                    <select class="form-select" name="modeloGpt" id="modeloGpt" required>
                        @foreach($promptsFiltrados as $prompts)                    
                            <option value="{{$prompts->id_prompt}}">{{$prompts->prompt_name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            
            <div class="text-center mt-4">
                <button type="submit" class="btn btn-fidelitas  px-5 py-3 shadow-sm rounded-pill">Generar y Enviar Batch</button>
            </div>
        </form>
    </div>

    <!-- Tabla de DataTable debajo del formulario -->
    <div class="row justify-content-center mt-5 col-12">
        <table id="batchTable" class="table table-striped table-bordered shadow-lg rounded">
            <thead class="thead-dark">
                <tr>
                    <th>ID</th>
                    <th>Prompt</th>
                    <th>Modelo</th>
                    <th>Estado</th>
                    <th>Creado Por</th>
                    <th>Fecha Creacion</th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tbody>
                @foreach($tablaProcesos as $procesos)
                    <tr>
                        <td>{{$procesos->id_batch}}</td>
                        <td>{{$procesos->prompt_name}}</td>
                        <td>{{$procesos->model_name}}</td>
                        <td>{{$procesos->status}}</td>
                        <td>{{$procesos->usuario}}</td>
                        <td>{{$procesos->created}}</td>
                        <td class="d-flex justify-content-center gap-3">
                            <button id="btnVerDetalles" class="btn btn-sm btn-outline-secondary shadow-sm">Ver Detalles</button>
                            <button id="btnActualizar" class="btn btn-sm btn-outline-info shadow-sm" data-id="{{$procesos->id_batch}}">Actualizar</button>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Botón de ayuda en la parte inferior derecha -->
    <div class="position-fixed bottom-0 end-0 m-3">
        <button type="button" class="btn btn-outline-info btn-lg shadow-lg" data-bs-toggle="modal" data-bs-target="#helpModal">
            <i class="bi bi-question-circle"></i>
        </button>
    </div>
</div>

<!-- Modal de Ayuda -->
<div class="modal fade" id="helpModal" tabindex="-1" aria-labelledby="helpModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="helpModalLabel">Ayuda para la Interfaz</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Siga estos pasos para utilizar la interfaz:</p>
                <ol>
                    <li>Seleccione la <strong>Fecha de Consulta</strong> para los edictos del día.</li>
                    <li>Elija el <strong>Modelo de AI</strong> adecuado para el procesamiento.</li>
                    <li>Haga clic en <strong>Generar y Enviar Batch</strong> para enviar la solicitud al modelo.</li>
                </ol>
                <p>Una vez procesado, el sistema devolverá los resultados para su revisión.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Respuesta -->
<div class="modal fade" id="respuestaModal" tabindex="-1" aria-labelledby="respuestaModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="respuestaModalLabel">Detalles de la Respuesta</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">
                <ul class="list-group">
                <li class="list-group-item"><strong>ID:</strong> <span id="respuestaId"></span></li>
                <li class="list-group-item"><strong>Status:</strong> <span id="respuestaStatus"></span></li>
                <li class="list-group-item"><strong>Cantidad de Edictos:</strong> <span id="respuestaCantidadEdictos"></span></li>
                <li class="list-group-item"><strong>Completados:</strong> <span id="respuestaCompletados"></span></li>
                <li class="list-group-item"><strong>Fallidos:</strong> <span id="respuestaFallidos"></span></li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        // Inicializar el datepicker
        $('.datepicker').datepicker({
            format: 'dd/mm/yyyy',
            autoclose: true,
            todayHighlight: true
        });        

        let table = new DataTable('#batchTable');

        altaBatch();

        table.on('click', '#btnActualizar', function() {
            const batchId = $(this).data('id');
            const row = $(this).closest('tr'); 

            $.ajax({
                url: '/administrador-ia/panel-batch/actualizar', 
                method: 'POST',
                data: {
                    id_batch: batchId,
                    _token: $('#token').val() 
                },
                beforeSend: function() {
                    //
                },
                success: function(response) {
                    // Actualizar los valores en la fila con los datos recibidos
                    row.find('td:nth-child(4)').text(response.status); // Columna "Estado"
                    row.find('td:nth-child(7)').text(response.completados); // Columna "Completados"
                    row.find('td:nth-child(8)').text(response.fallidos); // Columna "Fallidos"

                    alert('Registro actualizado correctamente');
                },
                error: function(error) {
                    alert('Error al actualizar el registro. Intente nuevamente.');
                }
            });
        });
    });

    function altaBatch(){
        $("#frmBatchForm").on('submit', function(e){
            e.preventDefault();
            $.ajax({
                method: "POST",
                url: "/open-ai/generar-file",
                data: $('#frmBatchForm').serialize(),
                beforeSend: function(){
                    //
                },
                success: function(data){
                    $('#respuestaCantidadEdictos').html(data.cantidad_edictos);
                    $('#respuestaCompletados').html(data.completados);
                    $('#respuestaFallidos').html(data.fallidos);
                    $('#respuestaId').html(data.id);
                    $('#respuestaStatus').html(data.status);

                    $('#respuestaModal').modal('show');

                },
                error: function(err){
                    alert('Error. Intente más tarde'); 
                }
            });
        })
    }   
    
</script>