@extends('admin.layouts.master')
@section('title', $page_title)

@section('content')
    <div class="container-fluid">
        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                    <h4 class="mb-sm-0">List of Orders</h4>

                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="javascript: void(0);">Orders</a></li>
                            <li class="breadcrumb-item active">List</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <!-- end page title -->

        <!-- start filter form -->
        @if (!isset($status))
            <div class="row">
                <div class="col-lg-12">
                    <div class="card" id="orderListFilter">
                        <div class="card-header border-bottom-dashed">

                            <div class="row g-4 align-items-center">
                                <div class="col-sm">
                                    <div>
                                        <h5 class="card-title mb-0">Filter Orders</h5>
                                    </div>
                                </div>
                                <div class="col-sm-auto">
                                    <div class="d-flex flex-wrap align-items-start gap-2">
                                        <button class="btn btn-soft-danger" id="remove-actions"
                                            onClick="deleteMultiple()"><i class="ri-delete-bin-2-line"></i></button>
                                        <!-- Add any other filter options/buttons here -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body border-bottom-dashed border-bottom">
                            <form>
                                <div class="row g-3">
                                    <div class="col-xl-3">
                                        <div class="search-box">
                                            <input type="text" class="form-control search" id="search-order"
                                                placeholder="Search for order, user, packer, etc...">
                                            <i class="ri-search-line search-icon"></i>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="d">
                                            <input type="text" class="form-control" id="datepicker-range"
                                                data-provider="flatpickr" data-date-format="d M, Y" data-range-date="true"
                                                placeholder="Select date">
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-sm-3">
                                        <div>
                                            <select class="form-control" data-plugin="choices" data-choices
                                                data-choices-search-false name="choices-single-default" id="orderStatus">
                                                <option value="">Status</option>
                                                <option value="all"
                                                    {{ !request()->has('status') && request()->status == '' ? 'selected' : '' }}>
                                                    All</option>
                                                <option value="pending"
                                                    {{ request()->has('status') && request()->status == 'pending' ? 'selected' : '' }}>
                                                    Pending</option>
                                                <option value="approved"
                                                    {{ request()->has('status') && request()->status == 'approved' ? 'selected' : '' }}>
                                                    Approved</option>
                                                <option value="decline"
                                                    {{ request()->has('status') && request()->status == 'decline' ? 'selected' : '' }}>
                                                    Decline</option>
                                                <option value="packing"
                                                    {{ request()->has('status') && request()->status == 'packing' ? 'selected' : '' }}>
                                                    Packing</option>
                                                <option value="performa_invoice"
                                                    {{ request()->has('status') && request()->status == 'performa_invoice' ? 'selected' : '' }}>
                                                    Performa Invoice</option>
                                                <option value="invoice_review"
                                                    {{ request()->has('status') && request()->status == 'invoice_review' ? 'selected' : '' }}>
                                                    Invoice Review</option>
                                                <option value="delivered"
                                                    {{ request()->has('status') && request()->status == 'delivered' ? 'selected' : '' }}>
                                                    Delivered</option>
                                                <option value="cancelled"
                                                    {{ request()->has('status') && request()->status == 'cancelled' ? 'selected' : '' }}>
                                                    Cancelled</option>
                                                <option value="packed"
                                                    {{ request()->has('status') && request()->status == 'packed' ? 'selected' : '' }}>
                                                    Packed</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div>
                                            <select class="form-control" data-plugin="choices" data-choices
                                                data-choices-search-false name="choices-single-default" id="paymentStatus">
                                                <option value="">Payment Status</option>
                                                <option value="all" selected>All</option>
                                                <option value="pending">Pending</option>
                                                <option value="paid">Paid</option>
                                                <option value="credit">Credit</option>
                                            </select>
                                        </div>
                                    </div>
                                    <!--end col-->

                                    {{--  <div class="col-sm-4">
                                    <div>
                                        <button type="button" class="btn btn-primary w-100"
                                            onclick="SearchData();"> <i
                                                class="ri-equalizer-fill me-2 align-bottom"></i>Filters</button>
                                    </div>
                                </div>  --}}
                                    <!--end col-->
                                </div>
                                <!--end row-->
                            </form>
                        </div>

                    </div>

                </div>
                <!--end col-->
            </div>
        @endif
        <!-- end filter form -->

        <!-- start orders table -->
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Orders List</h5>
                    </div>
                    <div class="card-body">
                        <div class="column-visibility-dropdown">

                        </div>
                        <table id="my-ordertable" class="display table table-bordered" style="width:100%">
                            <thead>
                                <tr>
                                    <th>User</th>
                                    <th>Packer</th>
                                    <th>Order Number</th>
                                    <th>Status</th>
                                    <th>Payment Status</th>
                                    <th class="exclude-from-export">Actions</th>
                                    <th>Total Amount</th>
                                    <th>Shipping Charges</th>
                                    <th>Vat Tax Amount</th>
                                    <th>Vat Tax Percentage</th>
                                    <th>Grand Total</th>
                                    <th>Payment Method</th>
                                    <th>Discount</th>
                                    <th>Weight</th>
                                    <th>Volume</th>
                                    <th>Notes</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- This tbody will be populated with data via Ajax -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- end orders table -->
    </div>
    <!-- Modal Blur -->

    <div id="assignToPackerModal" class="modal fade zoomIn" tabindex="-1" aria-labelledby="assignToPackerModalLabel"
        aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="assignToPackerModalLabel">Assign Order to Packer</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="assignToPackerForm" method="POST" action="{{ route('admin.order.assign.packer') }}">
                    @csrf
                    <div class="modal-body">

                        <!-- Packers Dropdown -->
                        <div class="mb-3">
                            <label for="packersDropdown" class="form-label">Select Packers</label>
                            <select class="form-select packersDropdown" id="packersDropdown" name="packer_id"
                                {{--  data-plugin="choices" data-choices  --}}>
                                <option value="">Select Packers</option>
                                @foreach ($packers as $packer)
                                    <option value="{{ $packer->id }}">
                                        {{ $packer->first_name . ' ' . $packer->last_name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Hidden Input for Order ID -->
                        <input type="hidden" id="order_id" name="order_id" value="12345">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save Changes</button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    {{--  shipping charges model  --}}
    <!-- Add Shipping Charges Modal -->
    <div id="addShippingChargesModal" class="modal fade zoomIn" tabindex="-1"
        aria-labelledby="addShippingChargesModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addShippingChargesModalLabel">Add Shipping Charges</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="shippingChargesForm" method="POST" action="{{ route('admin.order.add.shipping.charge') }}">
                    @csrf
                    <div class="modal-body">
                        <!-- Shipping Charges Input -->
                        <div class="mb-3">
                            <label for="shippingCharges" class="form-label">Shipping Charges</label>
                            <input type="number" class="form-control" id="shippingCharges" name="shipping_charges"
                                placeholder="Enter shipping charges" required>
                        </div>

                        {{-- weight --}}
                        <div class="mb-3">
                            <label for="weight" class="form-label">Weight</label>
                            <input type="text" class="form-control" id="weight" name="weight"
                                placeholder="Enter weight" required>
                        </div>

                        {{-- volume --}}
                        <div class="mb-3">
                            <label for="volum" class="form-label">Volume</label>
                            <input type="text" class="form-control" id="volum" name="volume"
                                placeholder="Enter volume" required>
                        </div>

                        <!-- Hidden Input for Order ID -->
                        <input type="hidden" id="order_id" name="order_id" value="12345">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save Changes</button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- Add Discount Modal -->
    <div id="addDiscountModal" class="modal fade zoomIn" tabindex="-1" aria-labelledby="addDiscountModalLabel"
        aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addDiscountModalLabel">Add Discount</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="discountForm" method="POST" action="{{ route('admin.order.add.discount') }}">
                    @csrf
                    <div class="modal-body">
                        <!-- Discount Input -->
                        <div class="mb-3">
                            <label for="discount" class="form-label">Discount</label>
                            <input type="number" class="form-control" id="discount" name="discount"
                                placeholder="Enter discount" required>
                        </div>

                        <!-- Hidden Input for Order ID -->
                        <input type="hidden" id="order_id" name="order_id">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save Changes</button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

@endsection

@section('js')
    <script>
        $(document).ready(function() {
            var table = $('#my-ordertable').DataTable({
                dom: 'Bfrtip',
                responsive: true,
                order: [], // Disable default sorting
                processing: true,
                ajax: {
                    url: '{{ route('admin.order.index') }}', // Replace with the actual API route
                    data: function(d) {
                        // Add custom parameters to the ajax request
                        d.status = $('#orderStatus').val();
                        d.payment_status = $('#paymentStatus').val();
                        d.date = $('#datepicker-range').val();
                        d.search_ = $('#search-order').val();
                        d.page_status = '{{ isset($status) ? $status : 'all' }}';
                    },
                    dataSrc: ''
                },
                columns: [{
                        data: 'user.name'
                    },
                    {
                        data: 'packer',
                        render: function(data, type, row) {
                            if (type === 'display') {
                                return data ? data.name : 'Not Assigned';
                            }
                            return data;
                        }
                    },
                    {
                        data: 'order_number',
                        render: function(data, type, row) {
                            if (type === 'display') {
                                let url = "{{ route('admin.order.details', ':id') }}";
                                url = url.replace(':id', row.id);
                                return `<a href="${url}">${data}</a>`;
                            }
                            return data;
                        }
                    },
                    {
                        data: 'status',
                        render: function(data, type, row) {
                            if (type === 'display') {
                                //'pending','approved','decline','packing','performa_invoice','invoice_review','delivered','cancelled', 'shipping', 'invoiced' ,'packed','shipped'
                                return `
                                <select class="form-control status" data-order_id="${row.id}" data-plugin="choices" data-choices data-choices-search-false name="choices-single-default" name="status">
                                    <option value="pending" ${data === 'pending' ? 'selected' : ''}>Pending</option>
                                    <option value="approved" ${data === 'approved' ? 'selected' : ''}>Approved</option>
                                    <option value="decline" ${data === 'decline' ? 'selected' : ''}>Decline</option>
                                    <option value="packing" disabled ${data === 'packing' ? 'selected' : ''}>Packing</option>
                                    <option value="performa_invoice" disabled ${data === 'performa_invoice' ? 'selected' : ''}>Performa Invoice</option>
                                    <option value="invoice_review" disabled ${data === 'invoice_review' ? 'selected' : ''}>Invoice Review</option>
                                    <option value="delivered" disabled ${data === 'delivered' ? 'selected' : ''}>Delivered</option>
                                    <option value="cancelled" disabled ${data === 'cancelled' ? 'selected' : ''}>Cancelled</option>
                                    <option value="shipping" disabled ${data === 'shipping' ? 'selected' : ''}>Shipping</option>
                                    <option value="invoiced" disabled ${data === 'invoiced' ? 'selected' : ''}>Invoiced</option>
                                    <option value="packed" disabled ${data === 'packed' ? 'selected' : ''}>Packed</option>
                                    <option value="shipped" disabled ${data === 'shipped' ? 'selected' : ''}>Shipped</option>
                                </select>`;
                            }
                            return data;
                        }
                    },
                    {
                        data: 'payment_status',
                        render: function(data, type, row) {
                            if (type === 'display') {
                                return `
                                <select class="form-control payment-status" data-order_id="${row.id}" data-plugin="choices" data-choices data-choices-search-false name="choices-single-default" name="payment_status">
                                    <option value="pending" ${data === 'pending' ? 'selected' : ''}>Pending</option>
                                    <option value="paid" ${data === 'paid' ? 'selected' : ''}>Paid</option>
                                    <option value="credit" ${data === 'credit' ? 'selected' : ''}>Credit</option>

                                </select>`;
                            }
                            return data;
                        }
                    },
                    {
                        data: 'id',
                        render: function(data, type, row) {
                            if (type === 'display') {
                                return `
                                <select class="form-control action" data-order_id="${row.id}" data-order_packer_id="${row.packer_id}" data-shipping_charges="${row.shipping_charges}" data-weight="${row.weight}" data-volume="${row.volume}" data-plugin="choices" data-choices data-choices-search-false name="choices-single-default" name="action">
                                    <option value="">Action</option>
                                    <option value="edit">Edit</option>
                                    <option value="delete" id="deleteOrder">Delete</option>
                                    <option value="details">View Details</option>
                                    <option value="assign_to_partner">Assign to Packer</option>
                                    <option value="add_shipping_charges">Add Shipping Charges</option>
                                    <option value="add_discount">Add Discount</option>
                                </select>`;
                            }
                            return data;
                        }
                    },
                    {
                        data: 'total_amount'
                    },
                    {
                        data: 'shipping_charges'
                    },
                    {
                        data: 'vat_tax_amount'
                    },
                    {
                        data: 'vat_tax_percentage'
                    },
                    {
                        data: 'grand_total'
                    },
                    {
                        data: 'payment_method',
                        render: function(data, type, row) {
                            return data === 'Stripe' ? 'Payment before Delivery' :
                                'Payment after Delivery';
                        }
                    },

                    {
                        data: 'discount'
                    },
                    {
                        data: 'weight'
                    },
                    {
                        data: 'volume'
                    },
                    {
                        data: 'notes'
                    }
                ],
                columnDefs: [{
                        targets: 'exclude-from-export',
                        searchable: false,
                        orderable: false,
                    },
                    {
                        targets: 'no-sort',
                        orderable: false
                    },
                    {
                        //target actions column and increase the width to 20%
                        targets: 5,
                        width: '300px'
                    }
                ],
                buttons: [{
                        extend: 'copyHtml5',
                        exportOptions: {
                            columns: ':not(.exclude-from-export)'
                        }
                    },
                    {
                        extend: 'excelHtml5',
                        exportOptions: {
                            columns: ':not(.exclude-from-export)',
                            //make status colum as text instead of dropdown
                            format: {
                                body: function(data, row, column, node) {
                                    //check if the column is status column
                                    if (column == 3 || column == 4) {
                                        //get the status value
                                        let status = $(node).find('select').val();
                                        return status;
                                    } else {
                                        return data;
                                    }
                                }
                            }
                        }
                    },
                    {
                        extend: 'csvHtml5',
                        exportOptions: {
                            columns: ':not(.exclude-from-export)'
                        }
                    },
                    {
                        extend: 'pdfHtml5',
                        exportOptions: {
                            columns: ':not(.exclude-from-export)'
                        }
                    },
                    {
                        extend: 'print',
                        exportOptions: {
                            columns: ':not(.exclude-from-export)'
                        }
                    },
                    'colvis'
                ],
                language: {
                    paginate: {
                        previous: "<i class='ri-arrow-left-s-line'></i>",
                        next: "<i class='ri-arrow-right-s-line'></i>"
                    }
                },
            });

            $('#search-order').on('keyup', function() {
                //filter from back-end
                table.ajax.reload();
            });

            $('#datepicker-range').on('change', function() {
                //filter from back-end
                table.ajax.reload();
            });

            $('#orderStatus').on('change', function() {
                //filter from back-end
                table.ajax.reload();
            });

            $('#paymentStatus').on('change', function() {
                //filter from back-end
                table.ajax.reload();
            });


            // Add a click event listener to handle actions
            $('#my-ordertable tbody').on('change', '.action', function() {
                var order_id = $(this).data('order_id');
                var selectedAction = $(this).val();

                if (selectedAction === 'details') {
                    // Handle the "View Details" action
                    window.location.href = 'admin/orders/' + order_id + '/details/';
                } else if (selectedAction === 'assign_to_partner') {
                    // Handle the "Assign to Packer" action
                    // Show the modal
                    let packer_id = $(this).data('order_packer_id');
                    console.log(packer_id);
                    $("#packersDropdown").val(packer_id);
                    $("#packersDropdown option[value='" + packer_id + "']").attr('selected', 'selected');
                    $("#packersDropdown").trigger('change');
                    $('#assignToPackerModal #order_id').val(order_id);
                    $("#assignToPackerModal").modal('show');

                } else if (selectedAction === 'add_shipping_charges') {
                    // Handle the "Add Shipping Charges" action
                    $('#addShippingChargesModal #order_id').val(order_id);
                    let shipping_charges = $(this).data('shipping_charges');
                    $("#shippingCharges").val(shipping_charges);
                    let weight = $(this).data('weight');
                    $("#weight").val(weight);
                    let volume = $(this).data('volume');
                    $("#volum").val(volume);
                    $("#addShippingChargesModal").modal('show');
                } else if (selectedAction === 'add_discount') {
                    // Handle the "Add Discount" action
                    $('#addDiscountModal #order_id').val(order_id);
                    let discount = $(this).data('discount');
                    $("#discount").val(discount);
                    $("#addDiscountModal").modal('show');
                } else if (selectedAction === 'edit') {
                    window.location.href = '/admin/orders/edit/' + order_id;
                } else if (selectedAction === 'delete') {
                    window.location.href = '/admin/orders/delete/' + order_id;
                }
            });

            // Add a change event listener to handle status changes
            $('#my-ordertable tbody').on('change', '.status', function() {
                var order_id = $(this).attr('data-order_id');
                var status = $(this).val();
                $.ajax({
                    url: "{{ route('admin.order.update.status') }}",
                    type: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        "order_id": order_id,
                        "status": status
                    },
                    success: function(response) {
                        myToast.show('success', response.message)

                        //refresh the table
                        table.ajax.reload();
                    },
                    error: function(error) {
                        //reverse the status
                        if (error.hasOwnProperty('responseJSON')) {
                            myToast.show('error', error.responseJSON.message)
                        } else {
                            myToast.show('error', 'Something went wrong')
                        }
                        // //reload after 3 seconds
                        // setTimeout(function() {
                        //     location.reload();
                        // }, 5000);
                    }
                });
            });

            // Add a change event listener to handle payment status changes
            $('#my-ordertable tbody').on('change', '.payment-status', function() {
                var order_id = $(this).attr('data-order_id');
                var payment_status = $(this).val();
                $.ajax({
                    url: "{{ route('admin.order.update.payment.status') }}",
                    type: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        "order_id": order_id,
                        "payment_status": payment_status
                    },
                    success: function(response) {
                        myToast.show('success', response.message)

                        //refresh the table
                        table.ajax.reload();
                    },
                    error: function(error) {
                        //reverse the status
                        if (error.hasOwnProperty('responseJSON')) {
                            myToast.show('error', error.responseJSON.message)
                        } else {
                            myToast.show('error', 'Something went wrong')
                        }
                        // //reload after 3 seconds
                        // setTimeout(function() {
                        //     location.reload();
                        // }, 5000);
                    }
                });
            });

            $('#assignToPackerForm').on('submit', function(e) {
                e.preventDefault();
                var order_id = $(this).find('#order_id').val();
                var packer_id = $(this).find('#packersDropdown').val();

                $.ajax({
                    url: "{{ route('admin.order.assign.packer') }}",
                    type: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        "order_id": order_id,
                        "packer_id": packer_id
                    },
                    success: function(response) {
                        myToast.show('success', response.message)

                        //close the modal
                        $('#assignToPackerModal').modal('hide');

                        //refresh the table
                        table.ajax.reload();
                    },
                    error: function(error) {
                        //reverse the status
                        if (error.hasOwnProperty('responseJSON')) {
                            myToast.show('error', error.responseJSON.message)
                        } else {
                            myToast.show('error', 'Something went wrong')
                        }
                        // //reload after 3 seconds
                        // setTimeout(function() {
                        //     location.reload();
                        // }, 5000);
                    }
                });
            });

            $('#shippingChargesForm').on('submit', function(e) {
                e.preventDefault();
                var order_id = $(this).find('#order_id').val();
                var shipping_charges = $(this).find('#shippingCharges').val();
                var weight = $(this).find('#weight').val();
                var volume = $(this).find('#volum').val();

                $.ajax({
                    url: "{{ route('admin.order.add.shipping.charge') }}",
                    type: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        "order_id": order_id,
                        "shipping_charges": shipping_charges,
                        "weight": weight,
                        "volume": volume
                    },
                    success: function(response) {
                        myToast.show('success', response.message)

                        //close the modal
                        $('#addShippingChargesModal').modal('hide');

                        //refresh the table
                        table.ajax.reload();
                    },
                    error: function(error) {
                        //reverse the status
                        if (error.hasOwnProperty('responseJSON')) {
                            myToast.show('error', error.responseJSON.message)
                        } else {
                            myToast.show('error', 'Something went wrong')
                        }
                        // //reload after 3 seconds
                        // setTimeout(function() {
                        //     location.reload();
                        // }, 5000);
                    }
                });
            });

            $('#discountForm').on('submit', function(e) {
                e.preventDefault();
                var order_id = $(this).find('#order_id').val();
                var discount = $(this).find('#discount').val();

                $.ajax({
                    url: "{{ route('admin.order.add.discount') }}",
                    type: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        "order_id": order_id,
                        "discount": discount
                    },
                    success: function(response) {
                        myToast.show('success', response.message)

                        //close the modal
                        $('#addDiscountModal').modal('hide');

                        //refresh the table
                        table.ajax.reload();
                    },
                    error: function(error) {
                        //reverse the status
                        if (error.hasOwnProperty('responseJSON')) {
                            myToast.show('error', error.responseJSON.message)
                        } else {
                            myToast.show('error', 'Something went wrong')
                        }
                        // //reload after 3 seconds
                        // setTimeout(function() {
                        //     location.reload();
                        // }, 5000);
                    }
                });
            });
        });
    </script>

    {{--  <script src="{{ asset('assets/admin/assets/js/pages/ecommerce-customer-list.init.js') }}"></script>  --}}
    <!-- Add any additional JavaScript scripts or functions here if needed -->
    <script>
        function updateStatus(orderId, status) {
            // Implement the logic to update the order status via AJAX
            // You can make an AJAX request to a backend route to update the status
            // and handle the response accordingly
        }

        function updatePaymentStatus(orderId, paymentStatus) {
            // Implement the logic to update the payment status via AJAX
            // You can make an AJAX request to a backend route to update the payment status
            // and handle the response accordingly
        }

        $(".action").change(function() {
            var action = $(this).val();
            var order_id = $(this).attr('data-order_id');

            if (action == 'assign_to_partner') {
                $("#order_id").val(order_id);
                let packer_id = $(this).data('order_packer_id');
                console.log(packer_id);
                $("#packersDropdown").val(packer_id);
                $("#packersDropdown option[value='" + packer_id + "']").attr('selected', 'selected');
                $("#packersDropdown").trigger('change');
                $("#assignToPackerModal").modal('show');
            } else if (action == 'add_shipping_charges') {
                $('#addShippingChargesModal #order_id').val(order_id);
                let shipping_charges = $(this).data('shipping_charges');
                $("#shippingCharges").val(shipping_charges);
                let weight = $(this).data('weight');
                $("#weight").val(weight);
                let volume = $(this).data('volume');
                $("#volum").val(volume);
                $("#addShippingChargesModal").modal('show');
            } else if (action == 'details') {
                let url = "admin/orders/".order_id.
                "details";
                // url = url.replace(':id', order_id);
                window.location.href = url;
            } else if (action == 'add_discount') {
                $('#addDiscountModal #order_id').val(order_id);
                let discount = $(this).data('discount');
                $("#discount").val(discount);
                $("#addDiscountModal").modal('show');
            }
        });

        $("#packersDropdown").on('change', function() {
            console.log($(this).val());

        });

        $('.status').change(function() {
            var order_id = $(this).attr('data-order_id');
            var status = $(this).val();
            $.ajax({
                url: "{{ route('admin.order.update.status') }}",
                type: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    "order_id": order_id,
                    "status": status
                },
                success: function(response) {
                    myToast.show('success', response.message)
                },
                error: function(error) {
                    //reverse the status
                    if (error.hasOwnProperty('responseJSON')) {
                        myToast.show('error', error.responseJSON.message)
                    } else {
                        myToast.show('error', 'Something went wrong')
                    }
                    // //reload after 3 seconds
                    // setTimeout(function() {
                    //     location.reload();
                    // }, 5000);
                }
            });
        });
    </script>
@endsection