<div style="display: none;">
    <div id="menuModifierPopup" class="popup-attributes">
        <div class="popup-header toolbar-header">
            <div class="popup-title">
                <?php
                $AllStatus = array('2' => 'Inactive', '3' => 'Active');
                $heading = null;
                if ($set !== '0') {
                    $heading = get_title('menuset', array('id' => $set));
                } else if ($selection !== '0') {
                    $heading = get_title('menuselection', array('id' => $selection)) . '-' . get_title('menu', array('id' => $menu));
                } else {
                    $heading = get_title('menu', array('id' => $menu));
                }
                echo ucwords($heading . ' ' . $this->lang->line('modifiers'));
                ?>

            </div>
            <div class="popup-close-btn" onclick="zamanEposPopupcloser()"><span class="icon icon-cancel"></span></div>
        </div>
        <div class="popup-content">
            <div class="page-loader popup-page-loader" style="display: none;"></div>
            <div class="clearfix">
                <div class="caption"><?php echo $this->lang->line('modifiers_head') ?></div>
                <table class="collection-bg" id="modifiersHeadList">
                    <tr>
                        <th class="text-left"><?php echo $this->lang->line('title') ?></th>
                        <th class="text-center"><?php echo $this->lang->line('status') ?></th>
                        <th class="text-center"><?php echo $this->lang->line('view') ?></th>
                        <?php if ($this->session->userdata('group') <= 4): ?>
                            <th class="text-center"><?php echo $this->lang->line('delete') ?></th>
                        <?php endif; ?>
                    </tr>
                    <?php if (!empty($modifiersHeads)): ?>
                        <?php foreach ($modifiersHeads as $th): ?>
                            <tr>
                                <td class="text-left">
                                    <a href="javascript:void(0)" onclick="updatemodifierheadcell('<?php echo"modifier_head_title_" . $th->id ?>')" data-type="text" id="modifier_head_title_<?php echo $th->id ?>" data-name="title" data-pk="<?php echo $th->id ?>" data-url="<?php echo site_url('menu/updatemodifierheadcell') ?>" data-title="Update title">
                                        <?php echo $th->title ?>
                                    </a>
                                </td>
                                <td class="text-center">
                                    <a href="javascript:void(0)" onclick="updatemodifierheadcell('<?php echo"modifier_head_status_" . $th->id ?>')" data-type="select" id="modifier_head_status_<?php echo $th->id ?>" data-name="status" data-value="<?php echo $th->status ?>" data-pk="<?php echo $th->id ?>" data-url="<?php echo site_url('menu/updatemodifierheadcell') ?>" data-title="Update Status">
                                        <?php echo $AllStatus[$th->status] ?>
                                    </a>
                                </td>
                                <td class="text-center"><span class="icon icon-eye"  onclick="zamanEposBlockHideAndShow('<?php echo 'headToppings-' . $th->id ?>')"></span></td>
                                <?php if ($this->session->userdata('group') <= 4): ?>
                                    <td class="text-center"><span class="icon icon-trash" id="modifierHeadId-<?php echo $th->id ?>" onclick="deleteModifiersCategory('<?php echo $th->id ?>')"></span></td>
                                <?php endif; ?>
                            </tr>
                            <?php $headModifiers = get_record_list('modifiermenu', array('modcategory' => $th->id)); ?>
                            <tr id="headToppings-<?php echo $th->id ?>" style="display: none;">
                                <td colspan="8">
                                    <table class="table-bg" id="modifiersTable-<?php echo $th->id ?>">
                                        <tr>
                                            <th class="text-left"><?php echo $this->lang->line('title') ?></th>
                                            <th class="text-center"><?php echo $this->lang->line('status') ?></th>
                                            <?php if ($this->session->userdata('group') <= 4): ?>
                                                <th class="text-center"><?php echo $this->lang->line('delete') ?></th>
                                            <?php endif; ?>
                                        </tr>
                                        <?php if (!empty($headModifiers)): ?>
                                            <?php foreach ($headModifiers as $ht): ?>
                                                <tr>
                                                    <td class="text-lef">
                                                        <?php if ($this->session->userdata('group') <= 4): ?>
                                                            <a href="javascript:void(0)" onclick="updatemodifiercell('<?php echo"modifier_title_" . $ht->id ?>')" data-type="text" id="modifier_title_<?php echo $ht->id ?>" data-name="title" data-pk="<?php echo $ht->id ?>" data-url="<?php echo site_url('menu/updatemodifiercell') ?>" data-title="Update title">
                                                                <?php echo $ht->title ?>
                                                            </a>
                                                        <?php else: ?>
                                                            <?php echo $ht->title ?>
                                                        <?php endif; ?>
                                                    </td>
                                                    <td class="text-center">
                                                        <?php if ($this->session->userdata('group') <= 4): ?>
                                                            <a href="javascript:void(0)" onclick="updatemodifiercell('<?php echo"modifier_status_" . $ht->id ?>')" data-type="select" id="modifier_status_<?php echo $ht->id ?>" data-name="status" data-pk="<?php echo $ht->id ?>" data-value="<?php echo $ht->status ?>" data-url="<?php echo site_url('menu/updatemodifiercell') ?>" data-title="Update Status">
                                                                <?php echo $AllStatus[$ht->status] ?>
                                                            </a>
                                                        <?php else: ?>
                                                            <?php echo $AllStatus[$ht->status] ?>
                                                        <?php endif; ?>
                                                    </td>
                                                    <?php if ($this->session->userdata('group') <= 4): ?>
                                                        <td class="text-center"><span class="icon icon-trash" id="modifierId-<?php echo $ht->id ?>" onclick="deleteModifier('<?php echo $ht->id ?>')"></span></td>
                                                    <?php endif; ?>
                                                </tr>
                                            <?php endforeach; ?>
                                        <?php endif; ?>
                                    </table>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </table>
            </div>
            <?php if ($this->session->userdata('group') <= 4): ?>
                <div class="popup-block">
                    <div class="caption"><?php echo $this->lang->line('add_new_modifier_head') ?></div>
                    <?php echo form_open('menu/save_modifierhead', array('id' => 'modifierHeadForm')); ?>
                    <div class="form-group">
                        <label><?php echo $this->lang->line('title') ?></label>
                        <input type="text" name="title" class="form-control">
                    </div>
                    <div class="tab-group config-submit clearfix">
                        <input type="hidden" id="modifierHeadCategory" name="category" value="<?php echo $category ?>">
                        <input type="hidden" id="modifierHeadMenu" name="menu" value="<?php echo $menu ?>">
                        <input type="hidden" id="modifierHeadSelection" name="selection" value="<?php echo $selection ?>">
                        <input type="hidden" id="modifierHeadSet" name="set" value="<?php echo $set ?>">
                        <button type="submit" onclick="saveModifierHead('modifierHeadForm')"><span class="icon icon-folder"></span>&nbsp;<?php echo $this->lang->line('save') ?></button>
                    </div>
                    <?php echo form_close() ?>
                </div>
                <div style="height: 30px; margin: 10px 0px;" class="text-right">
                    <button class="btn btn btn-large btn-warning icon icon-arrows-ccw" onclick="attrPopup('menuModifierPopup', '75%', '<?php echo $category ?>', '<?php echo $menu ?>', '<?php echo $selection ?>', '<?php echo $set ?>', '<?php echo site_url('menu/itemmodifier') ?>')">&nbsp;<?php echo $this->lang->line('refresh') ?></button>
                </div>
            <?php endif; ?>
            <?php if (!empty($nattr) && $this->session->userdata('group') <= 4): ?>
                <div class="popup-block clearfix">
                    <?php echo form_open('menu/savemenumodifier', array('id' => 'menuModifierForm')); ?>
                    <div class="pane">
                        <div class="caption"><?php echo $this->lang->line('hook_modifiers') ?></div>
                        <div class="form-group">
                            <select class="form-control" name="modcategory" id="modifiersCategory">
                                <option><?php echo $this->lang->line('select') ?></option>
                                <?php if (!empty($modifiersHeads)): ?>
                                    <?php foreach ($modifiersHeads as $ts): ?>
                                        <option value="<?php echo $ts->id ?>"><?php echo ucwords($ts->title) ?></option>
                                    <?php endforeach; ?>
                                <?php endif; ?>
                            </select>
                        </div>
                        <div class="tab-group config-submit clearfix">
                            <button type="submit" onclick="saveModifiers('menuModifierForm')"><span class="icon icon-folder"></span>&nbsp;<?php echo $this->lang->line('save') ?></button>
                        </div>
                        <div id="menuModifierFormChecked"></div>
                        <table class="table-bg">
                            <tr>
                                <td class="text-center">Select</td>
                                <td class="text-center">Title</td>
                            </tr>
                            <?php foreach ($nattr as $key => $attr): ?>
                                <tr>
                                    <td><div class="form-group"><input type="checkbox" data-error="#menuModifierFormChecked" name="checked[]" class="form-control" value="<?php echo $attr->id ?>"></div></td>
                                    <td><div class="form-group"><input type="text" name="title[<?php echo $attr->id ?>]" value="<?php echo $attr->title ?>" class="form-control"></div></td>
                                </tr>
                            <?php endforeach; ?>
                        </table>
                    </div>
                    <div class="tab-group config-submit clearfix">
                        <button type="submit" onclick="saveModifiers('menuModifierForm')"><span class="icon icon-folder"></span>&nbsp;<?php echo $this->lang->line('save') ?></button>
                    </div>
                    <?php echo form_close() ?>
                </div>
            <?php endif; ?>
        </div>
    </div>
</div>
<script>
    function modifierHeadRestForm(formId) {
        $('#' + formId).find('input[type=text],select').each(function () {
            $(this).val('');
        });
    }
    function saveModifierHead(formId) {
        if (!$('.page-loader').is(":visible")) {
            $('#' + formId).validate({
                submitHandler: function () {
                    var myform = document.getElementById(formId);
                    var formdata = new FormData(myform);
                    if (checkInternetConnection()) {
                        $.ajax({
                            url: $('#' + formId).attr('action'),
                            data: formdata,
                            cache: false,
                            processData: false,
                            contentType: false,
                            type: 'POST',
                            dataType: 'json',
                            beforeSend: function () {
                                $('.page-loader').show();
                            },
                            success: function (response) {
                                if (response.status) {
                                    modifierHeadRestForm(formId);
                                    var status = response.item.status === '3' ? '<?php echo $this->lang->line('active') ?>' : '<?php echo $this->lang->line('inactive') ?>';
                                    $('#modifiersHeadList').append('<tr><td class="text-left">' + response.item.title + '</td><td class="text-center">' + status + '</td><td class="text-center"><span class="icon icon-eye" onclick="zamanEposBlockHideAndShow(\'' + 'headToppings-' + response.item.id + '\')"></span></td><td class="text-center"><span class="icon icon-trash" id="modifierHeadId-' + response.item.id + '" onclick="deleteModifiersCategory(\'' + response.item.id + '\')"></span></td></tr>');
                                    $('#modifiersCategory').append($('<option>', {
                                        value: response.item.id,
                                        text: response.item.title
                                    }));

                                } else {
                                    warning('<?php echo $this->lang->line('error') ?>', response.message, '<?php echo $this->lang->line('ok') ?>');
                                }
                                $('.page-loader').hide();
                            }
                        });
                    } else {
                        warning('<?php echo $this->lang->line('lost_connection') ?>', '<?php echo $this->lang->line('lost_connection_message') ?>', '<?php echo $this->lang->line('close') ?>');
                    }
                },
                errorClass: "has-error",
                highlight: function (e) {
                    $(e).closest('.form-group').addClass('has-error');
                },
                unhighlight: function (e) {
                    $(e).closest('.form-group').removeClass('has-error');
                },
                rules: {
                    title: {
                        required: true,
                        remote: {
                            url: "<?php echo site_url('menu/checkmodifierhead') ?>",
                            type: "post",
                            data: {
                                category: function () {
                                    return $('#modifierHeadCategory').val();
                                },
                                menu: function () {
                                    return $('#modifierHeadMenu').val();
                                },
                                selection: function () {
                                    return $('#modifierHeadSelection').val();
                                },
                                set: function () {
                                    return $('#modifierHeadSet').val();
                                }
                            }
                        }
                    }
                },
                errorPlacement: function (error, element) {
                    errorPlacement(error, element);
                }
            });
        }
    }
    function updatemodifierheadcell(field) {
        $('#' + field).editable({
            mode: 'inline',
            source: function () {
                if (field.includes("status")) {
                    return [
                        {value: 3, text: '<?php echo $this->lang->line('active') ?>'},
                        {value: 2, text: '<?php echo $this->lang->line('inactive') ?>'}
                    ];
                }
            },
            validate: function (value) {
                if ($.trim(value) === '') {
                    warning('<?php echo $this->lang->line('error') ?>', '<?php echo $this->lang->line('data_required') ?>', '<?php echo $this->lang->line('close') ?>');
                    return false;
                }
            }
        });
    }
    function deleteModifiersCategory(id) {
        if (!$('.page-loader').is(":visible")) {
            if (checkInternetConnection()) {
                $.ajax({
                    url: '<?php echo site_url('menu/deletemodifiercategory') ?>',
                    data: {
                        id: id
                    },
                    type: 'POST',
                    dataType: 'json',
                    beforeSend: function () {
                        $('.page-loader').show();
                    },
                    success: function (response) {
                        if (response.status) {
                            $('#modifierHeadId-' + id).closest('tr').remove();
                        }
                        $('.page-loader').hide();
                    }
                });
            } else {
                warning('<?php echo $this->lang->line('lost_connection') ?>', '<?php echo $this->lang->line('lost_connection_message') ?>', '<?php echo $this->lang->line('close') ?>');
            }
        }
    }
    function saveModifiers(formId) {
        if (!$('.page-loader').is(":visible")) {
            $('#' + formId).validate({
                submitHandler: function () {
                    var myform = document.getElementById(formId);
                    var formdata = new FormData(myform);
                    if (checkInternetConnection()) {
                        $.ajax({
                            url: $('#' + formId).attr('action'),
                            data: formdata,
                            cache: false,
                            processData: false,
                            contentType: false,
                            type: 'POST',
                            dataType: 'json',
                            beforeSend: function () {
                                $('.page-loader').show();
                            },
                            success: function (response) {
                                if (response.status) {
                                    zamanEposBlockHideAndShow('headToppings-' + response.head);
                                    var items = response.items;
                                    items.forEach(function (item) {
                                        var status = item.status === '3' ? '<?php echo $this->lang->line('active') ?>' : '<?php echo $this->lang->line('inactive') ?>';
                                        $('#modifiersTable-' + item.modcategory).append('<tr><td class="text-left">' + item.title + '</td><td class="text-center">' + status + '</td><td class="text-center"><span class="icon icon-trash" id="modifierId-' + item.id + '" onclick="deleteModifier(\'' + item.id + '\')"></span></td></tr>');
                                    });
                                    $('#' + formId + ' input[type=checkbox]').each(function () {
                                        if (!$(this).is(':disabled')) {
                                            this.checked = false;
                                        }
                                    });
                                } else {
                                    warning('<?php echo $this->lang->line('error') ?>', response.message, '<?php echo $this->lang->line('ok') ?>');
                                }
                                $('.page-loader').hide();
                            }
                        });
                    } else {
                        warning('<?php echo $this->lang->line('lost_connection') ?>', '<?php echo $this->lang->line('lost_connection_message') ?>', '<?php echo $this->lang->line('close') ?>');
                    }
                },
                errorClass: "has-error",
                highlight: function (e) {
                    $(e).closest('.form-group').addClass('has-error');
                },
                unhighlight: function (e) {
                    $(e).closest('.form-group').removeClass('has-error');
                },
                rules: {
                    modcategory: {required: true, min: 1},
                    'checked[]': {required: true},
                    'title[]': {required: true}

                },
                messages: {
                    'checked[]': '<?php echo $this->lang->line('select_modifier') ?>',
                    modcategory: '<?php echo $this->lang->line('select_toppings_head') ?>'
                },
                errorPlacement: function (error, element) {
                    errorPlacement(error, element);
                }
            });
        }
    }
    function deleteModifier(id) {
        if (!$('.page-loader').is(":visible")) {
            if (checkInternetConnection()) {
                $.ajax({
                    url: '<?php echo site_url('menu/deletemodifier') ?>',
                    data: {id: id},
                    type: 'POST',
                    dataType: 'json',
                    beforeSend: function () {
                        $('.page-loader').show();
                    },
                    success: function (response) {
                        if (response.status) {
                            $('#modifierId-' + id).closest('tr').remove();
                        }
                        $('.page-loader').hide();
                    }
                });
            } else {
                warning('<?php echo $this->lang->line('lost_connection') ?>', '<?php echo $this->lang->line('lost_connection_message') ?>', '<?php echo $this->lang->line('close') ?>');
            }
        }
    }
    function updatemodifiercell(field) {
        $('#' + field).editable({
            mode: 'inline',
            source: function () {
                if (field.includes("status")) {
                    return [
                        {value: 3, text: '<?php echo $this->lang->line('active') ?>'},
                        {value: 2, text: '<?php echo $this->lang->line('inactive') ?>'}
                    ];
                }
                if (field.includes("is_default")) {
                    return [
                        {value: 'yes', text: '<?php echo strtolower($this->lang->line('yes')) ?>'},
                        {value: 'no', text: '<?php echo strtolower($this->lang->line('no')) ?>'}
                    ];
                }
            },
            validate: function (value) {
                if ($.trim(value) === '') {
                    warning('<?php echo $this->lang->line('error') ?>', '<?php echo $this->lang->line('data_required') ?>', '<?php echo $this->lang->line('close') ?>');
                    return false;
                }
            }
        });
    }

</script>