.-.-.-.-.-

<?php include 'header.php'; ?>
<style>
    /* Existing styles */
    .comparison {
        max-width: 940px;
        margin: 0 auto;
        font: 13px/1.4 "sans-serif";
        text-align: center;
        padding: 10px;
        margin-bottom: 37px;
    }
    .comparison table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        table-layout: fixed;
        border-bottom: 1px solid #CCC;
        border-left: 1px solid #ccc;
    }
    .comparison td, .comparison th {
        border-right: 1px solid #CCC;
        empty-cells: show;
        padding: 10px;
        text-align: center;
    }
    .compare-heading {
        font-size: 18px;
        font-weight: bold !important;
        border-bottom: 0 !important;
        padding-top: 10px !important;
    }
    .comparison tbody tr:nth-child(odd) {
        display: none;
    }
    .comparison .compare-row {
        background: #F5F5F5;
    }
    .comparison .tickblue {
        color: #0078C1;
    }
    .comparison .tickgreen {
        color: #009E2C;
    }
    .comparison th {
        font-weight: normal;
        padding: 0;
        border-bottom: 1px solid #CCC;
    }
    .comparison tr td:first-child {
        text-align: left;
    }
    .comparison .qbse, .comparison .qbo, .comparison .tl {
        color: #FFF;
        padding: 10px;
        font-size: 13px;
        border-right: 1px solid #CCC;
        border-bottom: 0;
    }
    .comparison .tl2 {
        border-right: 0;
    }
    .comparison .qbse {
        background: #0078C1;
        border-top-left-radius: 3px;
        border-left: 0px;
    }
    .comparison .qbo {
        background: #009E2C;
        border-top-right-radius: 3px;
        border-right: 0px;
    }
    .comparison .price-info {
        padding: 5px 15px 15px 15px;
    }
    .comparison .price-was {
        color: #999;
        text-decoration: line-through;
    }
    .comparison .price-now, .comparison .price-now span {
        color: black;
    }
    .comparison .price-now span {
        font-size: 32px;
    }
    .comparison .price-small {
        font-size: 18px !important;
        position: relative;
        top: -11px;
        left: 2px;
    }
    .comparison .price-buy {
        background: #FFBC09;
        padding: 10px 20px;
        font-size: 12px;
        display: inline-block;
        color: black;
        text-decoration: none;
        border-radius: 3px;
        text-transform: uppercase;
        margin: 5px 0 10px 0;
    }
    .comparison .price-try {
        font-size: 12px;
    }
    .comparison .price-try a {
        color: #202020;
    }
    @media (max-width: 767px) {
        .comparison td:first-child, .comparison th:first-child {
            display: none;
        }
        .comparison tbody tr:nth-child(odd) {
            display: table-row;
            background: #F7F7F7;
        }
        .comparison .row {
            background: #FFF;
        }
        .comparison td, .comparison th {
            border: 1px solid #CCC;
        }
        .price-info {
            border-top: 0 !important;
        }
    }
    @media (max-width: 639px) {
        .comparison .price-buy {
            padding: 5px 10px;
        }
        .comparison td, .comparison th {
            padding: 10px 5px;
        }
        .comparison .hide-mobile {
            display: none;
        }
        .comparison .price-now span {
            font-size: 16px;
        }
        .comparison .price-small {
            font-size: 16px !important;
            top: 0;
            left: 0;
        }
        .comparison .qbse, .comparison .qbo {
            font-size: 12px;
            padding: 10px 5px;
        }
        .comparison .price-buy {
            margin-top: 10px;
        }
        .compare-heading {
            font-size: 13px;
        }
    }
</style>
</br></br>
<div class="container">
    <h4 style="text-align: center; color: black; font-size:40px;">Set up your WTM ECommerce Store</h4>
    <center>
        <div>
            <button onclick="setPricingDuration('monthly')">Per month</button>
            <button onclick="setPricingDuration('yearly')"  style="background-color: #FFBC09;">Per year</button>
        </div>
        <div style="margin-top: 10px;">
            <select id="countrySelect" onchange="setPricing()">
                <option value="inr" selected>India</option>
                <option value="usd">United States</option>
                
            </select>
        </div>
    </center>
</div>
</br>
<div class="comparison">
    <table id="pricingTable">
        <thead>
            <tr>
                <th colspan="5"></th>
            </tr>
            <tr>
                <th class="tl"></th>
                <th class="compare-heading">Basic WTM Webshop</th>
                <th class="compare-heading">Professional WTM Webshop</th>
                <th class="compare-heading">Advance WTM Webshop</th>
                <th class="compare-heading">Enterprises WTM Webshop</th>
            </tr>
            <tr>
                <th></th>
                <th class="price-info">
                    <div class="price-now">
                        <p>All the basics of starting a new business</p>
                    </div>
                </th>
                <th class="price-info">
                    <div class="price-now">
                        <p>Everything you need for a growing business</p>
                    </div>
                </th>
                <th class="price-info">
                    <div class="price-now">
                        <p>Advanced features for scaling your business</p>
                    </div>
                </th>
                <th class="price-info">
                    <div class="price-now">
                        <p>Including all features of Advance Plan</p>
                    </div>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td colspan="4">Monthly Price</td>
            </tr>
            <tr class="compare-row">
                <td>Monthly Price</td>
                <td class="price-now" id="plan1"><span class="price-small">INR ₹<span class="price-medium">1500</span></span> /month</td>
                <td class="price-now" id="plan2"><span class="price-small">INR ₹<span class="price-medium">4000</span></span> /month</td>
                <td class="price-now" id="plan3"><span class="price-small">INR ₹<span class="price-medium">15000</span></span> /month</td>
                <td class="price-now" id="plan4"><span class="price-small">INR ₹<span class="price-medium">80000</span></span> /month</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td colspan="4">FEATURES</td>
            </tr>
            <tr>
                <td>Features</td>
                <td><a href="enquiry.php" class="price-buy">Try <span class="hide-mobile">It</span></a></td>
                <td><a href="enquiry.php" class="price-buy">Try <span class="hide-mobile">It</span></a></td>
                <td><a href="enquiry.php" class="price-buy">Try <span class="hide-mobile">It</span></a></td>
                <td><a href="enquiry.php" class="price-buy">Request <span class="hide-mobile"></span></a></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td colspan="4">Online E-Commerce Website</td>
            </tr>
            <tr class="compare-row">
                <td>Online E-Commerce Website</td>
                <td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
                <td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
                <td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
                <td>Including all advance WTM Webshop features.+<a href="enterpriseecommerce.php"> <span style="color: Blue">More Detail Click Here..</span></a></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td colspan="4">Unlimited Product</td>
            </tr>
            <tr class="compare-row">
                <td>Unlimited Product</td>
                <td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
                <td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
                <td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
                <td></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td colspan="4">Free SSL Certificate</td>
            </tr>
            <tr class="compare-row">
                <td>Free SSL Certificate</td>
                <td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
                <td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
                <td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
                <td></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td colspan="4">Payment Gateway</td>
            </tr>
            <tr class="compare-row">
                <td>Payment Gateway</td>
                <td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
                <td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
                <td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
                <td></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td colspan="4">Mobile App</td>
            </tr>
            <tr class="compare-row">
                <td>Mobile App</td>
                <td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
                <td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
                <td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
                <td></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td colspan="4">International Payment Gateway</td>
            </tr>
            <tr class="compare-row">
                <td>International Payment Gateway</td>
                <td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
                <td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
                <td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
                <td></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td colspan="4">Multivender Online Selling</td>
            </tr>
            <tr class="compare-row">
                <td>Multivender Online Selling</td>
                <td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
                <td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
                <td><center><img src="assets/images/1.png" style="max-width: 13%"></center></td>
                <td></td>
            </tr>
            
            
        </tbody>
    </table>
</div>

function setPricing(country, duration) {
    var selectedCountry = country || document.getElementById('countrySelect').value;
    var selectedDuration = duration || 'monthly'; // Default duration

var pricing = {
        'inr': {
            'monthly': [2000, 5000, 20000, 100000],
            'yearly': [1500, 4000, 15000,80000]
        },
        'usd': {
            'monthly': [30, 80, 300 ,1500],
            'yearly': [20, 60, 200 ,1000]
        }
    };

var prices = pricing[selectedCountry][selectedDuration];
    document.getElementById('plan1').innerHTML = '<span class="price-small">' + (selectedCountry === 'inr' ? 'INR ₹' : 'USD $') + '<span class="price-medium">' + prices[0] + '</span></span> /' + selectedDuration;
    document.getElementById('plan2').innerHTML = '<span class="price-small">' + (selectedCountry === 'inr' ? 'INR ₹' : 'USD $') + '<span class="price-medium">' + prices[1] + '</span></span> /' + selectedDuration;
    document.getElementById('plan3').innerHTML = '<span class="price-small">' + (selectedCountry === 'inr' ? 'INR ₹' : 'USD $') + '<span class="price-medium">' + prices[2] + '</span></span> /' + selectedDuration;
    document.getElementById('plan4').innerHTML = '<span class="price-small">' + (selectedCountry === 'inr' ? 'INR ₹' : 'USD $') + '<span class="price-medium">' + prices[3] + '</span></span> /' + selectedDuration;

}

window.onload = function() {
    setPricing();
};
window.onload = function() {
    setPricing(undefined, 'yearly');
};
</script>

<?php include 'footer.php'; ?>

/home2/wtmwscom/public_html/js/../static/../admin/../plan1.php