@extends('layouts.guest')
@section('title', 'Sign In - ' . ($schoolSettings['school_name'] ?? 'School Portal'))

@section('content')
    <div class="mb-8">
        <h2 class="text-2xl font-bold text-stone-800">Welcome back</h2>
        <p class="text-stone-500 mt-1.5 text-sm">Sign in to your account to continue</p>
    </div>

    @if(session('error'))
        <div class="mb-5 p-3.5 bg-red-50 border border-red-100 text-red-600 rounded-xl text-sm flex items-start gap-2.5">
            <i class="fas fa-circle-exclamation mt-0.5 shrink-0"></i>
            <span>{{ session('error') }}</span>
        </div>
    @endif

    @if(session('status'))
        <div class="mb-5 p-3.5 bg-emerald-50 border border-emerald-100 text-emerald-700 rounded-xl text-sm flex items-start gap-2.5">
            <i class="fas fa-check-circle mt-0.5 shrink-0"></i>
            <span>{{ session('status') }}</span>
        </div>
    @endif

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

        {{-- Email --}}
        <div>
            <label class="block text-sm font-medium text-stone-700 mb-1.5">Email Address</label>
            <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
                    <i class="fas fa-envelope text-stone-400 text-sm"></i>
                </div>
                <input type="email" name="email" value="{{ old('email') }}" required autofocus
                       placeholder="you@school.com"
                       class="w-full pl-10 pr-4 py-3 bg-stone-50 border border-stone-200 rounded-xl text-stone-800 placeholder-stone-400 
                              focus:bg-white focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all duration-200 outline-none">
            </div>
            @error('email')
                <p class="text-red-500 text-xs mt-1.5 flex items-center gap-1">
                    <i class="fas fa-triangle-exclamation text-[10px]"></i> {{ $message }}
                </p>
            @enderror
        </div>

        {{-- Password --}}
        <div x-data="{ show: false }">
            <label class="block text-sm font-medium text-stone-700 mb-1.5">Password</label>
            <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
                    <i class="fas fa-lock text-stone-400 text-sm"></i>
                </div>
                <input :type="show ? 'text' : 'password'" name="password" required
                       placeholder="Enter your password"
                       class="w-full pl-10 pr-12 py-3 bg-stone-50 border border-stone-200 rounded-xl text-stone-800 placeholder-stone-400 
                              focus:bg-white focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all duration-200 outline-none">
                <button type="button" @click="show = !show"
                        class="absolute inset-y-0 right-0 pr-3.5 flex items-center text-stone-400 hover:text-stone-600 transition-colors">
                    <i :class="show ? 'fas fa-eye-slash' : 'fas fa-eye'" class="text-sm"></i>
                </button>
            </div>
            @error('password')
                <p class="text-red-500 text-xs mt-1.5 flex items-center gap-1">
                    <i class="fas fa-triangle-exclamation text-[10px]"></i> {{ $message }}
                </p>
            @enderror
        </div>

        {{-- Remember + Forgot --}}
        <div class="flex items-center justify-between">
            <label class="flex items-center cursor-pointer group">
                <input type="checkbox" name="remember" 
                       class="w-4 h-4 rounded border-stone-300 text-brand-600 focus:ring-brand-500/30 transition">
                <span class="ml-2 text-sm text-stone-500 group-hover:text-stone-700 transition-colors">Remember me</span>
            </label>
            @if(Route::has('password.request'))
                <a href="{{ route('password.request') }}" 
                   class="text-sm text-brand-600 hover:text-brand-700 font-medium transition-colors">
                    Forgot password?
                </a>
            @endif
        </div>

        {{-- Submit --}}
        <button type="submit" 
                class="w-full py-3 bg-brand-700 text-white font-semibold rounded-xl hover:bg-brand-800 
                       focus:ring-4 focus:ring-brand-500/20 active:scale-[0.98] transition-all duration-200 
                       shadow-sm shadow-brand-900/10">
            <span class="flex items-center justify-center gap-2">
                <span>Sign In</span>
                <i class="fas fa-arrow-right text-sm"></i>
            </span>
        </button>
    </form>

    {{-- Help Text --}}
    <div class="mt-6 pt-5 border-t border-stone-100 text-center">
        <p class="text-xs text-stone-400">
            Having trouble signing in? Contact your school administrator.
        </p>
    </div>
@endsection