<div class="body-vertical-align-center">
    <form class="form-horizontal" action="<?php echo site_url('gkpos/orders/to_table') ?>" method="post"  id="gkposTableForm">
        <div class="pin-calculatorbg collection-pin-calculatorbg conversion-pin-calculatorbg">
            <div id="TableNumber" class="col-md-6 pull-left">
                <input type="text" id="table_number" name="table_number" class="form-control" id="inputEmail3" placeholder="<?php echo $this->lang->line('gkpos_table') ?>&nbsp;<?php echo $this->lang->line('gkpos_number') ?>">
                <ul>
                    <li class="numkey" style="padding: 10px 14px !important"><?php echo $this->lang->line('gkpos_numpad_key1') ?></li>
                    <li class="numkey" style="padding: 10px 14px !important"><?php echo $this->lang->line('gkpos_numpad_key2') ?></li>
                    <li class="numkey" style="padding: 10px 14px !important"><?php echo $this->lang->line('gkpos_numpad_key3') ?></li>
                </ul>
                <ul>
                    <li class="numkey" style="padding: 10px 14px !important"><?php echo $this->lang->line('gkpos_numpad_key4') ?></li>
                    <li class="numkey" style="padding: 10px 14px !important"><?php echo $this->lang->line('gkpos_numpad_key5') ?></li>
                    <li class="numkey" style="padding: 10px 14px !important"><?php echo $this->lang->line('gkpos_numpad_key6') ?></li>
                </ul>
                <ul>
                    <li class="numkey" style="padding: 10px 14px !important"><?php echo $this->lang->line('gkpos_numpad_key7') ?></li>
                    <li class="numkey" style="padding: 10px 14px !important"><?php echo $this->lang->line('gkpos_numpad_key8') ?></li>
                    <li class="numkey" style="padding: 10px 14px !important"><?php echo $this->lang->line('gkpos_numpad_key9') ?></li>
                </ul>
                <ul>
                    <li class="btnPin"  style="padding: 10px 3px !important"><?php echo $this->lang->line('gkpos_numpad_key_del') ?></li>
                    <li class="numkey" style="padding: 10px 14px !important"><?php echo $this->lang->line('gkpos_numpad_key0') ?></li>
                    <li class="btnPin" style="padding: 10px 3px !important"><?php echo $this->lang->line('gkpos_numpad_key_clr') ?></li>
                </ul>
            </div>
            <div id="GuestQuantity" class="col-md-6 pull-right">
                <input type="text" name="guest_quantity" id="guest_quantity" class="form-control" placeholder="<?php echo $this->lang->line('gkpos_quantity_of_guest') ?>">
                <ul>
                    <li class="numkey2" style="padding: 10px 14px !important"><?php echo $this->lang->line('gkpos_numpad_key1') ?></li>
                    <li class="numkey2" style="padding: 10px 14px !important"><?php echo $this->lang->line('gkpos_numpad_key2') ?></li>
                    <li class="numkey2" style="padding: 10px 14px !important"><?php echo $this->lang->line('gkpos_numpad_key3') ?></li>
                </ul>
                <ul>
                    <li class="numkey2" style="padding: 10px 14px !important"><?php echo $this->lang->line('gkpos_numpad_key4') ?></li>
                    <li class="numkey2" style="padding: 10px 14px !important"><?php echo $this->lang->line('gkpos_numpad_key5') ?></li>
                    <li class="numkey2" style="padding: 10px 14px !important"><?php echo $this->lang->line('gkpos_numpad_key6') ?></li>
                </ul>
                <ul>
                    <li class="numkey2" style="padding: 10px 14px !important"><?php echo $this->lang->line('gkpos_numpad_key7') ?></li>
                    <li class="numkey2" style="padding: 10px 14px !important"><?php echo $this->lang->line('gkpos_numpad_key8') ?></li>
                    <li class="numkey2" style="padding: 10px 14px !important"><?php echo $this->lang->line('gkpos_numpad_key9') ?></li>
                </ul>
                <ul>
                    <li class="btnPin2" style="padding: 10px 3px !important"><?php echo $this->lang->line('gkpos_numpad_key_del') ?></li>
                    <li class="numkey2" style="padding: 10px 14px !important"><?php echo $this->lang->line('gkpos_numpad_key0') ?></li>
                    <li class="btnPin2" style="padding: 10px 3px !important"><?php echo $this->lang->line('gkpos_numpad_key_clr') ?></li>
                </ul>
            </div>

        </div>
        <div class="col-md-12">
            <ul id="gkposTableFormErrorMsgBox" class="error_message_box"></ul>
        </div>
        <div class="last-calculatorbg collection-last-calculatorbg table-order-numpad-enter">
            <input type="hidden" name="existing_type" value="<?php (isset($existing_type) && ($existing_type != '' || $existing_type != null) ) ? print strtolower($existing_type) : print"" ?>">
            <input type="hidden" name="order_type" value="<?php (isset($new_type) && ($new_type != '' || $new_type != null) ) ? print strtolower($new_type) : print"" ?>">
            <input type="hidden" name="order_id" value="<?php echo $order_id ?>">
            <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="saveTableInfo('gkposTableForm', 'gkposTableFormErrorMsgBox')">
        </div>
    </form>

</div>
<script type="text/javascript">
    jQuery(document).ready(function () {
        setnumkeys('table_number');
        setnumkeys2('guest_quantity');
    });

    function saveTableInfo(formId, error_message_box) {
        
        $('#' + formId).validate({
            submitHandler: function () {
                var myform = document.getElementById(formId);
                var formdata = new FormData(myform);
                $.ajax({
                    url: $('#' + formId).attr('action'),
                    data: formdata,
                    cache: false,
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    dataType: 'json',
                    beforeSend: function () {
                        $("#tableAjaxLoading").show();
                    },
                    success: function (response) {
                        $("#tableAjaxLoading").hide();
                        if (response.success) {
                            getBaseAjaxPage('<?php echo site_url('gkpos/orders/indexajax/') ?>' + response.order_id);
                        } else {
                            alert(response.message);
                        }
                    }
                });
            },
            errorClass: "has-error",
            errorLabelContainer: "#" + 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: {
                table_number: {number: true, required: true, min: 1},
                guest_quantity: {number: true, required: true, min: 1
                }
            },
            messages: {
                table_number: "<?php echo $this->lang->line('gkpos_table_number_required') ?>",
                guest_quantity: "<?php echo $this->lang->line('gkpos_table_guest_quantity_required') ?>"
            }
        });
    }
</script>