@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">
            <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-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 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>
                                @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>
                                            <a href="{{ route('admin.order.details',['id' => $order->id]) }}">{{ $order->order_number }}</a>
                                        </td>
                                        <td style="width: 20%">
                                            <select class="form-control status" data-order_id="{{ $order->id }}"
                                                data-plugin="choices" data-plugin="choices" data-choices
                                                data-choices-search-false name="choices-single-default" name="status"
                                                onchange="updateStatus({{ $order->id }}, this.value)">
                                                <option value="pending" {{ $order->status == 'pending' ? 'selected' : '' }}>
                                                    Pending</option>
                                                <option value="approved"
                                                    {{ $order->status == 'approved' ? 'selected' : '' }}>Approved</option>
                                                <option value="decline" {{ $order->status == 'decline' ? 'selected' : '' }}>
                                                    Decline</option>
                                                <option value="packing" disabled
                                                    {{ $order->status == 'packing' ? 'selected' : '' }}>Packing</option>
                                                <option value="performa_invoice" disabled
                                                    {{ $order->status == 'performa_invoice' ? 'selected' : '' }}>Performa
                                                    Invoice</option>
                                                <option value="invoice_review" disabled
                                                    {{ $order->status == 'invoice_review' ? 'selected' : '' }}>Invoice
                                                    Review</option>
                                                <option value="invoiced" disabled
                                                    {{ $order->status == 'invoiced' ? 'selected' : '' }}>Invoiced
                                                </option>
                                                <option value="delivered"
                                                    {{ $order->status == 'delivered' ? 'selected' : '' }}>Delivered
                                                </option>
                                                <option value="cancelled"
                                                    {{ $order->status == 'cancelled' ? 'selected' : '' }}>Cancelled
                                                </option>
                                                {{-- shipping --}}
                                                <option value="shipping"
                                                    {{ $order->status == 'shipping' ? 'selected' : '' }}>Shipping</option>

                                            </select>
                                        </td>
                                        <td style="width: 20%">
                                            <select class="form-control" data-plugin="choices" data-choices
                                                data-choices-search-false name="choices-single-default"
                                                name="payment_status"
                                                onchange="updatePaymentStatus({{ $order->id }}, this.value)">
                                                <option value="pending"
                                                    {{ $order->payment_status == 'pending' ? 'selected' : '' }}>Pending
                                                </option>
                                                <option value="paid"
                                                    {{ $order->payment_status == 'paid' ? 'selected' : '' }}>Paid</option>
                                                <option value="credit"
                                                    {{ $order->payment_status == 'credit' ? 'selected' : '' }}>Credit
                                                </option>
                                            </select>
                                        </td>
                                        <td style="width: 20%" class="exclude-from-export">
                                            <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 }}" data-weight="{{ $order->weight }}"
                                                data-volume="{{ $order->volume }}" data-discount="{{ $order->discount }}">
                                                <option value="">Select</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>
                                        </td>
                                        <td>{{ $order->total_amount }}</td>
                                        <td>
                                            {{ $order->shipping_charges }}
                                        </td>
                                        <td>
                                            {{ $order->vat_tax_amount }}
                                        </td>
                                        <td>
                                            {{ $order->vat_tax_percentage }}%
                                        </td>
                                        <td>{{ $order->grand_total }}</td>
                                        <td>
                                            {{ $order->payment_method == 'Stripe' ? 'Payment before Delivery' : 'Payment after Delivery' }}
                                        </td>
                                        <td>{{ $order->discount }}</td>
                                        <td>{{ $order->weight }}</td>
                                        <td>{{ $order->volume }}</td>
                                        <td>{{ $order->notes }}</td>
                                    </tr>
                                @endforeach
                            </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="orderForm" 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',
                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'
                ],
                responsive: true,
                order: [], // Disable default sorting

                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);
            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) {
                    Toast_.show('success', response.message)
                },
                error: function(error) {
                    //reverse the status
                    if (error.hasOwnProperty('responseJSON')) {
                        Toast_.show('error', error.responseJSON.message)
                    } else {
                        Toast_.show('error', 'Something went wrong')
                    }
                    // //reload after 3 seconds
                    // setTimeout(function() {
                    //     location.reload();
                    // }, 5000);
                }
            });
        });
    </script>
@endsection