<ul class="list-group">
    <li class="list-group-item">
        <?php echo form_open('gkpos/menumanagement/savemealdealset', array('id' => 'mealDealSetForm_' . $deal)) ?>
        <input type="hidden" name="deal" value="<?php echo $deal ?>"/>
        <table class="table table-responsive table-bordered">
            <tr>
                <td class="text-right">Set Title</td>
                <td><input class="form-control" type="text" name="set_title"></td>
            </tr>
            <tr>
                <td class="text-right">How many items customer can choose from this set?</td>
                <td><input class="form-control" type="number" min="1" name="allowed_selection"></td>
            </tr>
            <tr>
                <td class="text-right">Is Published</td>
                <td>
                    <div class="radio-inline">
                        <label class="radio-inline text-uppercase" style='color: #000080'><input type="radio" name="status" id="deal_status_1" value="1" checked="checked" ><?php echo $this->lang->line('gkpos_yes') ?></label>
                        <label class="radio-inline text-uppercase" style='color: #000080'><input type="radio" name="status" id="deal_status_2" value="0"><?php echo $this->lang->line('gkpos_no') ?></label>
                    </div>
                </td>
            </tr>
            <tr id="populatedContentBlockForDeal_<?php echo $deal ?>_row" style="display: none;">
                <td>  <div class="clearfix" id="populatedContentBlockForDeal_<?php echo $deal ?>"></div></td>
            </tr>
            <tr>
                <td colspan="2">
                    <div class="multi-field-wrapper">
                        <div class="multi-fields">
                            <div class="multi-field" id="catBox-0">
                                <span>Choose Category:</span><select id="catOption-0" name="stuff[]" style="width: 250px; height: 30px;" onchange="getData(this.id)">
                                    <option value="0"></option>
                                    <?php foreach ($MenuCategories as $menuCat): ?>
                                        <option value="<?php echo $deal . '_' . $menuCat->id ?>"><?php echo $menuCat->title ?></option>
                                    <?php endforeach; ?>
                                </select>
                                <button type="button" class="remove-field btn btn-danger"><i class="fa fa-minus"></i></button>
                                <div class="clearfix"></div>
                                <div class="category-menu-loader" id="categoryMenuLoader-0"></div>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="clearfix"></div>
                        <button type="button" class="add-field btn btn-success" style="width: 250px; margin-left: 75px;" >Add field</button>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2">  <input class="btn btn-danger" style="width: 100%; margin: 0 auto; padding: 20px" tabindex="4" value="<?php echo $this->lang->line('gkpos_numpad_key_enter') ?>" onclick="saveMealDealSet('mealDealSetForm_<?php echo $deal ?>')"></td></td>
            </tr>
        </table>
        <?php echo form_close() ?>
    </li>
</ul>
<script>
    $(document).ready(function () {
        addRemoveWrapper();
    });
    function addRemoveWrapper() {
        $('.multi-field-wrapper').each(function () {
            var index = 0;
            var $wrapper = $('.multi-fields', this);
            $(".add-field", $(this)).click(function (e) {
                index++;
                $('.multi-field:first-child', $wrapper).clone(true).prop({id: "catBox-" + index}).appendTo($wrapper).find('select').attr({id: 'catOption-' + index}).val('').end().find(' .category-menu-loader').attr({id: 'categoryMenuLoader-' + index}).html('');
            });
            $('.multi-field .remove-field', $wrapper).click(function () {
                if ($('.multi-field', $wrapper).length > 1)
                    $(this).parent('.multi-field').remove();
            });
        });
    }
    function getData(id) {
        var deal_category = $('#' + id).val();
        if (deal_category == '0') {
            alert('please select a category');
            return false;
        } else {
            var selectBox = id.split('-');
            var index = selectBox[1];
            var catBox = 'catBox-' + index;
            var loaderBox = 'categoryMenuLoader-' + index;
            $.ajax({
                url: '<?php echo site_url('gkpos/menumanagement/pupulate') ?>',
                type: 'POST',
                data: {
                    deal_category: deal_category
                },
                success: function (output) {
                    $('#' + loaderBox).html(output);
                }
            });
        }
    }
    function saveMealDealSet(setForm) {
        var myform = document.getElementById(setForm);
        var formData = new FormData(myform);
        var set_title = $.trim(formData.get('set_title'));
        var allowed = $.trim(formData.get('allowed_selection'));
        if (!set_title || set_title === null) {
            alert('Set title is required');
            return false;
        } else if (Number(allowed) <= 0) {
            alert('please provide positive integer value > 0 for maximum selection');
            return false;
        } else {
            $.ajax({
                url: '<?php echo site_url('gkpos/menumanagement/savemealdealset') ?>',
                data: formData,
                cache: false,
                processData: false,
                contentType: false,
                type: 'POST',
                dataType: 'json',
                success: function (output) {
                    if (output.success) {
                        alert(output.message)
                        getMenumanagementPage('<?php echo site_url('gkpos/menumanagement/mealdeal') ?>', 'Mealdeal');
                    } else {
                        alert(output.message)
                    }
                }
            });
        }
    }
</script>