@php
    $siteName = config('app.name', 'Gses Chaturji');
    $tagline = 'Gujarat School of Excellence System';
@endphp

<x-auth-direct-layout :title="ucfirst($role) . ' Login'">
    <div class="login-direct"
         x-data="{
            slide: 0,
            slides: [
                {
                    image: '{{ asset('images/brand/slide1.png') }}',
                    title: 'Blessings for bright learners',
                    text: 'Start every study day with focus, joy, and wisdom.'
                },
                {
                    image: '{{ asset('images/brand/slide2.png') }}',
                    title: 'Learn smart with Chaturji',
                    text: 'Homework, exams, and progress — all in one place.'
                }
            ],
            init() {
                setInterval(() => { this.slide = (this.slide + 1) % this.slides.length }, 4500);
            }
         }">

        <aside class="login-direct-side">
            <div class="login-direct-side-glow" aria-hidden="true"></div>
            <div class="login-direct-side-pattern" aria-hidden="true"></div>

            <div class="login-direct-side-top">
                <img src="{{ asset('images/brand/logo.png') }}" alt="{{ $siteName }}" class="login-direct-logo">
                <div>
                    <p class="login-direct-brand">{{ $siteName }}</p>
                    <p class="login-direct-tagline">{{ $tagline }}</p>
                </div>
            </div>

            <div class="login-direct-slider">
                <template x-for="(item, index) in slides" :key="index">
                    <div class="login-direct-slide"
                         x-show="slide === index"
                         x-transition:enter="transition ease-out duration-500"
                         x-transition:enter-start="opacity-0 translate-y-3"
                         x-transition:enter-end="opacity-100 translate-y-0"
                         x-transition:leave="transition ease-in duration-300"
                         x-transition:leave-start="opacity-100"
                         x-transition:leave-end="opacity-0 absolute inset-0">
                        <div class="login-direct-slide-art">
                            <img :src="item.image" :alt="item.title" class="login-direct-slide-img">
                        </div>
                        <h2 class="login-direct-slide-title" x-text="item.title"></h2>
                        <p class="login-direct-slide-text" x-text="item.text"></p>
                    </div>
                </template>

                <div class="login-direct-dots">
                    <template x-for="(item, index) in slides" :key="'dot-' + index">
                        <button type="button"
                                class="login-direct-dot"
                                :class="slide === index && 'is-active'"
                                @click="slide = index"
                                :aria-label="'Go to slide ' + (index + 1)"></button>
                    </template>
                </div>
            </div>

            <p class="login-direct-motto">विद्या ददाति विनयम्</p>
        </aside>

        <section class="login-direct-form-wrap">
            <div class="login-direct-form-card">
                <div class="lg:hidden flex items-center gap-3 mb-6">
                    <img src="{{ asset('images/brand/logo.png') }}" alt="{{ $siteName }}" class="h-14 w-14 object-contain">
                    <div>
                        <p class="font-bold text-brand-green text-lg leading-tight">{{ $siteName }}</p>
                        <p class="text-xs text-slate-500">{{ ucfirst($role) }} Login</p>
                    </div>
                </div>

                <span class="section-badge">{{ ucfirst($role) }} Login</span>
                <h1 class="text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-tight mt-1">Welcome Back</h1>
                <p class="text-sm text-slate-500 mt-2 mb-6">Sign in to your {{ $role }} account</p>

                <x-auth-session-status class="mb-4 rounded-xl bg-brand-green-50 border border-brand-green-100 px-4 py-3 text-sm text-brand-green-dark" :status="session('status')" />

                <form method="POST" action="{{ route($role . '.login') }}" class="space-y-4">
                    @csrf

                    <div>
                        <label for="login" class="auth-label">Mobile No. or Email</label>
                        <input id="login" type="text" name="login" value="{{ old('login') }}" required autofocus autocomplete="username" class="auth-input" placeholder="Mobile number or email address">
                        <x-input-error :messages="$errors->get('login')" class="mt-2" />
                    </div>

                    <div>
                        <label for="password" class="auth-label">Password</label>
                        <x-password-input id="password" name="password" required autocomplete="current-password" class="auth-input" placeholder="Enter your password" />
                        <x-input-error :messages="$errors->get('password')" class="mt-2" />
                    </div>

                    <label for="remember_me" class="inline-flex items-center gap-2 cursor-pointer">
                        <input id="remember_me" type="checkbox" class="rounded border-slate-300 text-brand-green focus:ring-brand-gold" name="remember">
                        <span class="text-sm text-slate-600">Remember me</span>
                    </label>

                    <button type="submit" class="auth-submit login-direct-submit">Sign In</button>
                </form>

                <div class="auth-divider"><span>or</span></div>

                <p class="text-center text-sm text-slate-500">
                    Don't have an account?
                    <a href="{{ route($role . '.register') }}" class="auth-link">Register here</a>
                </p>
                <p class="text-center text-sm text-slate-400 mt-3">
                    <a href="{{ route('login') }}" class="hover:text-brand-green transition">&larr; Back to login</a>
                </p>
            </div>
        </section>
    </div>
</x-auth-direct-layout>
