<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - Barcode Creation App</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">

    <style>
        /* Background */
        body {
            background: linear-gradient(270deg, #ff87ab, #b159a9, #f7aef8, #d55f98);
            background-size: 600% 600%;
            animation: gradientMove 20s ease infinite;
            min-height: 100vh;
        }

        @keyframes gradientMove {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        /* Card */
        .login-card {
            border-radius: 16px;
            backdrop-filter: blur(12px);
            background: rgba(255, 255, 255, 0.95);
        }

        /* Pill Input (Single Border) */
        .input-group {
            border: 1px solid #a19da1;
            border-radius: 50px;
            overflow: hidden;
            background: #fff;
            transition: 0.2s ease;
        }

        .input-group-text,
        .form-control,
        #togglePassword {
            border: none !important;
            background: transparent;
        }

        .form-control {
            box-shadow: none !important;
            padding-left: 3px !important;
        }

        /* Focus Effect */
        .input-group:focus-within {
            border-color: #b159a9;
            box-shadow: 0 0 0 1.5px #b159a9;
        }

        /* Icon Colors */
        .input-group i {
            color: #6c757d;
            transition: 0.2s;
        }

        .input-group:focus-within i {
            color: #b159a9;
        }

        /* Toggle */
        #togglePassword {
            cursor: pointer;
        }

        /* Button */
        .btn-login {
            height: 45px;
            border-radius: 50px;
            font-weight: 600;
        }

        /* Logo */
        .logo {
            font-size: 24px;
            font-weight: bold;
        }

        /* Mobile */
        @media (max-width: 576px) {
            .card-body {
                padding: 20px;
            }
        }

        #loaderOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }
    </style>
</head>

<body>
    <div id="loaderOverlay" class="d-none flex-column text-white">
        <div class="spinner-border mb-2"></div>
        <div>Logging in...</div>
    </div>

    <div class="container d-flex justify-content-center align-items-center min-vh-100">

        <div class="col-12 col-sm-10 col-md-6 col-lg-4">
            <div class="card shadow-lg login-card">

                <div class="card-body p-4">

                    <!-- Header -->
                    <div class="text-center mb-4">
                        <div class="logo text-primary">Barcode Creation App</div>
                        <small class="text-muted">Sign in to continue</small>
                    </div>

                    <!-- Error -->
                    @if ($errors->any())
                        <div class="alert alert-danger text-center p-0">
                            {{ $errors->first() }}
                        </div>
                    @endif

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

                        <!-- Username -->
                        <div class="mb-3">
                            <label class="form-label">Username</label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="bi bi-person-circle"></i>
                                </span>
                                <input type="text" name="username" value="{{ old('username') }}" class="form-control"
                                    placeholder="Enter username" autofocus>
                            </div>
                            {{-- @error('username')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror --}}
                        </div>

                        <!-- Password -->
                        <div class="mb-3">
                            <label class="form-label">Password</label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="bi bi-lock-fill"></i>
                                </span>

                                <input type="password" id="password" name="password" value="{{ old('password') }}"
                                    class="form-control" placeholder="Enter password">

                                <span class="input-group-text" id="togglePassword">
                                    <i class="bi bi-eye"></i>
                                </span>
                            </div>
                            {{-- @error('password')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror --}}
                        </div>

                        {{-- <input type="checkbox" name="remember" value="1"> --}}

                        <!-- Submit -->
                        <button type="submit" class="btn btn-primary w-100 btn-login">
                            Login
                        </button>

                    </form>

                </div>
            </div>

            <!-- Footer -->
            <div class="text-center mt-3 text-white small">
                &copy; {{ date('Y') }} Barcode Creation App
            </div>

        </div>
    </div>

    <!-- JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        const togglePassword = document.getElementById('togglePassword');
        const password = document.getElementById('password');

        togglePassword.addEventListener('click', () => {
            const isPassword = password.type === 'password';
            password.type = isPassword ? 'text' : 'password';

            togglePassword.querySelector('i').classList.toggle('bi-eye');
            togglePassword.querySelector('i').classList.toggle('bi-eye-slash');
        });

        function showLoginLoader() {
            document.getElementById('loaderOverlay').classList.remove('d-none');
        }

        function hideLoader() {
            document.getElementById('loaderOverlay').classList.add('d-none');
        }
    </script>

</body>

</html>
