@extends('layouts.app')

@section('content')
    <div class="min-h-screen flex items-center justify-center bg-base-200 px-4 py-12">
        <div class="card bg-base-100 shadow-2xl w-full max-w-md border border-base-content/10">
            <div class="card-body p-8 sm:p-10 space-y-6">

                {{-- Brand Header --}}
                <div class="flex flex-col items-center text-center gap-2">
                    <div class="bg-primary/10 text-primary rounded-2xl p-3.5 mb-1">
                        <span class="icon-[tabler--shield-lock] size-7"></span>
                    </div>
                    <h1 class="text-2xl font-bold tracking-tight">Welcome back</h1>
                    <p class="text-sm text-base-content/50">Sign in to your account to continue</p>
                </div>

                {{-- Session Status --}}
                @if (session('status'))
                    <div class="alert alert-success">
                        <span class="icon-[tabler--circle-check] size-5 shrink-0"></span>
                        <span class="text-sm">{{ session('status') }}</span>
                    </div>
                @endif

                {{-- Login Form --}}
                <form method="POST" action="{{ route('login') }}" class="space-y-5">
                    @csrf

                    {{-- Email --}}
                    <div class="space-y-1.5">
                        <label for="email" class="label label-text font-medium flex items-center gap-1.5">
                            <span class="icon-[tabler--mail] size-4 text-base-content/50"></span>
                            Email Address
                        </label>
                        <input id="email" type="email" name="email" value="{{ old('email') }}" required autofocus
                            autocomplete="username" placeholder="you@example.com"
                            class="input input-bordered w-full {{ $errors->has('email') ? 'input-error' : '' }}" />
                        @error('email')
                            <p class="flex items-center gap-1 text-error text-xs mt-1">
                                <span class="icon-[tabler--alert-circle] size-3.5 shrink-0"></span>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                    {{-- Password --}}
                    <div class="space-y-1.5">
                        <div class="flex items-center justify-between">
                            <label for="password" class="label label-text font-medium flex items-center gap-1.5">
                                <span class="icon-[tabler--lock] size-4 text-base-content/50"></span>
                                Password
                            </label>
                            @if (Route::has('password.request'))
                                <a href="{{ route('password.request') }}"
                                    class="text-xs text-primary hover:text-primary/80 font-medium transition-colors">
                                    Forgot password?
                                </a>
                            @endif
                        </div>

                        <div
                            class="input input-bordered flex items-center gap-2 pr-2 {{ $errors->has('password') ? 'input-error' : '' }}">
                            <input id="password" type="password" name="password" required autocomplete="current-password"
                                placeholder="••••••••" class="grow bg-transparent outline-none text-sm min-w-0" />
                            <button type="button" data-toggle-password='{ "target": "#password" }'
                                class="block cursor-pointer shrink-0" aria-label="Toggle password visibility">
                                <span
                                    class="icon-[tabler--eye] text-base-content/40 password-active:block hidden size-5 shrink-0"></span>
                                <span
                                    class="icon-[tabler--eye-off] text-base-content/40 password-active:hidden block size-5 shrink-0"></span>
                            </button>
                        </div>

                        @error('password')
                            <p class="flex items-center gap-1 text-error text-xs mt-1">
                                <span class="icon-[tabler--alert-circle] size-3.5 shrink-0"></span>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                    {{-- Remember Me --}}
                    <label class="flex items-center gap-3 cursor-pointer select-none">
                        <input type="checkbox" name="remember" role="switch" class="switch switch-primary switch-sm" />
                        <span class="text-sm text-base-content/60">Keep me signed in</span>
                    </label>

                    <div class="divider my-0 text-xs text-base-content/30"></div>

                    {{-- Submit --}}
                    <button type="submit" class="btn btn-primary w-full gap-2 shadow-lg shadow-primary/20">
                        <span class="icon-[tabler--login-2] size-4"></span>
                        Sign In
                    </button>
                </form>
            </div>
        </div>
    </div>
@endsection