<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Super Admin Login</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<style>
    @import url('https://fonts.cdnfonts.com/css/segoe-ui-variable-static-display');
    body{
        font-family: 'Segoe UI Variable Static Display', sans-serif;
    }
    .form-container{
        box-shadow: 0 0 8px 0 #0000006e;
        border-radius: 10px;
        width: 70%;
    }
    .form-container input:focus{
        outline: none;
    }
    .form-container input{
        border: 1px solid lightgray;
        padding: 10px;
    }
    .form-img{
        width: 50%;
        height: 430px;
    }
    .form-img img{
        object-fit: cover;
        height: 100%;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        object-position: left;
    }
    nav{
        position: relative;
        z-index: 999;
    }
    .fields{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .logo{
        width: 200px;
        margin-bottom: 20px;
    }
</style>
<body class="bg-gray-100">
    <nav class="bg-white shadow-lg mb-8">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <a href="/" class="flex items-center space-x-2">
                        <span class="text-xl font-semibold text-blue-600">RonnieGPT</span>
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <div class="min-h-screen flex items-center justify-center -mt-14">
        <div class="bg-white form-container">
            <div class="flex items-center">
                <div class="p-5 fields" style="width: 50%;">
                    <div class="logo">
                        <img src="{{ url_for('static', filename='img/Logo.png') }}" width="100%" alt="Logo">
                    </div>
                    <h2 class="text-2xl font-semibold mb-6 text-center">Super Admin Login</h2>
                    <form id="adminLoginForm" class="space-y-4 w-full">
                        <div>
                            <label class="block text-sm font-semibold text-gray-700">Email</label>
                            <input type="email" name="email" required
                                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700">Password</label>
                            <input type="password" name="password" required
                                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                        </div>
                        <button type="submit" id="adminLoginBtn"
                                class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed">
                            <span id="adminLoginText">Login</span>
                            <span id="adminLoginLoader" class="hidden">
                                <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                                Logging in...
                            </span>
                        </button>
                    </form>
                </div>
                <div class="form-img">
                    <img src="{{ url_for('static', filename='img/ai-technology-microchip-background-futuristic-innovation-technology-remix.jpg') }}"
                         alt="Admin Login">
                </div>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('adminLoginForm').addEventListener('submit', async (e) => {
            e.preventDefault();

            const loginBtn = document.getElementById('adminLoginBtn');
            const loginText = document.getElementById('adminLoginText');
            const loginLoader = document.getElementById('adminLoginLoader');

            loginBtn.disabled = true;
            loginText.classList.add('hidden');
            loginLoader.classList.remove('hidden');

            const formData = new FormData(e.target);

            try {
                const response = await fetch('{{ url_for("admin.login") }}', {
                    method: 'POST',
                    body: formData
                });

                const data = await response.json();

                if (data.success) {
                    window.location.href = '{{ url_for("admin.dashboard") }}';
                } else {
                    alert(data.error || 'Login failed');
                }
            } catch (error) {
                alert('An error occurred during login');
            } finally {
                loginBtn.disabled = false;
                loginText.classList.remove('hidden');
                loginLoader.classList.add('hidden');
            }
        });
    </script>
</body>
</html>

