<section class="cart-pages-wrapper">
    <div class="container">
        <?php
            echo $this->partial('../partials/cartHeader.phtml', [
                'tempInformation' => $this->tempInformation,
                'step' => $this->step,
                'summary' => $this->summary,
                'bundled' => $this->bundled,
                'hasStep1' => true
            ]);
        ?>
        <div class="sec-head">
            <h2>
                <?php echo $this->user->lang('Select Product'); ?>
            </h2>
        </div>

        <?php
        foreach (array_chunk($this->packages, 4, true) as $packages) {
            switch(count($packages)) {
                case 1:
                    $colClass = 'one-col';
                    break;
                case 2:
                    $colClass = 'two-col';
                    break;
                case 3:
                    $colClass = 'three-col';
                    break;
                case 4:
                    $colClass = 'four-col';
                    break;
                default:
                    $colClass = 'four-col';
                    break;
            }
        ?>
        <div class="product-flex-wrapper <?php echo $colClass; ?>">
            <?php
                foreach ($packages as $index => $package) {
                    $continueButtonClass = '';
                    if ($package['stockControl'] == 1 && $package['stockLevel'] <= 0) {
                        $continueButtonClass = ' disabled';
                    }

                    $index++;
                    if (!is_array($package['pricing']) || count($package['pricing']) == 0) {
                        continue;
                    }
                    if ($index > 4) {
                        $index = 4;
                    }
            ?>
            <div class="product-flex-item<?php if ($package['highlight'] == 1) {?> highlight<?php } ?>">
                <div class="head">
                    <div class="title">
                        <h4>
                            <?php echo $package['plannamelanguage'];?>
                        </h4>
                    </div>
                    <div class="prod-icon">
                        <img src="templates/default/images/signup/prod-icon-<?php echo $index; ?>.png" class="img-fluid" alt="">
                    </div>
                    <h3>
                    <?php
                        echo $this->priceAdaptiveSize(
                            $package,
                            $this->user,
                            [
                                'hideSetupFees' => $this->hideSetupFees,
                                'monthlyPriceBreakdown' => $this->monthlyPriceBreakdown,
                                'showDiscountedPricingInBillingCycleSelector' => $this->showDiscountedPricingInBillingCycleSelector
                            ]
                        );
                    ?>
                     <?php
                        if ($package['stockLevel'] >= 0) {
                            if ($package['stockControl'] == 1) {
                                echo '<p>[ '.$this->user->lang("not available").' ]</p>';
                            } else {
                                echo '<p>[ '.$this->user->lang("%s available", $package['stockLevel']).' ]</p>';
                            }
                        }
                    ?>
                    </h3>
                </div>
                <div class="product-features">
                    <a href="<?php echo $package['nextUrl']; ?>" class="continue-button app-btns primary<?php echo $continueButtonClass; ?>">
                        <?php echo $this->user->lang('Order Now'); ?>
                    </a>
                    <div class="cm-listing">
                       <?php echo $package['assetHTMLlanguage'];?>
                    </div>
                </div>
            </div>
            <?php } ?>
        </div>
        <?php } ?>
    </div>
</section>

<script>
$('.continue-button').on('click', function(){
    if ($(this).hasClass('disabled')) {
        return false;
    }
})
</script>