<?php //p($item); 

$merchantInfo = $this->session->userdata('merchantInfo');
//print_r();
?>
<style>
        .modal-content {
            position: relative;
        }

        .modal-body {
            padding-bottom: 60px; /* Space for the footer */
            overflow-y: auto; /* Allow scrolling for long content */
            max-height: 400px; /* Adjust as needed */
        }

        .modal-footer {
            position: sticky; /* or fixed */
            bottom: 0;
            background-color: white; /* Background color for visibility */
            padding: 10px;
            z-index: 10; /* Keep above other elements */
        }

        .addon-item-scroll {
            max-height: 250px; /* Set a height for scrolling */
            overflow-y: auto; /* Enable vertical scrolling */
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px; /* Optional: for better aesthetics */
        }

        /* Add scrollbar styles for mobile */
        @media (max-width: 768px) {
            .addon-item-scroll {
                max-height: 200px; /* Adjust the max height for mobile */
            }
        }

        .food-item-actions {
            display: flex;
            justify-content: space-between;
        }
    </style>
<form method="post" action="menu/addtocart" onsubmit="event.preventDefault();menu.addToCart(this)">
    <input type="hidden" value="<?= $merchantInfo['merchant_id']; ?>" name="merchant_id" id="merchant_id">
    <input type="hidden" value="<?= $item['cat_id']; ?>" name="category_id" id="category_id">
    <input type="hidden" value="<?= $item['data']['item_id'];  ?>" name="item_id" id="item_id">
    <input type="hidden" value="0" name="promo_id" id="promo_id">
    <input type="hidden" value="<?= (isset($item['cart_data']['row'])) ? $item['cart_data']['row'] : '';  ?>" name="row" id="row">
    
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <div class="row">
                    <div class="closeFood_Item"><i class="fa fa-times" aria-hidden="true" data-dismiss="modal"></i></div>
                    <div class="col-md-3" style="display:none;">
                        <img src="<?= $item['data']['photo']; ?>" alt="<?= $item['data']['item_name']; ?>" class="logo-small">
                    </div>
                    <div class="col-md-9 centertitle">
                        <p class="bold title"><?= $item['data']['item_name']; ?></p>
                    </div>
                </div>
            </div>
            <div class="modal-body">
                <div class="section-label">
                    <a class="section-label-a center">
                        <span class="pheads">Price</span>
                        <b></b>
                    </a>
                    <div class="row">
                        <?php
                        foreach ($item['data']['prices'] as $key => $p) {
                            $checked = (!$key) ? 'checked' : '';
                            if (isset($item['cart_data']['price']) && $item['cart_data']['price'] == $p['price']) {
                                $checked = 'checked';
                            }
                            $size_id = isset($p['size_id']) ? $p['size_id'] : '';
                        ?>
                            <div class="col-md-5 cust-prise">
                                <input value="<?= $p['price'] . "|" . $p['size'] . "|" . $size_id ?>" <?= $checked ?> required class="price_cls item_price" type="radio" name="price" id="price">
                                <?= $p['size'] . $_SESSION['settings']['currency_symbol'] . $p['price']; ?>
                            </div>
                        <?php } ?>
                    </div>
                </div>

                <div class="section-label cust-qunt">
                    <a class="section-label-a center">
                        <span class="pheads">Quantity</span>
                        <b></b>
                    </a>
                    <div class="row cust-btn">
                        <div class="col-md-1 col-xs-1 border into-row">
                            <a href="javascript:;" class="green-button inline qty-minus"><i class="ion-minus"></i></a>
                        </div>
                        <div class="col-md-2 col-xs-2 border into-row">
                            <input class="uk-form-width-mini numeric_only qty" value="<?= (!empty($item['cart_data']['qty'])) ? $item['cart_data']['qty'] : 1; ?>" maxlength="5" readonly="readonly" type="text" name="qty" id="qty">
                        </div>
                        <div class="col-md-1 col-xs-1 border into-row">
                            <a href="javascript:;" class="green-button inline qty-plus"><i class="ion-plus"></i></a>
                        </div>
                        <div class="col-md-6 col-xs-6 border into-row">
                            <a href="javascript:;" class="special-instruction orange-button inline">Special Instructions</a>
                            <span class="remaining_stock"></span>
                        </div>
                    </div>
                </div>

                <div class="notes-wrap">
                    <textarea class="uk-width-1-1" placeholder="Special Instructions" name="notes" id="notes"><?= @isset($item['cart_data']['notes']) ? $item['cart_data']['notes'] : ''; ?></textarea>
                </div>

                <?php if($item['data']['cooking_ref']) { ?>
                    <div class="section-label">
                        <div class="section-label-a center">
                            <span class="pheads">Cooking Preference</span>
                            <b></b>
                        </div>
                        <div class="row">
                            <?php
                            if (is_array($item['data']['cooking_ref'])) {
                                foreach ($item['data']['cooking_ref'] as $key1 => $c) {
                                    $checked = (!$key1) ? 'checked' : '';
                                    if (isset($item['cart_data']['cooking_ref']) && $item['cart_data']['cooking_ref'] == $c) {
                                        $checked = 'checked';
                                    }
                            ?>
                                    <div class="col-md-5">
                                        <input value="<?= $c; ?>" <?= $checked ?> type="radio" name="cooking_ref" id="cooking_ref" required>
                                        <?= $c; ?>
                                    </div>
                            <?php
                                }
                            } ?>
                        </div>
                    </div>
                <?php } ?>

                <?php if (isset($item['data']['addon_item']) && is_array($item['data']['addon_item'])) {
                    foreach ($item['data']['addon_item'] as $addon) {
                ?>
                        <div class="sub-item-rows">
                            <input class="require_addon require_addon_<?= $addon['subcat_id'] ?>" data-id="<?= $addon['subcat_id'] ?>" type="hidden" value="" name="require_addon_<?= $addon['subcat_id'] ?>" id="require_addon_<?= $addon['subcat_id'] ?>">
                            <div class="section-label">
                                <a class="section-label-a center">
                                    <span class="pheads"><?= $addon['subcat_name'] ?> (choose any <?= !empty($addon['multi_option_val']) ? $addon['multi_option_val'] : 1 ?>)</span>
                                    <b></b>
                                </a>
                            </div>

                            <div class="addon-item-scroll">
                                <?php
                                if (isset($addon['sub_item'])) {
                                    foreach ($addon['sub_item'] as $key => $s) { ?>
                                        <div class="row top10">
                                            <div class="col-xs-9 border into-row">
                                                <?php if ($addon['multi_option'] == 'one') { ?>
                                                    <input value="<?= $s['sub_item_id'] ?>|<?= $s['price'] ?>|<?= $s['sub_item_name'] ?>|" <?= (isset($item['cart_data']['sub_item'][$addon['subcat_id']]) && in_array($s['sub_item_id'] . '|' . $s['price'] . '|' . $s['sub_item_name'] . '|', $item['cart_data']['sub_item'][$addon['subcat_id']])) ? 'checked' : '' ?> class="sub_item sub_item_name_<?= $addon['subcat_id'] ?>" data-type="radio" type="radio" name="sub_item[<?= $addon['subcat_id'] ?>][]" id="sub_item_<?= $addon['subcat_id'] ?>" <?= (isset($addon['require_addons']) && $addon['require_addons'] == 2) ? 'required' : ''; ?> style="margin-right: 10px;"><?= $s['sub_item_name'] ?><p></p>
                                                <?php } else { ?>
                                                    <input value="<?= $s['sub_item_id'] ?>|<?= $s['price'] ?>|<?= $s['sub_item_name'] ?>|" <?= (isset($item['cart_data']['sub_item'][$addon['subcat_id']]) && in_array($s['sub_item_id'] . '|' . $s['price'] . '|' . $s['sub_item_name'] . '|', $item['cart_data']['sub_item'][$addon['subcat_id']])) ? 'checked' : '' ?> class="sub_item sub_item_name_<?= $addon['subcat_id'] ?>" data-type="checkbox" type="checkbox" name="sub_item[<?= $addon['subcat_id'] ?>][]" id="sub_item_<?= $addon['subcat_id'] ?>" <?= (isset($addon['require_addons']) && $addon['require_addons'] == 2) ? 'required' : ''; ?> style="margin-right: 10px;"><?= $s['sub_item_name'] ?><p></p>
                                                <?php } ?>
                                            </div>
                                            <div class="col-xs-3 border into-row">
                                                <?php if ($s['price'] > 0): ?>
                                                    + <?= $_SESSION['settings']['currency_symbol'] ?><?= $s['price'] ?>
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                <?php }
                                }
                                ?>
                            </div>
                        </div>
                <?php }
                } ?>

            </div> <!--modal body-->
            <div class="modal-footer">
                <div class="row food-item-actions">
                    <div class="col-md-6 col-xs-6 border into-row">
                        <input type="submit" value="<?= (isset($item['cart_data']) && $item['cart_data']) ? 'Update' : 'Add to Cart' ?>" class="add_to_cart orange-button upper-text">
                    </div>
                    <div class="col-md-6 col-xs-6 border into-row">
                        <button type="button" class="center upper-text green-button inline" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<script>
    var max_multi_option_val = '<?= $addon['multi_option_val'] ?>';
    $('.sub_item').change(function(e) {
        if ($('input[type=checkbox]:checked').length > max_multi_option_val && max_multi_option_val != '') {
            $(this).prop('checked', false)
            alert("You can only select " + max_multi_option_val + "!");
        }
    });
</script>

<script>
    var requiredCheckboxes = $('.into-row :checkbox[required]');
    requiredCheckboxes.change(function() {
        if (requiredCheckboxes.is(':checked')) {
            requiredCheckboxes.removeAttr('required');
        } else {
            requiredCheckboxes.attr('required', 'required');
        }
    });
</script>