{{--
    Le toast qui suit un geste : « Annuler » pendant quelques secondes
    (MarquerLeGeste pose `geste_annulable`), puis le resultat de
    l'annulation (HistoriqueController). Dans le layout, pour valoir sur
    tous les ecrans : les pages n'affichent pas leurs messages de la meme
    facon, et l'annulation doit se trouver au meme endroit partout.

    Le delai n'est qu'une commodite : passe le toast, le geste se defait
    encore depuis l'historique de la fiche commande.

    Un geste fait sans recharger la page (ajout d'une decoupe depuis la liste)
    n'a pas de page suivante : MarquerLeGeste glisse alors le toast dans la
    reponse JSON, et l'ecran l'affiche par `window.acGesteToast(html)`. D'ou
    le style et le script poses meme sans toast a montrer.
--}}
@php
    $geste = session('geste_annulable');
    $ok = session('annulation_ok');
    $erreur = session('annulation_erreur');
@endphp

@if ($geste)
    @include('admin._annuler-geste-toast', ['geste' => $geste])
@elseif ($ok || $erreur)
    <div class="geste-toast-hote" aria-live="polite">
        <div class="geste-toast {{ $erreur ? 'geste-toast-erreur' : '' }}" data-geste-toast data-duree="{{ $erreur ? 0 : 8 }}">
            <i class="bi {{ $erreur ? 'bi-exclamation-triangle text-danger' : 'bi-arrow-counterclockwise text-success' }}"></i>
            <span class="geste-toast-texte">{{ $erreur ?: $ok }}</span>
            <button type="button" class="btn-close" data-geste-fermer aria-label="{{ __('Fermer') }}"></button>
        </div>
    </div>
@endif

    <style>
        .geste-toast-hote {
            position: fixed;
            left: 50%;
            bottom: 16px;
            transform: translateX(-50%);
            z-index: 1090;
            width: min(560px, calc(100vw - 32px));
        }
        .geste-toast {
            position: relative;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            overflow: hidden;
            background: #fff;
            color: #000;
            border: 1px solid #dee2e6;
            border-radius: .5rem;
            box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .15);
            transition: opacity .3s ease, transform .3s ease;
        }
        .geste-toast-erreur {
            border-color: #f1aeb5;
        }
        /* Mode sombre maison (html.dark-mode, css/mode-sombre.css) : un cran
           au-dessus du fond #121212, sinon le toast s'y fond. */
        .dark-mode .geste-toast {
            background: #1f1f1f;
            color: #fff;
            border-color: #3a3a3a;
            box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .6);
        }
        .dark-mode .geste-toast-erreur {
            border-color: #842029;
        }
        .dark-mode .geste-toast .btn-close {
            filter: invert(1);
        }
        .geste-toast.geste-toast-part {
            opacity: 0;
            transform: translateY(12px);
        }
        .geste-toast-texte {
            flex: 1;
            min-width: 0;
        }
        .geste-toast-compte {
            display: inline-block;
            min-width: 1.4em;
            opacity: .7;
        }
        .geste-toast-barre {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 3px;
        }
        .geste-toast-barre > div {
            height: 100%;
            width: 100%;
            background: #198754;
            transition: width linear;
        }
        @media (prefers-reduced-motion: reduce) {
            .geste-toast, .geste-toast-barre > div { transition: none; }
        }
    </style>

    <script>
        (function () {
            function lancer(toast) {
            if (!toast) {
                return;
            }

            function partir() {
                toast.classList.add('geste-toast-part');
                setTimeout(function () { toast.parentNode && toast.parentNode.remove(); }, 300);
            }

            toast.querySelector('[data-geste-fermer]').addEventListener('click', partir);

            // Une erreur reste affichee : elle dit quoi reprendre a la main.
            var duree = parseInt(toast.dataset.duree, 10);
            if (!duree) {
                return;
            }

            var compte = toast.querySelector('[data-geste-compte]');
            var barre = toast.querySelector('[data-geste-barre]');
            var reste = duree;

            if (barre) {
                barre.style.transitionDuration = duree + 's';
                requestAnimationFrame(function () {
                    requestAnimationFrame(function () { barre.style.width = '0%'; });
                });
            }

            var minuteur = setInterval(function () {
                reste--;
                if (compte) {
                    compte.textContent = reste;
                }
                if (reste <= 0) {
                    clearInterval(minuteur);
                    partir();
                }
            }, 1000);
            }

            lancer(document.querySelector('[data-geste-toast]'));

            // Le toast d'un geste fait sans recharger la page : il remplace
            // celui qui serait encore la.
            window.acGesteToast = function (html) {
                document.querySelectorAll('.geste-toast-hote').forEach(function (h) { h.remove(); });
                if (!html) {
                    return;
                }
                document.body.insertAdjacentHTML('beforeend', html);
                lancer(document.querySelector('[data-geste-toast]'));
            };
        })();
    </script>