@extends('modules.head') @section('contenido')
<div class="box-header">
    @if(Auth::user()->rol_id == 1 || Auth::user()->rol_id == 2)
    <a class="auxiliar" href="{{url('/deliveries/report')}}">
        <button type="button" class="btn  pull-left btnAux">
            <i class="fa fa-file"></i>@lang('messages.inventory_report')
        </button>
    </a>
    @endif
</div><br>
<div>
    <div class="box-body table-responsive" id='deliveries_table_container'>
        <table id="deliveries_table" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
            <thead>
                <tr role="row">
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">App Id</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Driver</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Vehicle</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Branch</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Scheduled date</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Status</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Created date</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">View route</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Capacity used</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <div class="modal fade" id="ordersLinkedToDeliveryModal" tabindex="-1" role="dialog" aria-labelledby="ordersLinkedToDeliveryModal" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="delivery_modal_header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h3 class="modal-title" id="ordersLinkedToDeliveryModalLabel">Delivery orders</h3>
                </div>
                <div class="delivery_modal_body">
                    <div class="show_orders_linked">
                        <table id="showOrdersLinkedToDeliveryTable" class="display">
                            <thead>
                                <tr>
                                    <th>Code</th>
                                    <th>Customer</th>
                                    <th>Total</th>
                                    <th>Status</th>
                                    <th>Weight</th>
                                    <th>Delivery date</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="delivery_modal_footer">

                </div>
            </div>
        </div>
    </div>
</div>

<input type="hidden" name="branch_id" id="branch_id" value="{{ session('branch_id') }}">
@include('orders.infoOrder')
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/create_filters_for_dataTables.js') }}"></script>
<script src="{{ asset('js/orders.js') }}"></script>
<style>
    .delivery_modal_header,
    .delivery_modal_body,
    .delivery_modal_footer {
        font-size: 15px;
        padding: 15px
    }

    .delivery_modal_header h3 {
        font-weight: 600;
    }

    #showOrdersLinkedToDeliveryTable {
        width: 100%;
    }

    .goomaps-a-tag {
        text-align: center;
    }

    .goomaps-a-tag img {
        width: 30px;
        cursor: pointer
    }

    .fake-badge {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5px 0px;
        text-align: center;
        font-size: small;
        border-radius: 20px;
        color: white;
    }

    .status-done {
        background-color: #28a745;
    }

    .status-in-progress {
        background-color: #007bff;
    }

    .status-empty {
        background-color: #6c757d;
    }

    .status-cancelled {
        background-color: #dc3545;
    }

    .weight-used-container{
        text-align: center;
    }

</style>
<script type="text/javascript">
    $(function() {
        $('#deliveries_table thead tr')
            .clone(true)
            .addClass('filters')
            .prependTo('#deliveries_table thead');

        $('#deliveries_table thead tr:first-child > th').css('background-color', "rgb(236 243 249)");
        $("#deliveries_table").dataTable().fnDestroy();
        _table = $('#deliveries_table').DataTable({
            responsive: true,
            processing: true,
            serverSide: true,
            "order": [],
            "language": {
                url: 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json'
            },
            ajax: {
                url: '/get-deliveries',
            },
            columns: [{
                    data: 'app_id',
                    name: 'app_id',
                    render: (data, type, row) => {
                        if (row.status == 'In Progress' || row.status == 'Empty') {
                            if (!row.vehicle.deleted_at) {
                                return `<a style="cursor:pointer" href="/deliveries/edit/${row.id}" data-id='${row.id}'>${data}</a>`;
                            }
                        }
                        return `<a style="cursor:pointer" data-id='${row.id}' data-toggle="modal" data-target="#ordersLinkedToDeliveryModal">${data}</a>`;
                    }
                },
                {
                    data: 'picker',
                    name: 'picker.first_name',
                    render: (data, type, row) => {
                        if (data) {
                            return data.first_name + ' ' + data.last_name;
                        }
                        return 'N/A';
                    }
                },
                {
                    data: 'vehicle',
                    name: 'vehicle.name',
                    render: (data, type, row) => {
                        return data.name;
                    }
                },
                {
                    data: 'branch',
                    name: 'branch.short_name',
                    render: (data, type, row) => {
                        return data.short_name;
                    }
                },
                {
                    data: 'scheduled_date',
                    name: 'scheduled_date',
                    render: (data) => {
                        return data;
                    }
                },
                {
                    data: 'status',
                    name: 'status',
                    render: (data, type, row) => {
                        let html = ''
                        if (data == 'Done') {
                            let ordersDelivered = getAmountOfOrdersDelivered(row.orders);
                            html = `<div class="fake-badge status-done">
                                      <div>${data} 
                                         <sup title="Delivered orders over total">${ordersDelivered}/${row.orders.length}</sup>
                                      </div>
                                    </div>`;
                        } else if (data == 'In Progress') {
                            html = `<div class="fake-badge status-in-progress"><div>${data}</div></div>`;
                        } else if (data == 'Empty') {
                            html = `<div class="fake-badge status-empty"><div>${data}</div></div>`;
                        } else if (data == 'Cancelled') {
                            html = `<div class="fake-badge status-cancelled"><div>${data}</div></div>`
                        }
                        return html;
                    }
                },
                {
                    data: 'created_at',
                    name: 'created_at',
                    render: (data) => {
                        let date = new Date(data);
                        return date.toLocaleString('en-US');
                    }
                },
                {
                    data: 'route',
                    name: 'route'
                },
                {
                    data: 'weight_used',
                    name: 'weight_used'
                }

            ],
            columnDefs: [{
                targets: 0,
                className: 'app_id',
            }],
            orderCellsTop: true,
            fixedHeader: true,
            initComplete: addFiltersForDataTable,
        });
        //when clicking app_id to show linked orders
        $('#deliveries_table').on('click', 'td.app_id a', function(e) {
            let delivery_id = $(this).attr('data-id');
            if (delivery_id) {
                $.ajax({
                    type: 'get',
                    url: `/get-orders-of-delivery/${delivery_id}`,
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    },
                    success: function(r) {
                        displayModalWithOrdersData(r);
                    }
                })
            }
        });
    });

    function calculateOrderWeight(order) {
        let weight = 0;
        order.order_products.forEach((op) => {
            weight += op.quantity * op.products.weight;
        });
        return weight;
    }

    function seeOnGoogleMaps(id) {
        if (id) {
            let data = {
                deliveryId: id,
            }
            $.ajax({
                type: 'post',
                url: `/deliveries/see-on-google-maps`,
                data: data,
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                success: function(r) {
                    if (decodeURI(r.link).length) {
                        window.open(decodeURI(r.link));
                    } else {
                        swal('', 'Google Maps link could not be generated', 'info');
                    }
                }
            })
        }
    }

    function getAmountOfOrdersDelivered(orders) {
        let delivered = 0;
        for (let i = 0; i < orders.length; i++) {
            const order = orders[i];
            if (order.order_state_id == 5) {
                delivered += 1;
            }
        }
        return delivered;
    }

    function displayModalWithOrdersData(r) {
        let table_body = $('#showOrdersLinkedToDeliveryTable tbody');
        let footer = $('.delivery_modal_footer');
        let order_weight = 0;
        let total_delivery_weight = 0;
        table_body.empty();
        footer.empty();
        for (let i = 0; i < r.orders.length; i++) {
            let order = r.orders[i];
            order_weight = calculateOrderWeight(order);
            total_delivery_weight += order_weight;
            table_body.append(`
                                <tr>
                                    <td><a style="cursor:pointer;" onclick="clickInfoOrder(${order.id}, false)">${order.code}</a></td>
                                    <td>${order.client.document} - ${order.client.first_name}</td>
                                    <td>$${order.total_price}</td>
                                    <td>${order.order_state.name}</td>
                                    <td>${order_weight.toFixed(2)} lbs</td>
                                    <td>${order.bo_delivery_date}</td>
                                </tr>
                           `);
        }
        footer.append(`<h4><b>Total weight:</b> ${total_delivery_weight.toFixed(2)} lbs</h4>`)
    }
</script>

@endsection