{{--
    Normal /panel sayfasında (canlı ders içinde DEĞİLKEN) gösterilen başlatıcı —
    sol altta öğretmen simgeli bir FAB (yüzen aksiyon butonu); tıklanınca
    "Canlı Ders Başlat" / "Öğretmen Paneli" / "Ders Kayıtlarım" butonları
    yukarı doğru kademeli animasyonla açılır.

    ÖNEMLİ: Bu partial 5 dakikalık panel HTML cache'inin İÇİNDE servis edilir,
    yani @csrf ile gömülecek token bayatlayabilir (yeniden login sonrası 419).
    Bu yüzden form doğrudan submit edilmez — submit anında /panel/csrf-token
    endpoint'inden TAZE token çekilip öyle gönderilir.
--}}
@auth
    <div class="live-session-launcher" id="liveSessionLauncher">
        <div class="lsl-menu">
            @if(Auth::user()->isTeacher())
                <form method="POST" action="{{ route('panel.live.store') }}" class="lsl-form lsl-item" id="lslStartForm">
                    <input type="hidden" name="_token" value="">
                    <button type="submit" class="lsl-btn lsl-btn--primary">
                        <span class="lsl-dot"></span>
                        Canlı Ders Başlat
                    </button>
                </form>
                <a href="{{ route('panel.teacher') }}" class="lsl-btn lsl-item">
                    <svg viewBox="0 0 24 24"><path d="M20 3H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h4l-2 4h2.2l2-4h3.6l2 4H18l-2-4h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Zm0 12H4V5h16v10Z"/></svg>
                    Öğretmen Paneli
                </a>
            @endif
            <a href="{{ route('panel.recordings.index') }}" class="lsl-btn lsl-item">
                <svg viewBox="0 0 24 24"><path d="M18 4v1h-2V4H8v1H6V4H4v16h2v-1h2v1h8v-1h2v1h2V4h-2ZM8 17H6v-2h2v2Zm0-4H6v-2h2v2Zm0-4H6V7h2v2Zm10 8h-2v-2h2v2Zm0-4h-2v-2h2v2Zm0-4h-2V7h2v2Zm-8 4.5v-7l5.5 3.5-5.5 3.5Z"/></svg>
                Ders Kayıtlarım
            </a>
        </div>

        <button type="button" class="lsl-fab" id="lslFab" aria-expanded="false"
                aria-label="{{ Auth::user()->isTeacher() ? 'Öğretmen menüsü' : 'Ders menüsü' }}">
            {{-- Öğretmen (mezuniyet kepi) simgesi --}}
            <svg class="lsl-fab-icon lsl-fab-icon--teacher" viewBox="0 0 24 24"><path d="M12 3 1 9l11 6 9-4.91V17h2V9L12 3Zm-7 9.99V17c0 1.66 3.13 3 7 3s7-1.34 7-3v-4.01l-7 3.82-7-3.82Z"/></svg>
            {{-- Açıkken çarpı --}}
            <svg class="lsl-fab-icon lsl-fab-icon--close" viewBox="0 0 24 24"><path d="M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 5.7 18.3 4.3 16.9 10.6 10.6 4.3 4.3 5.7 2.9l6.3 6.3 6.3-6.3 1.4 1.4Z" transform="translate(0.7 1.4)"/></svg>
        </button>
    </div>

    <style>
        .live-session-launcher {
            position: fixed;
            left: 16px;
            bottom: 16px;
            z-index: 2000;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
            font-family: system-ui, -apple-system, sans-serif;
        }
        /* ── FAB ── */
        .lsl-fab {
            width: 54px; height: 54px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #1e293b, #0f172a);
            color: #fff;
            box-shadow: 0 10px 26px rgba(2, 6, 23, .4), 0 0 0 1px rgba(148, 163, 184, .18);
            transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
            position: relative;
        }
        .lsl-fab:hover {
            transform: translateY(-2px) scale(1.04);
            box-shadow: 0 14px 32px rgba(2, 6, 23, .5), 0 0 0 1px rgba(148, 163, 184, .28);
        }
        .lsl-fab-icon { width: 24px; height: 24px; fill: currentColor; position: absolute; transition: opacity .18s ease, transform .25s ease; }
        .lsl-fab-icon--close { opacity: 0; transform: rotate(-90deg) scale(.6); }
        .live-session-launcher.open .lsl-fab { background: linear-gradient(135deg, #dc2626, #b91c1c); }
        .live-session-launcher.open .lsl-fab-icon--teacher { opacity: 0; transform: rotate(90deg) scale(.6); }
        .live-session-launcher.open .lsl-fab-icon--close { opacity: 1; transform: rotate(0) scale(1); }
        /* ── Açılan menü ── */
        .lsl-menu {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            pointer-events: none;
        }
        .live-session-launcher.open .lsl-menu { pointer-events: auto; }
        .lsl-item {
            opacity: 0;
            transform: translateY(14px) scale(.9);
            transition: opacity .22s ease, transform .22s cubic-bezier(.34, 1.56, .64, 1);
        }
        .live-session-launcher.open .lsl-item {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        /* Kademeli açılma: alttan üste sırayla */
        .live-session-launcher.open .lsl-item:nth-last-child(1) { transition-delay: 0s; }
        .live-session-launcher.open .lsl-item:nth-last-child(2) { transition-delay: .06s; }
        .live-session-launcher.open .lsl-item:nth-last-child(3) { transition-delay: .12s; }
        .lsl-form { margin: 0; }
        .lsl-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px;
            border-radius: 12px;
            border: none;
            background: rgba(15, 23, 42, .88);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            color: #e2e8f0;
            font-size: 13px;
            font-weight: 600;
            text-decoration: none;
            cursor: pointer;
            box-shadow: 0 8px 24px rgba(2, 6, 23, .35), 0 0 0 1px rgba(148, 163, 184, .16);
            transition: transform .12s ease, box-shadow .12s ease;
            white-space: nowrap;
        }
        .lsl-btn:hover {
            color: #fff;
            transform: translateY(-1px);
            box-shadow: 0 12px 28px rgba(2, 6, 23, .45), 0 0 0 1px rgba(148, 163, 184, .25);
        }
        .lsl-btn svg { width: 17px; height: 17px; fill: currentColor; flex-shrink: 0; }
        .lsl-btn--primary {
            background: linear-gradient(135deg, #dc2626, #b91c1c);
            color: #fff;
        }
        .lsl-btn--primary:hover { background: linear-gradient(135deg, #ef4444, #dc2626); }
        .lsl-dot {
            width: 9px; height: 9px;
            border-radius: 50%;
            background: #fff;
            flex-shrink: 0;
            animation: lsl-pulse 1.6s ease-in-out infinite;
        }
        @keyframes lsl-pulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); }
            50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const launcher = document.getElementById('liveSessionLauncher');
            const fab = document.getElementById('lslFab');

            fab.addEventListener('click', (e) => {
                e.stopPropagation();
                const open = launcher.classList.toggle('open');
                fab.setAttribute('aria-expanded', open ? 'true' : 'false');
            });

            // Dışarı tıklayınca veya Escape ile kapan
            document.addEventListener('click', (e) => {
                if (launcher.classList.contains('open') && !launcher.contains(e.target)) {
                    launcher.classList.remove('open');
                    fab.setAttribute('aria-expanded', 'false');
                }
            });
            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape' && launcher.classList.contains('open')) {
                    launcher.classList.remove('open');
                    fab.setAttribute('aria-expanded', 'false');
                }
            });

            const form = document.getElementById('lslStartForm');
            if (!form) return;
            let tokenReady = false;
            form.addEventListener('submit', async (e) => {
                if (tokenReady) return; // taze token yazıldı, gerçek submit devam etsin
                e.preventDefault();
                const btn = form.querySelector('button');
                btn.disabled = true;
                try {
                    const res = await fetch(@json(url('/panel/csrf-token')), { headers: { 'Accept': 'application/json' } });
                    const json = await res.json();
                    form.querySelector('input[name=_token]').value = json.token;
                    tokenReady = true;
                    form.submit();
                } catch (err) {
                    btn.disabled = false;
                    console.error('[live-launcher] CSRF token alınamadı:', err);
                    alert('Canlı ders başlatılamadı — sayfayı yenileyip tekrar deneyin.');
                }
            });
        });
    </script>
@endauth