@extends('admin.app')
@section('title') 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"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.0/css/responsive.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;
    }

/*---------New Css------------*/

.filter_box{
    width: 100%;
    display: inline-block;
    background: #FFFFFF;
    border: 1px solid #E3E3E3;
    border-radius: 5px;
    padding: 20px;
    margin-bottom:40px
}

    .filter-label{
        padding: 10px;
    }

    .filter_box .filter-label label {
        font-weight: 400;
font-size: 13px;
line-height: 21px;
color: #848484;
    }

    .filter_box .filter-label .form-control {
    background: #FCFCFC;
    border: 1px solid #E1E1E1;
    border-radius: 5px;
}

    .dataTables_wrapper .top {
    display: block;
    align-items: center;
    margin-top: 0px;
    margin-bottom: 0px;
}

.dataTables_wrapper .top .col-sm-3 {
    float: right;
    display: inline-block;
}

.dataTables_wrapper .top .col-sm-3.text-center {
    float: left;
    display: inline-block;
    text-align:left !important;
}

.dataTables_responsive{
    overflow: auto;
}


table.table-bordered.dataTable th, table.table-bordered.dataTable td {
    background: #f3f3f3;
} 

.table-striped>tbody>tr:nth-of-type(odd)>* {
    background-color: #FFE8AD;
}
</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;">
                <h4 class="heading_h4" style="margin-left: 10px;"><i class="fas fa-hotel"></i> 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

                <div class="filter_box">
                <fieldset id="date-range" class="row dataRow">
                    <div class="col-md-3 filter-label">
                        <label>Date Range</label>
                        <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-3 filter-label">
                    <label>Date From</label>
                        <input type="date" name="from-date" placeholder="From" id="from-date" class="form-control form-control-sm">
                    </div>
                    <div class="col-md-3 filter-label">
                    <label>Date To</label>
                        <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-3 filter-label">
                        <label>Vendor</label>
                        <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>

                <fieldset id="vendor-filter" class="row dataRow"> -->
                    <div class="col-md-3 filter-label">
                        <label>Order Id</label>
                        <input type="text" name="order-id" placeholder="Order Id" id="order-id" class="form-control form-control-sm">
                    </div>

                    <div class="col-md-3 filter-label">
                        <label>Driver</label>
                        <select id="driver-select" class="form-control" name="driver-select">
                            <option value=''>Select Driver</option>
                            @foreach($drivers as $driver)
                            <option value='{{ $driver->driver_id }}'>{{ $driver->driver_first_name }} {{ $driver->driver_last_name }}</option>
                            @endforeach
                        </select>
                    </div>
                </fieldset>
</div>
                <div class="dataTables_responsive">
                            <table id="orderTable" class="table table-striped table-bordered display" style="width:100%">
                                <thead>
                                <tr>
                                    <th>Actions</th>
                                    <th>Order #</th>
                                    <th>Order Date</th>
                                    <th>Vendor Name</th>
                                    <th>Pickup Address</th>
                                    <th>Pickup Date</th>
                                    <th>Customer Name</th>
                                    <th>Customer Phone</th>
                                    <th>Delivery Address</th>
                                    <th>Delivery Date</th>
                                    <th>Order Status</th>
                                    <th>Assign Address</th>
                                    <th>Assign Driver (Pick-Up)</th>
                                    {{-- <th>Assign Driver (Delivery)</th> --}}
                                    <th>Delivery Notes</th>
                                    {{-- <th>Estimated Distance</th> --}}
                                    <th>Estimated Delivery Charges</th>
                                    <th>Additional Charges</th>
                                    {{-- <th>Additional Charges Notes</th> --}}
                                    <th>Total Charges</th>
                                    {{-- <th>Total Cubic</th> --}}
                                    <th>Invoice #</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>
<script data-require="datatables-responsive@*" data-semver="2.1.0" src="//cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.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 type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/4.2.2/js/dataTables.fixedColumns.min.js"></script> --}}

<script>

    $(document).ready( function () {
     
        let table = $('#orderTable').DataTable({
            "processing": true,
            "serverSide": true,
            dom: 'Blfrtip',
            autoFill: true,
            responsive: true,
            order: [[3, 'desc']],
            fixedColumns:   {
                left: 2
            },
            "ajax": {
                url: '{{ route("api.orders.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();
                    data.driver = $("#driver-select").val();
                    data.f_order_id = $("#order-id").val();
                }
            },
            "columns": [
                { 
                    "data": "actions",
                    sortable: false,
                    searchable: false,
                },
                { 
                    "data": "order_id",
                    sortable: true
                    // render: function(data) {
                    //     return "TM" + data
                    // }
                },
               
                { 
                    "data": "created_at",
                    name: "orders.created_at",
                    type: 'num',
                    render: {
                        _: 'display',
                        sort: 'timestamp'
                    },
                    sortable: true,
                    searchable: false  
                },
                { "data": "vendor_name", name: "vendors.vendor_name" },
                { "data": "pickup_address" },
                { 
                    "data": "pickup_date",
                    name: "orders.pickup_date", 
                    type: 'num',
                    render: {
                        _: 'display',
                        sort: 'timestamp'
                    },
                    sortable: true,
                    searchable: false 
                },
                { 
                    "data": "receiver_first_name",
                    render: function(data, type, row) {
                        return data + " " + row.receiver_last_name
                    }
                },
                { 
                    "data": "receiver_phone",
                },
                { "data": "receiver_address" },
                { 
                    "data": "delivery_date",
                    name: "orders.delivery_date",
                    type: 'num',
                    render: {
                        _: 'display',
                        sort: 'timestamp'
                    },
                    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(row.order_status_id >= 7)
                            html = `
                                <span class="badge rounded-pill " style="background-color:grey">
                                ${ 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": "deliveryDrivers",
                //     sortable: false,
                // },
                { data: "delivery_note" },
                // { 
                //     "data": "estimated_distance",
                //     render: function(data) {
                //         return data + " km";
                //     }, 
                // },
                { 
                    "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_additional_charges" },
                { data: "total_charges" },
                // { 
                //     "data": "total_charges",
                //     name: "total_charges",
                //     searchable: false,
                //     render: function(data) {
                //         let cost = "$ " + data;
                //         if(data < 0) {
                //             cost = "- $ " + Math.abs(data);
                //         } 
                //         return cost;
                //     }
                // },
                // { "data": "total_cubic" },
                {
                    data: "invoice_num"
                },
                {
                    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:[1,2,3,4,5,6,7,8,9,10,11],
                        //     }
                        // },
                    ]       
        });

        // table.on( 'draw', function () {
        table.on( 'draw', function () {
            $('.assignment-field').on('change',function(e) {
                // alert('Hello');
                console.log(e);
                console.log(e.target.form[4]);
                console.log(e.target.form[5]);  
                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 driver = e.target.form[0].value
                // alert(driver);
                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();
                    }
                }; 
            });
        } );
        table.on( 'draw', function () {
            $('.assignment-fields').change(function(e) {
                // alert(e);
                // console.log(e.target.form[4]);
                let action = e.target.form.action;
                let form = e.target.form;
                let token = '{{ csrf_token() }}';
                let driver = e.target.form[1].value
                // alert(driver);
                let request = new XMLHttpRequest();
                let data = new FormData();
                if(!driver) {
                    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();
            }                    
        });

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

        $( "#order-id" ).on( "keyup", function() {
            if($("#order-id").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