@extends('admin.layouts.master')
@section('title', 'List of Orders')

@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">
            <div class="col-lg-12 d-none">
                <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-6">
                                    <div class="search-box">
                                        <input type="text" class="form-control search"
                                            placeholder="Search for order, user, packer, etc...">
                                        <i class="ri-search-line search-icon"></i>
                                    </div>
                                </div>
                                <!--end col-->
                                <div class="col-xl-6">
                                    <div class="row g-3">
                                        <div class="col-sm-4">
                                            <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-4">
                                            <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-4">
                                            <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>
                                </div>
                            </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>Actions</th>
                                    <th>Total Amount</th>
                                    <th>Shipping Charges</th>
                                    <th>Grand Total</th>
                                    <th>Payment Method</th>
                                    <th>Discount</th>
                                    <th>Notes</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($orders as $order)
                                    <tr>
                                        <td>{{ $order->user->first_name . ' ' . $order->user->first_name}}</td>
                                        <td>
                                            @if ($order->packer_id)
                                                {{ $order->packer->first_name . ' ' . $order->packer->first_name}}
                                            @else
                                                <span class="badge bg-danger">Not Assigned</span>
                                            @endif
                                        </td>
                                        <td>{{ $order->order_number }}</td>
                                        <td>
                                           {{ ucwords($order->status) }}
                                        </td>
                                        <td>
                                            {{ ucwords($order->payment_status) }}
                                        </td>
                                        <td>
                                            <select class="form-control action"  data-plugin="choices" data-choices
                                                    data-choices-search-false name="choices-single-default" data-shipping_charges="{{ $order->shipping_charges }}" data-order_packer_id="{{ $order->packer_id }}" data-order_id="{{ $order->id }}">
                                                <option value="">Select</option>
                                                <option value="add_shipping_charges">Add Shipping Charges</option>
                                            </select>
                                        </td>
                                        <td>{{ $order->total_amount }}</td>
                                        <td>
                                            {{ $order->shipping_charges }}
                                        </td>
                                        <td>{{ $order->grand_total }}</td>
                                        <td>
                                            {{ $order->payment_method == 'Stripe' ? 'Payment before Delivery' : 'Payment after Delivery' }}
                                        </td>
                                        <td>{{ $order->discount }}</td>
                                        <td>{{ $order->notes }}</td>
                                    </tr>
                                @endforeach
                            </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('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>

                        <!-- 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 -->

@endsection

@section('js')
<script>
    $(document).ready(function () {
        var table = $('#my-ordertable').DataTable({
            dom: 'Bfrtip',
            buttons: [
                'copyHtml5',
                'excelHtml5',
                'csvHtml5',
                'pdfHtml5',
                'print',
                'colvis'
            ],
            responsive: true,
            order: [[0, 'desc']],
            language: {
                paginate: {
                    previous: "<i class='ri-arrow-left-s-line'></i>",
                    next: "<i class='ri-arrow-right-s-line'></i>"
                }
            },
        });
    });
</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);
                $("#assignToPackerModal").modal('show');
                $("#packersDropdown").val(packer_id);
                $("#packersDropdown option[value='"+packer_id+"']").attr('selected', 'selected');
                $("#packersDropdown").trigger('change');
            } else if(action == 'add_shipping_charges') {
                $('#addShippingChargesModal #order_id').val(order_id);
                let shipping_charges = $(this).data('shipping_charges');
                $("#shippingCharges").val(shipping_charges);
                $("#addShippingChargesModal").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('packer.order.update.status') }}",
                type: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    "order_id": order_id,
                    "status": status
                },
                success: function(response) {
                    Toast_.show('success', response.message)
                },
                error: function(error) {
                    Toast_.show('error', error.responseJSON.message)
                    console.log(error);
                }
            });
        });
    </script>
@endsection