@extends('layouts.guest')

@section('title', 'Secure Sign In')

@section('content')
<main class="auth-shell login-page flex min-h-screen" x-data="{ showPassword: false, showOtpModal: false, submitting: false }">
    @include('auth.partials.login-visual')

    <section class="login-form-side flex min-h-screen w-full flex-col lg:w-[44%]" aria-labelledby="login-heading">
        <div class="login-mobile-cover lg:hidden" style="--login-mobile-image: url('{{ asset('images/auth/govix-login-hero-v2.webp') }}')" aria-hidden="true"></div>

        <div class="relative z-10 flex min-h-screen flex-col px-5 py-5 sm:px-10 lg:px-[clamp(2.5rem,5vw,6rem)] lg:py-8">
            <header class="flex items-center justify-between gap-4">
                <a href="{{ route('home') }}" class="login-mobile-brand lg:invisible" aria-label="BrandX ERP home">
                    <span>B</span><strong>BRAND<i>X</i></strong>
                </a>
                @include('auth.partials.language-switcher')
            </header>

            <div class="my-auto flex w-full justify-center py-8 lg:py-10">
                <div class="login-card w-full max-w-[520px]">
                    <div class="login-card-brand hidden lg:block">
                        @include('auth.partials.brand')
                    </div>

                    <div class="mt-8">
                        <span class="login-form-kicker"><i></i> Secure account access</span>
                        <h1 id="login-heading" class="mt-4 text-[clamp(2rem,3vw,2.8rem)] font-bold tracking-[-.045em] text-[#091d35]">Welcome back</h1>
                        <p class="mt-2 max-w-md text-sm leading-6 text-slate-500 sm:text-[15px]">Sign in to continue to your BrandX ERP operations workspace.</p>
                    </div>

                    <div class="mt-8">
                        @include('auth.partials.messages')

                        <form action="{{ route('login') }}" method="POST" class="mt-5 space-y-5" @submit="submitting = true">
                            @csrf

                            <div>
                                <label for="login" class="mb-2 block text-sm font-bold text-[#10243d]">Email, username or mobile</label>
                                <div class="login-field-wrap">
                                    <span class="login-field-icon" aria-hidden="true">@</span>
                                    <input
                                        class="login-field"
                                        id="login"
                                        name="login"
                                        type="text"
                                        value="{{ old('login') }}"
                                        placeholder="name@typingcenter.ae"
                                        autocomplete="username"
                                        inputmode="email"
                                        autofocus
                                        required
                                    >
                                </div>
                            </div>

                            <div>
                                <div class="mb-2 flex items-center justify-between gap-4">
                                    <label for="password" class="block text-sm font-bold text-[#10243d]">Password</label>
                                    <a href="mailto:support@typingcenter-erp.ae?subject=BrandX%20ERP%20password%20reset" class="text-xs font-bold text-emerald-700 transition hover:text-emerald-800">Forgot password?</a>
                                </div>
                                <div class="login-field-wrap">
                                    <span class="login-field-icon is-key" aria-hidden="true">&#9679;</span>
                                    <input
                                        class="login-field pr-20"
                                        id="password"
                                        name="password"
                                        :type="showPassword ? 'text' : 'password'"
                                        placeholder="Enter your secure password"
                                        autocomplete="current-password"
                                        required
                                    >
                                    <button type="button" class="login-password-toggle" @click="showPassword = !showPassword" :aria-label="showPassword ? 'Hide password' : 'Show password'" :aria-pressed="showPassword">
                                        <span x-text="showPassword ? 'Hide' : 'Show'"></span>
                                    </button>
                                </div>
                            </div>

                            <div class="flex items-center justify-between gap-4">
                                <label class="login-remember">
                                    <input type="checkbox" name="remember" value="1" {{ old('remember') ? 'checked' : '' }}>
                                    <span>Keep me signed in</span>
                                </label>
                                <span class="login-encrypted"><i></i> Encrypted session</span>
                            </div>

                            <button type="submit" class="login-submit group" :disabled="submitting">
                                <span x-show="!submitting">Sign in to workspace</span>
                                <span x-show="submitting" x-cloak>Securing session...</span>
                                <i aria-hidden="true">&rarr;</i>
                            </button>
                        </form>

                        <div class="login-divider"><span>or continue securely with</span></div>

                        <button type="button" class="login-otp" @click="showOtpModal = true">
                            <span class="login-otp-icon">01</span>
                            <span><strong>Mobile OTP</strong><small>Use your registered UAE mobile number</small></span>
                            <i aria-hidden="true">&rsaquo;</i>
                        </button>

                        <div class="login-security-note">
                            <span aria-hidden="true">&#10003;</span>
                            <p><strong>Protected business access</strong><small>Role permissions, login history and tenant isolation are enforced on every session.</small></p>
                        </div>
                    </div>
                </div>
            </div>

            <footer class="flex flex-col items-center justify-between gap-3 border-t border-slate-200/80 pt-5 text-xs text-slate-500 sm:flex-row">
                <p>New to BrandX ERP? <a href="{{ route('signup') }}" class="font-bold text-emerald-700 hover:text-emerald-800">Create a workspace</a></p>
                <p>&copy; {{ date('Y') }} BrandX ERP &middot; UAE</p>
            </footer>
        </div>
    </section>

    <div x-show="showOtpModal" x-transition.opacity class="fixed inset-0 z-50 grid place-items-center bg-[#06172b]/70 p-4 backdrop-blur-md" x-cloak @keydown.escape.window="showOtpModal = false">
        <div class="login-otp-modal" role="dialog" aria-modal="true" aria-labelledby="otp-title" @click.outside="showOtpModal = false">
            <div class="flex items-start justify-between gap-4">
                <div>
                    <span class="login-form-kicker"><i></i> Passwordless access</span>
                    <h2 id="otp-title" class="mt-4 text-2xl font-bold tracking-tight text-[#0b1f38]">Login with mobile OTP</h2>
                    <p class="mt-2 text-sm leading-6 text-slate-500">Use the UAE mobile number registered with your BrandX ERP workspace.</p>
                </div>
                <button type="button" class="login-modal-close" @click="showOtpModal = false" aria-label="Close">&times;</button>
            </div>

            <label for="otp-mobile" class="mb-2 mt-6 block text-sm font-bold text-[#10243d]">Registered mobile number</label>
            <input id="otp-mobile" type="tel" class="login-field px-4" placeholder="+971 50 123 4567" autocomplete="tel">
            <div class="mt-4 rounded-2xl border border-amber-200 bg-amber-50 p-4 text-xs leading-5 text-amber-800">OTP sign-in activates after the super administrator connects an approved SMS provider. Password access remains available.</div>

            <div class="mt-6 flex gap-3">
                <button type="button" class="min-h-12 flex-1 rounded-xl border border-slate-200 font-bold text-slate-600 hover:bg-slate-50" @click="showOtpModal = false">Cancel</button>
                <button type="button" disabled class="min-h-12 flex-1 cursor-not-allowed rounded-xl bg-slate-200 font-bold text-slate-500" title="SMS provider not configured">Provider required</button>
            </div>
        </div>
    </div>
</main>
@endsection