<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Gestion de Demande d\'audience')</title>

    <!-- Bootstrap 5 CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />

    <!-- Google Fonts 2025 -->
    <link
        href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap"
        rel="stylesheet">

    <!-- Custom 2025 Modern Design -->
    <link rel="stylesheet" href="{{ asset('assets/css/style-glass.css') }}">

    @yield('css')
</head>

<body>
    <!-- NAVBAR MODERNE -->
    <nav class="navbar navbar-expand-lg navbar-2025 fixed-top">
        <div class="container">
            <a class="navbar-brand navbar-brand-2025" href="{{ url('/') }}">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <rect x="2" y="3" width="20" height="18" rx="4" fill="currentColor" opacity="0.2" />
                    <path d="M7 9h10M7 13h10" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"
                        stroke-linejoin="round" />
                    <circle cx="12" cy="8" r="1" fill="currentColor" />
                    <circle cx="12" cy="12" r="1" fill="currentColor" />
                </svg>
                Audience Rectorat
            </a>

            <button class="navbar-toggler navbar-toggler-2025" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarNav">
                <i class="bi bi-list"></i>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto align-items-center">
                    @auth
                        <li class="nav-item mx-1">
                            <a class="nav-link nav-link-2025 d-flex align-items-center gap-2 {{ request()->routeIs('admin.*') ? 'active' : '' }}"
                                href="{{ route('admin.appointments.index') }}">
                                <i class="bi bi-speedometer2"></i>
                                <span>Espace Admin</span>
                            </a>
                        </li>

                        <!-- Menu utilisateur -->
                        <li class="nav-item dropdown mx-1">
                            <a class="nav-link nav-link-2025 dropdown-toggle d-flex align-items-center gap-2" href="#"
                                role="button" data-bs-toggle="dropdown">
                                <div class="avatar-xs">
                                    <img src="https://ui-avatars.com/api/?name={{ urlencode(auth()->user()->name ?? 'Admin') }}&background=fff&color=0ea5e9&bold=true"
                                        alt="Avatar" class="rounded-circle" width="32" height="32">
                                </div>
                                <span class="d-none d-md-inline">{{ auth()->user()->name ?? 'Admin' }}</span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end shadow-lg border-0"
                                style="z-index: 9999!important;min-width: 200px;">
                                <li>
                                    <a class="dropdown-item d-flex align-items-center gap-2 py-2"
                                        href="{{ route('admin.appointments.index') }}">
                                        <i class="bi bi-calendar-week text-primary"></i>
                                        <span>Mes demande d'audience</span>
                                    </a>
                                </li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li>
                                    <form method="POST" action="{{ route('logout') }}" class="mb-0">
                                        @csrf
                                        <button type="submit"
                                            class="dropdown-item d-flex align-items-center gap-2 py-2 text-danger">
                                            <i class="bi bi-box-arrow-right"></i>
                                            <span>Déconnexion</span>
                                        </button>
                                    </form>
                                </li>
                            </ul>
                        </li>
                    @endauth

                    @guest

                        <li class="nav-item mx-1">
                            <button class="btn btn-2025-glass text-white px-3 py-1" data-bs-toggle="modal"
                                data-bs-target="#trackRequestModal">
                                <i class="bi bi-search"></i>
                                <span>Suivre ma demande</span>
                            </button>
                        </li>
                        <li class="nav-item mx-1">
                            <a class="nav-link nav-link-2025 d-flex align-items-center gap-2" href="{{ route('login') }}">
                                <i class="bi bi-box-arrow-in-right"></i>
                                <span>Connexion</span>
                            </a>
                        </li>
                    @endguest
                </ul>
            </div>
        </div>
    </nav>

    <!-- MAIN CONTENT -->
    <main class="container my-5" style="padding-top: 100px;">
        <div class="modal fade modal-modern" id="trackRequestModal" tabindex="-1" aria-labelledby="trackModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">

                    <!-- HEADER -->
                    <div class="modal-header">
                        <h5 class="modal-title" id="trackModalLabel">
                            Suivre ma demande
                        </h5>
                    </div>

                    <!-- BODY -->
                    <div class="modal-body">

                        <!-- === STEP 1 : Recherche === -->
                        <div id="track-step-search">
                            <div class="form-group-modern mb-3">
                                <label class="form-label-modern">
                                    Entrez le code de votre demande
                                </label>
                                <input id="trackCode" type="text" class="form-control-modern"
                                    placeholder="Ex : R-23AF8912">
                            </div>

                            <div id="trackError" class="error-modern mb-3" style="display:none;"></div>

                            <button id="trackBtn" class="btn btn-primary-modern btn-modern w-100">
                                <i class="bi bi-search me-2"></i> Rechercher
                            </button>
                        </div>

                        <!-- === STEP 2 : Résultats === -->
                        <div id="track-step-result" style="display:none;">

                            <div class="alert-modern mb-4">
                                Voici les informations associées à votre demande.
                            </div>

                            <div class="row g-4">
                                <div class="col-md-6">
                                    <div class="card-modern h-100">
                                        <div
                                            class="card-header-modern bg-transparent border-0 d-flex align-items-center gap-2 mb-3">
                                            <div class="icon-container bg-primary bg-opacity-10">
                                                <i class="bi bi-person-circle text-primary"></i>
                                            </div>
                                            <h6 class="mb-0 fw-semibold text-primary">Informations de l'usager</h6>
                                        </div>
                                        <div class="card-body-modern p-0">
                                            <div class="info-group mb-3">
                                                <div class="info-label d-flex align-items-center gap-2">
                                                    <span class="small text-muted">Nom complet</span>
                                                </div>
                                                <div class="info-value fw-semibold" id="viewFullName"></div>
                                            </div>

                                            <div class="info-group mb-3">
                                                <div class="info-label d-flex align-items-center gap-2">
                                                    <span class="small text-muted">Email</span>
                                                </div>
                                                <div class="info-value">
                                                    <a href="#" id="viewEmail"
                                                        class="text-decoration-none text-primary"></a>
                                                </div>
                                            </div>

                                            <div class="info-group">
                                                <div class="info-label d-flex align-items-center gap-2">
                                                    <span class="small text-muted">Téléphone</span>
                                                </div>
                                                <div class="info-value fw-medium" id="viewContact"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="card-modern h-100">
                                        <div
                                            class="card-header-modern bg-transparent border-0 d-flex align-items-center gap-2 mb-3">
                                            <div class="icon-container bg-success bg-opacity-10">
                                                <i class="bi bi-calendar-check text-success"></i>
                                            </div>
                                            <h6 class="mb-0 fw-semibold text-success">Informations de la demande</h6>
                                        </div>
                                        <div class="card-body-modern p-0">
                                            <div class="info-group mb-3">
                                                <div class="info-label d-flex align-items-center gap-2">
                                                    <span class="small text-muted">Sujet</span>
                                                </div>
                                                <div class="info-value fw-semibold" id="viewSubject"></div>
                                            </div>

                                            <div class="info-group mb-3">
                                                <div class="info-label d-flex align-items-center gap-2">
                                                    <span class="small text-muted">Date demandée</span>
                                                </div>
                                                <div class="info-value" id="viewDate">
                                                </div>
                                            </div>

                                            <div class="info-group">
                                                <div class="info-label d-flex align-items-center gap-2">
                                                    <span class="small text-muted">Autorité</span>
                                                </div>
                                                <div class="info-value fw-medium" id="viewService"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Progress Bar -->
                            <h6 class="fw-bold mt-4 mb-2">État d’avancement</h6>
                            <div id="progressContainer"></div>

                            <button class="btn btn-outline-secondary btn-modern w-100 mt-4" onclick="trackGoBack()">
                                <i class="bi bi-arrow-left me-2"></i> Nouvelle recherche
                            </button>
                        </div>

                    </div>

                    <!-- FOOTER -->
                    <div class="modal-footer">
                        <button class="btn btn-outline-secondary btn-modern flex-grow-1" data-bs-dismiss="modal">
                            <i class="bi bi-x-circle me-2"></i>
                            Fermer
                        </button>
                    </div>

                </div>
            </div>
        </div>

        @yield('content')
    </main>

    <!-- FOOTER MODERNE -->
    <footer class="footer-2025">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6 text-center text-md-start mb-3 mb-md-0">
                    <h5 class="mb-2 fw-bold">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <rect x="2" y="3" width="20" height="18" rx="4" fill="currentColor"
                                opacity="0.2" />
                            <path d="M7 9h10M7 13h10" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"
                                stroke-linejoin="round" />
                            <circle cx="12" cy="8" r="1" fill="currentColor" />
                            <circle cx="12" cy="12" r="1" fill="currentColor" />
                        </svg>
                        Audience Rectorat
                    </h5>
                    <p class="mb-0 small opacity-75">
                        Simplifiez la gestion de vos demandes d'audience en ligne
                    </p>
                </div>
                <div class="col-md-6 text-center text-md-end">
                    <div class="d-flex justify-content-center justify-content-md-end gap-3">
                        <a href="#" class="text-white opacity-75 hover-lift"
                            style="transition: var(--transition-fast);">
                            <i class="bi bi-facebook fs-5"></i>
                        </a>
                        <a href="#" class="text-white opacity-75 hover-lift"
                            style="transition: var(--transition-fast);">
                            <i class="bi bi-twitter fs-5"></i>
                        </a>
                        <a href="#" class="text-white opacity-75 hover-lift"
                            style="transition: var(--transition-fast);">
                            <i class="bi bi-linkedin fs-5"></i>
                        </a>
                        <a href="#" class="text-white opacity-75 hover-lift"
                            style="transition: var(--transition-fast);">
                            <i class="bi bi-envelope fs-5"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-12">
                    <hr class="opacity-25 my-2">
                    <p class="text-center small opacity-75 mb-0">
                        &copy; {{ date('Y') }} Audience Rectorat. Tous droits réservés.
                    </p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap 5 JS CDN -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Select2 JS -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.11/dist/js/select2.min.js"></script>

    <script>
        // Gestion du thème
        (function() {
            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
            const savedTheme = localStorage.getItem('theme');

            function applyTheme(theme) {
                if (theme === 'dark') {
                    document.documentElement.setAttribute('data-theme', 'dark');
                } else {
                    document.documentElement.removeAttribute('data-theme');
                }
                localStorage.setItem('theme', theme);
            }

            // Appliquer le thème sauvegardé ou la préférence système
            if (savedTheme) {
                applyTheme(savedTheme);
            } else {
                applyTheme(prefersDark.matches ? 'dark' : 'light');
            }

            // Écouter les changements système
            prefersDark.addEventListener('change', (e) => {
                if (!localStorage.getItem('theme')) {
                    applyTheme(e.matches ? 'dark' : 'light');
                }
            });
        })();

        // Animation des éléments au scroll
        function animateOnScroll() {
            const elements = document.querySelectorAll('.card-modern');
            elements.forEach(el => {
                const rect = el.getBoundingClientRect();
                if (rect.top < window.innerHeight * 0.8) {
                    el.style.animation = `fadeInUp 0.6s ease-out forwards`;
                }
            });
        }

        // Initialiser l'animation
        document.addEventListener('DOMContentLoaded', animateOnScroll);
        window.addEventListener('scroll', animateOnScroll);

        // Effet de survol pour les liens du footer
        document.querySelectorAll('.hover-lift').forEach(link => {
            link.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-3px)';
                this.style.opacity = '1';
            });

            link.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
                this.style.opacity = '0.75';
            });
        });
    </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 progressBox = document.getElementById('progressContainer');

            const view_fullname = document.getElementById('viewFullName')
            const view_email = document.getElementById('viewEmail')
            const view_contact = document.getElementById('viewContact')
            const view_subject = document.getElementById('viewSubject')
            const view_date = document.getElementById('viewDate')
            const view_service = document.getElementById('viewService')

            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;

                view_fullname.innerHTML = `${app.first_name} ${app.last_name}`
                view_email.innerHTML = `${app.email}`
                view_contact.innerHTML = `${app.mobile}`
                view_subject.innerHTML = `${app.subject}`
                view_date.innerHTML = `${app.requested_at}`
                view_date.innerHTML = `${app.requested_at}`
                view_service.innerHTML = `${app.service?.name ?? '—'}`

                let status = app.status;

                const step3Label = ["confirmed", "rescheduled"].includes(status) ?
                    "Confirmée" :
                    ["canceled", "rejected"].includes(status) ?
                    "Demande rejetée" :
                    "Traitée";

                const step1Active = true;
                const step2Active = status !== "pending";
                const step3Active = status !== "pending" && status !== "processing";

                progressBox.innerHTML = `
                    <div class="timeline-steps">
                        
                        <div class="timeline-step ${step1Active ? 'active' : ''}">
                            <div class="timeline-content">
                                <div class="inner-circle"></div>
                                <p class="h6 mt-3 mb-1">Étape 1</p>
                                <p class="h6 text-muted mb-0">Demande reçue</p>
                            </div>
                        </div>

                        <div class="timeline-step ${step2Active ? 'active' : ''}">
                            <div class="timeline-content">
                                <div class="inner-circle"></div>
                                <p class="h6 mt-3 mb-1">Étape 2</p>
                                <p class="h6 text-muted mb-0">En cours de traitement</p>
                            </div>
                        </div>

                        <div class="timeline-step ${step3Active ? 'active' : ''}">
                            <div class="timeline-content">
                                <div class="inner-circle"></div>
                                <p class="h6 mt-3 mb-1">Étape 3</p>
                                <p class="h6 text-muted mb-0">${step3Label}</p>
                            </div>
                        </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>


    @yield('script-select2')
    @yield('scripts')
    @stack('scripts')
    @include('sweetalert::alert')
</body>

</html>
