@extends('layouts.vitrine')

@section('titre', 'Console de ' . $labSession->eleve->nomAffiche())

@section('contenu')
    <div class="mx-auto max-w-5xl px-5 py-14 lg:px-10">
        <p class="font-mono text-sm font-semibold">{{ $seance->lab->titre }} · lecture seule</p>
        <h1 class="mt-1 text-3xl font-extrabold tracking-tight">Console de {{ $labSession->eleve->nomAffiche() }}</h1>

        @if ($labSession->machines->isEmpty())
            <p class="mt-6 font-semibold">Les VM ne sont pas encore prêtes.</p>
        @else
            <div class="mt-4 flex gap-2" role="tablist">
                @foreach ($labSession->machines as $i => $machine)
                    <button type="button" data-onglet="{{ $machine->id }}" class="onglet-machine rounded-lg border border-[#dadce0] px-4 py-2 font-mono font-bold {{ $i === 0 ? 'bg-[#0b57d0] text-white' : 'bg-white' }}">{{ $machine->nom }}</button>
                @endforeach
            </div>
            @foreach ($labSession->machines as $i => $machine)
                <div data-panneau="{{ $machine->id }}" @if ($i !== 0) hidden @endif class="mt-2 h-[480px] overflow-hidden rounded-2xl border border-[#e3e5e8]" style="background:#13233A">
                    <div id="terminal-{{ $machine->id }}" class="h-full"></div>
                </div>
            @endforeach
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css">
            <script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
            <script src="{{ asset('js/console-reelle.js') }}"></script>
            <script>
                document.querySelectorAll('.onglet-machine').forEach(function (bouton) {
                    bouton.addEventListener('click', function () {
                        var id = bouton.dataset.onglet;
                        document.querySelectorAll('.onglet-machine').forEach(function (b) { b.classList.toggle('bg-[#0b57d0]', b === bouton); b.classList.toggle('text-white', b === bouton); b.classList.toggle('bg-white', b !== bouton); });
                        document.querySelectorAll('[data-panneau]').forEach(function (p) { p.hidden = p.dataset.panneau !== id; });
                    });
                });
                @foreach ($labSession->machines as $machine)
                    fetch('{{ route('console.prof', [$seance, $labSession, $machine]) }}', {
                        method: 'POST',
                        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    }).then(function (r) { return r.json(); }).then(function (d) {
                        window.SyllabusConsoleReelle.mount(document.getElementById('terminal-{{ $machine->id }}'), { jeton: d.jeton, lectureSeule: true });
                    });
                @endforeach
            </script>
        @endif
    </div>
@endsection