<div style="display: none;">
    <div id="serviceChargeContent">
        <div class="popup-header toolbar-header">
            <div class="popup-title"><?php echo $this->lang->line('service_charge') ?></div>
            <div class="popup-close-btn" onclick="zamanEposPopupcloser()"><span class="icon icon-cancel"></span></div>
        </div>
        <div class="popup-content">
            <div class="neworder-table-guest collection-phone ccfee">
                <form id="orderServiceChargeForm">
                    <div class="form-group">
                        <input type="text" name="amount" id="orderServicheChargeAmount" data-error="#orderServiceChargeFormErrorPlaceHolder" class="form-control" placeholder="Service charge">
                        <input type="hidden" name="func" id="serviceChargeAmountFunction" value="3">
                    </div>
                    <div id="orderServiceChargeFormErrorPlaceHolder"></div>
                    <div class="tab-group text-center radio-checkbox-optiongroup">
                        <div class="tab-item service-charge-amount-type fixed" onclick="setServiceChargeAmountType('fixed')"><?php echo $this->lang->line('fixed') ?></div>
                        <div class="tab-item service-charge-amount-type percent" onclick="setServiceChargeAmountType('percent')"><?php echo $this->lang->line('percent') ?></div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="tab-group keypad">
                        <div class="tab-item zaman-epos-nav quantity-digit keypad-key serviceChargePrimaryNumKey">1</div>
                        <div class="tab-item zaman-epos-nav quantity-digit keypad-key serviceChargePrimaryNumKey">2</div>
                        <div class="tab-item zaman-epos-nav quantity-digit keypad-key serviceChargePrimaryNumKey">3</div>
                    </div>
                    <div class="tab-group keypad">
                        <div class="tab-item zaman-epos-nav quantity-digit keypad-key serviceChargePrimaryNumKey">4</div>
                        <div class="tab-item zaman-epos-nav quantity-digit keypad-key serviceChargePrimaryNumKey">5</div>
                        <div class="tab-item zaman-epos-nav quantity-digit keypad-key serviceChargePrimaryNumKey">6</div>
                    </div>
                    <div class="tab-group keypad">
                        <div class="tab-item zaman-epos-nav quantity-digit keypad-key serviceChargePrimaryNumKey">7</div>
                        <div class="tab-item zaman-epos-nav quantity-digit keypad-key serviceChargePrimaryNumKey">8</div>
                        <div class="tab-item zaman-epos-nav quantity-digit keypad-key serviceChargePrimaryNumKey">9</div>
                    </div>
                    <div class="tab-group keypad">
                        <div class="tab-item zaman-epos-nav quantity-digit keypad-key serviceChargePrimaryNumKey">.</div>
                        <div class="tab-item zaman-epos-nav quantity-digit keypad-key serviceChargePrimaryNumKey">0</div>
                        <div class="tab-item zaman-epos-nav quantity-digit keypad-key serviceChargePrimaryActionKey">CLR</div>
                    </div>
                    <div class="tab-group config-submit">
                        <button type="submit" onclick="addOrderServiceCharge('orderServiceChargeForm')"><span class="icon icon-folder"></span>&nbsp;<?php echo $this->lang->line('add') ?></button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    function zamanOrderServiceChargeControllerPopup() {
        zamanEposDb.epos_order.get({orderId: Number(zamanEposCart.getEposCurrentId())}).then(function (anOrder) {
            if (typeof (anOrder) !== 'undefined') {
                if (Number(anOrder.isPaid) === 3) {
                    orderPaymentPreProcessor(anOrder);
                } else {
                    $.colorbox({
                        inline: true,
                        scrolling: false,
                        href: "#serviceChargeContent",
                        width: '290px',
                        height: 'auto',
                        maxWidth: "100%",
                        open: true,
                        closeButton: false,
                        transition: 'none',
                        overlayClose: false,
                        className: 'transparent-overlay',
                        onOpen: function () {
                            playBeepSound();
                            $('#serviceChargeAmountFunction').val('3');
                            $('.service-charge-amount-type').removeClass('active');
                            $('.service-charge-amount-type.fixed').addClass('active');
                        },
                        onLoad: function () {
                            var serviceChargeObj = zamanEposCart.getServiceCharge();
                            if (serviceChargeObj) {
                                console.log(serviceChargeObj);
                                if (!jQuery.isEmptyObject(serviceChargeObj) || serviceChargeObj !== null || typeof (serviceChargeObj) !== 'undefined') {
                                    $('#orderServicheChargeAmount').val(serviceChargeObj.amount);
                                    $('.service-charge-amount-type').removeClass('active');
                                    if (Number(serviceChargeObj.func) === 2) {
                                        $('.service-charge-amount-type.percent').addClass('active');
                                        $('.service-charge-amount-type.fixed').removeClass('active');
                                    } else {
                                        $('.service-charge-amount-type.fixed').addClass('active');
                                        $('.service-charge-amount-type.percent').removeClass('active');
                                    }
                                } else {
                                    $('#orderServicheChargeAmount').val('');
                                }
                            } else {
                                $('#serviceChargeAmountFunction').val('3');
                            }
                        },
                        onClosed: function () {
                            resetForm('orderServiceChargeForm');
                        }
                    });
                }
            } else {
                warning('<?php echo $this->lang->line('warning') ?>', '<?php echo $this->lang->line('load_order_in_cart') ?>', '<?php echo $this->lang->line('ok') ?>');
            }
        });

    }
    function setServiceChargeAmountType(type) {
        if (type === 'percent') {
            $('#serviceChargeAmountFunction').val('2');
        } else {
            $('#serviceChargeAmountFunction').val('3');
        }
        $('.service-charge-amount-type').removeClass('active');
        $('.service-charge-amount-type.' + type).addClass('active');
    }
    function addOrderServiceCharge(formId) {
        $('#' + formId).validate({
            submitHandler: function () {
                var amount = $('#orderServicheChargeAmount').val();
                var func = $('#' + formId + ' #serviceChargeAmountFunction').val();
                zamanEposCart.setServiceCharge(amount, func);
                if (zamanEposCart.getServiceCharge()) {
                    displayEposCart();
                    zamanEposPopupcloser();
                    postupdateForExtraCharge(zamanEposCart.getEposCurrentId(), 'serviceCharge', zamanEposCart.cartCalculator().serviceCharge);
                }
            },
            errorClass: "has-error",
            highlight: function (e) {
                $(e).closest('.form-group').addClass('has-error');
                $.colorbox.resize();
            },
            unhighlight: function (e) {
                $(e).closest('.form-group').removeClass('has-error');
                $.colorbox.resize();
            },
            rules: {
                amount: {number: true, required: true}
            },
            errorPlacement: function (error, element) {
                errorPlacement(error, element);
            }
        });
    }

</script>