@extends('layouts.app')

@section('css')

@endsection

@section('content')
    <!-- Hero Section -->
    <section class="hero-section rounded-5">
        <div class="particles" id="particles"></div>
        <div class="container">
            <div class="hero-content">
                <h1 class="hero-title">Demande d'audience au Rectorat UAC</h1>
                <p class="hero-subtitle">
                    Simplifiez vos démarches administratives avec notre système de demande d'audience en ligne.
                    Planifiez votre visite en toute simplicité et recevez une confirmation par le même canal.
                </p>
                <button class="cta-button" data-bs-toggle="modal" data-bs-target="#appointmentModal">
                    <i class="bi bi-calendar-plus"></i>
                    Demander une audience
                </button>

                <!-- Features Grid -->
                <div class="features-grid">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="bi bi-lightning"></i>
                        </div>
                        <h3 class="feature-title">Rapide</h3>
                        <p class="feature-text">Demande d'audience en moins de 2 minutes</p>
                    </div>

                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="bi bi-shield-check"></i>
                        </div>
                        <h3 class="feature-title">Sécurisé</h3>
                        <p class="feature-text">Données protégées et traitement confidentiel</p>
                    </div>

                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="bi bi-clock-history"></i>
                        </div>
                        <h3 class="feature-title">Disponible 24/7</h3>
                        <p class="feature-text">Soumettez votre demande à tout moment</p>
                    </div>

                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="bi bi-bell"></i>
                        </div>
                        <h3 class="feature-title">Notifications</h3>
                        <p class="feature-text">Confirmation et rappels automatiques</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Modal Form -->
    <div class="modal fade modal-modern" id="appointmentModal" tabindex="-1" aria-labelledby="appointmentModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="appointmentModalLabel">
                        Formulaire de demande d'audience
                    </h5>
                </div>
                <div class="modal-body">
                    <form action="{{ route('appointments.store') }}" method="POST" enctype="multipart/form-data"
                        id="appointmentForm">
                        @csrf

                        @if ($errors->any())
                            <div class="alert-modern">
                                <strong>Veuillez corriger les erreurs suivantes :</strong>
                                <ul class="mt-2 mb-0">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group-modern">
                                    <label for="last_name" class="form-label-modern">
                                        <span class="required-field">Nom</span>
                                    </label>
                                    <input type="text" class="form-control-modern" id="last_name" name="last_name"
                                        value="{{ old('last_name') }}" required placeholder="Votre nom de famille">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group-modern">
                                    <label for="first_name" class="form-label-modern">
                                        <span class="required-field">Prénom</span>
                                    </label>
                                    <input type="text" class="form-control-modern" id="first_name" name="first_name"
                                        value="{{ old('first_name') }}" required placeholder="Votre prénom">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group-modern">
                                    <label for="email" class="form-label-modern">
                                        Email
                                    </label>
                                    <input type="email" class="form-control-modern" id="email" name="email"
                                        value="{{ old('email') }}" placeholder="exemple@email.com">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group-modern">
                                    <label for="phone" class="form-label-modern">
                                        Contact WhatsApp
                                    </label>

                                    <input type="tel" class="form-control-modern @error('phone') is-invalid @enderror"
                                        name="phone" value="{{ old('phone') }}"
                                        placeholder="ex : 01XXXXXXXX ou +22901XXXXXXXX">

                                    <small class="text-muted d-block mt-1">
                                        International : précédez le numéro de votre code pays avec <strong>+</strong>.
                                    </small>

                                    @error('phone')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                        </div>
                        <div class="form-group-modern">
                            <label for="requerer_type_id" class="form-label-modern">
                                <span class="required-field">Type de requérant</span>
                            </label>

                            <select name="requerer_type_id" id="requerer_type_id" class="form-control-modern" required>
                                <option value="">-- Sélectionner votre profil --</option>
                                @foreach ($requererTypes as $type)
                                    <option value="{{ $type->id }}" {{ old('requerer_type_id') == $type->id ? 'selected' : '' }}>
                                        {{ $type->label }}
                                    </option>
                                @endforeach
                            </select>

                            @error('requerer_type_id')
                                <div class="error-modern">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group-modern">
                            <label for="subject" class="form-label-modern">
                                <span class="required-field">Objet de l'audience</span>
                            </label>
                            <input type="text" class="form-control-modern" name="subject" value="{{ old('subject') }}"
                                required placeholder="Ex: Demande de documents, Entretien, etc.">
                        </div>
                        <div class="form-group-modern">
                            <label for="level" class="form-label-modern">
                                <span class="required-field">Niveau d'urgence</span>
                            </label>

                            <select name="level" id="level" class="form-control-modern" required>
                                <option value="low" {{ old('level') === 'low' ? 'selected' : '' }}>
                                    🟢 Faible
                                </option>
                                <option value="medium" {{ old('level') === 'medium' ? 'selected' : '' }}>
                                    🟠 Moyen
                                </option>
                                <option value="high" {{ old('level') === 'high' ? 'selected' : '' }}>
                                    🔴 Élevé
                                </option>
                            </select>

                            @error('level')
                                <div class="error-modern">{{ $message }}</div>
                            @enderror

                            <small class="text-muted-modern">
                                Sélectionnez le niveau d'urgence de votre demande
                            </small>
                        </div>


                        <div class="form-group-modern">
                            <label for="description" class="form-label-modern">
                                Brève description
                            </label>
                            <textarea class="form-control-modern" name="description" rows="4"
                                placeholder="Décrivez brièvement le motif de votre demande d'audience">{{ old('description') }}</textarea>
                        </div>


                        <div class="form-group-modern">
                            <label for="requested_at" class="form-label-modern">
                                Date et heure souhaitées
                            </label>
                            <input type="datetime-local" class="form-control-modern" name="requested_at"
                                value="{{ old('requested_at') }}">
                        </div>
                        <div class="form-group-modern">
                            <label for="service" class="form-label-modern">
                                <span class="required-field">Autorité concernée</span>
                            </label>

                            <select name="service" id="service" class="form-control-modern" required>
                                <option value="">-- Choisir une autorité --</option>
                            </select>

                            <div class="error-modern" id="service-error"></div>

                            @error('service')
                                <div class="error-modern">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group-modern">
                            <label for="uploads" class="form-label-modern">
                                <span class="required-field">Joindre la lettre de demande d'audience et d'autres pièces
                                    justificatives</span>
                            </label>

                            <input type="file" class="form-control-modern" id="uploads" name="uploads[]" multiple required>

                            <small class="text-muted-modern">
                                Vous pouvez sélectionner plusieurs fichiers
                            </small>

                            @error('uploads')
                                <div class="error-modern">{{ $message }}</div>
                            @enderror
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary btn-modern flex-grow-1" data-bs-dismiss="modal">
                        <i class="bi bi-x-circle me-2"></i>
                        Annuler
                    </button>
                    <button type="submit" form="appointmentForm" class="btn btn-primary-modern btn-modern flex-grow-1">
                        <i class="bi bi-send me-2"></i>
                        Soumettre la demande
                    </button>
                </div>
            </div>
        </div>
    </div>



@endsection

@section('scripts')
    <script>
        // Animation des particules
        function createParticles() {
            const particlesContainer = document.getElementById('particles');
            const particleCount = 20;

            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';

                // Taille aléatoire
                const size = Math.random() * 3 + 1;
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;

                // Position aléatoire
                particle.style.left = `${Math.random() * 100}%`;
                particle.style.top = `${Math.random() * 100}%`;

                // Animation delay aléatoire
                particle.style.animationDelay = `${Math.random() * 15}s`;

                particlesContainer.appendChild(particle);
            }
        }

        // Form validation avec feedback visuel
        function setupFormValidation() {
            const form = document.getElementById('appointmentForm');
            const inputs = form.querySelectorAll('input, textarea');

            inputs.forEach(input => {
                input.addEventListener('blur', function () {
                    if (this.value.trim() !== '') {
                        this.classList.add('is-valid');
                        this.classList.remove('is-invalid');
                    } else if (this.hasAttribute('required')) {
                        this.classList.add('is-invalid');
                        this.classList.remove('is-valid');
                    }
                });

                input.addEventListener('input', function () {
                    if (this.value.trim() !== '') {
                        this.classList.remove('is-invalid');
                    }
                });
            });

            form.addEventListener('submit', function (e) {
                let isValid = true;

                inputs.forEach(input => {
                    if (input.hasAttribute('required') && input.value.trim() === '') {
                        input.classList.add('is-invalid');
                        isValid = false;
                    }
                });

                if (!isValid) {
                    e.preventDefault();

                    // Scroll vers le premier champ invalide
                    const firstInvalid = form.querySelector('.is-invalid');
                    if (firstInvalid) {
                        firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
                        firstInvalid.focus();
                    }

                    // Afficher un message d'erreur
                    Swal.fire({
                        icon: 'error',
                        title: 'Champs obligatoires manquants',
                        text: 'Veuillez remplir tous les champs obligatoires marqués d\'un astérisque (*)',
                        background: 'var(--bg-surface)',
                        color: 'var(--text-primary)',
                        confirmButtonColor: 'var(--primary-500)'
                    });
                }
            });
        }

        // Gestion de l'affichage du modal avec animation
        const appointmentModal = document.getElementById('appointmentModal');
        appointmentModal.addEventListener('show.bs.modal', function () {
            // Réinitialiser les états de validation
            const form = document.getElementById('appointmentForm');
            const inputs = form.querySelectorAll('input, textarea');
            var select = document.getElementById('service');

            // On vide le select pour éviter les doublons
            select.innerHTML = '<option value="">-- Choisir une autorité --</option>';

            fetch('/services')
                .then(response => response.json())
                .then(data => {
                    data.forEach(service => {
                        var option = document.createElement('option');
                        option.value = service.id;
                        option.textContent = service.name;
                        select.appendChild(option);
                    });
                })
                .catch(error => console.error('Erreur lors du chargement des services:', error));
            // Si tu v
            inputs.forEach(input => {
                input.classList.remove('is-valid', 'is-invalid');
            });
        });

        // Initialiser
        document.addEventListener('DOMContentLoaded', function () {
            createParticles();
            setupFormValidation();

            // Animation au scroll
            const observerOptions = {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            };

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = '1';
                        entry.target.style.transform = 'translateY(0)';
                        observer.unobserve(entry.target);
                    }
                });
            }, observerOptions);

            // Observer les cartes features
            document.querySelectorAll('.feature-card').forEach((card, index) => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(30px)';
                card.style.transition = `opacity 0.5s ease ${index * 0.1}s, transform 0.5s ease ${index * 0.1}s`;
                observer.observe(card);
            });

            // Animation du bouton CTA
            const ctaButton = document.querySelector('.cta-button');
            ctaButton.style.animation = 'pulse 2s infinite';

            // Style pour l'animation pulse
            const style = document.createElement('style');
            style.textContent = `
                                                                        @keyframes pulse {
                                                                            0% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.7); }
                                                                            70% { box-shadow: 0 0 0 15px rgba(14, 165, 233, 0); }
                                                                            100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }
                                                                        }
                                                                    `;
            document.head.appendChild(style);
        });
    </script>
    <script>
        document.getElementById('trackBtn').addEventListener('click', async () => {
            const code = trackCode.value.trim();
            const errorBox = document.getElementById('trackError');
            const searchStep = document.getElementById('track-step-search');
            const resultStep = document.getElementById('track-step-result');
            const detailBox = document.getElementById('appointmentDetails');
            const progressBox = document.getElementById('progressContainer');

            errorBox.style.display = "none";
            errorBox.innerHTML = "";

            if (!code) {
                errorBox.style.display = "block";
                errorBox.innerHTML = "Veuillez entrer un code.";
                return;
            }

            try {
                const response = await fetch(`/track-request/${code}`);
                if (!response.ok) throw new Error("Introuvable");

                const data = await response.json();
                const app = data.appointment;

                // --- Affichage des détails ---
                detailBox.innerHTML = `
                                                            <p><strong>Nom :</strong> ${app.first_name} ${app.last_name}</p>
                                                            <p><strong>Téléphone :</strong> ${app.mobile}</p>
                                                            <p><strong>Sujet :</strong> ${app.subject}</p>
                                                            <p><strong>Date demandée :</strong> ${app.requested_at ?? '—'}</p>
                                                            <p><strong>Service :</strong> ${app.service}</p>
                                                        `;

                // --- Progress Bar ---
                let status = app.status;
                const step3Label =
                    ["confirmed", "rescheduled"].includes(status)
                        ? "Confirmée"
                        : ["canceled", "rejected"].includes(status)
                            ? "Demande rejetée"
                            : "En attente";

                progressBox.innerHTML = `
                                                            <div class="timeline-steps">
                                                                <div class="timeline-step active">
                                                                    <div class="circle"></div>
                                                                    <p>Demande reçue</p>
                                                                </div>
                                                                <div class="timeline-step ${status !== 'pending' ? 'active' : ''}">
                                                                    <div class="circle"></div>
                                                                    <p>En cours de traitement</p>
                                                                </div>
                                                                <div class="timeline-step ${status !== 'pending' && status !== 'processing' ? 'active' : ''}">
                                                                    <div class="circle"></div>
                                                                    <p>${step3Label}</p>
                                                                </div>
                                                            </div>
                                                        `;

                // Passage au step résultat
                searchStep.style.display = "none";
                resultStep.style.display = "block";

            } catch (e) {
                errorBox.style.display = "block";
                errorBox.innerHTML = "Code introuvable ou invalide.";
            }
        });


        function trackGoBack() {
            document.getElementById('track-step-search').style.display = 'block';
            document.getElementById('track-step-result').style.display = 'none';
        }
    </script>

    <script>
        const levelSelect = document.getElementById('level');

        if (levelSelect) {
            levelSelect.addEventListener('change', function () {
                this.classList.remove('level-low', 'level-medium', 'level-high');
                this.classList.add(`level-${this.value}`);
            });
        }
    </script>
    @if ($errors->any())
        <script>
            Swal.fire({
                icon: 'error',
                title: 'Erreur de validation',
                html: `{!! implode('<br>', $errors->all()) !!}`,
                background: 'var(--bg-surface)',
                color: 'var(--text-primary)',
                confirmButtonColor: 'var(--primary-500)'
            });
        </script>
    @endif

    @if (session('success'))
        <script>
            Swal.fire({
                icon: 'success',
                title: 'Succès',
                text: '{{ session('success') }}',
                timer: 3000,
                showConfirmButton: false,
                background: 'var(--bg-surface)',
                color: 'var(--text-primary)',
                toast: true,
                position: 'top-end',
                showClass: {
                    popup: 'animate__animated animate__fadeInRight'
                },
                hideClass: {
                    popup: 'animate__animated animate__fadeOutRight'
                }
            });
        </script>

    @endif

@endsection