<script type="text/javascript">
    var base_url = "<?php echo base_url(); ?>";
    $(document).ready(function () {
<?php if ($this->config->item('is_caller_id') == 'enable') { ?>
            updateCaller();
<?php } ?>
    });
    function updateCaller() {
        jQuery.post("<?php echo site_url('gkpos/orders/get_caller_id') ?>", {id: 0}, function (output) {
            if (output.success) {
                if (jQuery('#caller_phone').length > 0) {
                    jQuery('#caller_phone').val(output.caller_id);
                }
                if (jQuery('#caller_name').length > 0) {
                    jQuery('#caller_name').val(output.name);
                }
                jQuery('#CallerPhoneNumber').val(output.caller_id);
                jQuery('#CallerPhoneName').val(output.name);
                if (output.has_pending_orders) {
                    $('#newOrders').show();
                    new Audio(base_url + 'assets/gkpos/onlineorder.mp3').play();
                } else {
                    $('#newOrders').hide();
                }
<?php if (trim($this->config->item('page_reservation')) == 'yes') { ?>
                    if (output.has_booking != false) {
                        $('#pendingBooking').show();
                        new Audio(base_url + 'assets/gkpos/beep.mp3').play();
                    } else {
                        $('#pendingBooking').hide();
                    }
<?php } ?>
            } else {
                if (output.has_pending_orders) {
                    $('#newOrders').show();
                    new Audio(base_url + 'assets/gkpos/onlineorder.mp3').play();
                } else {
                    $('#newOrders').hide();
                }
<?php if (trim($this->config->item('page_reservation')) == 'yes') { ?>
                    if (output.has_booking) {
                        $('#pendingBooking').show();
                        new Audio(base_url + 'assets/gkpos/beep.mp3').play();
                    } else {
                        $('#pendingBooking').hide();
                    }
<?php } ?>

            }
        }, "json");
        setTimeout("updateCaller()", 5000);
    }
    function openPendingBox(boxId) {
        $.ajax({
            url: "<?php echo site_url('gkpos/latestPendingOrder') ?>",
            type: "POST",
            success: function (json) {
                $('#latestPendingOrder').html(json);
                $('#' + boxId).modal({
                    keyboard: false,
                    backdrop: 'static',
                    width: '700px',
                    show: true
                });
            }
        });

    }
    function openPendingBooking(boxId) {
        $.ajax({
            url: "<?php echo site_url('gkpos/booking/pending_booking') ?>",
            type: "POST",
            success: function (json) {
                $('#latestPendingOrder').html(json);
                $('#' + boxId).modal({
                    keyboard: false,
                    backdrop: 'static',
                    width: '450px',
                    show: true
                });
            }
        });

    }


</script>
<header id="gkposHeader">
    <nav class="navbar navbar-default navbar-fixed-top top-borderbg" style="min-height: 20px;">
        <?php if ($this->config->item('is_touch') == 'enable') : ?>
            <div id="clientsDropDown1" class="container-fluid"></div>
        <?php endif; ?>
        <div class="container-fluid">
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3  pull-left text-left">
                <?php if ($this->config->item('is_touch') == 'enable') : ?>
                    <button onclick="addHeaderKeyboard()" style="z-index: 999"><span class="fa fa-keyboard-o fa-2x"></span></button>
                <?php endif; ?>
                &nbsp;<span id="GkposAjaxPageLoader" style="display: none;"><img src="<?php echo ASSETS_GKPOS_PATH . 'images/ajax-loader.gif' ?>"></span>
                <?php if ($this->config->item('gk_order_delivery') == 'yes' && $this->session->userdata('gkpos_usertype') <= 2): ?>
                    <div style="float: right;display: none;" class="online-order-btn-visibility"><button class="btn btn-danger btn-sm" style="background: transparent;font-weight: bold" onclick="getPage('<?php echo site_url('gkpos/manage_delivery') ?>', 'Delivery Management')">Manage Delivery</button></div>
                <?php endif; ?>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6  text-capitalize text-center" style="color: #ffffff; padding: 5px;"><?php isset($admin) ? print$admin : '' ?> <span id="newOrders" class="btn btn-warning flash-button" style="display: none;" onclick="openPendingBox('pendingOrder')">&nbsp;&nbsp;New Order &Downarrow; </span>&nbsp;&nbsp;<span onclick="openPendingBooking('pendingBookingBox')" id="pendingBooking" class="btn btn-primary flash-button" style="display: none;"><i class="fa fa-bookmark"></i>New Booking</span></div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3  pull-right text-right">
                <?php if ($this->config->item('is_touch') == 'enable') : ?>
                    <button onclick="addHeaderKeyboard()"  style="z-index: 999" class="pull-right"><span class="fa fa-keyboard-o fa-2x"></span></button>
                <?php endif; ?>
                <?php if ($this->config->item('gk_order_delivery') == 'yes' && $this->session->userdata('gkpos_usertype') <= 2): ?>
                    <div style="float: left; display: none; " class="online-order-btn-visibility"><button class="btn btn-danger btn-sm" style="background: transparent;font-weight: bold " onclick="getPage('<?php echo site_url('gkpos/manage_delivery') ?>', 'Delivery Management')">Manage Delivery</button></div>
                <?php endif; ?>
            </div>
        </div>
    </nav>
    <input type="hidden" id="CallerPhoneNumber">
    <input type="hidden" id="CallerPhoneName">
    <div id="latestPendingOrder"></div>
</header>
<style>
    .flash-button{
        padding:5px 10px;
        color:#fff;
        border:none;
        border-radius:5px;
        animation-name: flash;
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash;
        -webkit-animation-duration: 1s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash;
        -moz-animation-duration: 1s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
    }
    @keyframes flash {  
        0% { opacity: 1.0; }
        50% { opacity: 0.5; }
        100% { opacity: 1.0; }
    }

    @-webkit-keyframes flash {  
        0% { opacity: 1.0; }
        50% { opacity: 0.5; }
        100% { opacity: 1.0; }
    }
    @-moz-keyframes flash {  
        0% { opacity: 1.0; }
        50% { opacity: 0.5; }
        100% { opacity: 1.0; }
    }
</style>