<link href="<?php echo SITE_LINK; ?>Views/files/styles.<?php echo $Language == 'ar' ? 'rtl.' : ''; ?>css" rel="stylesheet">

<style>
    .ibox{
        clear: both;
        margin-bottom: 25px;
        margin-top: 0;
        padding: 0;
    }
    .ibox-content {
        background-color: #ffffff;
        color: inherit;
        padding: 15px 20px 20px 20px;
        border-color: #e7eaec;
        border-image: none;
        border-style: solid solid none;
        border-width: 1px 0;
    }
    .ibox-title {
        background-color: #0093AF;
        color: #fff;
        border-color: #e7eaec;
        border-image: none;
        border-style: solid solid none;
        border-width: 3px 0 0;
        margin-bottom: 0;
        padding: 5px;
        max-height: 50px;
        text-align: center;
    }
    .ibox-tools {
        display: block;
        float: none;
        margin-top: 0;
        position: relative;
        padding: 0;
        text-align: right;
    }
    .ibox-tools a {
        cursor: pointer;
        margin-left: 5px;
        color: #c4c4c4;
    }
    .ibox-title h4 {
        display: inline-block;
        font-size: 14px;
        margin: 0 0 7px;
        padding: 0;
        text-overflow: ellipsis;
        float: left;
    }
    .page-container{
        padding-left:0px !important;
    }
    .page-container .page-content-wrapper .content{
        padding-top:5px !important;
    }
    #MainContainer .Boxed{
        background-color: #fff;
        padding-top: 10px;
        padding-bottom: 10px;
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
    }
    ul.nav >li.active{
        background-color:#3b4752;
        border-radius: 5px;
    }
    ul.nav >li >a{
        color:#3b4752;
    }
    ul.nav >li.active >a{
        color:#fff;
    }
    .nav>li{
        float: left;
    }
    .floor_divs,.floor_reserved_divs{
        display: block;
          
        border-radius: 3px;
        color:#969696;
    }
    .floor_reserved_divs{
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .floors{
        padding-top:10px;
        cursor:pointer;
        background-color:#4c0870;
        padding-bottom: 10px;
    }
    .available{
        padding-bottom: 2em;
        cursor:pointer;
        background-color:#4c0870;
        padding-top:2em;
    }
    .reserved{
        padding-bottom: 0.5em;
        padding-top:0.5em;
        background-color:white;
        border-style: solid;
        /*        cursor:pointer;*/
    }
    .row.is-flex {
        display: flex;
        flex-wrap: wrap;
    }
    .btn.btn-options{
        background-color:#3b4752;
        color:#fff;
        border-radius: 5px;
        padding: 10px;
    }
    .panel-heading{
        padding:0px !important;
    }
    .col-main{
        display: flex; /* equal height of the children */
    }
    .nav>li>a:focus, .nav>li>a:hover {
        text-decoration: none;
        background-color: #3b4752 !important;
        color:#fff;
        border-radius: 5px !important;
    }
    .floor_divs.available .panel-heading{
        margin-top: 20px;
    }
    .floor_divs.reserved .panel-heading{
        cursor:pointer;
    }
    .f-s-25{
        font-size: 25px;
    }
    .f-s-15{
        font-size: 15px;
    }
    .custom-menu {
        display: none;
        z-index: 1000;
        position: absolute;
        overflow: hidden;
        border: 1px solid #CCC;
        white-space: nowrap;
        font-family: sans-serif;
        background: #FFF;
        color: #333;
        border-radius: 5px;
        list-style-type: none;
        padding:0;
        height:60px;
    }
    .custom-menu li {
        padding: 17px 12px;
        cursor: pointer;
    }
    .custom-menu li:hover {
        background-color: #DEF;
    }
    .icon-print{
        bottom: 1%;
        right: 12%;
        position:absolute;
        color:black;
        font-size:1.5em;
        cursor:pointer;
    }
    .table_title{
        color: #ed9421 !important;
    }
    .icon_alias{
        bottom: 1%;
        left:10%;
        position:absolute;
        color:black;
        font-size:1.5em;
        cursor:pointer;
    }
    .burlywood{
        color:burlywood;
    }
</style>
<?php 
// echo "<pre>";
// print_r($takeaway_order);
// echo "</pre>";
// foreach($takeaway_order as $order):
//     echo "<h3>";
//     echo $order['Invoice_ID_Auto'];
//     echo "</h3>";
//     echo "<h3>";
//     echo $order['date_created'];
//     echo "</h3>";
//     foreach($order['details'] as $order_item):
//         echo "<h3>";
//         echo $order_item['Product_Name'];
//         echo "</h3>";
//         echo "<h3>";
//         echo $order_item['Item_Quantity_Current'];
//         echo "</h3>";        
//     endforeach;
// endforeach;

?>
<section class="content " id="MainContainer">
    <div class="row">
        <div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12 Boxed m-b-5 "  >
            <?php if ($permissions->hasPermission('Inventory')) { ?>
            <div class="col-xs-3 col-sm-2 col-md-2 col-lg-2 m-t-5 f-s-18" style="color:#4c0870;">
                <strong class="all-caps cursor" onclick="location.href = '<?php echo SITE_LINK . 'Inventory'; ?>'"> <?php echo smc_session()['user_logged_username']; ?></strong>
            </div>
            <?php } ?>
            <div class="col-sm-4 col-md-6 col-lg-4 f-s-18">
                <ul class="notification-list no-margin  b-grey b-l b-r no-style p-l-30 p-r-10" >
                    <li class="p-r-15 inline" style="">
                        <span class="pg-calender" style="margin-right:5px"></span>
                        <?php echo CommonLanguage::getMessage(date("l")) . " " . date("d-m-Y"); ?>
                    </li>
                    <li class="p-r-15 inline" id="HeaderTime">
                        <span class="pg-clock" style="margin-right:5px"></span>
                        <span class="hour"></span>
                        <span>:</span>
                        <span class="min"></span>
                        <span>:</span>
                        <span class="sec"></span>
                        <span class="meridiem"></span>
                    </li>
                </ul>
            </div>  
            <div class="col-xs-3 col-sm-1 col-md-3 col-lg-2 m-t-5  pull-right             <?php echo $permissions->hasPermission('POS') ? '':'hidden'; ?>">
                <a href="main_page" class="btn-link  m-l-20 sm-no-margin pull-right">
                    <span><b><?php echo CommonLanguage::getMessage('table'); ?></b></span>
                </a>
            </div>
            <div class="col-xs-3 col-sm-1 col-md-3 col-lg-2 m-t-5  pull-right">
                <a onclick="doLogoutSystem()" class="btn-link  m-l-20 sm-no-margin pull-right">
                    <span><i class="fa fa-sign-out m-r-xs"></i> <b><?php echo CommonLanguage::getMessage('logout'); ?></b></span>
                </a>
            </div>
            
        </div>
        <div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12 Boxed  ">
            <div class="col-md-8">
                <ul class="nav">
                    <li class="active"><a data-toggle="tab" href="#all">All order</a></li>
                 </ul>
            </div>
            <div class="col-md-2 hidden <?php echo (smc_session()['default_setting']['activate_cash_drawer'] == 1 && !isset(smc_session()['is_cash_drawer_active'])) ? 'hidden' : ''  ?>">
                <a class="btn btn-options pull-right" data-toggle="modal" data-target="#FunctionsModal"><?php echo CommonLanguage::getMessage('functions'); ?></a>
            </div>
            <?php if ($permissions->hasPermission('takeaway_delivery')) { ?>
            <div class="col-md-2 pull-right hidden">
                <a class="btn btn-options " href="<?php echo SITE_LINK; ?>main_pos/delivery">Takeaway / Delivery</a>
                <!--                <a class="btn btn-options pull-right m-r-5" href="< ?php echo SITE_LINK; ?>main_pos/takeaway">Takeaway</a>-->
            </div>
            <?php } ?>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12  ">
                <br>
                <div class="tab-content">
                    <div id="all" class="tab-pane fade in active">
                        <div id="append_all_data" class="row reserved_tables">
                             
                        </div>
                    </div>
                     
                    
                </div>
            </div>
        </div>
    </div>
</section>
<div class="modal fade" id="table_modal" data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-20"></i>
                </button>
                <h5 class="text-left bold"><?php echo CommonLanguage::getMessage('table'); ?></h5>
            </div>
            <div class="modal-body">
                <div class="row"><?php echo Forms::AlertDiv('table_alert'); ?></div>
                <form id="table_form" method="POST" onsubmit="return false">
                    <input type="hidden" name="table_id" id="table_id"/>
                    <div class="row form-group">
                        <div class=" col-md-12  " >
                            <label class="labelText"><?php print CommonLanguage::getMessage('table_alias_name'); ?></label>
                            <input type="text"  placeholder="<?php print CommonLanguage::getMessage('table_alias_name'); ?>" id="table_alias_name" name="table_alias_name" class="form-control " required />
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal"><?php print CommonLanguage::getMessage('Close'); ?></button>
                <button class="btn btn-primary" id="submit_table"><?php print CommonLanguage::getMessage('Save'); ?></button>
            </div>
            <?php echo Forms::ModalLoader('tableDisabler'); ?>
        </div>
    </div>
</div>
<ul class='custom-menu'>
    <li data-action = "print_inv"><?php echo CommonLanguage::getMessage('print_invoice') ?></li>
</ul>
<script>
    var table_id = 0, is_available = 1,
        sumatra_print = <?php echo smc_session()['default_setting']['sumatra_print'] == 1 ? "true" : "false" ?>,
        select_lang = <?php echo json_encode(CommonLanguage::getMessage('select')); ?>,
            show_total_deposite = <?php echo json_encode($permissions->hasPermission('show_total_deposite')); ?>,
                view_all_tables = <?php echo json_encode($permissions->hasPermission('view_all_tables')); ?>,
                    logged_id = <?php echo json_encode(SESSION::getUserID()); ?>,
                        show_total_withdrawal = <?php echo json_encode($permissions->hasPermission('show_total_cash')); ?>,
                            Required_Fields = <?php echo json_encode(CommonLanguage::getMessage('Required_Fields')); ?>,
                                Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>,
                                    Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit')); ?>,
									add_road_customer_pos = <?php echo json_encode(smc_session()['default_setting']['add_pos_customer']); ?>,
                                        Org_Type = <?php echo json_encode($Org_Type); ?>,alias_name_parent;
    $(function () {
        // Trigger action when the contexmenu is about to be shown
        update_data();
            setInterval(update_data, 2000);

        $(".floor_divs.reserved").bind("contextmenu", function (event) {
            if(view_all_tables || logged_id == $(this).attr('data-user-id')){
                // Avoid the real one
                event.preventDefault();
                // Show contextmenu
                $(".custom-menu").finish().toggle(100).
                // In the right position (the mouse)
                css({
                    top: event.pageY + "px",
                    left: event.pageX + "px"
                });
            }
        });

        $(".floor_divs.reserved").on("contextmenu", function () {
            table_id = $(this).attr("data-id");
            is_available = $(this).hasClass("available");
            //  alert(table_id)
        })
        //If the document is clicked somewhere
        $(document).bind("mousedown", function (e) {
            // If the clicked element is not the menu
            if (!$(e.target).parents(".custom-menu").length > 0) {
                // Hide it
                $(".custom-menu").hide(100);
            }
        });
        // If the menu element is clicked
        $(".custom-menu li").click(function () {
            // This is the triggered action name
            switch ($(this).attr("data-action")) {
                    // A case for each action. Your actions here
                case "print_inv":
                    print_invoice();
                    break;
                                               }
            // Hide it AFTER the action was triggered
            $(".custom-menu").hide(100);
        });
        $(".icon-print").on("click", function (e) {
            //            alert()
            table_id = $(this).parents(".floor_divs").attr("data-id");
            is_available = $(this).parents(".floor_divs").hasClass("available");
            e.stopPropagation();
            print_invoice();
            $(this).addClass('burlywood');
        });
        $('.icon_alias').on('click',function(e){
            $('#table_modal').modal('show');
            $('#table_id').val($(this).attr('data-id')); 
            alias_name_parent = $(this).closest('.floor_divs');
            e.stopPropagation();
        });
        $("#submit_table").on("click", function () {
            var table_alias_name= $('#table_alias_name').val(); 
            var Data = new FormData(document.getElementById("table_form"));
            $("#tableDisabler").removeClass('hidden');
            $.ajax({
                url: "RestaurantAjax/updateAliasTableName",
                method: "POST",
                data: Data,
                processData: false,
                contentType: false,
                dataType: "JSON",
                complete: function (jqXHR, status) {
                    if (status == 'success') {
                        if (jqXHR.responseJSON[1] == "success") {
                            hideModalAlert('table_modal', 'table_alert');
                            if(table_alias_name)
                                $('b.table_title',alias_name_parent).html(table_alias_name)
                            else
                                $('b.table_title',alias_name_parent).html($('b.table_title',alias_name_parent).attr('current_table_name'))  
                        }
                        AddAlert("#table_alert", jqXHR.responseJSON[0], jqXHR.responseJSON[1]);
                    }
                    $("#tableDisabler").addClass('hidden');
                }
            });
        });
    });
    function print_invoice() {
        if (is_available)
            return false;
        $.ajax({
            url: "RestaurantAjax/print_table_invoice",
            method: "GET",
            data: {id: table_id},
            complete: function (v1, v2) {
                if (v2 == 'success') {
                    if (!sumatra_print) {
                        myurl = "Inventory/pos_view_invoice/" + v1.responseText;
                        printExternal(myurl)
                    }
                }
            }
        })
    }
    function update_states(id){
        $.ajax({
            url: "RestaurantAjax/update_states",
            method: "POST",
            data: {id:id},
            dataType: "JSON",
            complete: function (jqXHR, status) {
                if (status == 'success') {
                    $(".I"+id).hide()
                }
            }
        });
    }
    function update_data(){
        var id = 0;
        $.ajax({
            url: "RestaurantAjax/update_data",
            method: "POST",
            data: {id:id},
            dataType: "JSON",
            complete: function (jqXHR, status) {
                $("#append_all_data").empty() 
                 const obj = JSON.parse(jqXHR.responseText);
                   var append_data ='';
                 Object.keys(obj).forEach(key => {
                     append_data +="<div class='col-xs-1 col-sm-1 col-md-1 col-lg-2 m-b-10 '><div class='floor_divs reserved I"+obj[key]['Invoice_ID_Auto']+"' data-id='"+obj[key]['Invoice_ID_Auto']+"' onclick='update_states("+obj[key]['Invoice_ID_Auto']+")'  > <div class='panel-heading'> <div class='panel-title text-black f-s-25 hint-text text-center'> <b class='table_title' current_table_name='"+obj[key]['Invoice_ID_Auto']+"'>Order# "+obj[key]['Invoice_ID_Auto']+"</b> </div> ";
                     append_data += "<div style=' display: flex; justify-content: space-between; ' class='panel-title text-black f-s-15 hint-text text-center user_text'><b><span style=' padding-left: 26px; text-decoration: underline;'>Name</span> </b><b><span style=' padding-right: 60px;text-decoration: underline; '>  qty</span> </b> </div>";

                        Object.keys(obj[key]['details']).forEach(child_key => {
                        append_data += "<div style=' display: flex; justify-content: space-between; ' class='panel-title text-black f-s-15 hint-text text-center user_text'><b><span style=' padding-left: 26px; '>"+obj[key]['details'][child_key]['Product_Name']+"</span> </b><b><span style=' padding-right: 60px; '>  "+obj[key]['details'][child_key]['Item_Quantity_Current']+"</span> </b> </div>";

                       });
                      append_data += "</div> </div></div>"
                  });
                 $("#append_all_data").append(append_data)
                //  for (var key in res) {
                //     // key here is the index of line array
                //      // each element of line array is an object
                //     // so we can iterate over its properties
                //     console.log(key)
                //     console.log(res)
                //     for (var prop in res.details) {
                //         console.log(res.details)
                //         console.log(prop)
                //     }
                // }
               }
        });
    }
    function printPOSExternal(url, data) {
        $("#print_iframe").remove();
        if (url == undefined || url == false || url == null || url == '')
            url = 'about::blank';
        $("<iframe id='print_iframe' style='position:absolute;top:0px;left:0;width:0px;height:0px;opacity:0;' src='" + url + "' ></iframe>").appendTo("body");
        if (data !== undefined) {
            $("#print_iframe")[0].contentWindow.document.write(data);
            $("#print_iframe")[0].contentWindow.document.close();   //important to make close or window load as example will not triggered
        }
    }
</script>
<?php
include 'Views/POS/pos_modals.php';
include "Views/POS/end-of-day-modal.php";
