Vendor

<div class="vendor-registration-container">
    <!-- Header Section -->
    <div class="registration-header">
        <img src="<?php echo esc_url(get_template_directory_uri() . '/images/clickaam-logo.png'); ?>" alt="Clickaam Logo" class="logo">
        <h1>Become a Supplier on Clickaam</h1>
        <p>Join our marketplace and start selling to thousands of customers.</p>
    </div>

    <!-- Display errors if any -->
    <?php if (isset($errors) && is_wp_error($errors)): ?>
        <div class="woocommerce-error">
            <?php foreach ($errors->get_error_messages() as $message): ?>
                <p><?php echo esc_html($message); ?></p>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>

    <!-- Display success message if registration was successful -->
    <?php if (isset($registration_success)): ?>
        <div class="woocommerce-message">
            <p><?php echo esc_html($registration_success); ?></p>
        </div>
    <?php endif; ?>

    <!-- Registration Form -->
    <div class="registration-form">
        <form id="vendor-registration-form" method="post" enctype="multipart/form-data">
            <?php wp_nonce_field('vendor_registration_action', 'vendor_registration_nonce'); ?>
            
            <!-- Step 1: Basic Information -->
            <div class="form-step active" id="step-1">
                <h2><i class="fas fa-user"></i> Basic Information</h2>
                <div class="form-group">
                    <label for="username">Username *</label>
                    <input type="text" id="username" name="username" required>
                    <small>This will be your login name.</small>
                </div>
                <div class="form-group">
                    <label for="email">Email Address *</label>
                    <input type="email" id="email" name="email" required>
                </div>
                <div class="form-group">
                    <label for="password">Password *</label>
                    <input type="password" id="password" name="password" required>
                    <small>Minimum 8 characters with numbers & symbols.</small>
                </div>
                <div class="form-group">
                    <label for="first-name">First Name *</label>
                    <input type="text" id="first-name" name="first_name" required>
                </div>
                <div class="form-group">
                    <label for="last-name">Last Name *</label>
                    <input type="text" id="last-name" name="last_name" required>
                </div>
                <button type="button" class="btn-next" onclick="nextStep(2)">Next <i class="fas fa-arrow-right"></i></button>
            </div>

            <!-- Step 2: Store Information -->
            <div class="form-step" id="step-2">
                <h2><i class="fas fa-store"></i> Store Information</h2>
                <div class="form-group">
                    <label for="shop-name">Shop Name *</label>
                    <input type="text" id="shop-name" name="shop_name" required>
                    <small>This will appear as your store name.</small>
                </div>
                <div class="form-group">
                    <label for="shop-url">Shop URL *</label>
                    <div class="url-preview">
                        <span class="base-url"><?php echo esc_url(home_url('/store/')); ?></span>
                        <input type="text" id="shop-url" name="shop_url" required>
                    </div>
                </div>
                <div class="form-group">
                    <label for="phone">Phone Number *</label>
                    <input type="tel" id="phone" name="phone" required>
                    <small>For customer inquiries.</small>
                </div>
                <div class="form-group">
                    <label for="address">Business Address</label>
                    <textarea id="address" name="address" rows="3"></textarea>
                    <small>Optional for shipping purposes.</small>
                </div>
                <div class="form-actions">
                    <button type="button" class="btn-prev" onclick="prevStep(1)"><i class="fas fa-arrow-left"></i> Back</button>
                    <button type="button" class="btn-next" onclick="nextStep(3)">Next <i class="fas fa-arrow-right"></i></button>
                </div>
            </div>

            <!-- Step 3: Additional Details (Optional) -->
            <div class="form-step" id="step-3">
                <h2><i class="fas fa-id-card"></i> Additional Details</h2>
                <div class="form-group">
                    <label for="business-type">Business Type *</label>
                    <select id="business-type" name="business_type" required>
                        <option value="">Select...</option>
                        <option value="manufacturer">Manufacturer</option>
                        <option value="reseller">Reseller</option>
                        <option value="dropshipper">Dropshipper</option>
                        <option value="wholesaler">Wholesaler</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="business-license">Business License Number</label>
                    <input type="text" id="business-license" name="business_license">
                    <small>Required for wholesale suppliers.</small>
                </div>
                <div class="form-group">
                    <label for="product-category">Main Product Category *</label>
                    <select id="product-category" name="product_category" required>
                        <option value="">Select...</option>
                        <option value="fashion">Fashion & Apparel</option>
                        <option value="electronics">Electronics</option>
                        <option value="beauty">Beauty & Cosmetics</option>
                        <option value="home">Home & Living</option>
                        <option value="perfumes">Perfumes & Fragrances</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="years-in-business">Years in Business</label>
                    <input type="number" id="years-in-business" name="years_in_business" min="0">
                </div>
                <div class="form-group">
                    <label for="vendor-image">Profile Picture</label>
                    <input type="file" id="vendor-image" name="vendor_image" accept="image/*">
                </div>
                <div class="form-actions">
                    <button type="button" class="btn-prev" onclick="prevStep(2)"><i class="fas fa-arrow-left"></i> Back</button>
                    <button type="button" class="btn-next" onclick="nextStep(4)">Next <i class="fas fa-arrow-right"></i></button>
                </div>
            </div>

            <!-- Step 4: Terms & Submission -->
            <div class="form-step" id="step-4">
                <h2><i class="fas fa-file-signature"></i> Terms & Conditions</h2>
                <div class="terms-box">
                    <h3>Clickaam Vendor Agreement</h3>
                    <div class="terms-content">
                        <p>By registering as a vendor, you agree to:</p>
                        <ul>
                            <li>Provide accurate product information.</li>
                            <li>Process orders within 48 hours.</li>
                            <li>Follow Clickaam's commission structure (15% per sale).</li>
                            <li>Comply with return & refund policies.</li>
                        </ul>
                        <p>Full terms: <a href="<?php echo esc_url(home_url('/vendor-terms')); ?>" target="_blank">Vendor Terms & Conditions</a></p>
                    </div>
                    <div class="form-group checkbox-group">
                        <input type="checkbox" id="agree-terms" name="agree_terms" required>
                        <label for="agree-terms">I agree to the terms and conditions *</label>
                    </div>
                </div>
                <div class="form-actions">
                    <button type="button" class="btn-prev" onclick="prevStep(3)"><i class="fas fa-arrow-left"></i> Back</button>
                    <button type="submit" name="submit_vendor_registration" class="btn-submit">Submit Application</button>
                </div>
            </div>
        </form>
    </div>

    <!-- Benefits Section -->
    <div class="benefits-section">
        <h2>Why Sell on Clickaam?</h2>
        <div class="benefits-grid">
            <div class="benefit-card">
                <i class="fas fa-users"></i>
                <h3>Large Customer Base</h3>
                <p>Access thousands of buyers looking for unique products.</p>
            </div>
            <div class="benefit-card">
                <i class="fas fa-truck"></i>
                <h3>Easy Shipping</h3>
                <p>Integrated logistics support for hassle-free deliveries.</p>
            </div>
            <div class="benefit-card">
                <i class="fas fa-chart-line"></i>
                <h3>Growth Tools</h3>
                <p>Marketing & analytics to help your store succeed.</p>
            </div>
        </div>
    </div>
</div>

<script>
// Multi-step form navigation
function nextStep(step) {
    // Validate current step before proceeding
    if (validateStep(step - 1)) {
        document.querySelector(`#step-${step - 1}`).classList.remove('active');
        document.querySelector(`#step-${step}`).classList.add('active');
        window.scrollTo({top: 0, behavior: 'smooth'});
    }
}

function prevStep(step) {
    document.querySelector(`#step-${step + 1}`).classList.remove('active');
    document.querySelector(`#step-${step}`).classList.add('active');
    window.scrollTo({top: 0, behavior: 'smooth'});
}

// Validate current step before proceeding
function validateStep(step) {
    let isValid = true;
    const currentStep = document.querySelector(`#step-${step}`);
    const requiredFields = currentStep.querySelectorAll('[required]');
    
    requiredFields.forEach(field => {
        if (!field.value.trim()) {
            field.style.borderColor = 'red';
            isValid = false;
        } else {
            field.style.borderColor = '#ddd';
        }
    });
    
    if (!isValid) {
        alert('Please fill in all required fields before proceeding.');
    }
    
    return isValid;
}

// Auto-generate shop URL from shop name
document.getElementById('shop-name').addEventListener('input', function(e) {
    const shopName = e.target.value.trim().toLowerCase();
    const shopUrl = shopName.replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
    document.getElementById('shop-url').value = shopUrl;
});

// Password strength indicator (optional)
document.getElementById('password').addEventListener('input', function(e) {
    const password = e.target.value;
    const strengthIndicator = document.createElement('div');
    strengthIndicator.className = 'password-strength';
    
    // Remove existing indicator if present
    const existingIndicator = this.parentNode.querySelector('.password-strength');
    if (existingIndicator) {
        existingIndicator.remove();
    }
    
    if (password.length > 0) {
        let strength = 'Weak';
        let color = 'red';
        
        if (password.length >= 8 && /[0-9]/.test(password) && /[^A-Za-z0-9]/.test(password)) {
            strength = 'Strong';
            color = 'green';
        } else if (password.length >= 6) {
            strength = 'Medium';
            color = 'orange';
        }
        
        strengthIndicator.textContent = `Strength: ${strength}`;
        strengthIndicator.style.color = color;
        strengthIndicator.style.fontSize = '12px';
        strengthIndicator.style.marginTop = '5px';
        this.parentNode.appendChild(strengthIndicator);
    }
});
</script>