@if(auth()->user() && is_null(auth()->user()->onboarding_completed_at))

    @php
        $onboardingUser = auth()->user();

        if ($onboardingUser->isSuperAdmin()) {
            $onboardingRole = 'Superadministrador';

            $onboardingSteps = [
                [
                    'title' => 'Bienvenido al Sistema de Evaluaciones',
                    'description' => 'Desde este panel podrás administrar y supervisar el funcionamiento general de la plataforma.',
                ],
                [
                    'title' => 'Convocatorias',
                    'description' => 'Crea y administra los procesos o periodos en los que se realizarán las evaluaciones.',
                ],
                [
                    'title' => 'Cuestionarios',
                    'description' => 'Configura las evaluaciones, sus preguntas y los criterios necesarios para cada proceso.',
                ],
                [
                    'title' => 'Banco de preguntas',
                    'description' => 'Administra preguntas, categorías y opciones de respuesta que podrás utilizar en los cuestionarios.',
                ],
                [
                    'title' => 'Folios',
                    'description' => 'Genera y controla los folios que permiten a los participantes acceder a una evaluación.',
                ],
                [
                    'title' => 'Resultados y reportes',
                    'description' => 'Consulta evaluaciones realizadas, resultados, estadísticas y genera reportes.',
                ],
                [
                    'title' => 'Usuarios',
                    'description' => 'Como Superadministrador puedes crear usuarios administrativos y asignarles permisos mediante roles.',
                ],
                [
                    'title' => 'Todo listo',
                    'description' => 'Ya conoces las principales funciones del sistema. Puedes comenzar a administrar la plataforma.',
                ],
            ];
        } elseif ($onboardingUser->isInstitutionAdmin()) {
            $onboardingRole = 'Administrador';

            $onboardingSteps = [
                [
                    'title' => 'Bienvenido al Sistema de Evaluaciones',
                    'description' => 'Tu cuenta tiene acceso a las herramientas necesarias para administrar evaluaciones.',
                ],
                [
                    'title' => 'Convocatorias',
                    'description' => 'Administra los procesos y periodos en los que estarán disponibles las evaluaciones.',
                ],
                [
                    'title' => 'Cuestionarios',
                    'description' => 'Configura evaluaciones y administra las preguntas que utilizará cada cuestionario.',
                ],
                [
                    'title' => 'Folios',
                    'description' => 'Genera los accesos que utilizarán los participantes para realizar sus evaluaciones.',
                ],
                [
                    'title' => 'Resultados',
                    'description' => 'Consulta las evaluaciones realizadas y realiza la revisión correspondiente cuando sea necesaria.',
                ],
                [
                    'title' => 'Reportes',
                    'description' => 'Consulta estadísticas y genera los reportes disponibles en el sistema.',
                ],
                [
                    'title' => 'Todo listo',
                    'description' => 'Ya puedes comenzar a utilizar las herramientas disponibles para tu cuenta.',
                ],
            ];
        } else {
            $onboardingRole = 'Usuario de consulta';

            $onboardingSteps = [
                [
                    'title' => 'Bienvenido al Sistema de Evaluaciones',
                    'description' => 'Tu cuenta está configurada para consultar la información disponible en la plataforma.',
                ],
                [
                    'title' => 'Dashboard',
                    'description' => 'Aquí encontrarás un resumen general de las evaluaciones y sus principales estadísticas.',
                ],
                [
                    'title' => 'Resultados',
                    'description' => 'Puedes consultar las evaluaciones realizadas y revisar sus resultados.',
                ],
                [
                    'title' => 'Reportes',
                    'description' => 'Puedes consultar estadísticas y los reportes disponibles para tu cuenta.',
                ],
                [
                    'title' => 'Todo listo',
                    'description' => 'Ya conoces las funciones principales disponibles para tu cuenta.',
                ],
            ];
        }
    @endphp

    <div
        x-data="{
            open: true,
            step: 0,
            loading: false,
            steps: @js($onboardingSteps),

            next() {
                if (this.step < this.steps.length - 1) {
                    this.step++;
                }
            },

            previous() {
                if (this.step > 0) {
                    this.step--;
                }
            },

            async complete() {
                if (this.loading) return;

                this.loading = true;

                try {
                    const response = await fetch('{{ route('onboarding.completed') }}', {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json',
                            'Content-Type': 'application/json'
                        }
                    });

                    if (!response.ok) {
                        throw new Error('No fue posible completar el tutorial.');
                    }

                    this.open = false;
                } catch (error) {
                    alert('No fue posible guardar el tutorial. Inténtalo nuevamente.');
                } finally {
                    this.loading = false;
                }
            }
        }"
        x-show="open"
        x-cloak
        class="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm"
    >
        <div
            class="w-full max-w-xl overflow-hidden rounded-3xl border border-[#e5e1d8] bg-white shadow-2xl"
            @click.stop
        >

            {{-- Encabezado --}}
            <div class="border-b border-[#ece8df] bg-[#faf8f2] px-6 py-5 sm:px-8">

                <div class="flex items-center gap-4">

                    <div class="flex size-14 shrink-0 items-center justify-center rounded-2xl border border-[#d9dfd4] bg-white shadow-sm">
                        <img
                            src="{{ asset('images/cclem-icon.png') }}"
                            alt="CCLEM"
                            class="max-h-10 max-w-10 object-contain"
                        >
                    </div>

                    <div>
                        <p class="text-xs font-bold uppercase tracking-[0.18em] text-[#8a6a2f]">
                            Tutorial de bienvenida
                        </p>

                        <p class="mt-1 text-sm font-medium text-[#6f756b]">
                            {{ $onboardingRole }}
                        </p>
                    </div>

                </div>

            </div>


            {{-- Contenido --}}
            <div class="px-6 py-8 sm:px-8">

                <div class="mb-6 flex items-center justify-between gap-4">

                    <span
                        class="rounded-full bg-[#edf2e9] px-3 py-1 text-xs font-bold text-[#31583a]"
                        x-text="'Paso ' + (step + 1) + ' de ' + steps.length"
                    ></span>

                    <span class="text-xs font-medium text-[#8b9088]">
                        Sistema de Evaluaciones
                    </span>

                </div>


                <div class="min-h-[150px]">

                    <div
                        class="mb-5 flex size-14 items-center justify-center rounded-2xl bg-[#31583a] text-white shadow-sm"
                    >
                        <svg
                            x-show="step === 0"
                            class="size-7"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="1.8"
                        >
                            <path d="M12 3v18"/>
                            <path d="m5 10 7-7 7 7"/>
                        </svg>

                        <svg
                            x-show="step !== 0"
                            class="size-7"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="1.8"
                        >
                            <circle cx="12" cy="12" r="9"/>
                            <path d="m8.5 12 2.2 2.2L16 9"/>
                        </svg>
                    </div>

                    <h2
                        class="text-2xl font-bold tracking-tight text-[#29422d]"
                        x-text="steps[step].title"
                    ></h2>

                    <p
                        class="mt-3 text-sm leading-7 text-[#687068]"
                        x-text="steps[step].description"
                    ></p>

                </div>


                {{-- Progreso --}}
                <div class="mt-7">

                    <div class="h-2 overflow-hidden rounded-full bg-[#edf0e9]">

                        <div
                            class="h-full rounded-full bg-[#31583a] transition-all duration-300"
                            :style="'width: ' + (((step + 1) / steps.length) * 100) + '%'"
                        ></div>

                    </div>

                </div>


                {{-- Botones --}}
                <div class="mt-7 flex flex-col-reverse gap-3 sm:flex-row sm:items-center sm:justify-between">

                    <button
                        type="button"
                        x-show="step > 0"
                        @click="previous()"
                        class="rounded-xl border border-[#dfe3db] bg-white px-5 py-3 text-sm font-bold text-[#465047] transition hover:bg-[#f7f7f3]"
                    >
                        ← Anterior
                    </button>

                    <button
                        type="button"
                        x-show="step === 0"
                        @click="complete()"
                        :disabled="loading"
                        class="px-2 py-3 text-sm font-semibold text-[#7a8078] transition hover:text-[#31583a]"
                    >
                        Omitir tutorial
                    </button>


                    <button
                        type="button"
                        x-show="step < steps.length - 1"
                        @click="next()"
                        class="rounded-xl bg-[#31583a] px-6 py-3 text-sm font-bold text-white shadow-sm transition hover:bg-[#284a31]"
                    >
                        Siguiente →
                    </button>

                    <button
                        type="button"
                        x-show="step === steps.length - 1"
                        @click="complete()"
                        :disabled="loading"
                        class="rounded-xl bg-[#31583a] px-6 py-3 text-sm font-bold text-white shadow-sm transition hover:bg-[#284a31] disabled:cursor-wait disabled:opacity-60"
                    >
                        <span x-show="!loading">
                            Finalizar
                        </span>

                        <span x-show="loading">
                            Guardando...
                        </span>
                    </button>

                </div>

            </div>

        </div>
    </div>

@endif