@extends('layout.master')

@section('title', 'Educa Auge - Accede a los mejores cursos online para docentes')

@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/login.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/css/soporte.css') }}" />
@endsection

@section('content')
    <main class="page-main">
        <div class="bodyfull">

            <div class="uk-section uk-animation-fade">
                <!-- Formulario de Soporte en Línea -->
                <div class="uk-container">
                    <h4 class="uk-text-center">Soporte en Línea</h4>

                    <form id="supportForm">
                        @csrf
                        <input 
                            type="hidden" 
                            id="id_suscrito" 
                            name="id_suscrito" 
                            value="{{ $usuario ? $usuario->id_suscrito : '' }}"
                        >
                        <div class="uk-margin">
                            <label for="nombres_completos" class="uk-form-label">Nombre Completo</label>
                            <input 
                                class="uk-input" 
                                id="nombres_completos" 
                                type="text" 
                                name="nombres_completos" 
                                value="{{ $usuario ? $usuario->ap_pa . ' ' . $usuario->ap_ma . ' ' . $usuario->nombre : '' }}" 
                                {{ $usuario ? 'readonly' : '' }} 
                                placeholder="Tu nombre completo" 
                                required
                            >
                        </div>
                        <div class="uk-margin">
                            <label for="correo" class="uk-form-label">Correo Electrónico</label>
                            <input 
                                class="uk-input" 
                                id="correo" 
                                type="email" 
                                name="correo" 
                                value="{{ $usuario ? $usuario->email : '' }}" 
                                {{ $usuario ? 'readonly' : '' }} 
                                placeholder="Tu correo electrónico" 
                                required
                            >
                        </div>
                        <div class="uk-margin">
                            <label for="celular" class="uk-form-label">Número de Teléfono</label>
                            <input 
                                class="uk-input" 
                                id="celular" 
                                type="text" 
                                name="celular" 
                                value="{{ $usuario ? $usuario->telefono : '' }}" 
                                {{ $usuario ? 'readonly' : '' }} 
                                placeholder="Tu número de teléfono" 
                                required
                            >
                        </div>
                        <div class="uk-margin">
                            <label for="motivo" class="uk-form-label">Asunto</label>
                            <select class="uk-select" id="motivo" name="motivo" required>
                                <option value="" disabled selected>Selecciona un motivo</option>
                                @foreach($motivos as $motivo)
                                    <option value="{{ $motivo->id_cat }}">{{ $motivo->titulo }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="uk-margin">
                            <label for="message" class="uk-form-label">Descripción del Problema</label>
                            <textarea 
                                class="uk-textarea" 
                                id="message" 
                                name="message" 
                                rows="5" 
                                required 
                                placeholder="Describe tu problema o consulta..."
                            ></textarea>
                        </div>
                        <div class="uk-margin btnlogin">
                            <button type="button" id="submitButton" class="uk-button uk-button-primary uk-width-1-1">Enviar Consulta</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script>
            document.getElementById('submitButton').addEventListener('click', function(event) {
                event.preventDefault();

                // Mostrar mensaje de carga
                Swal.fire({
                    title: 'Enviando...',
                    text: 'Por favor espera mientras se envía tu consulta.',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                // Obtener datos del formulario
                const formData = new FormData();
                formData.append('id_suscrito', document.getElementById('id_suscrito').value);
                formData.append('nombres_completos', document.getElementById('nombres_completos').value);
                formData.append('correo', document.getElementById('correo').value);
                formData.append('celular', document.getElementById('celular').value);
                formData.append('motivo', document.getElementById('motivo').value);
                formData.append('message', document.getElementById('message').value);
                formData.append('_token', '{{ csrf_token() }}'); // CSRF token

                // Enviar datos usando Fetch
                fetch('/support', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    Swal.close(); // Cerrar el mensaje de carga

                    if (data.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Consulta enviada',
                            text: 'Tu consulta ha sido enviada exitosamente.',
                            timer: 3000,
                            showConfirmButton: false
                        });

                        // Limpiar el formulario si el usuario no está autenticado
                        if (!{{ $usuario ? 'true' : 'false' }}) {
                            document.getElementById('supportForm').reset();
                        }
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: data.message || 'Hubo un problema al enviar tu consulta. Inténtalo de nuevo.'
                        });
                    }
                })
                .catch(error => {
                    Swal.close();
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Hubo un problema al enviar tu consulta. Inténtalo de nuevo.'
                    });
                });
            });

        </script>
    </main>
@endsection