@extends('modules.head') @section('contenido')

<div class="box-header">
    @if(Auth::user()->rol_id == 1)
    <a class="auxiliar" href="{{url('/ordersReports/generate/report')}}">
        <button type="button" class="btn pull-left btnAux" data-dismiss="modal">
            <i class="fa fa-file"></i>{{ Lang::get('messages.screen_orders_tag1')}}
        </button>
    </a>
    @endif
    @if(Auth::user()->rol_id == 1 || Auth::user()->rol_id == 2 || Auth::user()->rol_id == 8 || Auth::user()->rol_id == 10)
    <a class="auxiliar" onclick="getReturnInProgress()" style="margin-left: 5px;">
        <button type="button" class="btn btnAux" data-dismiss="modal">
            <i class="fa fa-file"></i>{{ Lang::get('messages.screen_orders_tag16')}}
        </button>
    </a>
    @endif

    <a class="auxiliar-black" href="{{url('/pos/create')}}">
        <button class="btn btnAdd pull-right">
            <i class="fa fa-plus"></i>New order
        </button>
    </a>
</div>
<div class="containerOrderFilter">
    <div id="message-orders-notAccepted" class="ordersNotAccepted"><i class="fa fa-exclamation-circle"></i>
        <p id="text-orders-notAccepted" class="text-red"></p>
    </div>

    <form class="form-inline formFilter" id="form-filter">
        <div class="form-group">
            <label for="code_client">BP Code</label>
            <input type="text" class="form-control" id="code_client" placeholder="C1234">
        </div>
        <div class="form-group">
            <label for="code_plu">Item No</label>
            <input type="text" class="form-control" id="code_plu" placeholder="SD-23">
        </div>
        <button type="button" class="btn btn-default" id="button_filter">Send</button>
        <button type="button" class="btn btn-default" id="button_clear">Clear</button>
    </form>
</div>

<!-- LISTADO Productos-->
<div class="box">
    <div class="box-header">
        <h3 class="box-title">{{ Lang::get('messages.screen_orders_tag3')}}</h3>
    </div>
    <!-- /.box-header -->
    <div class="box-body table-responsive hideScrollOffset dvOrderList">
        @include('eko_table_preferences')
        <table id="example2" class="table table-bordered table-hover dataTable ekoTable" role="grid" aria-describedby="example2_info">
            <thead>
                <tr role="row">
                    <th id="col_order_id" class="sorting ekoColumn" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">Order ID</th>
                    <th id="col_invoice" class="sorting ekoColumn" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">Invoice</th>
                    <th id="col_date" class="sorting ekoColumn" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending">Date</th>
                    <th id="col_client" class="sorting ekoColumn" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">Client</th>
                    <th id="col_status" class="sorting ekoColumn" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">Status</th>
                    <th id="col_payment_type" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">Payment Type</th>
                    <th id="col_order_total" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">Order Total</th>
                    <th id="col_shipping_type" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">Shipping Type</th>
                    <th id="col_counter" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">Counter</th>
                    <th id="col_picker" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">Picker</th>
                    <th id="col_delivered_by" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">Delivered By</th>
                    <th id="col_delivery_date" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">Delivery Date</th>
                    <th id="col_packages" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">Packages</th>
                    <th id="col_branch" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">Branch</th>
                    <th id="col_red_flag" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">Flagged Status</th>
                </tr>
            </thead>
        </table>
    </div>
<!-- /.box-body -->
</div>

<style type="text/css">
    /* @media(max-width: 768px) {
        .dvOrderList table tr th:nth-child(2), .dvOrderList table tr th:nth-child(6), .dvOrderList table tr th:nth-child(10), .dvOrderList table tr th:nth-child(11),
        .dvOrderList table tr th:nth-child(12), .dvOrderList table tr th:nth-child(13), .dvOrderList table tr th:nth-child(14),
        .dvOrderList table tr td:nth-child(2), .dvOrderList table tr td:nth-child(6), .dvOrderList table tr td:nth-child(10), .dvOrderList table tr td:nth-child(11),
        .dvOrderList table tr td:nth-child(12), .dvOrderList table tr td:nth-child(13), .dvOrderList table tr td:nth-child(14) { display: none;}
    } */

    .dvWrap { width: 100%; display: flex; flex-wrap: wrap; }
    header { flex: 0 0 100%; height: 200px; }
    .dvOptions {
        position: fixed;
        top: 0;
        right: -200px;
        width: 200px;
        background-color: #f1f1f1f1;
        height: 100%;
    }
    ul {
        list-style-type: none;
    }

    #red_flag_modal .modal-body div {margin-bottom: 10px;}
</style>


<!-- /.MODAL VER INFO admin -->
@include('orders.infoOrder')
@include('orders.modal_calification')
@include('orders.modal_returns')
@include('orders.red_flag_modal')
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<link rel="stylesheet" href="{{ asset('js/jquery.fancybox/jquery.fancybox.min.css') }}"></link>
<script src="{{ asset('js/jquery.fancybox/jquery.fancybox.min.js') }}"></script>

<!--Columns visibility -->
<script src="{{ asset('js/column_visibility.js') }}"></script>
<!--End Columns visibility -->

<script src="{{ asset("js/orders.js?v=$appVersion") }}"></script>
<script src="{{ asset('js/create_filters_for_dataTables.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script type="text/javascript">

$(document).ready(function() {

$.fn.dataTable.ext.errMode = 'throw';
$('#example2 thead tr').clone(true).addClass('filters').prependTo('#example2 thead');
$('#example2 thead tr:first-child > th').css('background-color', "rgb(255, 255, 255)");
_table = $('#example2').DataTable({
    orderCellsTop: true,
    "fixedHeader": true,
    'paging': true,
    'lengthChange': true,
    'searching': true,
    'info': true,
    'autoWidth': true,
    "ordering": false,
    // "scrollX": true,
    order: [
        [1, 'desc']
    ],
    responsive: true,
    processing: true,
    serverSide: true,
    "language": {
        url: 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json'
    },
    ajax: '{{ route('orders.table', ["code_client" => $code_client, "code_plu" => $code_plu]) }}',
    columns: [{
            // COLUMN NAME: POS-ID
            name: 'code',
            data: 'code',
            render: function(data, type, row) {
                try {
                    row.actions = JSON.parse(row.actions);
                }catch (e) {}
                return `<a onClick="clickInfoOrder(${row.id}, ${row.actions ? row.actions.can_edit : null})" role="button" class="table-link"
                             title="See order details">${data}</a>`;
            }
        },
        {
            // COLUMN NAME: BO INVOICE
            name: 'bo_invoice',
            data: 'bo_invoice',
            render: function(data, type, row){
                let doc_num = '';
                if (data){
                    let index_of_slash = data.indexOf('/');
                    doc_num = data.slice(0, index_of_slash);
                }
                return doc_num ? doc_num : '';
            }
        },
        {
            // COLUMN NAME: DATE
            name: 'creation_date',
            data: 'creation_date',
            render: function(data) {
                var date = new Date(data);
                var month = date.getMonth() + 1;
                return (month.length > 1 ? "0" + month : month) + "/" + date.getDate() + "/" + date.getFullYear() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
            }
        },
        {
            // COLUMN NAME: CLIENT
            name: 'client.first_name',
            data: 'client',
            render: function(data) {
                return data.first_name + ' - ' + data.document;
            }
        },
        {
            // COLUMN NAME: STATUS
            name: 'orderState.name',
            data: 'order_state',
            render: function(data) {
                return data ? data.name : '';
            }
        },
        {
            // COLUMN NAME: PAYMENT TYPE
            name: 'paymentType.name',
            data: 'payment_type',
            render: function(data, type, row) {
                // return data ? data.name : '';
                if (data) {
                    if (data.name == "Credit Card") {
                        let result = '';
                        try{
                            let string = row.bo_credit_card_number;
                            result = string.substring(string.length - 4);
                        }catch (e){}
                        return result;
                    }
                    return data.name;
                }

            }
        },
        {
            // COLUMN NAME: ORDER TOTAL
            name: 'total_price',
            data: 'total_price',
            render: function(data) {
                return `$${data}`;
            }
        },
        {
            // COLUMN NAME: SHIPPING TYPE
            name: 'boShippingType.name',
            data: 'bo_shipping_type',
            render: function(data) {
                return data ? data.name : '';
            }
        },
        {
            // COLUMN NAME: CREATED BY
            name: 'admin.first_name',
            data: 'admin',
            render: function(data) {
                let handledLastName = data.last_name ? data.last_name : '';
                return data ? data.first_name + ' ' + handledLastName : '';
            }
        },
        {
            // COLUMN NAME: ACCEPTED BY
            name: 'deliveryManCollected.first_name',
            data: 'delivery_man_collected',
            render: function(data) {
                return data ? data.first_name + ' ' + data.last_name : '';
            }
        },
        {
            name: 'deliveryManDeliver.first_name',
            data: 'delivery_man_deliver',
            render: function(data) {
                return data ? data.first_name + ' ' + data.last_name : '';
            }
        },
        {
            // COLUMN NAME: DELIVERY DATE
            name: 'deliver_date',
            data: 'deliver_date',
            render: function(data, type, row) {
                // only if order was delivered and date field is not null
                if (data && row.order_state_id == 5) {
                   return data;
                }
                return '';
            }
        },
        {
            // COLUMN NAME: # OF PACKAGES
            name: 'number_packages',
            data: 'number_packages'
        },
        {
            name: 'branch.short_name',
            data: 'branch',
            render: function(data) {
                return data ? data.short_name : null;
            }
        },
        {
            data: 'red_flag',
            name: 'redFlag.redFlagStatus.description',
            render: function(data) {
                if(data && data.red_flag_status) {
                    return data.red_flag_status.active ? '<p style="font-weight:bold; color:red;">YES</p>' : '<p>NO</p>';
                }
                else {
                    return '';
                }

            }
        },
    ],
    initComplete: addFiltersForDataTable
});

handleUserColumnsPreferences('example2', 'orders', _table); //First argument: table id, Second argument: corresponding name in eko_tables database table, Third argument: datatable instance

$('#button_filter').on('click', function() {
    var inputs = document.getElementById("form-filter").elements;
    var code_client = inputs["code_client"].value;
    var code_plu = inputs["code_plu"].value;
    if (code_client == "" && code_plu == "") {
        swal("Alert!", "Complete all the information", "warning");
        return
    } else {
        if(code_client == ''){
            code_client = '0';
        }
        window.location.href = `/orders/${code_client}/${code_plu}`;
    }
});

$('#button_clear').on('click', function() {
    window.location.href = `/orders`;
});

});
</script>
@if ($code_client != '0')
<script>
document.getElementById("form-filter").elements["code_client"].value = '{{$code_client}}';
</script>
@endif
@if ($code_plu != '0')
<script>
document.getElementById("form-filter").elements["code_plu"].value = '{{$code_plu}}';
</script>
@endif
@endsection