<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Login</title>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />

        <!-- Bootstrap CSS v5.3.2 -->
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
            crossorigin="anonymous"
        />

        <!-- Bootstrap Icons -->
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css"
        />

        <style>
            body {
                background: #f5e1da;
                font-family: "Roboto", sans-serif;
            }

            .login-box {
                margin-top: 75px;
                width: 100%;
                max-width: 400px;
                padding: 20px;
                background: #fff;
                text-align: center;
                box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
                    0 3px 6px rgba(0, 0, 0, 0.23);
                border-radius: 10px;
                border: 1px solid #e3c4bc;
            }

            .login-key {
                height: 100px;
                font-size: 80px;
                line-height: 100px;
                background: -webkit-linear-gradient(#e91e63, #ff4081);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            .login-title {
                margin-top: 15px;
                font-size: 30px;
                letter-spacing: 2px;
                font-weight: bold;
                color: #e91e63;
            }

            .login-form {
                margin-top: 25px;
                text-align: left;
            }

            input[type="email"],
            input[type="password"] {
                background-color: #fff;
                border: none;
                border-bottom: 2px solid #e91e63;
                border-radius: 0px;
                font-weight: bold;
                outline: 0;
                color: #555;
            }

            .form-group {
                margin-bottom: 40px;
            }

            .form-control:focus {
                border-color: inherit;
                -webkit-box-shadow: none;
                box-shadow: none;
                border-bottom: 2px solid #ff4081;
                background-color: #fff;
                color: #555;
            }

            .form-control-label {
                font-size: 10px;
                color: #6c6c6c;
                font-weight: bold;
                letter-spacing: 1px;
            }

            .btn-outline-primary {
                border-color: #e91e63;
                color: #e91e63;
                border-radius: 30px;
                font-weight: bold;
                letter-spacing: 1px;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
                    0 1px 2px rgba(0, 0, 0, 0.24);
                padding: 10px 30px;
                transition: background-color 0.3s, color 0.3s;
            }

            .btn-outline-primary:hover {
                background-color: #e91e63;
                color: #fff;
            }

            .login-btm {
                text-align: right;
                margin-bottom: 25px;
            }

            .login-box:before {
                content: "";
                position: absolute;
                width: 150%;
                height: 150%;
                top: -25%;
                left: -25%;
                background: #e91e63;
                background: linear-gradient(45deg, #ff4081, #e91e63);
                border-radius: 50%;
                z-index: -1;
                animation: animateBackground 6s infinite linear;
            }

            @keyframes animateBackground {
                0% {
                    transform: rotate(0deg);
                }

                100% {
                    transform: rotate(360deg);
                }
            }
        </style>
    </head>

    <body>
        <main>
            <div class="container d-flex justify-content-center">
                <div class="login-box">
                    <div class="login-key">
                        <i class="bi bi-person-fill-lock"></i>
                    </div>
                    <div class="login-title">ADMIN PANEL</div>
                    <div class="login-form">
                        @if (session('error'))
                        <div class="alert alert-danger" id="successMessage">
                            {{ session('error') }}
                        </div>
                        @endif
                        <form method="POST" action="{{ route('login') }}">
                            @csrf
                            <div class="form-group">
                                <label for="email" class="form-control-label"
                                    >EMAIL</label
                                >
                                <input
                                    id="email"
                                    type="email"
                                    class="form-control @error('email') is-invalid @enderror"
                                    name="email"
                                    value="{{ old('email') }}"
                                    autocomplete="email"
                                    autofocus
                                />
                                @error('email')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label for="password" class="form-control-label"
                                    >PASSWORD</label
                                >
                                <input
                                    id="password"
                                    type="password"
                                    class="form-control @error('password') is-invalid @enderror"
                                    name="password"
                                    autocomplete="current-password"
                                />
                                @error('password')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="login-btm">
                                <button
                                    type="submit"
                                    class="btn btn-outline-primary"
                                >
                                    LOGIN
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </main>
        <!-- Bootstrap JavaScript Libraries -->
        <script
            src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
            integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
            crossorigin="anonymous"
        ></script>
        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
            integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
            crossorigin="anonymous"
        ></script>
    </body>
</html>
