@extends('layouts.goberdata')

@section('title', 'Escaneo QR')
@section('page_title', 'Escaneo QR')
@section('page_sub', 'Vista alineada al diseño GoberData por rol')

@push('styles')
<style>
        body { -webkit-tap-highlight-color: transparent; }
        .star { cursor: pointer; transition: all 0.2s; }
        .star:hover, .star.selected { color: #fbbf24; transform: scale(1.2); }
        .fade-in { animation: fadeIn 0.3s; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    </style>
@endpush

@section('content')
<div id="loading" class="flex items-center justify-center min-h-screen">
        <div class="text-center">
            <i class="fas fa-spinner fa-spin text-6xl text-blue-600 mb-4"></i>
            <p class="text-xl text-gray-700">Cargando información...</p>
        </div>
    </div>

    <div id="content" style="display:none" class="fade-in">
        <!-- Header con info del candidato -->
        <div id="campaignHeader" class="p-6 text-white shadow-lg">
            <div class="max-w-2xl mx-auto">
                <div class="flex items-center gap-4 mb-4">
                    <img id="candidateLogo" src="" alt="Logo" class="w-20 h-20 rounded-full bg-white p-2" style="display:none">
                    <div>
                        <h1 id="candidateName" class="text-2xl font-bold"></h1>
                        <p id="campaignName" class="text-sm opacity-90"></p>
                    </div>
                </div>
                <div class="bg-white bg-opacity-20 rounded-lg p-3 text-sm">
                    <i class="fas fa-map-marker-alt mr-2"></i>
                    <span id="posterLocation"></span>
                </div>
            </div>
        </div>

        <!-- Formulario -->
        <div class="max-w-2xl mx-auto p-4">
            <div class="bg-white rounded-2xl shadow-xl p-6 mb-6">
                <div class="text-center mb-6">
                    <div class="text-5xl mb-3">📱</div>
                    <h2 class="text-2xl font-bold text-gray-800">¡Tu opinión cuenta!</h2>
                    <p class="text-gray-600 mt-2">Ayúdanos a conocer tu opinión</p>
                </div>

                <form id="scanForm" class="space-y-6">
                    <!-- Rating -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-3 text-center">
                            ¿Cómo calificarías a este candidato?
                        </label>
                        <div class="flex justify-center gap-2" id="ratingStars">
                            <i class="star fas fa-star text-4xl text-gray-300" data-rating="1"></i>
                            <i class="star fas fa-star text-4xl text-gray-300" data-rating="2"></i>
                            <i class="star fas fa-star text-4xl text-gray-300" data-rating="3"></i>
                            <i class="star fas fa-star text-4xl text-gray-300" data-rating="4"></i>
                            <i class="star fas fa-star text-4xl text-gray-300" data-rating="5"></i>
                        </div>
                        <input type="hidden" id="rating" name="rating">
                    </div>

                    <!-- Opinión -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            ¿Qué opinas? (opcional)
                        </label>
                        <textarea id="opinion" name="opinion" rows="3" class="w-full p-4 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:outline-none" placeholder="Comparte tu opinión..."></textarea>
                    </div>

                    <!-- ¿Votarías por este candidato? -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-3">
                            ¿Votarías por este candidato?
                        </label>
                        <div class="grid grid-cols-2 gap-3">
                            <button type="button" onclick="setVote(true)" class="vote-btn p-4 border-2 border-gray-200 rounded-xl hover:border-green-500 hover:bg-green-50 transition">
                                <i class="fas fa-thumbs-up text-2xl text-green-600 mb-2"></i>
                                <p class="font-semibold">Sí</p>
                            </button>
                            <button type="button" onclick="setVote(false)" class="vote-btn p-4 border-2 border-gray-200 rounded-xl hover:border-red-500 hover:bg-red-50 transition">
                                <i class="fas fa-thumbs-down text-2xl text-red-600 mb-2"></i>
                                <p class="font-semibold">No</p>
                            </button>
                        </div>
                        <input type="hidden" id="wouldVote" name="would_vote">
                    </div>

                    <!-- Datos opcionales -->
                    <div class="border-t-2 border-gray-100 pt-6">
                        <h3 class="font-bold text-gray-800 mb-4">Datos demográficos (opcional)</h3>

                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Edad</label>
                                <select id="ageRange" name="scanner_age_range" class="w-full p-3 border-2 border-gray-200 rounded-xl focus:border-blue-500">
                                    <option value="">Seleccionar...</option>
                                    <option value="18-25">18-25</option>
                                    <option value="26-35">26-35</option>
                                    <option value="36-45">36-45</option>
                                    <option value="46-55">46-55</option>
                                    <option value="56-65">56-65</option>
                                    <option value="66+">66+</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Género</label>
                                <select id="gender" name="scanner_gender" class="w-full p-3 border-2 border-gray-200 rounded-xl focus:border-blue-500">
                                    <option value="">Seleccionar...</option>
                                    <option value="male">Masculino</option>
                                    <option value="female">Femenino</option>
                                    <option value="other">Otro</option>
                                    <option value="prefer_not_say">Prefiero no decir</option>
                                </select>
                            </div>
                        </div>

                        <div class="mt-4">
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Email (para recibir actualizaciones)</label>
                            <input type="email" id="email" name="scanner_email" class="w-full p-3 border-2 border-gray-200 rounded-xl focus:border-blue-500" placeholder="tu@email.com">
                        </div>
                    </div>

                    <!-- Botón enviar -->
                    <button type="submit" id="submitBtn" class="w-full gd-header text-white font-bold py-4 px-6 rounded-xl hover:shadow-lg transition text-lg">
                        <i class="fas fa-paper-plane mr-2"></i> Enviar Opinión
                    </button>
                </form>
            </div>

            <!-- Mensaje de éxito -->
            <div id="successMessage" style="display:none" class="bg-white rounded-2xl shadow-xl p-8 text-center fade-in">
                <div class="text-8xl mb-4">✅</div>
                <h2 class="text-3xl font-bold text-gray-800 mb-3">¡Gracias!</h2>
                <p class="text-xl text-gray-600 mb-6">Tu opinión ha sido registrada</p>
                <p class="text-sm text-gray-500">Esta información ayudará a mejorar nuestras propuestas</p>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
        const qrCode = '{{ $qrCode }}';
        let posterData = null;
        let selectedRating = 0;
        let selectedVote = null;

        // Cargar datos del afiche
        async function loadPoster() {
            try {
                const response = await fetch(`/api/qr/${qrCode}`);
                if (!response.ok) {
                    alert('QR no válido o expirado');
                    return;
                }

                posterData = await response.json();
                renderPosterInfo();

                document.getElementById('loading').style.display = 'none';
                document.getElementById('content').style.display = 'block';
            } catch (err) {
                console.error('Error:', err);
                alert('Error al cargar la información');
            }
        }

        function renderPosterInfo() {
            const header = document.getElementById('campaignHeader');
            header.style.background = `linear-gradient(135deg, ${posterData.campaign.primary_color || '#3b82f6'}, ${posterData.campaign.secondary_color || '#8b5cf6'})`;

            document.getElementById('candidateName').textContent = posterData.campaign.candidate_name;
            document.getElementById('campaignName').textContent = posterData.campaign.name;
            document.getElementById('posterLocation').textContent =
                `${posterData.location.city}, ${posterData.location.state} - ${posterData.location.exact}`;

            if (posterData.campaign.logo_url) {
                const logo = document.getElementById('candidateLogo');
                logo.src = posterData.campaign.logo_url;
                logo.style.display = 'block';
            }
        }

        // Rating con estrellas
        document.querySelectorAll('.star').forEach(star => {
            star.addEventListener('click', function() {
                selectedRating = parseInt(this.dataset.rating);
                document.getElementById('rating').value = selectedRating;

                document.querySelectorAll('.star').forEach((s, i) => {
                    if (i < selectedRating) {
                        s.classList.add('selected');
                        s.classList.remove('text-gray-300');
                        s.classList.add('text-yellow-400');
                    } else {
                        s.classList.remove('selected');
                        s.classList.add('text-gray-300');
                        s.classList.remove('text-yellow-400');
                    }
                });
            });
        });

        function setVote(vote) {
            selectedVote = vote;
            document.getElementById('wouldVote').value = vote;

            document.querySelectorAll('.vote-btn').forEach(btn => {
                btn.classList.remove('border-green-500', 'bg-green-50', 'border-red-500', 'bg-red-50');
            });

            const selectedBtn = vote ? event.currentTarget : event.currentTarget;
            if (vote) {
                selectedBtn.classList.add('border-green-500', 'bg-green-50');
            } else {
                selectedBtn.classList.add('border-red-500', 'bg-red-50');
            }
        }

        // Enviar formulario
        document.getElementById('scanForm').addEventListener('submit', async (e) => {
            e.preventDefault();

            const submitBtn = document.getElementById('submitBtn');
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Enviando...';

            const formData = {
                qr_code: qrCode,
                opinion: document.getElementById('opinion').value,
                rating: selectedRating || null,
                would_vote: selectedVote,
                scanner_age_range: document.getElementById('ageRange').value,
                scanner_gender: document.getElementById('gender').value,
                scanner_email: document.getElementById('email').value,
                subscribed_to_updates: document.getElementById('email').value ? true : false,
            };

            // Capturar geolocalización si está disponible
            if (navigator.geolocation) {
                try {
                    const position = await new Promise((resolve, reject) => {
                        navigator.geolocation.getCurrentPosition(resolve, reject);
                    });
                    formData.scan_latitude = position.coords.latitude;
                    formData.scan_longitude = position.coords.longitude;
                } catch (err) {
                    console.log('Geolocation not available');
                }
            }

            try {
                const response = await fetch('/api/qr/scan', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify(formData)
                });

                if (response.ok) {
                    document.getElementById('scanForm').parentElement.style.display = 'none';
                    document.getElementById('successMessage').style.display = 'block';
                } else {
                    alert('Error al enviar. Por favor intenta de nuevo.');
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = '<i class="fas fa-paper-plane mr-2"></i> Enviar Opinión';
                }
            } catch (err) {
                console.error('Error:', err);
                alert('Error de conexión');
                submitBtn.disabled = false;
                submitBtn.innerHTML = '<i class="fas fa-paper-plane mr-2"></i> Enviar Opinión';
            }
        });

        // Cargar datos al iniciar
        loadPoster();
    </script>
@endpush