@extends('layouts.master')

@section('content')
<div class="container">
    <div class="card card-custom gutter-b">
        <div class="card-header flex-wrap py-3">
            <div class="card-title">
                <h3 class="card-label">List of Order</h3>
            </div>
            <div class="card-toolbar">
            </div>
        </div>
        <div class="card-body">
            <!--begin: Datatable-->
            <table class="table table-bordered" id="order-table">
                <thead>
                    <tr>
                        <th>No.</th>
                        <th>Invoice No.</th>
                        <th>Squad</th>
                        <th>Total</th>
                        <th>Payment Status</th>
                        <th>Rent Date</th>
                        <th>Status</th>
                        <th>Payment Type</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <!--end: Datatable-->
        </div>
    </div>
</div>

<!--begin::Modal-->
@include('order.show')
<!--end::Modal-->

@endsection
@push('script')
<script type="text/javascript">
    var table = $('#order-table').DataTable({
        processing: true,
        serverSide: true,
        responsive: false,
        scrollX   : true,
        lengthMenu: [10, 20, 50, 100],
        order     : [[ 1, "desc" ]],
        dom       : '<"filterdate"><"filterstatus"><"filterpayment">frtip',
        columns: [
            {
                "data": null,
                "orderable": false,
                "render": function (data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            {
                "data": 'id',
                "render": function (data, type, row)  {
                    return '<span>'+row.invoice+'</span>';
                }
            },
            {
                "data": 'ordersquad.user.name',
                "orderable": false,
                "render": function (data, type, row)  {
                    if(row.ordersquad != null)
                        return '<span>'+row.ordersquad.user.name+'</span>';
                    else
                        return '<span>-</span>'
                }
            },
            {
                "data": 'transaction_amount',
                "render": function (data, type, row)  {
                    return '<span>RM '+row.transaction_amount+'</span>';
                }
            },
            {
                "data": 'payment_status',
                "render": function (data, type, row)  {
                    if(row.payment_status == 0)
                        return "<h5><span class='badge badge-danger'>{{ __('Unpaid') }}</span></h5>";
                    else
                        return "<h5><span class='badge badge-success'>{{ __('Paid') }}</span></h5>";
                }
            },
            {
                "data": '',
                "orderable": false,
                "render": function (data, type, row)  {
                    return moment(row.start_date).format('DD/MM/YYYY')+' - '+moment(row.end_date).format('DD/MM/YYYY');
                }
            },
            {
                "data": 'order_status',
                "render": function (data, type, row)  {
                    if(row.order_status == 0)
                        return "<h5><span class='badge badge-warning'>{{ __('Waiting') }}</span></h5>";
                    else if(row.order_status == 1)
                        return "<h5><span class='badge badge-success'>{{ __('Accepted') }}</span></h5>";
                    else if(row.order_status == 2)
                        return "<h5><span class='badge badge-warning'>{{ __('Delivery') }}</span></h5>";
                    else if(row.order_status == 3)
                        return "<h5><span class='badge badge-success'>{{ __('Rent') }}</span></h5>";
                    else if(row.order_status == 4)
                        return "<h5><span class='badge badge-success'>{{ __('Finish') }}</span></h5>";
                    else if(row.order_status == 5)
                        return "<h5><span class='badge badge-warning'>{{ __('Pickup') }}</span></h5>";
                    else if(row.order_status == 6)
                        return "<h5><span class='badge badge-success'>{{ __('Completed') }}</span></h5>";
                    else if(row.order_status == 7)
                        return "<h5><span class='badge badge-danger'>{{ __('Canceled by Customer') }}</span></h5>";
                    else if(row.order_status == 8)
                        return "<h5><span class='badge badge-danger'>{{ __('Canceled by Squad') }}</span></h5>";
                    else
                        return "<h5><span class='badge badge-danger'>{{ __('Canceled') }}</span></h5>";
                }
            },
            {
                "data": 'payment_type',
                "render": function (data, type, row)  {
                    if(row.payment_type == null) {
                        return "-";
                    }
                    else {
                        return "<h5><span class='badge badge-" + ((row.payment_type == 'billplz') ? "primary" : "info") + "'>" + row.payment_type + "</span></h5>";
                    }
                }
            },
            {
                "data": null,
                "orderable": false,
                "render": function (data, type, row)  {
                    return '<a href="#" title="View" class="btn btn-icon btn-circle btn-light-secondary btn-sm mr-2 show-order" data-id="'+row.id+'"><i class="far fa-eye text-dark icon-xl"></i></a><a href="#" title="Delete" class="btn btn-icon btn-circle btn-light-danger btn-sm delete-order" data-id="'+row.id+'"><i class="la la-trash icon-xl"></i></a>';
                }
            },
        ],

        ajax: {
            method : 'get',
            url: "{{ route('order.dt') }}",
            dataSrc:"data",
            dataType : "json",
            data: function(d){
                d.date = $('#kt_daterangepicker_3 .form-control').val();
                d.status = $('#status_filter').val();
                d.payment_type = $('#payment_filter').val();
            }
        }
    }).on('click', 'a.show-order', function(e) {
        e.preventDefault();

        var id  = $(this).data('id');
        var url = "{{ route('order.detail', ':id') }}";
        url     = url.replace(':id',id);

        $.ajax({
            url: url,
            type: 'GET',
            success: function(data) {
                var val                 = data.data;
                var invoice             = val.invoice;
                var cust_name           = val.ordercust.cust_name;
                if(val.ordersquad)
                    var squad_name      = val.ordersquad.user.name;
                else
                    var squad_name      = '-';
                var start_date          = moment(val.start_date).format('DD/MM/YYYY');
                var end_date            = moment(val.end_date).format('DD/MM/YYYY');
                var payment_status      = val.payment_status;
                var transaction_amount  = val.transaction_amount;
                var paystat;
                var holdStatus;
                var order_status        = val.order_status;

                if(payment_status == 0)
                {
                    paystat = 'Unpaid';
                }
                else if(payment_status == 1)
                {
                    paystat = 'Paid';
                }
                else if(payment_status == 3)
                {
                    paystat = 'Waiting for approval';
                }
                else
                {
                    paystat = 'Aborted';
                }

                if(order_status == 0)
                    holdStatus = "<h3><span class='badge badge-warning'>{{ __('Waiting') }}</span></h3>";
                else if(order_status == 1)
                    holdStatus = "<h3><span class='badge badge-success'>{{ __('Accepted') }}</span></h3>";
                else if(order_status == 2)
                    holdStatus = "<h3><span class='badge badge-warning'>{{ __('Delivery') }}</span></h3>";
                else if(order_status == 3)
                    holdStatus = "<h3><span class='badge badge-success'>{{ __('Rent') }}</span></h3>";
                else if(order_status == 4)
                    holdStatus = "<h3><span class='badge badge-success'>{{ __('Finish') }}</span></h3>";
                else if(order_status == 5)
                    holdStatus = "<h3><span class='badge badge-warning'>{{ __('Pickup') }}</span></h3>";
                else if(order_status == 6)
                    holdStatus = "<h3><span class='badge badge-success'>{{ __('Completed') }}</span></h3>";
                else if(order_status == 7)
                    holdStatus = "<h3><span class='badge badge-danger'>{{ __('Canceled by Customer') }}</span></h3>";
                else if(order_status == 8)
                    holdStatus = "<h3><span class='badge badge-danger'>{{ __('Canceled by Squad') }}</span></h3>";
                else
                    holdStatus = "<h3><span class='badge badge-danger'>{{ __('Canceled') }}</span></h3>";

                document.getElementById('show_invoice').innerHTML            = invoice;
                document.getElementById('show_cust_name').innerHTML          = cust_name;
                document.getElementById('show_squad_name').innerHTML         = squad_name;
                document.getElementById('show_start_date').innerHTML         = start_date;
                document.getElementById('show_end_date').innerHTML           = end_date;
                document.getElementById('show_payment_status').innerHTML     = paystat;
                document.getElementById('show_status').innerHTML             = holdStatus;
                document.getElementById('show_transaction_amount').innerHTML = 'RM '+transaction_amount;
            }
        });

        $('#showOrder').modal('show');
    }).on('click', 'a.delete-order', function(e) {
        e.preventDefault();

        var id      = $(this).data('id');
        var _token  = $("input[name='_token']").val();
        var url     = "{{ route('order.delete', ':id') }}";
        url         = url.replace(':id',id);

        Swal.fire({
            title: "Are you sure?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes, delete it!"
        }).then(function(result) {
            if (result.value) {
                $.ajax({
                    url: url,
                    type: "POST",
                    dataType: "json",
                    data: {
                        _token : _token
                    },
                    success: function(data) {
                        if(data.status != 'success')
                        {
                            var errors = data;
                            $.each(errors, function(index, sm){
                                toastr.error(sm, {timeOut: 5000});
                            });
                        }
                        else
                        {
                            Swal.fire(
                                "Deleted!",
                                "Order has been deleted.",
                                "success"
                            )
                            $('#order-table').DataTable().ajax.reload(null, false);
                        }
                    }
                });
            }
        });
    });

    $(document).ready(function() {

        $("div.filterdate").html('<div class="form-group">'
                                    +'<div class="input-group" id="kt_daterangepicker_3" style="margin-bottom: 10px; width: fit-content; float:left;">'
                                    +'<div class="input-group-prepend">'
                                    +'<span class="input-group-text">'
                                    +'<i class="la la-calendar-o"></i>'
                                    +'</span>'
                                    +'</div>'
                                    +'<input class="form-control" readonly="readonly" placeholder="Search rent date" type="text" id="inputDate" />'
                                    +'</div>'
                                    +'<a href="" class="btn btn-warning btn-sm" id="filterOrder" style="float: left; margin-left: 10px;">'
                                    +'<i class="flaticon-search icon-md"></i>'
                                    +'</a>'
                                    +'<a href="" class="btn btn-danger btn-sm" id="filterReset" style="float: left; margin-left: 10px; margin-right: 20px;">'
                                    +'<i class="flaticon2-refresh icon-md"></i>'
                                    +'</a>'
                                    +'</div>');

        $("div.filterstatus").html('<select class="" name="status" id="status_filter" style="margin-left: 20px; margin-bottom: 10px; width: 250px; float:left;" multiple="multiple">'
                                    +'<option value="0">Waiting</option>'
                                    +'<option value="1">Accepted</option>'
                                    +'<option value="2">Delivery</option>'
                                    +'<option value="3">Rent</option>'
                                    +'<option value="4">Finish</option>'
                                    +'<option value="5">Pick Up</option>'
                                    +'<option value="6">Completed</option>'
                                    +'</select>');

        $("div.filterpayment").html('<select class="" name="payment_type" id="payment_filter" style="margin-left: 20px; margin-bottom: 10px; width: 190px; float:left;" multiple="multiple">'
                                    +'<option value="billplz">Billplz</option>'
                                    +'<option value="cash">Cash</option>'
                                    +'</select>');                                    
                                    
        $('#status_filter').select2({
            placeholder: "Search status",
            width: 'resolve'
        });
        
        $('#payment_filter').select2({
            placeholder: "Filter payment type",
            width: 'resolve'
        });

        $('#kt_daterangepicker_3').daterangepicker({
            buttonClasses: ' btn',
            applyClass: 'btn-primary',
            cancelClass: 'btn-secondary',
            },
            function(start, end, label) {
                $('#kt_daterangepicker_3 .form-control').val( start.format('DD/MM/YYYY') + ' - ' + end.format('DD/MM/YYYY'));
        });

        $('#filterOrder').on('click', function(e){

            e.preventDefault();

            $('#order-table').DataTable().ajax.reload(null, false);
        });

        $('#status_filter').on('change', function(e){

            e.preventDefault();

            $('#order-table').DataTable().ajax.reload(null, false);
        });

        $('#payment_filter').on('change', function(e){

            e.preventDefault();

            $('#order-table').DataTable().ajax.reload(null, false);
        });

        $('#filterReset').on('click', function(e){
            e.preventDefault();

            $('#inputDate').val('');

            $('#order-table').DataTable().ajax.reload(null, false);
        });
    });
</script>
@endpush