@props([
    'name' => 'coordenadas', 
    'label' => 'Ubicación GPS', 
    'required' => false,
    'buttonText' => 'Obtener Ubicación Actual',
])

<div class="form-group gps-upload-container">
    <label class="font-weight-bold text-dark small text-uppercase" style="letter-spacing: 0.5px;">
        {{ $label }}
        @if($required) <span class="text-danger" title="Campo obligatorio">*</span> @endif
    </label>
    
    <div class="input-group shadow-sm">
        {{-- Botón desencadenador visual --}}
        <button type="button" class="btn btn-outline-secondary btn-block text-left relative get-gps-btn" style="border-radius: 4px; border: 1px solid #ced4da;">
            <i class="fas fa-map-marker-alt text-danger mr-2"></i> 
            <span class="gps-btn-text">{{ $buttonText }}</span>
        </button>
    </div>

    {{-- Input real (Hidden) que se envía al servidor con las coordenadas "Lat,Lng" --}}
    <input 
        type="hidden" 
        name="{{ $name }}" 
        class="gps-hidden-input"
        id="{{ $name }}_hidden" 
        value="{{ old($name) }}"
        {{ $required ? 'required' : '' }}
    >

    {{-- Spinner de Carga UI --}}
    <div class="mt-2 text-info gps-loading-indicator" style="display: none; font-size: 0.85rem;">
        <i class="fas fa-spinner fa-spin mr-1"></i> Adquiriendo señal de satélites...
    </div>

    {{-- Alerta de Éxito Visual UI --}}
    <div class="mt-2 text-success gps-success-indicator font-weight-bold" style="display: none; font-size: 0.9rem;">
        <i class="fas fa-check-circle mr-1"></i> Posición guardada: <span class="gps-result-text text-dark"></span>
    </div>

    @error($name)
        <span class="text-danger d-block mt-1 small font-weight-bold" role="alert">
            <i class="fas fa-exclamation-circle mr-1"></i> {{ $message }}
        </span>
    @enderror
</div>

@pushonce('js')
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const gpsButtons = document.querySelectorAll('.get-gps-btn');

        gpsButtons.forEach(function(btn) {
            btn.addEventListener('click', function() {
                // 1. Obtener referencias al DOM hermano de este input específico
                const container = this.closest('.gps-upload-container');
                const btnText = container.querySelector('.gps-btn-text');
                const hiddenInput = container.querySelector('.gps-hidden-input');
                const loadingIndicator = container.querySelector('.gps-loading-indicator');
                const successIndicator = container.querySelector('.gps-success-indicator');
                const resultText = container.querySelector('.gps-result-text');

                // Si el navegador no soporta geolocalización
                if (!navigator.geolocation) {
                    alert("Su navegador no soporta geolocalización.");
                    return;
                }

                // 2. Actualizar UI (Iniciando búsqueda)
                successIndicator.style.display = 'none';
                loadingIndicator.style.display = 'block';
                btnText.innerText = 'Buscando satélites...';
                this.classList.add('disabled');

                // 3. Solicitar Coordenadas (Alta precisión habilitada)
                navigator.geolocation.getCurrentPosition(
                    function(position) {
                        // EXITO
                        const lat = position.coords.latitude;
                        const lng = position.coords.longitude;
                        const valueStr = lat + "," + lng;

                        loadingIndicator.style.display = 'none';
                        successIndicator.style.display = 'block';
                        
                        resultText.innerText = valueStr;
                        hiddenInput.value = valueStr; // Agrega el value para el submit del form
                        
                        btnText.innerText = 'Actualizar Ubicación';
                        btn.classList.remove('disabled');
                        btn.classList.replace('btn-outline-secondary', 'btn-outline-success');
                    },
                    function(error) {
                        // ERROR
                        loadingIndicator.style.display = 'none';
                        btnText.innerText = '{{ $buttonText }}';
                        btn.classList.remove('disabled');

                        let errorMsg = "Error desconocido.";
                        switch(error.code) {
                            case error.PERMISSION_DENIED:
                                errorMsg = "El usuario denegó el permiso geolocalización.";
                                break;
                            case error.POSITION_UNAVAILABLE:
                                errorMsg = "La información de la ubicación no está disponible. ¿Su GPS está encendido?";
                                break;
                            case error.TIMEOUT:
                                errorMsg = "La petición exedió el tiempo de respuesta. Pruebe a cielo abierto.";
                                break;
                        }

                        // Mostrar error vía SweetAlert si existe
                        if(typeof Swal !== 'undefined') {
                            Swal.fire({
                                icon: 'error',
                                title: 'GPS Fallido',
                                text: errorMsg,
                                confirmButtonColor: '#d33'
                            });
                        } else {
                            alert(errorMsg);
                        }
                    },
                    {
                        enableHighAccuracy: true,
                        timeout: 15000,
                        maximumAge: 0
                    }
                );
            });
        });
    });
</script>
@endpushonce