@extends('layout.app')

@section('content')
    <div id="contenedorForm">
        @php
            $rango_inicio = $rango_inicio ?? 1;
        @endphp
        <h1 visibility: hidden>Valor de Rango Inicio: {{ $rango_inicio }}</h1>
        @include('formParcial')<!--Aquí se inserta el contenido de formParcial-->
    </div>
@endsection

@section('scripts')
<script src="{{ asset('js/ubicacion.js') }}"></script>
    @if(isset($rango_inicio) && $rango_inicio > 35)
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.26/dist/sweetalert2.all.min.js"> </script>
        <script>
            Swal.fire({
                title: 'Nueva Sección',
                text: 'Estás en la siguiente sección.',
                icon: 'success',
                confirmButtonText: 'Iniciar'
            }).then(() => {
                document.getElementById("contenidoPagina").style.display = "block";
                

                //Esta es la petición AJAX
                const http = new XMLHttpRequest();
                const url = "{{ route('cargar.formulario') }}";

                fetch(url)
                .then(response => response.text())
                .then(html => {
                    document.getElementById("contenedorForm").innerHTML = html;
                })
        });
        </script>
    @elseif(isset($rango_inicio) && $rango_inicio < 35)
    <script>
        Swal.fire({
            title: "Checking...",
            html: `<p style="font-size: 20px; color: red;">
                        Para continuar, necesitamos tu ubicación. 
                        Esta información se usará únicamente para registrar el lugar desde donde se llena esta evaluación.
                   </p>`,
            text: "Por favor espera mientras obtenemos tu ubicación.",
            imageUrl: "https://www.epgdlaw.com/wp-content/uploads/2017/09/ajax-loader.gif",
            showConfirmButton: false, 
            allowOutsideClick: false,
            //timer: 3000, //3s
            didOpen: () => {

                navigator.geolocation.getCurrentPosition(permitido, error); //esto da el mensaje al usuario
            
                function permitido(posicion) {
                    //obtenerUbicacion();
                    console.log("Ubicación obtenida:", posicion.coords.latitude, posicion.coords.longitude);
                    const lat = posicion.coords.latitude;
                    const lon = posicion.coords.longitude;
                    obtenerCiudadPais(lat, lon);
                }
                function error(err){
                    console.log("no se dio permiso para la ubicación")
                    
                }
            },
            didClose: () => {
                document.getElementById("contenidoPagina").style.display = "block";

                //Esta es la petición AJAX
                const http = new XMLHttpRequest();
                const url = "{{ route('cargar.formulario') }}";

                fetch(url)
                .then(response => response.text())
                .then(html => {
                    document.getElementById("contenedorForm").innerHTML = html;
                })
            }
        });
    </script>
    @endif
    
    <input type="hidden" id="ciudad" name="ciudad">
    <input type="hidden" id="pais" name="pais">
@endsection