<?php
session_start();
require_once __DIR__ . '/../includes/functions.php';
require_once __DIR__ . '/../db/db.php';
require_once __DIR__ . '/../includes/locations.php';

$errors = $_SESSION['signup_errors'] ?? [];
unset($_SESSION['signup_errors']);

$success = $_SESSION['signup_success'] ?? '';
unset($_SESSION['signup_success']);

$field_errors = $_SESSION['signup_field_errors'] ?? [];
unset($_SESSION['signup_field_errors']);

$old = $_SESSION['signup_old_input'] ?? [];
unset($_SESSION['signup_old_input']);

$countries_map = get_countries($conn);
$countries_list = $countries_map ? array_keys($countries_map) : get_country_names($conn);
$selected_country = $old['country'] ?? 'India';
$states_list = get_locations($conn, $selected_country);

$preferred_countries = [
    'India',
    'United Arab Emirates',
    'United States',
    'Saudi Arabia',
    'Bahrain',
    'Qatar',
    'Oman',
    'Kuwait',
    'Canada',
];

$countries_list = array_values(array_unique(array_merge(
    $preferred_countries,
    array_values(array_filter($countries_list, static function ($country) use ($preferred_countries) {
        return !in_array($country, $preferred_countries, true);
    }))
)));

$phone_codes = [
    'India' => '+91',
    'United Arab Emirates' => '+971',
    'United States' => '+1',
    'Saudi Arabia' => '+966',
    'Bahrain' => '+973',
    'Qatar' => '+974',
    'Oman' => '+968',
    'Kuwait' => '+965',
    'Canada' => '+1',
];

$default_phone_code = $phone_codes[$selected_country] ?? '+91';
$selected_phone_code = $old['phone_code'] ?? $default_phone_code;
$datacenter_country = strtoupper($selected_country === 'India' ? 'INDIA' : $selected_country);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Start Your Free Trial</title>
<link rel="stylesheet" href="../assets/style.css">
<link rel="stylesheet" href="../assets/font-manrope.css">
<link rel="stylesheet" href="../assets/fontawesome/css/all.min.css">
</head>
<body class="procure-body">
<script>
window.PROCUREMENT_STATE_MAP = <?php echo json_encode($countries_map, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES); ?>;
window.PROCUREMENT_PHONE_CODES = <?php echo json_encode($phone_codes, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES); ?>;
</script>

<main class="procure-signup">
    <section class="signup-hero">
        <div class="hero-inner">
            <div class="hero-copy">
                <h1>Travel and Expense<br>management built for <span>businesses of all sizes</span></h1>
                <p>Experience the convenience of simplified travel booking, faster expense reporting, and effective cost control.</p>
                <div class="hero-actions">
                    <span class="play-badge" aria-hidden="true"><i class="fa-solid fa-play"></i></span>
                    <a href="#" class="hero-action-link">Watch Video</a>
                    <span class="hero-divider"></span>
                    <a href="#" class="hero-action-link">Request a demo <i class="fa-solid fa-arrow-right"></i></a>
                </div>
            </div>

            <div class="hero-stage" aria-live="polite">
                <div class="hero-slide active">
                    <div class="hero-card quote-card">
                        <blockquote>"Our procurement process has gone from heavy paper work and scattered to quick, organised, and easy to track. Approvals that used to get stuck in long email threads now happens very quickly."</blockquote>
                        <div class="quote-divider"></div>
                        <div class="quote-author">HARISH BASKAR</div>
                        <div class="quote-role">Manager, Nalandaway Foundation</div>
                    </div>
                </div>

                <div class="hero-slide">
                    <div class="hero-card feature-card">
                        <div class="feature-title">Automate your source-to-pay processes today.</div>
                        <div class="feature-list">
                            <div class="feature-item"><span class="feature-icon"><i class="fa-solid fa-clipboard-list"></i></span><span>Ease business purchases with automated workflows</span></div>
                            <div class="feature-item"><span class="feature-icon"><i class="fa-solid fa-handshake-angle"></i></span><span>Build lasting vendor relationships</span></div>
                            <div class="feature-item"><span class="feature-icon"><i class="fa-solid fa-arrow-trend-up"></i></span><span>Scale effortlessly with your business</span></div>
                        </div>
                    </div>
                </div>

                <div class="hero-dots" aria-hidden="true">
                    <span class="hero-dot active"></span>
                    <span class="hero-dot"></span>
                </div>
            </div>
        </div>

        <div class="trusted-strip"><span>TRUSTED BY ENTERPRISE BUSINESSES</span></div>
    </section>

    <section class="signup-panel">
        <div class="signup-card">
            <div class="brand-row">
                <div class="brand-mark" aria-hidden="true"></div>
                <div class="brand-copy">
                    <div class="brand-name">Zoho</div>
                    <div class="brand-sub">Procurement</div>
                </div>
            </div>

            <h2>Let's get started</h2>

            <?php if (!empty($errors)): ?>
                <div class="page-modal is-visible" data-page-modal>
                    <div class="page-modal-backdrop" data-page-modal-close></div>
                    <div class="page-modal-card" role="alertdialog" aria-modal="true" aria-labelledby="signupErrorTitle">
                        <button type="button" class="page-modal-close" data-page-modal-close aria-label="Close">
                            <i class="fa-solid fa-xmark"></i>
                        </button>
                        <div class="page-modal-icon">
                            <i class="fa-solid fa-circle-exclamation"></i>
                        </div>
                        <h3 id="signupErrorTitle">Please fix the highlighted fields</h3>
                        <ul class="page-modal-list">
                            <?php foreach ($errors as $error): ?>
                                <li><?php echo $error; ?></li>
                            <?php endforeach; ?>
                        </ul>
                    </div>
                </div>
            <?php endif; ?>

            <?php if (!empty($success)): ?>
                <div class="notice success"><?php echo htmlspecialchars($success); ?></div>
            <?php endif; ?>

            <form action="../signup_otp/signup_otp.php" method="POST" novalidate class="signup-form" data-procure-signup-form>
                <div class="field<?php echo !empty($field_errors['company_name']) ? ' is-invalid' : ''; ?>" data-field="company_name">
                    <label class="field-label" for="company_name">Business Name*</label>
                    <div class="field-box">
                        <i class="fa-solid fa-building field-icon"></i>
                        <input type="text" id="company_name" name="company_name" placeholder="" value="<?php echo htmlspecialchars($old['company_name'] ?? ''); ?>" required>
                    </div>
                    <p class="field-error" data-error-for="company_name"><?php echo $field_errors['company_name'] ?? ''; ?></p>
                </div>

                <div class="field<?php echo !empty($field_errors['email']) ? ' is-invalid' : ''; ?>" data-field="email">
                    <label class="field-label" for="email">Email*</label>
                    <div class="field-box">
                        <i class="fa-regular fa-envelope field-icon"></i>
                        <input type="email" id="email" name="email" value="<?php echo htmlspecialchars($old['email'] ?? ''); ?>" required>
                    </div>
                    <p class="field-error" data-error-for="email"><?php echo $field_errors['email'] ?? ''; ?></p>
                </div>

                <div class="field<?php echo !empty($field_errors['password']) ? ' is-invalid' : ''; ?>" data-field="password">
                    <label class="field-label" for="password">Password*</label>
                    <div class="field-box">
                        <i class="fa-solid fa-key field-icon"></i>
                        <input type="password" id="password" name="password" value="" required>
                    </div>
                    <p class="field-error" data-error-for="password"><?php echo $field_errors['password'] ?? ''; ?></p>
                </div>

                <div class="field<?php echo !empty($field_errors['phone']) ? ' is-invalid' : ''; ?>" data-field="phone">
                    <label class="field-label" for="phone">Phone Number*</label>
                    <div class="phone-row">
                        <div class="phone-code-wrap">
                            <i class="fa-solid fa-phone"></i>
                            <select id="signupPhoneCode" name="phone_code" class="phone-code" required>
                                <?php foreach (array_unique(array_values($phone_codes)) as $code): ?>
                                    <option value="<?php echo htmlspecialchars($code); ?>" <?php echo ($selected_phone_code === $code) ? 'selected' : ''; ?>><?php echo htmlspecialchars($code); ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <input type="text" id="phone" name="phone" placeholder="Phone Number*" value="<?php echo htmlspecialchars($old['phone'] ?? ''); ?>" maxlength="10" inputmode="numeric" required>
                    </div>
                    <p class="field-error" data-error-for="phone"><?php echo $field_errors['phone'] ?? ''; ?></p>
                </div>

                <div class="two-col">
                    <div class="field<?php echo !empty($field_errors['country']) ? ' is-invalid' : ''; ?>" data-field="country">
                        <label class="field-label" for="signupCountry">Country*</label>
                        <div class="select-box">
                            <i class="fa-solid fa-globe field-icon"></i>
                            <select id="signupCountry" name="country" required>
                                <?php foreach ($countries_list as $country): ?>
                                    <option value="<?php echo htmlspecialchars($country); ?>" <?php echo ($selected_country === $country) ? 'selected' : ''; ?>><?php echo htmlspecialchars($country); ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <p class="field-error" data-error-for="country"><?php echo $field_errors['country'] ?? ''; ?></p>
                    </div>

                    <div class="field<?php echo !empty($field_errors['state']) ? ' is-invalid' : ''; ?>" data-field="state">
                        <label class="field-label" for="signupState">State/Union Territory*</label>
                        <div class="select-box">
                            <i class="fa-solid fa-location-dot field-icon"></i>
                            <select id="signupState" name="state" required>
                                <option value="">Select State</option>
                                <?php foreach ($states_list as $state): ?>
                                    <option value="<?php echo htmlspecialchars($state); ?>" <?php echo (($old['state'] ?? '') === $state) ? 'selected' : ''; ?>><?php echo htmlspecialchars($state); ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <p class="field-error" data-error-for="state"><?php echo $field_errors['state'] ?? ''; ?></p>
                    </div>
                </div>

                <p class="signup-note" data-datacenter>Your data will be in <strong id="datacenterCountry"><?php echo htmlspecialchars($datacenter_country); ?></strong> data center. <a href="#" class="small-link">Change Country</a></p>

                <div class="field<?php echo !empty($field_errors['terms']) ? ' is-invalid' : ''; ?>" data-field="terms">
                    <label class="terms-row">
                        <input type="checkbox" name="terms" value="1" <?php echo !empty($old['terms']) ? 'checked' : ''; ?> required>
                        <span>I agree to the <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.</span>
                    </label>
                    <p class="field-error" data-error-for="terms"><?php echo $field_errors['terms'] ?? ''; ?></p>
                </div>

                <button type="submit" class="primary-btn">Create your account</button>
            </form>

            <div class="divider">or sign in using</div>
            <div class="social-row" aria-label="Social sign in">
                <a href="#" class="social-btn google" aria-label="Sign in with Google"><i class="fa-brands fa-google"></i></a>
                <a href="#" class="social-btn facebook" aria-label="Sign in with Facebook"><i class="fa-brands fa-facebook-f"></i></a>
                <a href="#" class="social-btn linkedin" aria-label="Sign in with LinkedIn"><i class="fa-brands fa-linkedin-in"></i></a>
                <a href="#" class="social-btn x" aria-label="Sign in with X"><i class="fa-brands fa-x-twitter"></i></a>
                <a href="#" class="social-btn azure" aria-label="Sign in with Microsoft"><i class="fa-brands fa-microsoft"></i></a>
            </div>
        </div>
    </section>
</main>

<div class="callback-pill" aria-hidden="true">
    <div class="callback-bubble">Request Callback</div>
    <div class="callback-circle"><i class="fa-solid fa-phone"></i></div>
</div>

<script>
window.PROCUREMENT_STATE_MAP = <?php echo json_encode($countries_map, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES); ?>;
window.PROCUREMENT_PHONE_CODES = <?php echo json_encode($phone_codes, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES); ?>;
</script>
<script defer src="../assets/app.js"></script>
</body>
</html>












