@once
@push('headScripts')
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('langCycler', () => ({
            langs: [
                { heading: 'Küçük ve orta ölçekli işletmeler için<br>verimlilik araçları', sub: 'Apper araçları, işletmenizi uçtan uca yönetmenize yardımcı olur.' },
                { heading: 'Efficiency tools for<br>small and medium businesses', sub: 'Apper tools help you manage your business end-to-end.' },
                { heading: 'Väikeste ja keskmise suurusega ettevõtete<br>tõhususvahendid', sub: 'Apper tööriistad aitavad teil oma ettevõtet läbivalt hallata.' },
                { heading: 'Hatékonysági eszközök<br>kis- és középvállalkozásoknak', sub: 'Az Apper eszközök segítenek a vállalkozása végpontig történő irányításában.' },
                { heading: 'Effizienz-Tools für<br>kleine und mittlere Unternehmen', sub: 'Apper-Tools helfen Ihnen, Ihr Unternehmen durchgängig zu verwalten.' },
                { heading: 'Outils d\'efficacité pour les<br>PME', sub: 'Les outils Apper vous aident à gérer votre entreprise de bout en bout.' },
                { heading: 'Herramientas de eficiencia para<br>pymes', sub: 'Las herramientas Apper le ayudan a gestionar su negocio de extremo a extremo.' }
            ],
            idx: 0,
            visible: true,
            init() {
                setInterval(() => {
                    this.visible = false;
                    setTimeout(() => {
                        let next;
                        do {
                            next = Math.floor(Math.random() * this.langs.length);
                        } while (next === this.idx && this.langs.length > 1);
                        this.idx = next;
                        this.visible = true;
                    }, 500);
                }, 4000);
            }
        }));
    });
</script>
@endpush
@endonce

<x-guest-layout>
    <div class="flex flex-col items-center min-h-screen pt-6 bg-gray-100 gap-y-10 sm:justify-center sm:pt-0">
        <div>
            <img class="w-auto h-20 mx-auto" src="https://cdn.apper.com.tr/img/apper/icon-color-{{ $tool_name }}.svg"
                alt="">
            <p class="flex justify-center mt-4 text-5xl capitalize text-stone-800 font-fractul-medium">
                {{ $tool_name }}
            </p>
        </div>

        <div class="w-full p-6 overflow-hidden bg-white border border-stone-300 sm:max-w-md sm:rounded-lg">
            <x-validation-errors class="mb-4" />

            @if (session('status'))
            <div class="mb-4 text-sm font-medium text-green-600">
                {{ session('status') }}
            </div>
            @endif

            <form method="POST" action="{{ route('login') }}">
                @csrf

                <div>
                    <x-label for="email" value="{{ __('Email') }}" />
                    <x-input id="email" class="block w-full mt-1" type="email" name="email" :value="old('email')"
                        required autofocus autocomplete="username" />
                </div>

                <div class="mt-4">
                    <x-label for="password" value="{{ __('Password') }}" />
                    <x-input id="password" class="block w-full mt-1" type="password" name="password" required
                        autocomplete="current-password" />
                </div>

                <div class="flex items-center justify-between mt-4">
                    <label for="remember_me" class="flex items-center">
                        <x-checkbox id="remember_me" name="remember" />
                        <span class="text-sm text-stone-600 ms-2">{{ __('Remember me') }}</span>
                    </label>
                    @if (Route::has('password.request'))
                    <a class="text-sm underline rounded-md text-stone-600 hover:text-stone-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500"
                        href="{{ route('password.request') }}">
                        {{ __('Forgot your password?') }}
                    </a>
                    @endif
                </div>

                <div class="mt-8">
                    <x-button>
                        {{ __('LOG IN') }}
                    </x-button>
                </div>
            </form>
        </div>

        <div x-data="langCycler" x-cloak>
            <div class="text-center">
                <h1 class="text-2xl font-semibold tracking-tight transition-all duration-500 ease-in-out text-stone-700 sm:text-3xl"
                    x-html="langs[idx].heading"
                    :class="visible ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2'">
                </h1>
            </div>
            <div class="text-center">
                <p class="text-lg leading-8 transition-all duration-500 ease-in-out text-stone-500"
                    x-html="langs[idx].sub" :class="visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'">
                </p>
            </div>
        </div>

        <div class="grid items-center justify-center opacity-40 gap-y-1">
            <img class="w-auto h-8 mx-auto" src="https://cdn.apper.com.tr/img/apper/logo-color-apper.svg" alt="">
            <p class="text-[11px] text-center font-semibold text-black">APPER SOFTWARE OÜ</p>
        </div>
    </div>
</x-guest-layout>