<?php if (empty($id)) { ?>
    <div class="alert alert-danger" role="alert">
        <button class="close" data-dismiss="alert"></button>
        <strong>Danger: </strong>Please specify the display you want;
    </div>
    <?php
    return;
}
?>
<style>
    .page-container{
        padding-left:0px !important;
    }
    .page-container .page-content-wrapper .content{
        padding-top:0px !important;
        padding-bottom:0px !important;
    }
    .container-fluid.container-fixed-lg{
        width:100%!important;
    }
    #MainContainer .Boxed{
        background-color: #fff;
        padding-top: 10px;
        padding-bottom: 10px;
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
    }
    .small.hint-text{
        margin-top: -7px;
        margin-bottom: -10px;
    }
    .table{
        margin-top:0px !important;
        margin-bottom:0px !important;
    }
    .sm-gutter .row>[class^="col-"], .sm-gutter .row>[class*="col-"]{
        padding-right:0px !important;
        padding-left:0px !important;
    }
    .card.share .card-header{
        border-bottom:0;
    }
    .orders{
        padding-bottom: 0;
        margin-bottom: 0;
        background: #FFF;
        float: left;
        position: relative;
        border-radius: 4px;
        margin-bottom: 10px;
        border: 1px solid #e6e6e6;
    }
    .card-header{
        padding:5px;
        background-color:#4c0870;
        color:white;
    }
    .card-footer {
        padding:5px;
    }
    .btn{
        line-height: 14px !important;
    }
    .table>tbody>tr>td{
        padding:3px !important;
    }
    .table tbody tr td,.header_title{
        font-size:15.5px !important;
    }
    .uom_name{
        font-size:12px;
    }
</style>
<div id="empty_invoice" class="alert alert-danger" role="alert">
        <button class="close" data-dismiss="alert"></button>
        <strong>Danger: </strong>This Printer does not have an invoice;
    </div>
<section class="content " id="MainContainer">
    <input type="hidden" id="display_id" name="display_id" value="<?php echo $id; ?>"/>
    <div class="row m-t-10" id="main_div">
    </div>
    <?php echo Forms::ModalLoader('main_loader'); ?>
</section>
<script>
    $(function () {
        $('#MainContainer').on('click', '.done_details', function () {
            var parent = $(this).parents('.orders'), tr = $(this).parents('tr');
            $('#main_loader').removeClass('hidden');
            $.ajax({
                url: "OrderDisplayAjax/approve_details",
                data: {Entery_ID: $(this).attr('data-id'), Invoice_ID_Auto: $(this).attr('data-main-id')},
                dataType: "JSON",
                complete: function (jqXHR, status) {
                    if (status == 'success') {
                        if (jqXHR.responseJSON[1] == "success") {
                            if (jqXHR.responseJSON[2] == 1)
                                parent.remove();
                            else {
                                tr.remove();
                                //here in case of no more details we remove the whole invoice [this case if there is non done details but for another printer]
                                if ($('table tbody tr', parent).length == 0)
                                    parent.remove();
                            }
                        }
                    }
                    $('#main_loader').addClass('hidden');
                }
            });
        });
        $('#MainContainer').on('click', '.done_order', function () {
            var parent = $(this).parents('.orders');
            $('#main_loader').removeClass('hidden');
            $.ajax({
                url: "OrderDisplayAjax/approve_order",
                data: {Invoice_ID_Auto: $(this).attr('data-id')},
                dataType: "JSON",
                complete: function (jqXHR, status) {
                    if (status == 'success') {
                        if (jqXHR.responseJSON[1] == "success")
                            parent.remove();
                    }
                    $('#main_loader').addClass('hidden');
                }
            });
        });
        //initially get data
        getOrdersRefreshed();
    });

    //
    function getOrdersRefreshed() {
        $('#empty_invoice').show();

        $.ajax({
            url: "OrderDisplayAjax/getOrdersRefreshed",
            data: {display_id: $('#display_id').val()},
            dataType: "json",
            complete: function (v1, v2) {
                if (!$.trim(v1.responseJSON.data)){   
                    $('#empty_invoice').show();
                }
                else{   
                    $('#empty_invoice').hide();
                }
                if (v2 == "success") {

                    var response = v1.responseJSON;
                    if (typeof response.data == 'object') {
                        var html = '', block_nb = (response.blocks > 0 ? response.blocks : 3),
                                hide_done_order = response.hide_done_order,
                                hide_done_details = response.hide_done_details,
                                block_width = parseFloat(100 / block_nb),
                                main_div_ids = [];
                        $.each(response.data, function (i) {
                            var row = response.data[i], invoice_auto_id = row['Invoice_ID_Auto'];
                            if ($('.orders[data-id=' + invoice_auto_id + ']').length > 0) {
                                var entry_ids = [];
                                $('.orders[data-id=' + invoice_auto_id + '] span.current_time_ago').html(' ' + row.current_time_ago);
                                $.each(row['details'], function (j) {
                                    var table_details = '', details_row = row['details'][j];
                                    if ($('.orders[data-id=' + invoice_auto_id + '] tbody tr[data-id=' + details_row['Entery_ID'] + ']').length == 0) {
                                        table_details += '<tr data-id="' + details_row['Entery_ID'] + '"><td style="width:10%;" class="' + (hide_done_details == 1 ? 'hidden' : '') + '"><a class="btn btn-primary done_details" data-id="' + details_row['Entery_ID'] + '" data-main-id="' + invoice_auto_id + '"><i class="fa fa-check"></i></a></td><td style="width:90%;"><b><span class="current_qty">' + details_row['not_done_qty'] + '</span>x</b> <span class="product_details">' + details_row['Product_Name'] + ' <span class="uom_name">(' + details_row['UOM_Name'] + ')</span>' + (details_row['product_description'] ? ('<br>' + details_row['product_description']) : '') + ('criteria' in details_row && details_row['criteria'].length ? ('<br>' + details_row['criteria'].join(',')) : '') + '</span></td></tr>';
                                        $('.orders[data-id=' + invoice_auto_id + '] tbody').append($(table_details));
                                    } else {
                                        $('.orders[data-id=' + invoice_auto_id + '] tbody tr[data-id=' + details_row['Entery_ID'] + '] span.current_qty').html(details_row['not_done_qty']);
                                        $('.orders[data-id=' + invoice_auto_id + '] tbody tr[data-id=' + details_row['Entery_ID'] + '] span.product_details').html(details_row['Product_Name'] + ' <span class="uom_name">(' + details_row['UOM_Name'] + ')</span>' + (details_row['product_description'] ? ('<br>' + details_row['product_description']) : '') + ('criteria' in details_row && details_row['criteria'].length ? ('<br>' + details_row['criteria'].join(',')) : ''));
                                    }
                                    entry_ids.push(details_row['Entery_ID']);
                                });
                                $('.orders[data-id=' + invoice_auto_id + '] tbody tr').each(function () {
                                    var entry_id = $(this).attr("data-id");
                                    if (entry_ids.indexOf(entry_id) == -1)
                                        $(this).remove();
                                });
                            } else {
                                html += '<div class="orders " data-id="' + invoice_auto_id + '" style="width:' + block_width + '%">' +
                                        '<div class="card-header ">' +
                                        '<div class="header_title">' +
                                        '<span class="pull-left">' + row['invoice_type_name'] + (row['invoice_type'] == '2' ? (' - ' + row['Delivery_Time']) : (row['invoice_type'] == 4 ? (' - ' + row['table_name']) : '')) + '</span>' +
                                        '<span class="pull-right">Inv# ' + row['inv_nb'] + '</span>' +
                                        '</div>' +
                                        '<br>' +
                                        '<div class="header_title"></div></div>' +
                                        '<div class="card-description">' +
                                        '<table class="table table-bordered">' +
                                        '<tbody>';
                                $.each(row['details'], function (j) {
                                    var details = row['details'][j];
                                    html += '<tr data-id="' + details['Entery_ID'] + '"><td style="width:10%;" class="' + (hide_done_details == 1 ? 'hidden' : '') + '"><a class="btn btn-primary done_details" data-id="' + details['Entery_ID'] + '" data-main-id="' + invoice_auto_id + '"><i class="fa fa-check"></i></a></td><td style="width:90%;"><b><span class="current_qty">' + details['not_done_qty'] + '</span>x </b><span class="product_details">' + details['Product_Name'] + ' <span class="uom_name">(' + details['UOM_Name'] + ')</span>' + (details['product_description'] ? ('<br>' + details['product_description']) : '') + ('criteria' in details && details['criteria'].length ? ('<br>' + details['criteria'].join(',')) : '') + '</span></td></tr>';
                                });
                                html += '</tbody>' +
                                        '</table>' +
                                        '</div>' +
                                        '<div class="card-footer clearfix">' +
                                        '<span class="pull-left">' +
                                        '<i class="fa fa-user"></i> ' + row['User_Full_Name'] +
                                        ' <i class="fa fa-clock-o"></i><span class="current_time_ago"> ' + row['current_time_ago'] + '</span>' +
                                        '</span>' +
                                        '<a href="javascript:void(0);" class="btn btn-primary  done_order pull-right ' + (hide_done_order == 1 ? 'hidden' : '') + '" data-id="' + invoice_auto_id + '"><i class="fa fa-check"></i> Done</a>' +
                                        '</div>' +
                                        '</div>';
                            }
                            main_div_ids.push(invoice_auto_id);
                        });
                        $('#main_div').append($(html));
                        //delete the invoices that no more exist
                        $('.orders').each(function () {
                            var invoice_id = $(this).attr("data-id");
                            if (main_div_ids.indexOf(invoice_id) == -1)
                                $(this).remove();
                        });
                    }
                    setTimeout(function () {
                        getOrdersRefreshed();
                    }, 30000);
                }
            }
        });
    }
</script>
<?php
