@extends('header_nuevo_generico')


@section('styles')
    <link rel="stylesheet" href="{{ URL::asset('/Libreria_CA/css/vista_generica.css') }}">
@endsection

@section('main')
    <div class="rectangle_bg_backend align-items-start" style="margin-top: 64px;">
        <div class="d-flex justify-content-between align-items-start" style="width: 100%; margin-top:32px;">
            <div class="title_page">Boletines Oficiales</div>               
            <div class="row col-2">
            </div>
        </div>
    </div>

    <div style="display: flex; justify-content: center; align-items: center; width: 100%;">
        <div class="content-target">
            <div class="content-box">
                <div class="mt-2">                    
                    <div id="contenedor">
                    <div class="row justify-content-center my-3 mt-2">
                        <div class="col-xl-11 col-lg-10 col-md-11" id="contenido-ic">
                            <div class="row justify-content-start my-2">
                                @foreach($resultados as $provincia => $datos)
                                    @if(!empty($datos)) <!-- Solo mostrar si hay datos -->
                                        <div class="col-xl-3 col-lg-6 col-md-12 my-1 mb-3">
                                             <div class="card shadow h-100" style="border-radius:1.2rem; min-height: 200px;">
                                                <div class="card-body mx-2">
                                                    <h4 class="card-title mt-2">{{ $provincia ?: 'Todas las Provincias' }}</h4>
                                                    <p class="card-text">BO pendientes de revisión: {{$datos[0]->cantidad}}</input></p>
                                                    <div class="row  justify-content-start">
                                                        @foreach($datos as $dato)
                                                        <div class="col-md-4 col-sm-6 col-12 p-2">
                                                            <!-- <a href="{{ url('verificacion-edictos/filtrar?razonsocial_filtro=&fecha_filtro=' . $dato->fecha_publicacion . '&region_filtro=' . $provincia) }}" class="text-decoration-none">
                                                                <div class="rounded d-flex flex-column align-items-center justify-content-center border p-2 mb-3 text-center hover-effect" style="height: 120px; width: 120px; color:#057151;">
                                                                    <i class="bi bi-file-earmark-pdf fa-3x mb-1"></i>
                                                                    <span>{{ $dato->fecha_publicacion ?? 'Sin fecha' }}</span> 
                                                                 Mostrar solo la fecha 
                                                                </div>
                                                            </a> -->
                                                              <div onclick="filtrarYMostrarModal('{{ $dato->fecha_publicacion }}', '{{ $provincia }}')" class="text-decoration-none cursor-pointer">
                                                                <div class="rounded d-flex flex-column align-items-center justify-content-center border p-2 mb-3 text-center hover-effect" style="color:#057151;">
                                                                    <i class="bi bi-file-earmark-pdf fa-3x mb-1"></i>
                                                                    <span class="fs-7">{{ $dato->fecha_publicacion ?? 'Sin fecha' }}</span> <!-- Mostrar solo la fecha -->
                                                                </div>
                                                            </div>
                                                        </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    </div>
                 </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="edictosModal" tabindex="-1" aria-labelledby="edictosModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" style="max-width:1355px !important;">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#057151;">
                    <h5  id="edictosModalLabel" class="text-white">Edictos Filtrados</h5>
                    <div class="col-3 text-nowrap align-self-center">
                            <button type="button" class="btn text-white rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" data-bs-title="
                                <h4>Cómo Gestionar Edictos en Nuestra Plataforma</h4>
                                <b>1. Verifique la Información de los Edictos</b>
                                <p class='text-start'>Comienza revisando los datos editables de cada edicto, como la razón social o el CUIT de la empresa/persona que figura en cada uno de los 20 edictos mostrados en pantalla. Verifica la exactitud de estos datos cuidadosamente.
                                Si detecta alguna falla o falta de información, como un CUIT ausente, deje el campo correspondiente vacío y registra el edicto como homónimo. Asegúrese de que los datos presentes coincidan con la información obtenida del edicto.</p>
                                

                                <b>2. Eliminar Duplicados con Cuidado</b>

                                <p class='text-start'>Si observa datos duplicados, puede proceder a eliminarlos. Se solicitará confirmación antes de la eliminación para evitar pérdidas de información irrecuperable. Revise detenidamente las razones de la eliminación antes de proceder.</p>


                                <b>3. Guarde sus Cambios</b>
                                <p class='text-start'>
                                Es crucial completar la revisión de todos los 20 edictos antes de salir de la pantalla. Si sale sin guardar, se perderán todos los cambios realizados durante la revisión. Después de revisar y editar los edictos, asegúrese de guardar las modificaciones utilizando el botón 'Guardar' ubicado al final de la tabla. Esto almacenará los datos en nuestra base de datos. La pantalla se actualizará automáticamente mostrando 20 nuevos edictos para revisar.
                                Importante: Complete la revisión de los 20 edictos antes de guardar. Si guarda después de revisar solo algunos de ellos, los restantes se guardarán con la información que puede ser incorrecta, ya que no se revisaron adecuadamente.
                                </p>

                                <b>Utilice Filtros para Búsquedas Específicas</b>

                                <p class='text-start'>Utilice el filtro de búsqueda si necesitas encontrar un edicto específico por fecha o región. También dispones de una barra de búsqueda para facilitar la localización de edictos mediante razones sociales o CUITs.</p>">
                                <i class="bi bi-info-circle-fill"></i>
                            </button>  
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="filter: invert(1);"></button>
                </div>
                <div class="modal-body">
                    <!-- Formulario -->
                    <form id="edictos_cola" class="h-100 d-flex flex-column">
                        <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
                        <input type="hidden" name="archivo_csv" id="arch_csv" value="1">
                        <div class="row justify-content-center flex-grow-1">
                            <div class="col-sm-12">
                                <div class="card flex-grow-1">
                                    <div class="card-body" style="padding:18px 20px 14px 18px;">
                                        <div class="card-text h-100 d-flex flex-column" id="contenido">
                                            <!-- Aquí se cargará el contenido dinámico -->
            
                                                 <div id="contenidoDinamico"></div>
                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer justify-content-center">
                    <div class="d-flex" style="padding-top:20px; padding-left: 20px;">
                        <div class="col-4 d-flex me-4">
                            <button type="button" class="btn btn-success  ms-auto" data-bs-toggle="modal" data-bs-target="#confirmEdictoModal">
                                Guardar
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="confirmEdictoModal" tabindex="-1" aria-labelledby="confirmEdictoModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmEdictoModalLabel">Confirmar Guardado de Cambios</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                </div>
                <div class="modal-body">
                    <p>Está a punto de guardar las modificaciones realizadas a los 20 edictos mostrados. Por favor, revise que toda la información esté correcta antes de proceder. Una vez guardado, se cargarán 20 nuevos edictos para su revisión. ¿Desea continuar?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="cancelarCargaGeneral">Revisar de Nuevo</button>
                    <button type="button" class="btn btn-success" id="confirmarVerificacionEdictos_modal">Guardar y Continuar</button>
                    <div class="cargandoEdictosGeneral d-none">
                        <div class="spinner-border text-success" role="status">
                        <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteEdictoModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteEdictoModalLabel">Confirmar Eliminación</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>¿Está seguro de que desea eliminar el edicto con la siguiente información?</p>
                    <ul>
                        <li><b>Razón Social:</b> <span id="deleteRazonsocial"></span></li>
                        <li><b>CUIT:</b> <span id="deleteCuit"></span></li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="cancelarDelete">Cancelar</button>
                    <button type="button" class="btn btn-danger" id="confirmarDelete">Eliminar</button>
                    <div class="cargandoBorradoIndividual d-none">
                        <div class="spinner-border text-success" role="status">
                        <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
<style>
    .input-inline {
    border: none; /* Quita el borde */
    outline: none; /* Quita el contorno al hacer foco */
    background: transparent; /* Fondo transparente */
    text-align: center; /* Centra el texto */
    width: 45px; /* Ancho del input */
    padding: 0; /* Sin padding */
    margin: 0 0px; /* Margen para separarlo del texto */
    display: inline-block; /* Para que no rompa el flujo del texto */
}
.hover-effect {
    transition: all 0.3s ease; /* Transición suave para todos los cambios */
    cursor: pointer; /* Cambia el cursor a una mano */
}

.hover-effect:hover {
    background-color:rgb(179, 233, 216); /* Cambia el fondo al color principal */
    color: #fff; /* Cambia el color del texto a blanco */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Agrega una sombra */
    transform: translateY(-5px); /* Levanta ligeramente el div */
}
</style>
@section('funcionesJS')
 <script type="text/javascript" src="{{ URL::asset('js/cola-edictos/cola-edictos.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/cola-edictos/cola-edictos-modal.js') }}"></script>
@endsection