<div style="display:none">
    <div id="serviceChargePopup" class="popupouter">
        <fieldset style="margin: 0 auto;padding: 0px">
            <style>
                #addservicecharge_form .payment-pin-calculatorbg ul li {
                    font-size: 13px;
                    line-height: 50px;
                    padding: 12px 24px;
                }
            </style>
            <div class="popup-body row">
                <div id="serviceChargePopupContent" class="warningPopupContent col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <?php echo form_open('gkpos/orders/addservicecharge/', array('id' => 'addservicecharge_form', 'enctype' => 'multipart/form-data', 'class' => 'form-horizontal')); ?>
                    <?php $OrderServiceData = $this->Orders_Model->get_servicecharge($this->Orders_Model->get_current_orderid()); ?>
                    <div class="form-group form-group-sm">	
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="pin-calculatorbg payment-pin-calculatorbg">
                                <input type="text" id="service_charge" name="number" class="form-control input-lg" style="width: 330px; margin: 0 auto;height: 30px;" value="<?php !empty($OrderServiceData) ? print $OrderServiceData['number'] : print'' ?>">
                                <div class="form-group form-group-sm" style="margin: 0 auto">	
                                    <label for="radio-inline" class="col-lg-4 col-md-4 col-sm-4 col-xs-4 control-label text-capitalize"><?php echo $this->lang->line('gkpos_function') ?></label>
                                    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                                        <label class="radio-inline text-capitalize"><input type="radio" name="func" id="charge_func1" value="2" <?php (!empty($OrderServiceData) && (isset($OrderServiceData['func']) && $OrderServiceData['func'] == 2)) ? print "checked" : '' ?> ><?php echo $this->lang->line('gkpos_fixed') ?></label>
                                        <label class="radio-inline text-capitalize"><input type="radio" name="func" id="charge_func2" value="1" <?php (!empty($OrderServiceData) && (isset($OrderServiceData['func']) && $OrderServiceData['func'] == 1)) ? print "checked" : '' ?> ><?php echo $this->lang->line('gkpos_percentage') ?></label>
                                    </div>
                                </div>
                                <ul>
                                    <li class="numkey serviceChargeNumKey"><?php echo $this->lang->line('gkpos_numpad_key1') ?></li>
                                    <li class="numkey serviceChargeNumKey"><?php echo $this->lang->line('gkpos_numpad_key2') ?></li>
                                    <li class="numkey serviceChargeNumKey"><?php echo $this->lang->line('gkpos_numpad_key3') ?></li>
                                    <li class="numkey serviceChargeNumKey"><?php echo $this->lang->line('gkpos_numpad_key4') ?></li>
                                </ul>
                                <ul>
                                    <li class="numkey serviceChargeNumKey"><?php echo $this->lang->line('gkpos_numpad_key5') ?></li>
                                    <li class="numkey serviceChargeNumKey"><?php echo $this->lang->line('gkpos_numpad_key6') ?></li>
                                    <li class="numkey serviceChargeNumKey"><?php echo $this->lang->line('gkpos_numpad_key7') ?></li>
                                    <li class="numkey serviceChargeNumKey"><?php echo $this->lang->line('gkpos_numpad_key8') ?></li>
                                </ul>
                                <ul>
                                    <li class="numkey serviceChargeNumKey"><?php echo $this->lang->line('gkpos_numpad_key9') ?></li>
                                    <li class="numkey serviceChargeNumKey"><?php echo $this->lang->line('gkpos_numpad_key0') ?></li>
                                    <li class="numkey serviceChargeNumKey"><?php echo $this->lang->line('gkpos_numpad_key_dot') ?></li>
                                    <li class="btnPin serviceChargeBtnPin" style="padding: 15px 15px !important"><?php echo $this->lang->line('gkpos_numpad_key_del') ?></li>
                                </ul>
                                <ul>
                                    <li class="numkey serviceChargeNumKey" style="padding: 12px 20px;">10</li>
                                    <li class="numkey serviceChargeNumKey" style="padding: 12px 20px;">15</li>
                                    <li class="numkey serviceChargeNumKey" style="padding: 12px 20px;">20</li>
                                    <li class="btnPin serviceChargeBtnPin" style="padding: 12px 15px !important"><?php echo $this->lang->line('gkpos_numpad_key_clr') ?></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="form-group form-group-md" style="margin: 0 auto;">	
                        <div class="col-md-12">
                            <ul id="addservicecharge_form_error_message_box" class="error_message_box text-center"></ul>
                            <input type="hidden" id="serviceChargeOrderId" name="order_id" value="<?php isset($order_id) ? print $order_id : print $this->Orders_Model->get_current_orderid() ?>" style="width: 320px; margin: 0 auto;">
                            <input class="form-submit-button mainsystembg2 waiting-bg img-responsive delivery-info-submit-btn" type="submit" name="submit_form" value="<?php echo $this->lang->line('gkpos_numpad_key_enter') ?>" onclick="saveServiceCharge()" style="width: 330px; margin: 0 auto; padding: 20px 0px;">
                        </div>
                    </div>
                    <?php echo form_close(); ?>
                </div>
            </div>
        </fieldset>
    </div>
    <script>
        function addServiceCharge(order_id) {
            
            var orderId = $('#orderId').val();
            var CurrentOrderTotal = $('#CurrentOrderTotal').val();
            ALERT_TITLE = '<?php echo $this->lang->line("gkpos_alert_title_warning") ?>';
            if ((!order_id || !orderId) && order_id != orderId) {
                alert('<?php echo $this->lang->line('gkpos_make_order_sure') ?>');
            } else {
                if (CurrentOrderTotal <= 0) {
                    alert('<?php echo $this->lang->line('gkpos_put_item_on_cart') ?>');
                } else {
                    $('#serviceChargeOrderId').val(order_id);
                    $('#serviceChargeCurrentOrderTotal').val(CurrentOrderTotal);
                    var serviceChargePopup = $("#serviceChargePopup").html();
                    $('#categoryTitle').html('<p class="sidebar-heading text-capitalize"><?php echo $this->lang->line('gkpos_add_service_charge') ?></p>');
                    $('#menuListArea').html(serviceChargePopup);
                    setServiceChargeNumKeys('service_charge');
                    return false;
                }
            }
        }

        function saveServiceCharge() {
            
            $('#addservicecharge_form').validate({
                submitHandler: function () {
                    var myform = document.getElementById('addservicecharge_form');
                    var formdata = new FormData(myform);
                    $.ajax({
                        url: $('#addservicecharge_form').attr('action'),
                        data: formdata,
                        cache: false,
                        processData: false,
                        contentType: false,
                        type: 'POST',
                        dataType: 'json',
                        success: function (response) {
                            loadCart(response.order_id, 'service-charge');
                            $('#menuListArea').html('');
                            $('#categoryTitle').html('<p class="sidebar-heading text-capitalize"><?php echo $this->lang->line('gkpos_click_category_mesage') ?></p>');
                        },
                    });
                },
                errorClass: "has-error",
                errorLabelContainer: "#addservicecharge_form_error_message_box",
                wrapper: "li",
                highlight: function (e) {
                    $(e).closest('.form-group').addClass('has-error');
                },
                unhighlight: function (e) {
                    $(e).closest('.form-group').removeClass('has-error');
                },
                rules: {
                    number: {number: true, required: true}
                },
                messages: {
                    number: "<?php echo $this->lang->line('gkpos_service_charge_required'); ?>",
                }
            });
        }
        function setServiceChargeNumKeys(inputFiledId) {
            jQuery('.serviceChargeNumKey').click(function (event) {
                
                var numBox = document.getElementById(inputFiledId);
                numBox.value = numBox.value + this.innerHTML;
                event.stopPropagation();
            });
            $('.serviceChargeBtnPin').click(function (event) {
                
                if (this.innerHTML == 'DEL') {
                    var numBox = document.getElementById(inputFiledId);
                    if (numBox.value.length > 0) {
                        numBox.value = numBox.value.substring(0, numBox.value.length - 1);
                    }
                } else {
                    document.getElementById(inputFiledId).value = '';
                }
                event.stopPropagation();
            });
        }
    </script>
</div>