@extends('admin.app')
@section('title') Pickup Orders @endsection
@section('styles') 
<link href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.bootstrap5.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/b-2.2.2/b-html5-2.2.2/sb-1.3.2/datatables.min.css"/>
<style>
    .page-item.active .page-link {
        background-color: #F8931F;
        border-color: #F8931F;
    }
    .top{
        display: flex;
        align-items: center;    
    }
    .btn-secondary, .btn-light{
        background-color: #F8931F;
        border-style: none;
        color: #fff;
    }
    .btn-secondary:hover, .btn-light:hover {
        background-color:#FEAF2F;
        color: #fff;
    }
    .filter-label{
        padding: 10px;
    }
</style>
@endsection
@section('content')
<div class="product-status mg-b-30">
    <div class="container-fluid">
        <div class="row dataList">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="text-align: left;">
                <div class="">
                    <h4 class="heading_h4" style="margin-left: 10px;"><i class="fas fa-hotel"></i>Pickup Orders</h4>
                    @if(session('success'))
                    <div class="alert alert-success alert-dismissible">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    @endif
                    <fieldset id="date-range" class="row dataRow">
                        <div class="col-md-1 filter-label">
                            <span>Date Range:</span>
                        </div>
                        <div class="col-md-2">
                            <select id="date-type" class="form-control" name="date-type">
                                <option value=''>Select Date Type</option>
                                <option value='order_date'>Order Date</option>
                                <option value='pickup_date'>Pickup Date</option>
                                <option value='delivery_date'>Delivery Date</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <input type="date" name="from-date" placeholder="From" id="from-date" class="form-control form-control-sm">
                        </div>
                        <div class="col-md-1 filter-label" style="text-align: center;">
                            <span>To</span>
                        </div>
                        <div class="col-md-2">
                            <input type="date" name="to-date" placeholder="To" id="to-date" class="form-control form-control-sm">
                        </div>
                    </fieldset>
                    <fieldset id="vendor-filter" class="row dataRow">
                        <div class="col-md-1 filter-label">
                            <span>Vendor:</span>
                        </div>
                        <div class="col-md-2">
                            <select id="vendor-select" class="form-control" name="vendor-select">
                                <option value=''>Select Vendor</option>
                                @foreach($vendors as $vendor)
                                <option value='{{ $vendor->vendor_id }}'>{{ $vendor->vendor_name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </fieldset>
                    
                    <table id="pickupOrder" class="table table-striped table-bordered display" style="width:100%">
                        <thead>
                            <tr>
                                <th>Order #</th>
                                <th>Order Date</th>
                                <th>Vendor Name</th>
                                <th>Customer Name</th>
                                <th>Customer Phone</th>
                                <th>Pickup Date</th>
                                <th>Pickup Address</th>
                                <th>Direct Delivery Address</th>
                                <th>Status</th>
                                <th>Assign Address</th>
                                <th>Assign Driver</th>
                                <th>Delivery Notes</th>
                                <th>Estimated Delivery Charges</th>
                                <th>Additional Charges</th>
                                <th>Total Charges</th>
                                <th>Total Cubic</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
    
@push('scripts')

{{-- For CSV/PDF/Excel Report Download & Buttons --}}
<script type="text/javascript" src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.bootstrap5.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>

{{-- For Search Builder --}}
<script type="text/javascript" src="https://cdn.datatables.net/v/bs5/b-2.2.2/b-html5-2.2.2/sb-1.3.2/datatables.min.js"></script>

{{-- For DataTime --}}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.24/dataRender/datetime.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.11.5/sorting/datetime-moment.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.12.1/sorting/date-eu.js"></script>

<script>
    $(document).ready( function () {
        let table = $('#pickupOrder').DataTable({
            "processing": true,
            "serverSide": true,
            autoFill: true,
            responsive: true,
            "ajax": {
                url: '{{ route("api.pickup.all") }}',
                data: function(data) {
                    data.date_type = $("#date-type").val();
                    data.from_date = $("#from-date").val();
                    data.to_date = $("#to-date").val();
                    data.vendor = $("#vendor-select").val();
                }
            },
            "columns": [
                { 
                    "data": "order_id", 
                    render: function(data) {
                        return "TM" + data
                    }
                },
                { 
                    "data": "created_at",
                    name: "orders.created_at",
                    type: 'num',
                    render: {
                        _: 'display',
                        sort: 'timestamp'
                    },
                    searchable: false  
                },
                { 
                    "data": "vendor_name",
                    name: "vendors.vendor_name",
                },
                { 
                    "data": "receiver_first_name",
                    render: function(data, type, row) {
                        return data + " " + row.receiver_last_name
                    }
                },
                { 
                    "data": "receiver_phone",
                },
                { 
                    "data": "pickup_date",
                    name: "orders.pickup_date",
                    type: 'num',
                    render: {
                        _: 'display',
                        sort: 'timestamp'
                    },
                    searchable: false 
                },  
                { "data": "pickup_address" },
                                    
                { 
                    "data": "receiver_address",
                    searchable: false 
                },
                { 
                    "data": "order_status_name",
                    name: "order_statuses.order_status_name",
                    render: function(data, type, row) {
                        let html = `
                                <span class="badge rounded-pill " style="background-color:green">
                                ${ data }
                            </span>`
                        if(row.order_status_id === 1)
                            html = `
                                <span class="badge rounded-pill " style="background-color:red">
                                ${ data }
                            </span>`
                        
                        if(data === null)
                            html = `
                                <span class="badge rounded-pill " style="background-color:grey">
                                Pending Confirmation
                            </span>`

                        return html;
                    } 
                },
                { 
                    "data": "deliveryAddress",
                    sortable: false,
                },                    
                { 
                    "data": "drivers",
                    sortable: false,
                },
                { data: "delivery_note" },
                { 
                    "data": "estimated_delivery_charge",
                    render: function(data) {
                        return "$ " + data;
                    }, 
                },
                { 
                    "data": "total_additional_charges",
                    name: "total_additional_charges",
                    render: function(data) {
                        let cost = "$ " + data;
                        if(data < 0) {
                            cost = "- $ " + Math.abs(data);
                        } 
                        return cost;
                    },
                    searchable: false,
                },
                
                { 
                    "data": "total_charges",
                    name: "total_charges",
                    searchable: false,
                    render: function(data) {
                        let cost = "$ " + data;
                        if(data < 0) {
                            cost = "- $ " + Math.abs(data);
                        } 
                        return cost;
                    }
                },
                { 
                    "data": "actions",
                    sortable: false,
                    searchable: false,
                },
                {
                    data: 'receiver_last_name',
                    searchable: true,
                    visible: false
                },
            ],
            "pageLength": 50,
            order: [[1, 'DESC']],
            dom: 
            "<'row top'<'col-sm-3 text-center'B><'col-sm-3'f>>" +
            "<'row'<'col-sm-12'tr>>" +
            "<'row'<'col-sm-3'i><'col-sm-3'l><'col-sm-6'p>>",
            buttons: [
                        'csv', 'excel',
                        {
                            extend: 'pdfHtml5',
                            text: 'PDF',
                            orientation : 'landscape',
                            pageSize : 'LEGAL',
                            exportOptions: {
                            columns:[0,1,2,3,4,5,6,7,8,9,10,11,12,13],
                            }
                        },
                    ]
        });

        table.on( 'draw', function () {
            $('.assignment-field').change(function(e) {
                let action = e.target.form.action;
                let form = e.target.form;
                let token = '{{ csrf_token() }}';
                let warehouse = e.target.form[4].value;
                let driver = e.target.form[5].value;
                let request = new XMLHttpRequest();
                let data = new FormData();
                if(!driver || !warehouse) {
                    return;
                }
                data.append('warehouse', warehouse);
                data.append('driver', driver);
                request.open("POST", action, true);
                request.setRequestHeader('X-CSRF-Token', token);

                request.send(data);
                request.onreadystatechange = function() {
                    if (request.readyState == 4 && request.status == 200) { // when completed we can move away
                        alert("Changes saved");
                        table.draw();
                    }
                }; 
            });
        } );

        

        $('#date-range').change(function() {
            if($("#date-type").val().length > 0) {
                table.draw();
            }                    
        }); 

        $('#vendor-select').change(function() {
            if($("#vendor-select").val().length > 0) {
                table.draw();
            }                    
        }); 
    });

    function swalDelete(form_id) {
        Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert order!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, Delete order!',
        customClass: {
            confirmButton: 'btn btn-primary',
            cancelButton: 'btn btn-outline-danger ms-1'
        },
        buttonsStyling: false
        }).then(function(result) {
        if (result.value) {
            $(form_id).submit();

            Swal.fire({
            icon: 'success',
            title: 'Deleted!',
            text: 'Order has been deleted.',
            customClass: {
                confirmButton: 'btn btn-success'
            }
            });

        } else if (result.dismiss === Swal.DismissReason.cancel) {
            Swal.fire({
            title: 'Cancelled',
            text: 'Cancelled Delete :)',
            icon: 'error',
            customClass: {
                confirmButton: 'btn btn-success'
            }
            });
        }
        });
    };
    
</script>
@endpush