@extends('layouts.app')

@section('title', 'Login')

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-12 col-md-8 col-lg-5">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4 p-md-5">
                    <div class="text-center mb-4">
                        <h1 class="h3 fw-bold">
                            Welcome Back
                        </h1>

                        <p class="text-muted mb-0">
                            Sign in to your account
                        </p>
                    </div>

                    @if (session('success'))
                        <div
                            class="alert alert-success"
                            role="alert"
                        >
                            {{ session('success') }}
                        </div>
                    @endif

                    @if (session('status'))
                        <div
                            class="alert alert-success"
                            role="alert"
                        >
                            {{ session('status') }}
                        </div>
                    @endif

                    <form
                        method="POST"
                        action="{{ route('login.store') }}"
                    >
                        @csrf

                        <div class="mb-3">
                            <label
                                for="email"
                                class="form-label"
                            >
                                Email Address
                            </label>

                            <input
                                type="email"
                                id="email"
                                name="email"
                                value="{{ old('email') }}"
                                class="form-control
                                    @error('email') is-invalid @enderror"
                                autocomplete="email"
                                required
                                autofocus
                            >

                            @error('email')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>

                        <div class="mb-2">
                            <div
                                class="d-flex justify-content-between
                                       align-items-center"
                            >
                                <label
                                    for="password"
                                    class="form-label"
                                >
                                    Password
                                </label>

                                <a
                                    href="{{ route('password.request') }}"
                                    class="small text-decoration-none"
                                >
                                    Forgot password?
                                </a>
                            </div>

                            <input
                                type="password"
                                id="password"
                                name="password"
                                class="form-control
                                    @error('password') is-invalid @enderror"
                                autocomplete="current-password"
                                required
                            >

                            @error('password')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>

                        <div class="form-check mb-4 mt-3">
                            <input
                                type="checkbox"
                                id="remember"
                                name="remember"
                                value="1"
                                class="form-check-input"
                                @checked(old('remember'))
                            >

                            <label
                                for="remember"
                                class="form-check-label"
                            >
                                Remember me
                            </label>
                        </div>

                        <button
                            type="submit"
                            class="btn btn-primary-custom w-100"
                        >
                            Sign In
                        </button>
                    </form>

                    <p class="text-center mt-4 mb-0">
                        Do not have an account?

                        <a href="{{ route('register') }}">
                            Create one
                        </a>
                    </p>

                    <hr class="my-4">

                    <div class="d-grid gap-2">
                        <a
                            href="{{ route('home') }}"
                            class="btn btn-outline-secondary"
                        >
                            <i class="bi bi-house me-1"></i>
                            Back to Homepage
                        </a>

                        <a
                            href="{{ route('menu.index') }}"
                            class="btn btn-link text-decoration-none"
                        >
                            Continue as Guest
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection