@extends('layouts.app')

@section('content')
    <div class="login-container">
        <div class="login-card">
            <div class="text-center mb-4">
                <img src="{{ asset('images/logo.png') }}" alt="Admin Logo" class="login-logo">
                <h3 class="login-title mt-3">Admin Login</h3>
            </div>

            <div class="card-body">
                @if (session('success'))
                    <div class="alert alert-primary">{{ session('success') }}</div>
                @endif
                @if (session('error'))
                    <div id="error" class="alert alert-danger">{{ session('error') }}</div>
                @endif
                @if ($errors->any())
                    <div id="error" class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form method="POST" action="{{ route('admin.login') }}" id="loginForm" class="needs-validation" novalidate>
                    @csrf

                    <!-- Email Field -->
                    <div class="mb-4 position-relative">
                        <label for="email" class="form-label">Email</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                            <input id="email" type="email" class="form-control @error('email') is-invalid @enderror"
                                name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
                        </div>
                        @error('email')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Password Field -->
                    <div class="mb-4 position-relative">
                        <label for="password" class="form-label">Password</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-lock"></i></span>
                            <input id="password" type="password"
                                class="form-control @error('password') is-invalid @enderror" name="password" required
                                autocomplete="current-password">
                        </div>
                        @error('password')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Submit Button and Register Link -->
                    <div class="d-flex justify-content-between align-items-center">
                        <button type="submit" class="btn btn-primary btn-login" id="loginBtn">
                            Login
                        </button>
                        <a class="btn btn-link forgot-password" href="{{ route('admin.register.form') }}">
                            Don’t have an account? Register
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <style>
        /* Background for the entire page */
        .login-container {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        /* Card styling */
        .login-card {
            background: #ffffff;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            max-width: 450px;
            width: 100%;
            padding: 30px;
            animation: fadeIn 0.5s ease-in-out;
        }

        /* Fade-in animation */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Logo styling */
        .login-logo {
            max-width: 150px;
        }

        /* Title styling */
        .login-title {
            font-size: 24px;
            font-weight: 600;
            color: #333;
        }

        /* Form labels */
        .form-label {
            font-weight: 500;
            color: #555;
        }

        /* Input group styling */
        .input-group-text {
            background: #f1f3f5;
            border: 1px solid #ced4da;
            border-right: none;
            color: #6c757d;
        }

        /* Input fields */
        .form-control {
            border: 1px solid #ced4da;
            border-radius: 0.375rem;
            padding: 10px;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

        /* Invalid feedback */
        .invalid-feedback {
            font-size: 14px;
            color: #dc3545;
        }

        /* Checkbox styling */
        .form-check-label {
            color: #555;
        }

        /* Login button */
        .btn-login {
            border: none;
            padding: 10px 20px;
            font-weight: 500;
            transition: all 0.3s ease;
        }


        /* Forgot password link */
        .forgot-password {
            color: #007bff;
            font-weight: 500;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .forgot-password:hover {
            color: #0056b3;
            text-decoration: underline;
        }

        /* Error message styling */
        #error .alert {
            margin-bottom: 15px;
        }
    </style>
@endsection