<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NexCore Pharma - Register</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/assets/css/style.css">
</head>
<body class="auth-body">

    <div class="login-container" style="max-width: 500px; opacity: 0; animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;">
        <div class="brand">
            <h1>Create Account</h1>
            <p>Setup your Pharmacy</p>
        </div>

        <?php
        $flash = \App\Utils\Flash::get();
        if ($flash):
        ?>
            <div class="flash-message flash-<?php echo htmlspecialchars($flash['type']); ?>">
                <?php echo htmlspecialchars($flash['message']); ?>
            </div>
        <?php endif; ?>

        <form action="/register/store" method="POST">
            <div class="input-group">
                <label for="tenant_name">Pharmacy Name</label>
                <input type="text" id="tenant_name" name="tenant_name" placeholder="Pharmacy Name" required>
            </div>

            <div class="input-group">
                <label for="admin_name">Admin Full Name</label>
                <input type="text" id="admin_name" name="admin_name" placeholder="John Doe" required>
            </div>

            <div class="input-group">
                <label for="email">Admin Email</label>
                <input type="email" id="email" name="email" placeholder="admin@nexcore.com" required>
            </div>
            
            <div class="input-group">
                <label for="password">Admin Password</label>
                <input type="password" id="password" name="password" placeholder="••••••••" required>
            </div>

            <button type="submit" class="btn-primary">Register & Setup</button>
            <p style="text-align: center; margin-top: 1rem; font-size: 0.9rem;">
                <a href="/login" style="color: var(--primary-color); text-decoration: none;">Already have an account? Login here.</a>
            </p>
        </form>
    </div>

    <script>
        // Auto-mark required fields with a red asterisk
        document.querySelectorAll('input[required], select[required], textarea[required]').forEach(element => {
            if(element.id) {
                const label = document.querySelector(`label[for="${element.id}"]`);
                if(label && !label.innerHTML.includes('req-mark')) {
                    label.innerHTML = label.innerHTML.replace(/\s*\*\s*$/, '') + ' <span class="req-mark" style="color: #ef4444;">*</span>';
                }
            }
        });
    </script>
</body>
</html>
