@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 -->
        <div class="row d-none">
            <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" selected>All</option>
                                            <option value="pending">Pending</option>
                                            <option value="approved">Approved</option>
                                            <option value="decline">Decline</option>
                                            <option value="packing">Packing</option>
                                            <option value="performa_invoice">Performa Invoice</option>
                                            <option value="invoice_review">Invoice Review</option>
                                            <option value="delivered">Delivered</option>
                                            <option value="cancelled">Cancelled</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>
        <!-- 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>Pickup/Delivery</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 -->

    {{--  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('packer.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('packer.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 status = "{{ request()->status }}";
            var table = $('#my-ordertable').DataTable({
                dom: 'Bfrtip',
                responsive: true,
                order: [], // Disable default sorting
                processing: true,
                ajax: {
                    url: '{{ route('packer.order.index') }}', // Replace with the actual API route
                    data: function(d) {
                        // Add custom parameters to the ajax request
                        d.status = status ? status : $('#orderStatus').val();
                        d.payment_status = $('#paymentStatus').val();
                        d.date = $('#datepicker-range').val();
                        d.search_ = $('#search-order').val();
                    },
                    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('packer.order.details', ':id') }}";
                                url = url.replace(':id', row.id);
                                return `<a href="${url}">${data}</a>`;
                            }
                            return data;
                        }
                    },
                    {
                        data: 'status',
                        render: function(data, type, row) {
                            return data.toUpperCase();
                        }
                    },
                    {
                        data: 'payment_status',
                        render: function(data, type, row) {
                            return data.toUpperCase();
                        }
                    },
                    {
                        data: 'delivery_method',
                        render: function(data, type, row) {
                            return data === "pick_up" ?
                                'Pickup' :
                                'Delivery';
                        }
                    },
                    // { data: 'shipping_charges' },
                    //{ data: 'vat_tax_amount' },
                    //{ data: 'vat_tax_percentage' },
                    //{ data: 'grand_total' },
                    //{ 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();
            });


            $('#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 = "{{ route('admin.order.details', ':id') }}";
                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