<?php 
// সেশন স্টার্ট করা হচ্ছে এরর মেসেজ রিসিভ করার জন্য
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}
// হেডার ইনক্লুড করা হলো
include '../header.php'; 
?>

<!-- সম্পূর্ণ CSS ডিজাইন -->
<style>
    .signup-main-content { display: flex; justify-content: center; align-items: center; padding: 60px 20px; background-color: #f8fafc; min-height: 70vh; }
    .signup-card { background-color: #ffffff; width: 100%; max-width: 450px; padding: 40px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); font-family: 'Inter', sans-serif; }
    .signup-card h2 { text-align: center; color: #1e293b; margin-bottom: 10px; font-size: 26px; }
    .signup-card p.subtitle { text-align: center; color: #64748b; margin-bottom: 25px; font-size: 14px; }
    .alert { padding: 12px; border-radius: 6px; margin-bottom: 20px; font-size: 14px; text-align: center; font-weight: 500; word-wrap: break-word; }
    .alert-error { background-color: #fee2e2; color: #dc2626; border: 1px solid #fca5a5; }
    .btn-google { width: 100%; background-color: #ffffff; color: #1e293b; border: 1px solid #e2e8f0; padding: 12px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 10px; transition: all 0.3s; margin-bottom: 20px; }
    .btn-google:hover { background-color: #f1f5f9; }
    .btn-google img { width: 20px; }
    .divider { display: flex; align-items: center; text-align: center; margin-bottom: 20px; }
    .divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid #e2e8f0; }
    .divider span { padding: 0 15px; color: #64748b; font-size: 13px; font-weight: 500; text-transform: uppercase; }
    
    .form-group { margin-bottom: 16px; position: relative; text-align: left; }
    .form-group label { display: block; font-size: 13px; color: #1e293b; font-weight: 600; margin-bottom: 6px; }
    
    /* Input design adjusted for right side eye icon */
    .form-group input { width: 100%; padding: 12px 40px 12px 40px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; color: #1e293b; outline: none; box-sizing: border-box; transition: border-color 0.3s;}
    .form-group input:focus { border-color: #2ecc71; box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.1); }
    
    /* Left side icon */
    .form-group .left-icon { position: absolute; left: 15px; top: 38px; color: #94a3b8; font-size: 14px; }
    
    /* Right side eye icon for password */
    .form-group .toggle-password { position: absolute; right: 15px; top: 38px; color: #94a3b8; font-size: 15px; cursor: pointer; transition: color 0.3s; }
    .form-group .toggle-password:hover { color: #2ecc71; }

    .btn-submit { width: 100%; background-color: #2ecc71; color: #fff; border: none; padding: 14px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 10px; transition: all 0.3s; }
    .btn-submit:hover { background-color: #27ae60; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3); }
    .login-link { text-align: center; margin-top: 20px; font-size: 14px; color: #64748b; }
    .login-link a { color: #2ecc71; text-decoration: none; font-weight: 600; }
</style>

<main class="signup-main-content">
    <div class="signup-card">
        <h2>Create an Account</h2>
        <p class="subtitle">Join us to manage your invoices easily.</p>

        <!-- API থেকে আসা এরর মেসেজ দেখানোর জন্য -->
        <?php 
        if (isset($_SESSION['error'])) { 
            echo "<div class='alert alert-error'>" . $_SESSION['error'] . "</div>"; 
            unset($_SESSION['error']); // মেসেজ দেখানোর পর সেশন থেকে ডিলিট করে দেওয়া
        } 
        ?>

        <!-- গুগল লগইন বাটন -->
        <a href="/api/google-login.php" style="text-decoration: none;">
            <button type="button" class="btn-google">
                <img src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_%22G%22_logo.svg" alt="Google">
                Sign up with Google
            </button>
        </a>

        <div class="divider"><span>Or sign up with email</span></div>

        <!-- ফর্ম অ্যাকশনে নতুন API লিংক দেওয়া হয়েছে -->
        <form action="/api/auth/signup_api.php" method="POST">
            
            <div class="form-group">
                <label>Full Name</label>
                <i class="fas fa-user left-icon"></i>
                <input type="text" name="fullname" placeholder="Enter your full name" required>
            </div>
            
            <div class="form-group">
                <label>Username</label>
                <i class="fas fa-at left-icon"></i>
                <input type="text" name="username" placeholder="Choose a username" required>
            </div>
            
            <div class="form-group">
                <label>Email Address</label>
                <i class="fas fa-envelope left-icon"></i>
                <input type="email" name="email" placeholder="Enter your email" required>
            </div>
            
            <div class="form-group">
                <label>Password</label>
                <i class="fas fa-lock left-icon"></i>
                <input type="password" name="password" id="password" placeholder="Create a password" required minlength="6">
                <!-- চোখের আইকন -->
                <i class="fas fa-eye toggle-password" onclick="togglePassword('password', this)"></i>
            </div>
            
            <div class="form-group">
                <label>Confirm Password</label>
                <i class="fas fa-check-circle left-icon"></i>
                <input type="password" name="confirm_password" id="confirm_password" placeholder="Confirm your password" required minlength="6">
                <!-- চোখের আইকন -->
                <i class="fas fa-eye toggle-password" onclick="togglePassword('confirm_password', this)"></i>
            </div>
            
            <button type="submit" class="btn-submit">Sign Up</button>
        </form>

        <div class="login-link">Already have an account? <a href="/login">Log in here</a></div>
    </div>
</main>

<!-- পাসওয়ার্ড শো/হাইড করার জাভাস্ক্রিপ্ট -->
<script>
    function togglePassword(inputId, icon) {
        var input = document.getElementById(inputId);
        if (input.type === "password") {
            input.type = "text";
            icon.classList.remove("fa-eye");
            icon.classList.add("fa-eye-slash"); // চোখ কাটা আইকন
            icon.style.color = "#2ecc71"; // ক্লিক করলে কালার চেঞ্জ হবে
        } else {
            input.type = "password";
            icon.classList.remove("fa-eye-slash");
            icon.classList.add("fa-eye"); // স্বাভাবিক চোখের আইকন
            icon.style.color = "#94a3b8"; // আগের কালার ফিরে আসবে
        }
    }
</script>

<?php 
// ফুটার ইনক্লুড করা হলো
include '../footer.php'; 
?>