@extends('layouts.app')

@section('title', 'IUL - ' . $invite->docentSelection->nome)

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">

<style>
  body {
    font-family: 'Inter', sans-serif;
  }
</style>

@section('content')
    <div class="py-10">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between mb-8">
                <img class="max-w-[160px]" src="/assets/loghi/iul.jpg" alt="IUL">

                <div>
                    <h3 class="text-2xl font-bold text-[#C7160E]">
                        Selezione Docenti TFA
                    </h3>
                    <p class="text-sm text-gray-500">
                        Conferma anagrafica e disponibilità insegnamenti
                    </p>
                </div>
            </div>

            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
                @livewire('complete-docent-selection', ['token' => $invite->token])
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('livewire:init', () => {
            // Preserve scroll position during Livewire updates on this component.
            let scrollPosition = 0;
            let shouldRestoreScroll = false;

            const isTargetComponent = (component) => component?.name === 'complete-docent-selection';

            Livewire.hook('commit', ({ component }) => {
                if (!isTargetComponent(component)) {
                    return;
                }

                scrollPosition = window.scrollY;
                shouldRestoreScroll = true;
            });

            Livewire.hook('morphed', ({ component }) => {
                if (!shouldRestoreScroll || !isTargetComponent(component)) {
                    return;
                }

                shouldRestoreScroll = false;

                requestAnimationFrame(() => {
                    window.scrollTo(0, scrollPosition);
                });
            });
        });
    </script>
@endsection