@extends('admin.layout.master')

@section('content')
<main>
    <!-- Breadcrumb Area -->
    <div class="breadcrumb-area">
        <h1>Gestión de Publicaciones</h1>
        <ol class="breadcrumb">
            <li><a href="{{ url('/admin') }}"><i class='bx bx-home-alt' style="font-size: 18px;color: #F31519;"></i></a></li>
            <li><a href="{{ url('/admin') }}">Principal</a></li>
            <li>/ eventos-registrose</li>
        </ol>
    </div>

    <style>
        .select2-container {
            width: 100% !important;
        }

        .select2-selection {
            min-height: 40px;
            padding: 10px;
            font-size: 16px;
        }
    </style>

    <div class="card mb-30">
        <div id="divPublicacion">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h3>Lista de eventos</h3>
            </div>
            <div class="card-body">
                <!-- Tabla de Publicaciones -->
                <div class="table-responsive">
                    <table id="table" class="table" cellspacing="0" cellpadding="0" width="100%">
                        <thead>
                            <tr>
                                <th>N°</th>
                                <th>Nombre</th>
                                <th>Tipo</th>
                                <th>Emisión</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($eventos as $key => $publicacion)
                            <tr>
                                <td>{{$publicacion->id }}</td>
                                <td>{{ $publicacion->nombre ?? '' }}</td>
                                <td>{{ $publicacion->tipoCurso->tipo_curso ?? '' }}</td>
                                <td>{{ $publicacion->tipoEmision->tipo_emision ?? '' }}</td>
                                <td>
                                    <button type="button" class="btn btn-primary btn-xs" onclick="verregistros('{{ $publicacion->id }}', '{{ $publicacion->nombre }}')">
                                        <span class='bx bx-pencil'></span> Ver registros
                                    </button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Div para mostrar el título del evento y los registros -->
        <div id="divRegistros" class="card-body mt-4" style="display: none;">
            <h3 id="tituloEvento"></h3> <!-- Título del evento -->
            <div class="table-responsive">
                <table id="tableRegistros" class="table table-bordered">
                    <!-- Aquí se cargará la tabla de registros dinámicamente -->
                </table>
            </div>
            <button type="button" class="btn btn-secondary mt-3" onclick="volverAEventos()">Volver a eventos</button>
        </div>

        <!-- Update Modal -->
        <div class="modal fade" id="updateModal" tabindex="-1" aria-labelledby="updateModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <form id="updateForm">
                        <div class="modal-header">
                            <h5 class="modal-title" id="updateModalLabel">Actualizar Registro</h5>
                            <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <label for="seguimiento_estado" class="form-label">Estado</label>
                                <input type="text" class="form-control" id="seguimiento_estado" name="seguimiento_estado">
                            </div>
                            <div class="mb-3">
                                <label for="seguimiento_observacion" class="form-label">Observación</label>
                                <textarea class="form-control" id="seguimiento_observacion" name="seguimiento_observacion"></textarea>
                            </div>
                            <div class="mb-3">
                                <label for="seguimiento_prox_llamada" class="form-label">Próxima Llamada</label>
                                <input type="datetime-local" class="form-control" id="seguimiento_prox_llamada" name="seguimiento_prox_llamada">
                            </div>
                            <div class="mb-3">
                                <label for="seguimiento_lista" class="form-label">Lista de Seguimiento</label>
                                <input type="text" class="form-control" id="seguimiento_lista" name="seguimiento_lista">
                            </div>
                        </div>
                        <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                            <button type="button" class="btn btn-primary" onclick="updateRegistro(event)">Actualizar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $('#table').DataTable({
                paging: true,
                lengthChange: false,
                searching: true,
                ordering: true,
                order: [[0, "desc"]],
                info: true,
                autoWidth: false,
                responsive: true,
                pageLength: 10
            });
        });

        function verregistros(eventoId, nombreEvento) {
            $.ajax({
                url: `/admin/eventos/${eventoId}/registros`,
                type: 'GET',
                success: function(response) {
                    $('#tituloEvento').text('Registros del evento: ' + nombreEvento);
                    $('#divPublicacion').hide();
                    $('#divRegistros').show();

                    if ($.fn.DataTable.isDataTable('#tableRegistros')) {
                        $('#tableRegistros').DataTable().destroy(); // Destroy the existing DataTable instance
                    }

                    let registrosTable = `
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Nombre</th>
                                <th>Apellido Paterno</th>
                                <th>Apellido Materno</th>
                                <th>Celular</th>
                                <th>Correo</th>
                                <th>Fecha</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                    `;

                    response.registros.forEach((registro) => {
                        registrosTable += `
                            <tr>
                               <td>${registro.id}</td>
                                <td>${registro.nombre}</td>
                                <td>${registro.apellido_paterno}</td>
                                <td>${registro.apellido_materno}</td>
                                <td>${registro.celular}</td>
                                <td>${registro.correo}</td>
                                <td>${registro.fecha_creacion}</td>
                                <td>
                                    <button type="button" class="btn btn-success btn-xs" onclick="showEditModal(${registro.id})">
                                        Actualizar
                                    </button>
                                </td>
                            </tr>
                        `;
                    });

                    registrosTable += `</tbody>`;
                    $('#tableRegistros').html(registrosTable);

                    $('#tableRegistros').DataTable({
                        dom: 'Bfrtip',
                        buttons: [
                            {
                                extend: 'excelHtml5',
                                title: 'Registros del evento - ' + nombreEvento
                            }
                        ],
                        ordering: true,
                        order: [[0, "desc"]],
                    });
                },
                error: function() {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Hubo un error al cargar los registros.',
                    });
                }
            });
        }

        function showEditModal(registroId) {
            $.ajax({
                url: `/admin/registros/${registroId}`,
                type: 'GET',
                success: function(response) {
                    $('#seguimiento_estado').val(response.registro.seguimiento_estado);
                    $('#seguimiento_observacion').val(response.registro.seguimiento_observacion);
                    $('#seguimiento_prox_llamada').val(response.registro.seguimiento_prox_llamada);
                    $('#seguimiento_lista').val(response.registro.seguimiento_lista);
                    $('#updateModal').modal('show');
                    $('#updateForm').data('registroId', registroId);
                }
            });
        }

        function volverAEventos() {
            $('#divRegistros').hide();
            $('#divPublicacion').show();
            $('#tableRegistros').DataTable().destroy(); // Destroy DataTable instance before reloading
        }

        function updateRegistro(e) {
            e.preventDefault();
            const registroId = $('#updateForm').data('registroId');
            const formData = {
                seguimiento_estado: $('#seguimiento_estado').val(),
                seguimiento_observacion: $('#seguimiento_observacion').val(),
                seguimiento_prox_llamada: $('#seguimiento_prox_llamada').val(),
                seguimiento_lista: $('#seguimiento_lista').val(),
                _token: '{{ csrf_token() }}'
            };

            $.ajax({
                url: `/admin/registros/${registroId}/update`,
                type: 'POST',
                data: formData,
                beforeSend: function() {
                    Swal.fire({
                        title: 'Actualizando...',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                },
                success: function(response) {
                    Swal.close();
                    $('#updateModal').modal('hide');
                    Swal.fire({
                        icon: 'success',
                        title: 'Actualizado',
                        text: 'Registro actualizado correctamente.'
                    });
                    verregistros(response.evento_id, response.nombre_evento); // Refresh the table after update
                },
                error: function() {
                    Swal.close();
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'No se pudo actualizar el registro.'
                    });
                }
            });
        }
    </script>
</main>
@endsection