{* /templates/orderforms/fusion_order/products.tpl *}
{include file="orderforms/fusion_order/header.tpl"}

<form id="frmConfigureProduct" method="post" action="cart.php?a=add" enctype="multipart/form-data">
    <input type="hidden" name="configure" value="true">
    <input type="hidden" name="pid" id="selectedPid" value="">
    <input type="hidden" name="billingcycle" id="billingcycle" value="monthly">
    
    <input type="hidden" name="configoption[1]" id="configoption_1" value=""> <input type="hidden" name="configoption[2]" id="configoption_2" value=""> <input type="hidden" name="configoption[3]" id="configoption_3" value=""> <input type="hidden" name="configoption[4]" id="configoption_4" value=""> <input type="hidden" name="configoption[5]" id="configoption_5" value=""> <input type="hidden" name="customfield[1]" id="customfield_1" value=""> <input type="hidden" name="customfield[2]" id="customfield_2" value=""> <input type="hidden" name="customfield[3]" id="customfield_3" value=""> <input type="hidden" name="customfield[4]" id="customfield_4" value=""> <input type="hidden" name="customfield[5]" id="customfield_5" value=""> <input type="hidden" name="firstname" id="firstname" value="">
    <input type="hidden" name="lastname" id="lastname" value="">
    <input type="hidden" name="email" id="email" value="">
    <input type="hidden" name="phonenumber" id="phonenumber" value="">
    <input type="hidden" name="address1" id="address1" value="">
    <input type="hidden" name="city" id="city" value="">
    <input type="hidden" name="postcode" id="postcode" value="">
    <input type="hidden" name="state" id="state" value="">
    <input type="hidden" name="country" id="country" value="ZA">
    <input type="hidden" name="password" id="password" value="">
    <input type="hidden" name="paymentmethod" id="paymentmethod" value="payfast">

    <div class="row">
        <div class="col-lg-8">
            <div class="content-body">
                <div id="stepContent"></div>
                <div class="navigation-buttons">
                    <button type="button" class="btn btn-outline-primary" id="prevBtn" onclick="previousStep()">
                        <i class="fas fa-arrow-left me-2"></i>Previous
                    </button>
                    <button type="button" class="btn btn-primary" id="nextBtn" onclick="nextStep()">
                        Next<i class="fas fa-arrow-right ms-2"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="price-summary" id="priceSummary">
                <h4><i class="fas fa-calculator me-2"></i>Order Summary</h4>
                <div id="summaryContent">
                    <div class="text-muted">Select a package to see pricing</div>
                </div>
            </div>
        </div>
    </div>
</form>

<script>
{literal}
    const productPIDs = {
{/literal}
    {foreach $products as $product}
        {if $product.name|strpos:"Basic" !== false} 'basic': '{$product.pid}',
        {elseif $product.name|strpos:"Business" !== false} 'business': '{$product.pid}',
        {elseif $product.name|strpos:"Enterprise" !== false} 'enterprise': '{$product.pid}',
        {/if}
    {/foreach}
{literal}
    };
    const didPrice = 25;

    let orderData = {
        step: 1, package: null, billing: 'monthly',
        did: { number: null, price: 0 },
        portNumber: null, extensions: 5, extensionDetails: [], addons: [],
        domainType: 'subdomain', subdomainName: '', customDomain: '',
        clientDetails: {}, paymentMethod: 'payfast',
        callingPlan: { text: '', price: 0, value: '' },
        pricing: { packagePrice: 0, extraExtensions: 0, extraExtensionsCost: 0, setup: 0, total: 0 }
    };

    const apiKey = 'FusionPBX2024SAKey';
    async function callApi(action, data = {}) {
        const params = new URLSearchParams({ api_key: apiKey, action: action, ...data });
        const response = await fetch(`/modules/addons/fusionpbx_manager/api.php?${params.toString()}`);
        if (!response.ok) {
            const errorData = await response.json().catch(() => ({ message: 'An unknown error occurred.' }));
            throw new Error(errorData.message || `API request failed with status ${response.status}`);
        }
        return response.json();
    }

    const steps = [
        { id: 1, name: 'Introduction', title: 'Welcome to FusionPBX', description: 'Complete VoIP business solution' },
        { id: 2, name: 'Package', title: 'Choose Your Package', description: 'Select the perfect plan for your business' },
        { id: 3, name: 'Numbers', title: 'Select Numbers', description: 'Choose or port your phone numbers' },
        { id: 4, name: 'Extensions', title: 'Setup Extensions', description: 'Configure your team extensions' },
        { id: 5, name: 'Add-ons', title: 'Add-on Features', description: 'Enhance your PBX with premium features' },
        { id: 6, name: 'Domain', title: 'Domain Setup', description: 'Configure your PBX domain' },
        { id: 7, name: 'Review', title: 'Review Order', description: 'Confirm your selections' },
        { id: 8, name: 'Details', title: 'Client Details', description: 'Your information and RICA compliance' },
        { id: 9, name: 'Checkout', title: 'Payment', description: 'Complete your order' }
    ];

    document.addEventListener('DOMContentLoaded', function() { initializeOrderform(); loadStep(1); });
    function initializeOrderform() {
        const el = document.getElementById('stepIndicator');
        if (!el) return;
        el.innerHTML = '';
        steps.forEach(step => {
            const div = document.createElement('div');
            div.className = 'step';
            div.innerHTML = `<div class="step-number">${step.id}</div><div class="step-title">${step.name}</div>`;
            el.appendChild(div);
        });
        updateStepIndicator(1);
    }

    function updateStepIndicator(currentStep) {
        document.querySelectorAll('.step-indicator .step').forEach((el, i) => {
            el.classList.remove('active', 'completed');
            if (i + 1 === currentStep) el.classList.add('active');
            else if (i + 1 < currentStep) el.classList.add('completed');
        });
    }

    function loadStep(stepNumber) {
        const step = steps.find(s => s.id === stepNumber);
        if (!step) return;
        orderData.step = stepNumber;
        document.getElementById('stepTitle').textContent = step.title;
        document.getElementById('stepDescription').textContent = step.description;
        updateStepIndicator(stepNumber);
        loadStepContent(stepNumber);
        updateNavigationButtons(stepNumber);
        updatePriceSummary();
    }

    function loadStepContent(stepNumber) {
        const div = document.getElementById('stepContent');
        switch(stepNumber) {
            case 1: div.innerHTML = getIntroductionContent(); break;
            case 2: div.innerHTML = getPackageSelectionContent(); break;
            case 3: div.innerHTML = getNumberSelectionContent(); loadProvinces(); break;
            case 4: div.innerHTML = getExtensionSetupContent(); break;
            case 5: div.innerHTML = getAddonsContent(); break;
            case 6: div.innerHTML = getDomainConfigContent(); break;
            case 7: div.innerHTML = getReviewContent(); break;
            case 8: div.innerHTML = getClientDetailsContent(); break;
            case 9: div.innerHTML = getCheckoutContent(); break;
        }
    }

    function nextStep() {
        if (validateCurrentStep()) {
            if (orderData.step < steps.length) loadStep(orderData.step + 1);
        }
    }

    function previousStep() {
        if (orderData.step > 1) loadStep(orderData.step - 1);
    }

    function updateNavigationButtons(stepNumber) {
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        prevBtn.style.display = stepNumber === 1 ? 'none' : 'inline-block';
        if (stepNumber === steps.length) {
            nextBtn.innerHTML = '<i class="fas fa-credit-card me-2"></i>Complete Order';
            nextBtn.onclick = processOrder;
        } else {
            nextBtn.innerHTML = 'Next<i class="fas fa-arrow-right ms-2"></i>';
            nextBtn.onclick = nextStep;
        }
    }

    function validateCurrentStep() {
        if (orderData.step === 8) {
            const requiredFields = ['firstname', 'lastname', 'email', 'phonenumber', 'address1', 'city', 'postcode', 'id_reference', 'poa_reference'];
            let allValid = true;
            for (const fieldId of requiredFields) {
                const field = document.getElementById(fieldId);
                if (!field || field.value.trim() === '') {
                    allValid = false;
                    if (field) field.classList.add('is-invalid');
                } else {
                    if (field) field.classList.remove('is-invalid');
                }
            }
            if (!allValid) { alert('Please fill in all required client details and RICA references.');
                return false; }
            // Validate RICA reference format
            const idReference = document.getElementById('id_reference').value;
            const poaReference = document.getElementById('poa_reference').value;
            if (!idReference.match(/^ID-\d{4}-.+$/)) {
                alert('ID Reference must be in format: ID-YYYY-Name (e.g., ID-2025-JohnDoe).');
                document.getElementById('id_reference').classList.add('is-invalid');
                return false;
            }
            if (!poaReference.match(/^POA-\d{4}-.+$/)) {
                alert('Proof of Address Reference must be in format: POA-YYYY-Name (e.g., POA-2025-JohnDoe).');
                document.getElementById('poa_reference').classList.add('is-invalid');
                return false;
            }
        }
        switch(orderData.step) {
            case 2: if (!orderData.package) { alert('Please select a package.');
                return false; } break;
            case 3: const choice = document.querySelector('input[name="numberChoice"]:checked');
                if (choice && choice.value === 'new' && !orderData.did.number) { alert('Please select a new number.'); return false;
                } if (choice && choice.value === 'port') { const portNum = document.getElementById('currentNumber').value;
                if (!portNum) { alert('Please enter the number to port.'); return false; } orderData.portNumber = portNum; } break;
        }
        return true;
    }

    function processOrder() {
        const terms = document.getElementById('finalTermsAccept');
        if (!terms || !terms.checked) {
            alert('You must agree to the Terms and Conditions.');
            return;
        }

        // Validate required fields
        if (!orderData.package) {
            alert('Please select a package.');
            return;
        }
        if (!orderData.did.number && !orderData.portNumber) {
            alert('Please select a DID number or enter a number to port.');
            return;
        }
        if (orderData.domainType === 'subdomain' && !orderData.subdomainName) {
            alert('Please enter a subdomain name.');
            return;
        }
        if (orderData.domainType === 'custom' && !orderData.customDomain) {
            alert('Please enter a custom domain.');
            return;
        }

        // Map data to server module expected field names
        document.getElementById('selectedPid').value = productPIDs[orderData.package] || 65;
        document.getElementById('billingcycle').value = orderData.billing || 'monthly';
        
        // Config options - aligned with server module
        document.getElementById('configoption_1').value = '1001'; // Starting Extension (fixed for now)
        document.getElementById('configoption_2').value = orderData.did.number ? 'Yes' : 'No'; // DID Numbers (Yes/No)
        document.getElementById('configoption_3').value = orderData.callingPlan.value || 'Local & Mobile'; // Calling Plan
        document.getElementById('configoption_4').value = orderData.addons.includes('ai_receptionist') ? 'Yes' : 'No'; // AI Receptionist
        document.getElementById('configoption_5').value = orderData.addons.includes('ai_receptionist') ? 50 : 0; // AI Credits
        
        // Custom fields - aligned with server module
        document.getElementById('customfield_1').value = orderData.did.number || ''; // DID Number
        document.getElementById('customfield_2').value = orderData.portNumber || ''; // Port Number (not used by module but keep)
        document.getElementById('customfield_3').value = orderData.domainType === 'subdomain' ? 
            (orderData.subdomainName + '.cloudprime.co.za') : orderData.customDomain || ''; // Domain Name
        document.getElementById('customfield_4').value = '1001'; // Primary Extension
        document.getElementById('customfield_5').value = Math.random().toString(36).slice(-8); // Extension Password
        
        // Client details
        document.getElementById('firstname').value = orderData.clientDetails.firstname || '';
        document.getElementById('lastname').value = orderData.clientDetails.lastname || '';
        document.getElementById('email').value = orderData.clientDetails.email || '';
        document.getElementById('phonenumber').value = orderData.clientDetails.phonenumber || '';
        document.getElementById('address1').value = orderData.clientDetails.address1 || '';
        document.getElementById('city').value = orderData.clientDetails.city || '';
        document.getElementById('postcode').value = orderData.clientDetails.postcode || '';
        document.getElementById('state').value = orderData.clientDetails.state || '';
        document.getElementById('password').value = Math.random().toString(36).slice(-10);
        document.getElementById('paymentmethod').value = 'payfast';

        // Debug log
        console.log('Submitting form with server module aligned data:', {
            pid: document.getElementById('selectedPid').value,
            configoptions: {
                1: document.getElementById('configoption_1').value,
                2: document.getElementById('configoption_2').value,
                3: document.getElementById('configoption_3').value,
                4: document.getElementById('configoption_4').value,
                5: document.getElementById('configoption_5').value
            },
            customfields: {
                1: document.getElementById('customfield_1').value,
                2: document.getElementById('customfield_2').value,
                3: document.getElementById('customfield_3').value,
                4: document.getElementById('customfield_4').value,
                5: document.getElementById('customfield_5').value
            }
        });

        // Submit the form
        document.getElementById('frmConfigureProduct').submit();
    }

    function updateCallingPlan(selectElement) {
        const selectedOption = selectElement.options[selectElement.selectedIndex];
        orderData.callingPlan.text = selectedOption.text;
        orderData.callingPlan.price = parseFloat(selectedOption.getAttribute('data-price')) || 0;
        orderData.callingPlan.value = selectedOption.value;
        updatePriceSummary();
    }

    function updatePriceSummary() {
        const summaryDiv = document.getElementById('summaryContent');
        if (!orderData.package) { summaryDiv.innerHTML = '<div class="text-muted">Select a package to see pricing</div>'; return;
        }
        calculatePricing();
        let html = '';
        html += `<div class="summary-line"><span>Package: ${getPackageName(orderData.package)}</span><span>R${orderData.pricing.packagePrice.toFixed(2)}</span></div>`;
        if (orderData.did.number && orderData.did.price > 0) {
            html += `<div class="summary-line"><span>DID Number (${orderData.did.number})</span><span>R${orderData.did.price.toFixed(2)}</span></div>`;
        }
        if (orderData.callingPlan.text && orderData.callingPlan.price > 0) {
            html += `<div class="summary-line"><span>${orderData.callingPlan.text.split(' (R')[0]}</span><span>R${orderData.callingPlan.price.toFixed(2)}</span></div>`;
        }
        if (orderData.pricing.extraExtensions > 0) {
            html += `<div class="summary-line"><span>Extra Extensions (${orderData.pricing.extraExtensions})</span><span>R${orderData.pricing.extraExtensionsCost.toFixed(2)}</span></div>`;
        }
        orderData.addons.forEach(addon => {
            html += `<div class="summary-line"><span>${getAddonName(addon)}</span><span>R${getAddonPrice(addon).toFixed(2)}</span></div>`;
        });
        if (orderData.pricing.setup > 0) {
            html += `<div class="summary-line"><span>Setup Fee</span><span>R${orderData.pricing.setup.toFixed(2)}</span></div>`;
        }
        html += `<hr><div class="summary-line total"><span>Monthly Total</span><span>R${orderData.pricing.total.toFixed(2)}</span></div>`;
        html += `<div class="mt-3"><small class="text-muted">Billed ${orderData.billing === 'annually' ? 'annually' : 'monthly'}</small></div>`;
        summaryDiv.innerHTML = html;
    }

    function calculatePricing() {
        const packages = { 'basic': { price: 299, setup: 0, extensions: 5 }, 'business': { price: 599, setup: 0, extensions: 15 }, 'enterprise': { price: 999, setup: 500, extensions: 50 } };
        const addonPrices = { 'ai_receptionist': 199, 'call_recording': 99, 'crm_integration': 99, 'click_to_call': 99 };
        const pkg = packages[orderData.package];
        let total = pkg.price;
        orderData.pricing.packagePrice = pkg.price;
        orderData.pricing.setup = pkg.setup;
        total += orderData.did.price || 0;
        total += orderData.callingPlan.price || 0;
        const extraExtensions = Math.max(0, orderData.extensions - pkg.extensions);
        orderData.pricing.extraExtensions = extraExtensions;
        orderData.pricing.extraExtensionsCost = extraExtensions * 25;
        total += orderData.pricing.extraExtensionsCost;
        orderData.addons.forEach(addon => { total += addonPrices[addon] || 0; });
        if (orderData.billing === 'annually') { total = total * 12 * 0.9;
        }
        orderData.pricing.total = total;
    }

    function getIntroductionContent() {
        return `
            <div class="text-center mb-5">
                <i class="fas fa-phone-alt fa-4x text-primary mb-4"></i>
                <h2 class="mb-4">Transform Your Business Communications</h2>
                <p class="lead text-muted">Complete VoIP PBX solution with AI-powered features, advanced analytics, and seamless integration capabilities.</p>
            </div>
            <div class="row g-4 mb-5">
                <div class="col-md-4">
                    <div class="text-center">
                        <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                            <i class="fas fa-users text-primary fa-lg"></i>
                        </div>
                        <h5>Multi-Extension Support</h5>
                        <p class="text-muted small">Support for unlimited extensions with advanced call routing</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="text-center">
                        <div class="bg-success bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                            <i class="fas fa-robot text-success fa-lg"></i>
                        </div>
                        <h5>AI Receptionist</h5>
                        <p class="text-muted small">Intelligent call handling with natural language processing</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="text-center">
                        <div class="bg-info bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                            <i class="fas fa-chart-line text-info fa-lg"></i>
                        </div>
                        <h5>Advanced Analytics</h5>
                        <p class="text-muted small">Comprehensive reporting and call analytics dashboard</p>
                    </div>
                </div>
            </div>
            <div class="alert alert-info">
                <i class="fas fa-info-circle me-2"></i><strong>What's Included:</strong> VoIP lines, IVR system, voicemail to email, call forwarding, mobile apps, web management portal, and 24/7 support.
            </div>
            <div class="text-center">
                <h4 class="mb-3">Ready to get started?</h4>
                <p class="text-muted">Let's configure the perfect VoIP solution for your business</p>
            </div>`;
    }

    function getPackageSelectionContent() {
        return `
            <div class="mb-4">
                <div class="row mb-4">
                    <div class="col-md-6">
                        <h3>Choose Your Package</h3>
                        <p class="text-muted">Select the plan that best fits your business needs</p>
                    </div>
                    <div class="col-md-6 text-end">
                        <div class="btn-group" role="group">
                            <input type="radio" class="btn-check" name="billing" id="monthly" value="monthly" ${orderData.billing === 'monthly' ? 'checked' : ''} onchange="updateBilling(this.value)">
                            <label class="btn btn-outline-primary" for="monthly">Monthly</label>
                            <input type="radio" class="btn-check" name="billing" id="annually" value="annually" ${orderData.billing === 'annually' ? 'checked' : ''} onchange="updateBilling(this.value)">
                            <label class="btn btn-outline-primary" for="annually">Annually <small>(10% off)</small></label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row g-4">
                <div class="col-lg-4">
                    <div class="package-card ${orderData.package === 'basic' ? 'selected' : ''}" onclick="selectPackage('basic', event)">
                        <div class="package-header">
                            <div class="package-name">Basic PBX</div>
                            <div class="package-price">R299<small>/month</small></div>
                        </div>
                        <ul class="feature-list">
                            <li>5 Extensions Included</li>
                            <li>1 DID Number</li>
                            <li>Basic IVR/Auto Attendant</li>
                            <li>Voicemail to Email</li>
                            <li>Call Forwarding</li>
                            <li>Basic Reporting</li>
                            <li>Local & Mobile Calling</li>
                            <li>Email Support</li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="package-card ${orderData.package === 'business' ? 'selected' : ''}" onclick="selectPackage('business', event)">
                        <div class="package-header">
                            <div class="package-name">Business PBX</div>
                            <div class="package-price">R599<small>/month</small></div>
                        </div>
                        <ul class="feature-list">
                            <li>15 Extensions Included</li>
                            <li>3 DID Numbers</li>
                            <li>Advanced IVR</li>
                            <li>National Calling Plan</li>
                            <li>Call Recording</li>
                            <li>Advanced Reporting</li>
                            <li>Email & Phone Support</li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="package-card ${orderData.package === 'enterprise' ? 'selected' : ''}" onclick="selectPackage('enterprise', event)">
                        <div class="package-header">
                            <div class="package-name">Enterprise PBX</div>
                            <div class="package-price">R999<small>/month</small></div>
                        </div>
                        <ul class="feature-list">
                            <li>50 Extensions Included</li>
                            <li>5 DID Numbers</li>
                            <li>Custom IVR</li>
                            <li>International Calling Plan</li>
                            <li>AI Receptionist (50 credits)</li>
                            <li>Enterprise Analytics</li>
                            <li>Priority Support</li>
                        </ul>
                    </div>
                </div>
            </div>`;
    }

    function getNumberSelectionContent() {
        return `
            <div class="mb-4">
                <h3>Select Your Phone Number</h3>
                <p class="text-muted">Choose a new number or port an existing one.</p>
            </div>
            <div class="form-section">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="numberChoice" id="newNumber" value="new" ${orderData.did.number ? 'checked' : ''} onchange="toggleNumberSelection(this.value)">
                            <label class="form-check-label" for="newNumber"><strong>Choose a New Number</strong><br><small class="text-muted">Select a new number for your PBX (R25/month)</small></label>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="numberChoice" id="portNumber" value="port" ${orderData.portNumber ? 'checked' : ''} onchange="toggleNumberSelection(this.value)">
                            <label class="form-check-label" for="portNumber"><strong>Port Existing Number</strong><br><small class="text-muted">Keep your current number (no additional cost)</small></label>
                        </div>
                    </div>
                </div>
            </div>
            <div id="newNumberSection" style="display:${orderData.did.number ? 'block' : 'none'};">
                <div class="form-section">
                    <h4><i class="fas fa-map-marker-alt me-2"></i>Select Number Location</h4>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Province</label>
                            <select class="form-control" id="provinceSelect" onchange="loadCities()">
                                <option value="">Select Province</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">City</label>
                            <select class="form-control" id="citySelect" onchange="loadAvailableNumbers()">
                                <option value="">Select City</option>
                            </select>
                        </div>
                    </div>
                    <div id="availableNumbers" class="mt-3"></div>
                </div>
            </div>
            <div id="portNumberSection" style="display:${orderData.portNumber ? 'block' : 'none'};">
                <div class="form-section">
                    <h4><i class="fas fa-phone me-2"></i>Port Your Number</h4>
                    <input type="text" class="form-control" id="currentNumber" placeholder="Enter number to port" value="${orderData.portNumber || ''}">
                    <div class="alert alert-info mt-3">
                        <i class="fas fa-info-circle me-2"></i>Number porting can take 7-14 days. We'll contact you to complete the process.
                    </div>
                </div>
            </div>`;
    }

    function getExtensionSetupContent() {
        const callingPlanOptions = [
            { value: 'Local & Mobile', text: 'Local & Mobile (R0)', price: 0 },
            { value: 'National', text: 'National (R99)', price: 99 },
            { value: 'International', text: 'International (R199)', price: 199 },
            { value: 'Global', text: 'Global (R299)', price: 299 }
        ];

        let optionsHtml = callingPlanOptions.map(opt => `<option value="${opt.value}" data-price="${opt.price}">${opt.text}</option>`).join('');

        return `
            <div class="mb-4">
                <h3>Configure Extensions & Calling Plan</h3>
                <p class="text-muted">Set up your extensions and choose a calling plan.</p>
            </div>
            <div class="form-section">
                <h4><i class="fas fa-users me-2"></i>Number of Extensions</h4>
                <div class="input-group mb-3" style="max-width: 200px;">
                    <button class="btn btn-outline-secondary" type="button" onclick="changeExtensions(-1)">-</button>
                    <input type="text" class="form-control text-center" id="extensionCount" value="${orderData.extensions}" oninput="updateExtensions(this.value)">
                    <button class="btn btn-outline-secondary" type="button" onclick="changeExtensions(1)">+</button>
                </div>
                <div id="extensionList">${generateExtensionInputs()}</div>
            </div>
            <div class="form-section">
                <h4><i class="fas fa-phone-volume me-2"></i>Calling Plan</h4>
                <select class="form-select" onchange="updateCallingPlan(this)">
                    ${optionsHtml}
                </select>
            </div>`;
    }

    function getAddonsContent() {
        return `
            <div class="mb-4">
                <h3>Enhance Your PBX</h3>
                <p class="text-muted">Supercharge your system with these powerful add-ons.</p>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="addon-card ${orderData.addons.includes('ai_receptionist')?'selected':''}" onclick="toggleAddon('ai_receptionist', event)">
                        <h5><i class="fas fa-robot text-primary me-2"></i>AI Receptionist</h5>
                        <p class="small text-muted">Intelligent, 24/7 call routing using natural language. Includes 50 credits.</p>
                        <strong>R199/month</strong>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="addon-card ${orderData.addons.includes('call_recording')?'selected':''}" onclick="toggleAddon('call_recording', event)">
                        <h5><i class="fas fa-microphone-alt text-success me-2"></i>Call Recording</h5>
                        <p class="small text-muted">Record all incoming and outgoing calls for compliance and training.</p>
                        <strong>R99/month</strong>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="addon-card ${orderData.addons.includes('crm_integration')?'selected':''}" onclick="toggleAddon('crm_integration', event)">
                        <h5><i class="fas fa-cogs text-info me-2"></i>CRM Integration</h5>
                        <p class="small text-muted">Connect with popular CRMs like HubSpot and Salesforce.</p>
                        <strong>R99/month</strong>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="addon-card ${orderData.addons.includes('click_to_call')?'selected':''}" onclick="toggleAddon('click_to_call', event)">
                        <h5><i class="fas fa-headset text-warning me-2"></i>Click-to-Call</h5>
                        <p class="small text-muted">WebRTC Softphone for web-based or desktop calling.</p>
                        <strong>R99/month</strong>
                    </div>
                </div>
            </div>`;
    }

    function getDomainConfigContent() {
        return `
            <div class="mb-4">
                <h3>Configure Your PBX Address</h3>
                <p class="text-muted">This will be the web address you use to log in and manage your PBX.</p>
            </div>
            <div class="form-section">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="domainChoice" id="subdomain" value="subdomain" ${orderData.domainType==='subdomain'?'checked':''} onchange="updateDomainType(this.value)">
                            <label class="form-check-label" for="subdomain"><strong>Use a free subdomain</strong><br><small class="text-muted">e.g., yourcompany.cloudprime.co.za</small></label>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="domainChoice" id="customDomain" value="custom" ${orderData.domainType==='custom'?'checked':''} onchange="updateDomainType(this.value)">
                            <label class="form-check-label" for="customDomain"><strong>Use your own domain</strong><br><small class="text-muted">e.g., pbx.yourcompany.co.za</small></label>
                        </div>
                    </div>
                </div>
            </div>
            <div id="subdomainSection" style="display:${orderData.domainType==='subdomain'?'block':'none'};">
                <div class="form-section">
                    <h4><i class="fas fa-link me-2"></i>Choose Your Subdomain</h4>
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="yourcompany" onkeyup="updateSubdomain(this.value)" value="${orderData.subdomainName||''}">
                        <span class="input-group-text">.cloudprime.co.za</span>
                    </div>
                </div>
            </div>
            <div id="customDomainSection" style="display:${orderData.domainType==='custom'?'block':'none'};">
                <div class="form-section">
                    <h4><i class="fas fa-globe me-2"></i>Enter Your Custom Domain</h4>
                    <input type="text" class="form-control" placeholder="pbx.yourcompany.co.za" onkeyup="updateCustomDomain(this.value)" value="${orderData.customDomain||''}">
                    <div class="alert alert-info mt-3">
                        <i class="fas fa-info-circle me-2"></i>You will need to create a CNAME DNS record pointing to our servers. Instructions will be provided.
                    </div>
                </div>
            </div>`;
    }

    function getClientDetailsContent() {
        return `
            <div class="form-section">
                <h4><i class="fas fa-user-circle me-2"></i>Personal Details</h4>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">First Name</label>
                        <input type="text" id="firstname" class="form-control" value="${orderData.clientDetails.firstname || ''}" onchange="orderData.clientDetails.firstname = this.value; document.getElementById('firstname').value = this.value">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Last Name</label>
                        <input type="text" id="lastname" class="form-control" value="${orderData.clientDetails.lastname || ''}" onchange="orderData.clientDetails.lastname = this.value; document.getElementById('lastname').value = this.value">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Email Address</label>
                        <input type="email" id="email" class="form-control" value="${orderData.clientDetails.email || ''}" onchange="orderData.clientDetails.email = this.value; document.getElementById('email').value = this.value">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Phone Number</label>
                        <input type="tel" id="phonenumber" class="form-control" value="${orderData.clientDetails.phonenumber || ''}" onchange="orderData.clientDetails.phonenumber = this.value; document.getElementById('phonenumber').value = this.value">
                    </div>
                </div>
            </div>
            <div class="form-section">
                <h4><i class="fas fa-map-marker-alt me-2"></i>Physical Address</h4>
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label">Street Address</label>
                        <input type="text" id="address1" class="form-control" value="${orderData.clientDetails.address1 || ''}" onchange="orderData.clientDetails.address1 = this.value; document.getElementById('address1').value = this.value">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">City</label>
                        <input type="text" id="city" class="form-control" value="${orderData.clientDetails.city || ''}" onchange="orderData.clientDetails.city = this.value; document.getElementById('city').value = this.value">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Postal Code</label>
                        <input type="text" id="postcode" class="form-control" value="${orderData.clientDetails.postcode || ''}" onchange="orderData.clientDetails.postcode = this.value; document.getElementById('postcode').value = this.value">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Province</label>
                        <input type="text" id="state" class="form-control" value="${orderData.clientDetails.state || ''}" onchange="orderData.clientDetails.state = this.value; document.getElementById('state').value = this.value">
                    </div>
                </div>
            </div>
            <div class="form-section">
                <h4><i class="fas fa-id-card me-2"></i>RICA Compliance</h4>
                <p class="text-muted">Enter references for ID/Passport and Proof of Address. Upload documents in the <a href="https://manage.cloudprime.co.za/clientarea.php?action=addticket" target="_blank">Client Area</a> (Subject: "RICA Document Upload").</p>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">ID/Passport Reference</label>
                        <input type="text" id="id_reference" class="form-control" placeholder="e.g., ID-2025-JohnDoe" value="${orderData.clientDetails.id_reference || ''}" onchange="orderData.clientDetails.id_reference = this.value; document.getElementById('customfield_id_reference').value = this.value">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Proof of Address Reference</label>
                        <input type="text" id="poa_reference" class="form-control" placeholder="e.g., POA-2025-JohnDoe" value="${orderData.clientDetails.poa_reference || ''}" onchange="orderData.clientDetails.poa_reference = this.value; document.getElementById('customfield_poa_reference').value = this.value">
                    </div>
                </div>
            </div>`;
    }

    function getCheckoutContent() {
        return `
            <div class="mb-4">
                <h3>Complete Your Order</h3>
                <p class="text-muted">Final step! Choose your payment method.</p>
            </div>
            <div class="form-section">
                <h4><i class="fas fa-credit-card me-2"></i>Payment Method</h4>
                <p class="text-muted">Payment capture will occur on the invoice page after your order is placed.</p>
            </div>
            <div class="form-check mt-4">
                <input type="checkbox" value="" id="finalTermsAccept">
                <label class="form-check-label" for="finalTermsAccept">I have read and agree to the <a href="https://manage.cloudprime.co.za/terms" target="_blank">Terms and Conditions</a>.</label>
            </div>`;
    }

    function getReviewContent() {
        let summaryHtml = `
            <div class="form-section">
                <h4><i class="fas fa-box me-2"></i>Package</h4>
                <div class="d-flex justify-content-between"><span>${getPackageName(orderData.package)} (${orderData.billing})</span> <span>R${getPackagePrice(orderData.package)}</span></div>
            </div>`;
        if (orderData.callingPlan.text) {
            summaryHtml += `
                <div class="form-section">
                    <h4><i class="fas fa-phone-volume me-2"></i>Calling Plan</h4>
                    <div class="d-flex justify-content-between"><span>${orderData.callingPlan.text}</span> <span>R${orderData.callingPlan.price.toFixed(2)}</span></div>
                </div>`;
        }
        summaryHtml += `
            <div class="form-section">
                <h4><i class="fas fa-phone me-2"></i>Number</h4>
                <div class="d-flex justify-content-between"><span>${orderData.did.number?'New Number':'Ported Number'}</span> <span>${orderData.did.number||orderData.portNumber}</span></div>
            </div>
            <div class="form-section">
                <h4><i class="fas fa-users me-2"></i>Extensions</h4>
                <div class="d-flex justify-content-between"><span>Total Extensions</span> <span>${orderData.extensions}</span></div>
            </div>`;
        if (orderData.addons.length > 0) {
            summaryHtml += `
                <div class="form-section">
                    <h4><i class="fas fa-puzzle-piece me-2"></i>Add-ons</h4>
                    ${orderData.addons.map(a => `<div class="d-flex justify-content-between"><span>${getAddonName(a)}</span> <span>R${getAddonPrice(a)}</span></div>`).join('')}
                </div>`;
        }
        summaryHtml += `
            <div class="form-section">
                <h4><i class="fas fa-globe me-2"></i>Domain</h4>
                <div class="d-flex justify-content-between"><span>PBX Address</span> <span>${orderData.domainType==='subdomain'?(orderData.subdomainName||'yourcompany')+'.cloudprime.co.za':orderData.customDomain}</span></div>
            </div>
            <div class="alert alert-warning">
                <i class="fas fa-exclamation-triangle me-2"></i>Please review your order carefully before proceeding.
            </div>`;
        return summaryHtml;
    }

    function toggleNumberSelection(value) {
        document.getElementById('newNumberSection').style.display = value === 'new' ? 'block' : 'none';
        document.getElementById('portNumberSection').style.display = value === 'port' ? 'block' : 'none';
    }

    function selectPackage(packageId, event) {
        orderData.package = packageId;
        orderData.extensions = getPackageExtensions(packageId);
        const pid = productPIDs[packageId];
        if (pid) document.getElementById('selectedPid').value = pid;
        document.querySelectorAll('.package-card').forEach(c => c.classList.remove('selected'));
        event.currentTarget.classList.add('selected');
        updatePriceSummary();
    }

    function updateBilling(value) {
        orderData.billing = value;
        updatePriceSummary();
    }

    function updateClientDetails(field, value) {
        orderData.clientDetails[field] = value;
        const hiddenInput = document.getElementById('hidden_' + field);
        if (hiddenInput) hiddenInput.value = value;
    }

    function getPackageName(id) { return {basic: 'Basic PBX', business: 'Business PBX', enterprise: 'Enterprise PBX'}[id] || id; }
    function getAddonName(id) { return {ai_receptionist: 'AI Receptionist', call_recording: 'Call Recording', crm_integration: 'CRM Integration', click_to_call: 'Click-to-Call'}[id] || id; }
    function getAddonPrice(id) { return {ai_receptionist: 199, call_recording: 99, crm_integration: 99, click_to_call: 99}[id] || 0; }
    function getPackagePrice(id) { return {basic: 299, business: 599, enterprise: 999}[id] || 0; }
    function getPackageExtensions(id) { return {basic: 5, business: 15, enterprise: 50}[id] || 5; }

    function toggleAddon(addonId, event) {
        const i = orderData.addons.indexOf(addonId);
        if (i > -1) orderData.addons.splice(i, 1);
        else orderData.addons.push(addonId);
        event.currentTarget.classList.toggle('selected');
        updatePriceSummary();
    }

    function updateDomainType(type) {
        orderData.domainType = type;
        document.getElementById('subdomainSection').style.display = type === 'subdomain' ? 'block' : 'none';
        document.getElementById('customDomainSection').style.display = type === 'custom' ? 'block' : 'none';
    }

    function updateSubdomain(value) { orderData.subdomainName = value; }
    function updateCustomDomain(value) { orderData.customDomain = value; }

    function generateExtensionInputs() {
        let html = '';
        const count = Math.min(5, orderData.extensions);
        for (let i = 0; i < count; i++) {
            const ext = orderData.extensionDetails[i] || {};
            html += `
                <div class="extension-input-group">
                    <div class="row align-items-center">
                        <div class="col-md-3">
                            <label class="form-label d-block d-md-none">Ext.</label>
                            <input type="text" class="form-control" value="${1000 + i}" disabled>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Name</label>
                            <input type="text" class="form-control" placeholder="e.g. John Smith" value="${ext.name || ''}" onchange="updateExtensionDetails(${i}, 'name', this.value)">
                        </div>
                        <div class="col-md-5">
                            <label class="form-label">Email (for Voicemail)</label>
                            <input type="email" class="form-control" placeholder="john@company.com" value="${ext.email || ''}" onchange="updateExtensionDetails(${i}, 'email', this.value)">
                        </div>
                    </div>
                </div>`;
        }
        if (orderData.extensions > 5) {
            html += `<div class="alert alert-info mt-3"><i class="fas fa-info-circle me-2"></i> Remaining ${orderData.extensions - 5} extensions will be configured after setup.</div>`;
        }
        return html;
    }

    function changeExtensions(delta) {
        const newCount = Math.max(1, orderData.extensions + delta);
        updateExtensions(newCount);
    }

    function updateExtensions(count) {
        orderData.extensions = Math.max(1, parseInt(count) || 1);
        document.getElementById('extensionCount').value = orderData.extensions;
        document.getElementById('extensionList').innerHTML = generateExtensionInputs();
        updatePriceSummary();
    }

    function updateExtensionDetails(index, field, value) {
        while (orderData.extensionDetails.length <= index) orderData.extensionDetails.push({});
        orderData.extensionDetails[index][field] = value;
    }

    async function loadProvinces() {
        try {
            const select = document.getElementById('provinceSelect');
            select.innerHTML = '<option value="">Loading Provinces...</option>';
            const result = await callApi('getProvinces');
            if (result.status === 'success') {
                select.innerHTML = '<option value="">Select Province</option>';
                result.data.forEach(p => {
                    select.innerHTML += `<option value="${p.name}">${p.name}</option>`;
                });
            } else {
                select.innerHTML = '<option value="">Error loading provinces</option>';
                console.error('API Error:', result.message);
            }
        } catch (error) {
            console.error('Error fetching provinces:', error);
            document.getElementById('provinceSelect').innerHTML = '<option value="">Error loading provinces</option>';
        }
    }

    async function loadCities() {
        try {
            const province = document.getElementById('provinceSelect').value;
            const select = document.getElementById('citySelect');
            select.innerHTML = '<option value="">Loading Cities...</option>';
            document.getElementById('availableNumbers').innerHTML = '';
            if (!province) {
                select.innerHTML = '<option value="">Select Province First</option>';
                return;
            }
            const result = await callApi('getCities', { province: province });
            if (result.status === 'success') {
                select.innerHTML = '<option value="">Select City</option>';
                result.data.forEach(c => {
                    select.innerHTML += `<option value="${c.name}">${c.name}</option>`;
                });
            } else {
                select.innerHTML = '<option value="">Error loading cities</option>';
                console.error('API Error:', result.message);
            }
        } catch (error) {
            console.error('Error fetching cities:', error);
            document.getElementById('citySelect').innerHTML = '<option value="">Error loading cities</option>';
        }
    }

    async function loadAvailableNumbers() {
        try {
            const city = document.getElementById('citySelect').value;
            const div = document.getElementById('availableNumbers');
            div.innerHTML = '<div class="text-center p-3">Loading numbers...</div>';
            if (!city) {
                div.innerHTML = '';
                return;
            }
            const result = await callApi('getDIDs', { city: city });
            let html = '';
            if (result.status === 'success' && result.data.length > 0) {
                result.data.forEach(n => {
                    html += `
                        <div class="did-option" onclick="selectDID('${n.did_number}', this)">
                            <div class="did-number">${n.did_number}</div>
                            <div class="did-location">${n.city || ''}, ${n.province || ''}</div>
                        </div>`;
                });
            } else {
                html = '<div class="alert alert-warning">No available numbers found for this city.</div>';
            }
            div.innerHTML = html;
        } catch (error) {
            console.error('Error fetching DIDs:', error);
            document.getElementById('availableNumbers').innerHTML = '<div class="alert alert-danger">Could not load numbers. Please try again.</div>';
        }
    }

    function selectDID(number, element) {
        orderData.did.number = number;
        orderData.did.price = didPrice;
        document.getElementById('customfield_did_number').value = number;
        document.querySelectorAll('.did-option').forEach(o => o.classList.remove('selected'));
        element.classList.add('selected');
        updatePriceSummary();
        // Note: reserveDID is not implemented in api.php, so skipping this call
        // callApi('reserveDID', { did: number }).then(r => {
        //     if (r.status === 'success') console.log(`DID ${number} reserved.`);
        //     else console.error('Failed to reserve DID:', r.message);
        // });
    }
{/literal}
</script>

<style>
{literal}
.package-card { border: 1px solid #ddd; border-radius: 5px; padding: 15px; cursor: pointer; transition: all 0.3s; }
.package-card:hover, .package-card.selected { border-color: #007bff; background: #f8f9fa; }
.package-header { display: flex; justify-content: space-between; align-items: center; }
.package-name { font-size: 1.2em; font-weight: bold; }
.package-price { font-size: 1.1em; color: #28a745; }
.feature-list { list-style: none; padding: 0; margin: 10px 0; }
.feature-list li { padding: 5px 0; font-size: 0.9em; }
.addon-card { border: 1px solid #ddd; border-radius: 5px; padding: 15px; margin-bottom: 15px; cursor: pointer; }
.addon-card:hover, .addon-card.selected { border-color: #007bff; background: #f8f9fa; }
.did-option { border: 1px solid #ddd; border-radius: 5px; padding: 10px; margin-bottom: 10px; cursor: pointer; }
.did-option:hover, .did-option.selected { background: #e9ecef; }
.did-number { font-weight: bold; }
.did-location { font-size: 0.9em; color: #6c757d; }
.extension-input-group { margin-bottom: 15px; }
.form-section { margin-bottom: 20px; }
.summary-line { display: flex; justify-content: space-between; margin-bottom: 5px; }
.summary-line.total { font-weight: bold; font-size: 1.1em; }
.is-invalid { border-color: #dc3545 !important; }
{/literal}
</style>

{include file="orderforms/fusion_order/footer.tpl"}