<script src="<?php echo THEME_PATH; ?>plugins/jquery-validation/js/jquery.validate.min.js"></script>
<div class="modal fade" id="add_ons_details_modal" data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"> <?php echo CommonLanguage::getMessage('add_ons_details'); ?></h5>
            </div>
            <div class="modal-body">
                <form id="add_ons_details_form" method="POST" onsubmit="return false">
                    <div class="row">
                        <?php echo Forms::AlertDiv('add_ons_details_alert'); ?>
                        <input type='hidden' name='add_ons_details_flag' id='add_ons_details_flag'/>
                        <input type='hidden' name='add_ons_details_id' id='add_ons_details_id'/>
                        <div class="col-md-12 m-t-10">
                            <h5><?php echo CommonLanguage::getMessage('add_ons'); ?>
                                <span class="red-star">*</span>
                            </h5>
                            <select required id="add_ons_id" name="add_ons_id" class="full-width " data-init-plugin="select2" required>
                                <option value=""><?php echo CommonLanguage::getMessage('choose_add_ons'); ?></option>
                                <?php foreach($add_ons as $add_on):?>
                                <option value="<?php echo $add_on['add_ons_id'];?>"><?php echo $add_on['add_ons_title'];?></option>
                                <?php endforeach;?>
                            </select>
                        </div>
                        <div class="col-md-12 m-t-10 add_ons_details_main_div">
                            <h5><?php echo CommonLanguage::getMessage('add_ons_details'); ?>  
                                <span class="red-star">*</span>
                            </h5>
                            <div class="row add-row">
                                <div class="col-md-12 m-t-10">
                                    <div class="col-md-11">
                                        <input type="text"  placeholder="<?php print CommonLanguage::getMessage('add_ons_details_title'); ?>"  name="add_ons_details_title" class="form-control ">
                                    </div>
                                    <div class="col-md-1 buttons">
                                        <span class="fa fa-plus"></span>
                                        <span class="fa fa-minus red-star" style="display:none;"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal"><?php print CommonLanguage::getMessage('Close'); ?></button>
                <button class="btn btn-primary" id="submit_add_ons_details"><?php print CommonLanguage::getMessage('Save'); ?></button>
            </div>
            <?php echo Forms::ModalLoader('addOnsDetailsLoader'); ?>
        </div>
    </div>
</div>
<script>
    $(function () {
        $(".add_ons_details_main_div").on("click", ".buttons > .fa-plus", function (e) {
            $(".buttons > .fa-minus").css("display", "")
            var Parent = $(this).parents(".add-row"), NewItem = Parent.clone().insertAfter(Parent);
            $("input[name=add_ons_details_title]",NewItem).val('')
        });
        $(".add_ons_details_main_div").on("click", ".buttons > .fa-minus", function (e) {
            $(this).parents('.add-row').remove()
            $(".add_ons_details_main_div").each(function () {
                $(".buttons > .fa-minus", $(this).parent()).css({"display": $(".buttons", $(this).parent()).length <= 1 ? "none" : "inline-block"})
            })
        });
        $(".add_ons_details_btn").on("click", function () {
            $('.buttons').removeClass('hidden')
            $("#add_ons_details_flag").val(0);
        });
        $("#tableWithSearch").on("click", ".edit_add_ons_details", function () {
            var add_ons_details_id = $(this).parents('div.Action').attr('data-id');
            $("#add_ons_details_flag").val(1);
            $('.buttons').addClass('hidden')
            $("#add_ons_details_id").val(add_ons_details_id);
            CommonViewById("common_ajax/ViewByEntryId",{table: 'tbl_add_ons_details', entry_id: 'add_ons_details_id', entry_value: add_ons_details_id}, '#addOnsDetailsLoader', function (response) {
                $('select[name=add_ons_id]').val(response[0].add_ons_id).select2();
                $('input[name=add_ons_details_title]').val(response[0].add_ons_details_title);
            });
        });
        $("#submit_add_ons_details").on("click", function () {
            var add_ons_details = [],empty_details= false;
            if (!$("#add_ons_details_form").valid())
                return;
            var Data = new FormData(document.getElementById("add_ons_details_form"));
            $(".add-row").each(function () {
                var me = $(this);
                if(!$("input[name=add_ons_details_title]",me).val()){
                    empty_details = true
                }
                add_ons_details.push($("input[name=add_ons_details_title]",me).val())
            });
            if (empty_details){
                AddAlert("#add_ons_details_alert", "<?php print CommonLanguage::getMessage('Required_Fields'); ?>", "danger");
                return;
            }
            Data.append("add_ons_details", JSON.stringify(add_ons_details))
            $("#addOnsLoader").removeClass('hidden');
            $.ajax({
                url: "RestaurantAjax/submitAddOnsDetails",
                method: "POST",
                data: Data,
                processData: false,
                contentType: false,
                dataType: "JSON",
                complete: function (jqXHR, status) {
                    if (status == 'success') {
                        if (jqXHR.responseJSON[1] == "success") {
                            RebuildDataTable($('.panel-heading .panel-title').html(), [0,1], 'RestaurantAjax/addOnsDetailsList');
                            hideModalAlert('add_ons_details_modal', 'add_ons_details_alert');
                        }
                        AddAlert("#add_ons_details_alert", jqXHR.responseJSON[0], jqXHR.responseJSON[1]);
                    }
                    $("#addOnsLoader").addClass('hidden');
                }
            });
        });
    });
</script>