@extends('app')
@section('title-page', 'Inscription à l\'université')
@section('content')
    <section>
        <div class="lgx-banner lgx-banner-inner">
            <div class="lgx-page-inner">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="lgx-heading-area">
                                <div class="lgx-heading lgx-heading-white">

                                </div>

                            </div>
                        </div>
                    </div><!--//.ROW-->
                </div><!-- //.CONTAINER -->
            </div><!-- //.INNER -->
        </div>
        <div class="akwaba-overPage"> Akwaba</div>
    </section> <!--//.Banner Inner-->

    {{-- <x-marqueeText /> --}}
    @include('components/marquee-text')

    <style>
        @keyframes fadeOut {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .fade-out {
            animation: fadeOut 0.4s ease forwards;
        }

        .fade-in {
            animation: fadeIn 0.4s ease forwards;
        }

        .d-none {
            display: none;
        }
    </style>

    <link rel="stylesheet" href="{{ asset('assets/css/styleToast.css') }}" media="all" />

    <div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <img src="..." class="rounded me-2" alt="...">
                <strong class="me-auto">Bootstrap</strong>
                <small>11 mins ago</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                Hello, world! This is a toast message.
            </div>
        </div>
    </div>

    <section style="margin-top: 17px;margin-bottom: 17px;">
        <div id="lgx-about" class="lgx-about">
            <div class="lgx-inner">
                <div class="container">

                    <div class="row" style="justify-content:center" id="zoneModif">
                        <div class="col-6">
                            <div class="form-group">
                                <input type="text" name="lgxnuminsc" class="form-control lgxname" id="lgxnuminsc"
                                    placeholder="Entrer votre numéro d'inscription" autocomplete="false" required>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <input type="email" name="lgxmail" class="form-control lgxname" id="lgxmail"
                                    placeholder="Entrer votre email" autocomplete="false" required>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="row" style="justify-content:center">
                                <div class="col-3">
                                    <button id="valideForm" class="lgx-btn hvr-glow hvr-radial-out lgxsend lgx-send"
                                        style="background:orange">
                                        <span>Modifier votre inscription</span>
                                    </button>

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

    <div class="toast-container" id="toastContainer"></div>
@endsection
@section('script')
    <script>
        $(function() {
            function showToast(message, type = 'default', duration = 5000) {
                // Créer le conteneur du toast s'il n'existe pas
                const toastContainer = document.getElementById('toastContainer');

                // Créer un nouveau toast
                const toast = document.createElement('div');
                toast.className = `toast ${type}`;

                // Définir l'icône en fonction du type
                let icon = '📌';
                if (type === 'success') icon = '✅';
                else if (type === 'error') icon = '❌';
                else if (type === 'warning') icon = '⚠️';
                else if (type === 'info') icon = 'ℹ️';

                // Structure du contenu du toast
                toast.innerHTML = `
                <div class="toast-content">
                <div class="toast-icon">${icon}</div>
                <div class="toast-message">${message}</div>
                </div>
                <button style="display : none;" class="toast-close">&times;</button>`;

                // Ajouter le toast au conteneur
                toastContainer.appendChild(toast);

                // Forcer un reflow pour que la transition fonctionne correctement
                toast.offsetHeight;

                // Animation pour afficher le toast
                setTimeout(() => {
                    toast.classList.add('show');
                }, 10);

                // Configuration du bouton de fermeture
                const closeBtn = toast.querySelector('.toast-close');
                closeBtn.addEventListener('click', () => {
                    closeToast(toast);
                });

                // Disparition automatique après la durée spécifiée
                if (duration > 0) {
                    setTimeout(() => {
                        closeToast(toast);
                    }, duration);
                }

                // Support tactile pour fermer le toast
                toast.addEventListener('touchstart', function(e) {
                    const touchStartX = e.touches[0].clientX;
                    const touchStartTime = new Date().getTime();

                    toast.addEventListener('touchend', function handleTouchEnd(e) {
                        const touchEndX = e.changedTouches[0].clientX;
                        const touchEndTime = new Date().getTime();

                        // Détecter un swipe horizontal (distance > 50px et durée < 300ms)
                        if (Math.abs(touchEndX - touchStartX) > 50 && touchEndTime -
                            touchStartTime < 300) {
                            closeToast(toast);
                        }

                        toast.removeEventListener('touchend', handleTouchEnd);
                    });
                });

                // Empêcher que les liens dans le toast soient clickés et ferment le toast
                const links = toast.querySelectorAll('a');
                links.forEach(link => {
                    link.addEventListener('click', function(e) {
                        e.stopPropagation(); // Empêcher la propagation de l'événement
                    });
                });

                return toast;
            }

            function closeToast(toast) {
                toast.classList.remove('show');

                // Supprimer l'élément après la fin de l'animation
                toast.addEventListener('transitionend', function() {
                    toast.remove();
                });
            }

            $(document).on("click", "#valideForm", function() {

                if ($("#lgxnuminsc").val() == "" || $("#lgxmail").val() == "") {
                    alert("")
                    return false
                }

                $.ajax({
                    type: "POST",
                    url: "{{ route('getInscription') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        numero: $("#lgxnuminsc").val(),
                        mail: $("#lgxmail").val()
                    },
                    dataType: "json",
                    success: function(response) {

                        if (response.error == false) {
                            const url =
                                "{{ route('je-m-inscris', ['numero' => ':numero', 'tel' => ':mail']) }}"
                                .replace(':numero', $("#lgxnuminsc").val())
                                .replace(':mail', $("#lgxmail").val());

                            // Rediriger vers l'URL
                            window.location = url;
                            return false
                        }
                        showToast(response.messages, type = 'warning', duration = 20000)
                    },
                    error: function(response) {
                        showToast(response.responseJSON.messages, type = 'error', duration =
                            20000)
                    }
                });
            })
        })
    </script>
@endsection