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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Company Registration</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<style>
    .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-container a {
        text-decoration: underline;
        font-weight: 500;
    }
    .form-img{
        width: 50%;
    }
    .form-img img{
        object-fit: cover;
        height: 100%;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    .fields{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .logo{
        width: 200px;
        margin-bottom: 20px;
        
    }
</style>

<body class="bg-gray-100">
    <div class="min-h-screen flex items-center justify-center">
        <div class="bg-white form-container ">

            <!-- Registration Form -->
            <div class="flex">
                <div class="p-5 fields" style="width: 50%;">
                    <div class="logo">
                        <img src="../../static/img/Logo.png" width="100%" alt="">
                    </div>
                    <h2 class="text-2xl font-semibold mb-6 text-center">Company Registration</h2>
                    <form id="registerForm" class="space-y-4 w-full " style="display: block;">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Company Name</label>
                            <input type="text" name="name" 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-medium 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-medium 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="registerBtn"
                            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="registerText">Register</span>
                            <span id="registerLoader" 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>
                                Processing...
                            </span>
                        </button>
                    </form>
                    <form id="verificationForm" class="space-y-4" style="display: none;">
                        <p class="text-sm text-gray-600 mb-4">
                            Please enter the 4-digit verification code sent to your email.
                        </p>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Verification Code</label>
                            <input type="text" name="code" required maxlength="4" pattern="\d{4}"
                                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="verifyBtn"
                            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="verifyText">Verify</span>
                            <span id="verifyLoader" 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>
                                Verifying...
                            </span>
                        </button>
                    </form>
                    <p class="mt-4 text-center text-sm text-gray-600">
                        Already have an account?
                        <a href="/company/login" class="text-blue-500 hover:text-blue-700">Login here</a>
                    </p>
                </div>
                <div class="form-img ">
                    <img src="../../static/img/ai-technology-microchip-background-futuristic-innovation-technology-remix.jpg"
                        alt="">
                </div>
            </div>

            <!-- Verification Form -->
           
        </div>
    </div>

    <script>
        let companyId = '';

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

            // Get button elements
            const registerBtn = document.getElementById('registerBtn');
            const registerText = document.getElementById('registerText');
            const registerLoader = document.getElementById('registerLoader');

            // Show loading state
            registerBtn.disabled = true;
            registerText.classList.add('hidden');
            registerLoader.classList.remove('hidden');

            const formData = new FormData(e.target);

            try {
                const response = await fetch('/company/register', {
                    method: 'POST',
                    body: formData
                });

                const data = await response.json();

                if (data.success) {
                    companyId = data.company_id;
                    document.getElementById('registerForm').style.display = 'none';
                    document.getElementById('verificationForm').style.display = 'block';
                    alert(data.message);
                } else {
                    alert(data.error || 'Registration failed');
                }
            } catch (error) {
                alert('An error occurred during registration');
            } finally {
                // Reset button state
                registerBtn.disabled = false;
                registerText.classList.remove('hidden');
                registerLoader.classList.add('hidden');
            }
        });

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

            // Get button elements
            const verifyBtn = document.getElementById('verifyBtn');
            const verifyText = document.getElementById('verifyText');
            const verifyLoader = document.getElementById('verifyLoader');

            // Show loading state
            verifyBtn.disabled = true;
            verifyText.classList.add('hidden');
            verifyLoader.classList.remove('hidden');

            const formData = new FormData(e.target);
            formData.append('company_id', companyId);

            try {
                const response = await fetch('/company/verify', {
                    method: 'POST',
                    body: formData
                });

                const data = await response.json();

                if (data.success) {
                    alert('Email verified successfully!');
                    window.location.href = '/company/login';
                } else {
                    alert(data.error || 'Verification failed');
                }
            } catch (error) {
                alert('An error occurred during verification');
            } finally {
                // Reset button state
                verifyBtn.disabled = false;
                verifyText.classList.remove('hidden');
                verifyLoader.classList.add('hidden');
            }
        });
    </script>
</body>

</html>