@extends('admin.layouts.guest')

@section('title', 'Super Admin Login')

@section('content')
<div class="login-card p-5">
    <!-- Logo and Title -->
    <div class="text-center mb-4">
        <div class="logo-badge mb-3">
            <i class="bi bi-shield-check text-white" style="font-size: 2rem;"></i>
        </div>
        <h2 class="fw-bold mb-2">Super Admin</h2>
        <p class="text-muted">Sign in to manage your platform</p>
    </div>

    <!-- Error Messages -->
    @if ($errors->any())
        <div class="alert alert-danger border-start border-danger border-4" role="alert">
            <div class="d-flex">
                <i class="bi bi-exclamation-triangle-fill me-2"></i>
                <div>
                    @foreach ($errors->all() as $error)
                        <p class="mb-0 small">{{ $error }}</p>
                    @endforeach
                </div>
            </div>
        </div>
    @endif

    @if (session('error'))
        <div class="alert alert-danger border-start border-danger border-4" role="alert">
            <div class="d-flex">
                <i class="bi bi-exclamation-triangle-fill me-2"></i>
                <div>
                    <p class="mb-0 small">{{ session('error') }}</p>
                </div>
            </div>
        </div>
    @endif

    <!-- Login Form -->
    <form method="POST" action="{{ route('admin.login') }}">
        @csrf

        <!-- Email -->
        <div class="mb-3">
            <label for="email" class="form-label fw-medium">Email Address</label>
            <div class="input-group">
                <span class="input-group-text bg-light">
                    <i class="bi bi-envelope"></i>
                </span>
                <input type="email" 
                       class="form-control" 
                       id="email" 
                       name="email" 
                       value="{{ old('email') }}"
                       placeholder="admin@example.com" 
                       required 
                       autocomplete="email">
            </div>
        </div>

        <!-- Password -->
        <div class="mb-3">
            <label for="password" class="form-label fw-medium">Password</label>
            <div class="input-group">
                <span class="input-group-text bg-light">
                    <i class="bi bi-lock"></i>
                </span>
                <input type="password" 
                       class="form-control" 
                       id="password" 
                       name="password" 
                       placeholder="••••••••" 
                       required 
                       autocomplete="current-password">
            </div>
        </div>

        <!-- Remember Me & Forgot Password -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="remember" name="remember">
                <label class="form-check-label small" for="remember">
                    Remember me
                </label>
            </div>
            <a href="#" class="small text-decoration-none">Forgot password?</a>
        </div>

        <!-- Submit Button -->
        <button type="submit" class="btn btn-gradient text-white w-100 py-2 fw-semibold">
            <i class="bi bi-box-arrow-in-right me-2"></i>
            Sign In
        </button>
    </form>

    <!-- Footer -->
    <div class="text-center mt-4">
        <p class="text-muted small mb-0">Protected by enterprise-grade security</p>
    </div>
</div>
@endsection