<div style="display: none;">
    <div id="eposBookingOrderInfoCollector">
        <div class="popup-header toolbar-header">
            <div class="popup-title"><?php echo $this->lang->line('customer_booking_info_form') ?></div>
            <div class="popup-close-btn" onclick="zamanEposPopupcloser()"><span class="icon icon-cancel"></span></div>
        </div>
        <div class="popup-content">
            <div class="pane">
                <form id="bookingInfoCollectForm" action="<?php echo site_url('api/save_epos_booking') ?>">
                    <div class="neworder-waiting ">
                        <div class="clearfix"></div>
                        <div class="delivery-field one-fourth">
                            <div class="form-group">
                                <input type="hidden" name="id" id="bookingFormBookingId" value="0">
                                <label><?php echo $this->lang->line('first_name') ?></label>
                                <input type="text" name="first_name" id="bookingCustomerFirstName" class="form-control" placeholder="<?php echo $this->lang->line('first_name') ?>" id="bookingCutomerName">
                            </div>
                        </div>
                        <div class="delivery-field one-fourth">
                            <div class="form-group">
                                <label><?php echo $this->lang->line('last_name') ?></label>
                                <input type="text" name="last_name" id="bookingCustomerLastName" class="form-control" placeholder="<?php echo $this->lang->line('last_name') ?>">
                            </div>
                        </div>
                        <div class="delivery-field one-fourth">
                            <div class="form-group">
                                <label><?php echo $this->lang->line('email_address') ?></label>
                                <input type="text" name="email" id="bookingCustomerEmail" class="form-control" placeholder="Email Address">
                            </div>
                        </div>
                        <div class="delivery-field one-fourth">
                            <div class="form-group">
                                <label><?php echo $this->lang->line('phone') ?></label>
                                <input type="text" name="phone" id="bookingCustomerPhone" class="form-control" placeholder="<?php echo $this->lang->line('phone') ?>">
                            </div>
                        </div>
                        <div class="delivery-field one-fourth">
                            <div class="form-group">
                                <label><?php echo $this->lang->line('guest_quantity') ?></label>
                                <input type="text" name="guest_qty" id="bookingCustomerGuestQty" class="form-control" placeholder="<?php echo $this->lang->line('guest_quantity') ?>">
                            </div>
                        </div>
                        <div class="delivery-field one-fourth">
                            <div class="form-group">
                                <label><?php echo $this->lang->line('date') ?></label>
                                <input type="text" name="date" class="form-control" id="bookingInfoCollectFormDatePicker" placeholder="<?php echo $this->lang->line('date') ?>">
                            </div>
                        </div>
                        <div class="delivery-field one-fourth">
                            <div class="form-group">
                                <label><?php echo $this->lang->line('time') ?></label>
                                <input type="text" name="time" class="form-control" id="bookingInfoCollectFormTimePicker" placeholder="<?php echo $this->lang->line('time') ?>">
                            </div>
                        </div>
                        <div class="delivery-field one-fourth">
                            <div class="form-group">
                                <label><?php echo $this->lang->line('note') ?></label>
                                <input type="text" name="note" class="form-control" id="bookingInfoCollectionMessage" placeholder="<?php echo $this->lang->line('note') ?>">
                            </div>
                        </div>
                    </div>
                    <div class="tab-group config-submit">
                        <button type="submit" onclick="initiateBookingOrder('bookingInfoCollectForm')" style="border-radius: 0px;"><span class="icon icon-folder"></span>&nbsp;<?php echo $this->lang->line('go') ?></button>
                    </div>
                </form>
                <div class="clearfix"></div>
                <div class="booking-keyboard"></div>
            </div>
        </div>
    </div>
</div>
<div style="display: none;">
    <div id="eposBookingOrderPage" class="epos-order-list-page">
        <div class="popup-header toolbar-header">
            <div class="popup-title"><?php echo $this->lang->line('booking') ?></div>
            <div class="popup-close-btn" onclick="zamanEposPopupcloser()"><span class="icon icon-cancel"></span></div>
        </div>
        <div class="page-loader" style="display: none;"></div>
        <div class="tab-group page-order-tab" style="width: 100%;margin-top: -3px;">
            <div  class="tab-item booking booking-bg" onclick="zamanBookingOrderInfoControllerPopup(0, '', '', '', '', '', '', '', '', '')"><?php echo $this->lang->line('add_new') . ' ' . $this->lang->line('booking') ?></div>
            <div  class="tab-item booking order-process-status-1"><?php echo $this->lang->line('pending') ?></div>
            <div  class="tab-item booking order-process-status-2"><?php echo $this->lang->line('accepted') ?></div>
            <div  class="tab-item booking order-process-status-3"><?php echo $this->lang->line('rejected') ?></div>
            <div  class="tab-item booking booking-bg" onclick="zamanBookingOrderPageControllerPopup('yes');"><?php echo $this->lang->line('today') . ' ' . $this->lang->line('booking') ?></div>
            <div  class="tab-item booking online-bg" onclick="zamanBookingOrderPageControllerPopup('no');"><?php echo $this->lang->line('all') . ' ' . $this->lang->line('booking') ?></div>
        </div>
        <div class="popup-content">
            <div class="pane" id="bookingListPlaceHolder"></div>
        </div>
    </div>
</div>
<script type="text/javascript">
    function zamanBookingOrderInfoControllerPopup(id, firstName, lastName, phone, email, guestQty, date, time, note, status) {
        resetForm('bookingInfoCollectForm');
        $('#placeOrderTypeBlock').hide();
        $('#bookingInfoCollectFormDatePicker').datetimepicker({
            timepicker: false,
            format: 'd/m/Y',
            minDate: '<?php echo date('d/m/Y', strtotime('today')) ?>',
            formatDate: 'd/m/Y'
        });
        $('#bookingInfoCollectFormTimePicker').datetimepicker({
            datepicker: false,
            format: 'h:i a',
            formatTime: 'h:i a',
            MinTime: '5:00 pm',
            MaxTime: '11:59 pm',
            step: 30
        });
        if ($('#Keyboard').length > 0) {
            $('#Keyboard').empty();
            $('#Keyboard').removeAttr('id');
        }
        $('.booking-keyboard').attr('id', 'Keyboard');
        keyboard('Keyboard');
        $.colorbox({
            inline: true,
            scrolling: false,
            href: "#eposBookingOrderInfoCollector",
            width: '100%',
            height: 'auto',
            maxWidth: "100%",
            open: true,
            closeButton: false,
            transition: 'none',
            overlayClose: false,
            bottom: '0',
            className: 'transparent-overlay',
            onOpen: function () {
                resetForm('bookingInfoCollectForm');
            },
            onLoad: function () {
                jsKeyboard.currentElement = $('#bookingCustomerFirstName');
            },
            onComplete: function () {
                if (Number(id) > 0 && Number(status) > 0) {
                    $('#bookingFormBookingId').val(id);
                    $('#bookingCustomerFirstName').val(firstName);
                    $('#bookingCustomerLastName').val(lastName);
                    $('#bookingCustomerPhone').val(phone);
                    $('#bookingCustomerEmail').val(email);
                    $('#bookingCustomerGuestQty').val(guestQty);
                    $('#bookingInfoCollectFormDatePicker').val(date);
                    $('#bookingInfoCollectFormTimePicker').val(time);
                    $('#bookingInfoCollectionMessage').val(note);
                }
            },
            onCleanup: function () {
                $('#bookingFormBookingId').val('');
                $('#bookingCustomerFirstName').val('');
                $('#bookingCustomerLastName').val('');
                $('#bookingCustomerPhone').val('');
                $('#bookingCustomerEmail').val('');
                $('#bookingCustomerGuestQty').val('');
                $('#bookingInfoCollectFormDatePicker').val('');
                $('#bookingInfoCollectFormTimePicker').val('');
                $('#bookingInfoCollectionMessage').val('');
            },
            onClosed: function () {
                $('#Keyboard').empty();
                $('#Keyboard').removeAttr('id');
                $('#bookingInfoCollectFormSearch').val('');
                resetForm('bookingInfoCollectForm');
            }
        });
    }
    function initiateBookingOrder(formId) {
        $('#' + 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 () {
                        $('.page-loader').show();
                    },
                    success: function (response) {
                        $('.page-loader').hide();
                        if (response.status) {
                            zamanBookingOrderPageControllerPopup('no');
                        } else {
                            warning('<?php echo $this->lang->line('error') ?>', '<?php echo $this->lang->line('data_saving_failed') ?>', '<?php echo $this->lang->line('close') ?>');
                        }
                    }
                });
            },
            errorClass: "has-error",
            highlight: function (e) {
                $(e).closest('.form-group').addClass('has-error');
            },
            unhighlight: function (e) {
                $(e).closest('.form-group').removeClass('has-error');
            },
            rules: {
                first_name: {required: true, alphanumeric: true},
                last_name: {required: true, alphanumeric: true},
                phone: {number: true, required: true},
                email: {email: true},
                guest_qty: {number: true, min: 1, required: true},
                date: {required: true},
                time: {required: true}
            },
            errorPlacement: function (error, element) {
                errorPlacement(error, element);
            }
        });
    }

    function zamanBookingOrderPageControllerPopup(today) {
        $('#placeOrderTypeBlock').hide();
        $.colorbox({
            inline: true,
            scrolling: false,
            href: "#eposBookingOrderPage",
            width: '60%',
            height: 'auto',
            maxWidth: "100%",
            open: true,
            closeButton: false,
            transition: 'none',
            overlayClose: false,
            className: 'transparent-overlay',
            onOpen: function () {
                $('#bookingListPlaceHolder').html('');
            },
            onComplete: function () {
                if (checkInternetConnection()) {
                    $('.page-loader').show();
                    $.ajax({
                        url: '<?php echo site_url('api/epos_booking') ?>',
                        dataType: 'json',
                        type: 'POST',
                        data: {today: today},
                        success: function (response) {
                            var html = '';
                            if (response.length > 0) {
                                response.forEach(function (aBooking) {
                                    html += `<div class="pane-content">
                                    <div class="zaman-nav-item-pane">
                                        <div class="order-item-img-block pull-left booking order-process-status-` + aBooking.status + `" onclick="updateBookingStatus(` + aBooking.id + `,'` + aBooking.first_name + `','` + aBooking.last_name + `','` + aBooking.phone + `','` + aBooking.email + `','` + aBooking.guest_qty + `','` + aBooking.date + `','` + aBooking.time + `','` + aBooking.note + `','` + aBooking.status + `')">
                                            <p class="text-capitalize" style="line-height:0.9;">` + aBooking.date + `<br/>` + aBooking.time + `<br/><img class="booking-icon" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwAQMAAABtzGvEAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAA1JREFUeNpjYBgF1AQAAVAAATS4OtkAAAAASUVORK5CYII="><div style="margin-top:-35px">`+aBooking.guest_qty+`</div><br/>` + aBooking.first_name + ' ' + aBooking.last_name + `<br/>` + aBooking.phone + `</p>
                                        </div>
                                    </div>
                                </div>`;
                                });
                                html += `<div class="clearfix">&nbsp;</div>`;
                            }
                            $('#bookingListPlaceHolder').html(html);
                            $('.page-loader').hide();
                        }
                    });
                } else {
                    warning('<?php echo $this->lang->line('lost_connection') ?>', '<?php echo $this->lang->line('lost_connection_message') ?>', '<?php echo $this->lang->line('close') ?>');
                }
            },
            onClosed: function () {
                $('#bookingListPlaceHolder').html('');
                //zamanOrderListPageController();
            }
        });
    }
    function updateBookingStatus(id, firstName, lastName, phone, email, guestQty, date, time, note, status) {
        var CustomerInfo = '<strong><?php echo $this->lang->line('name') ?>:</strong> ' + firstName.toUpperCase() + ' ' + lastName.toUpperCase() + '<br/>';
        CustomerInfo += '<strong><?php echo $this->lang->line('phone') ?>:</strong> ' + phone + '<br/>';
        if ($.trim(email)) {
            CustomerInfo += '<strong><?php echo $this->lang->line('email') ?>:</strong> ' + email + '<br/>';
        }
        CustomerInfo += '<strong><?php echo $this->lang->line('guest_quantity') ?>:</strong>  ' + guestQty + '<br/>';
        CustomerInfo += '<strong><?php echo $this->lang->line('date') . ' ' . $this->lang->line('time') ?></strong> : ' + date + ' ' + time + '<br/>';
        if ($.trim(note)) {
            CustomerInfo += '<strong><?php echo $this->lang->line('note') ?>:</strong>  ' + note.toUpperCase() + '<br/>';
        }
        if (status === '1') {
            CustomerInfo += '<strong><?php echo $this->lang->line('status') ?> :</strong>  <?php echo $this->lang->line('pending') ?>';
        }
        if (status === '2') {
            CustomerInfo += '<strong><?php echo $this->lang->line('status') ?> :</strong>  <?php echo $this->lang->line('accepted') ?>';
        }

        if (status === '3') {
            CustomerInfo += '<strong><?php echo $this->lang->line('status') ?> :</strong>  <?php echo $this->lang->line('rejected') ?>';
        }
        $.confirm({
            title: firstName.toUpperCase() + ' ' + lastName.toUpperCase() + ' <?php echo $this->lang->line('booking') ?>',
            message: CustomerInfo,
            buttons: {
                '<?php echo $this->lang->line('accept') ?>': {
                    'class': 'positive',
                    'action': function () {
                        if (status === '2') {
                            warning('<?php echo $this->lang->line('booking') ?>', '<?php echo $this->lang->line('already_accepted') ?>', '<?php echo $this->lang->line('ok') ?>');
                        } else {
                            updateRemoteBooking(id, 2);
                        }
                    }
                },
                '<?php echo $this->lang->line('reject') ?>': {
                    'class': 'negative',
                    'action': function () {
                        if (status === '3') {
                            warning('<?php echo $this->lang->line('booking') ?>', '<?php echo $this->lang->line('already_rejected') ?>', '<?php echo $this->lang->line('ok') ?>');
                        } else {
                            updateRemoteBooking(id, 3);
                        }
                    }
                },

                '<?php echo $this->lang->line('edit') ?>': {
                    'class': 'primary',
                    'action': function () {
                        zamanBookingOrderInfoControllerPopup(id, firstName, lastName, phone, email, guestQty, date, time, note, status)
                    }
                },
                '<?php echo $this->lang->line('close') ?>': {
                    'class': 'negative',
                    'action': function () {
                    }
                }
            }
        });
    }
    function updateRemoteBooking(id, status) {
        if (checkInternetConnection()) {
            $.ajax({
                url: '<?php echo site_url('api/update_booking_status') ?>',
                data: {
                    id: id,
                    status: status
                },
                dataType: 'json',
                type: 'POST',
                beforeSend: function (xhr) {
                    $('.page-loader').show();
                },
                success: function (response) {
                    if (response.status) {
                        zamanBookingOrderPageControllerPopup();
                    }
                }
            });
        } else {
            warning('<?php echo $this->lang->line('lost_connection') ?>', '<?php echo $this->lang->line('lost_connection_message') ?>', '<?php echo $this->lang->line('close') ?>');
        }
    }
</script>










