@include('Admin.Includes.header')
@php
    use Carbon\Carbon;
@endphp
<style>
    .pagination_class {
        display: inline-block;
    }

    .pagination_class a {
        color: black;
        float: left;
        padding: 8px 16px;
        text-decoration: none;
        transition: background-color .3s;
        border: 1px solid #ddd;
    }

    .pagination_class a.active {
        background-color: #4CAF50;
        color: white;
        border: 1px solid #4CAF50;
    }

    .pagination_class a:hover:not(.active) {
        background-color: #ddd;
    }

    .search {

        top: 6px;
        left: 10px;
    }

    .form-control {

        border: none;
        padding-left: 32px;
    }

    .form-control:focus {

        border: none;
        box-shadow: none;
    }

    .green {

        color: green;
    }

    .orders-breadcrumb .filter-dropdown {
        font-size: 20px;
    }

    .breadcrumb {
        margin-top: 1rem;
    }

    .filter-dropdown {
        display: none;
        margin-left: 1rem;
    }

    header {
        background-color: #333;
        color: #fff;
        text-align: center;
        padding: 1rem;
    }

    .container {
        display: flex;
        justify-content: space-around;
        padding: 2rem;
    }

    .card {
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        padding: 1rem;
        width: 30%;
    }

    table {
        width: 200%;
        border-collapse: collapse;
        margin-top: 1rem;
    }

    th,
    td {
        padding: 0.5rem;
        border-bottom: 1px solid #ddd;
        text-align: left;
    }

    th {
        background-color: #f2f2f2;
    }

    #filter {}

    #filter button {
        color: grey;
        background-color: white;
        border: none;
        box-shadow: none;
        margin-top: 50px;
        margin-left: 50px;
        display: flex;
        position: relative;
        outline: none;
        right: 30px;

        justify-content: center;
    }

    #filter button .glyphicon {
        font-size: 30px;
        position: relative;
        top: -20px;
        left: 20px;
        outline: none
    }

    #filter button #breadcrumb-text {
        margin-left: 30px
    }

    #col-h1 {
        font-size: 16px;
        color: grey;
    }

    .search-container {
        position: relative;
    }

    .search-input {
        display: none;
        padding: 5px;
    }

    .search-icon,
    .cancel-icon {
        cursor: pointer;
        font-size: 18px;
        margin-left: 5px;
    }

    .cancel-icon {
        display: none;
    }


    .dropdown-arrow {
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid #333;
        display: inline-block;
        vertical-align: middle;
        margin-left: 5px;
        cursor: pointer;
    }

    $gl-ms : "screen and (max-width: 23.5em)"; // up to 360px
    $gl-xs : "screen and (max-width: 35.5em)"; // up to 568px
    $gl-sm : "screen and (max-width: 48em)"; // max 768px
    $gl-md : "screen and (max-width: 64em)"; // max 1024px
    $gl-lg : "screen and (max-width: 80em)"; // max 1280px


    th,
    td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: left;
    }

    .filter-options {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px;
        color: grey;
    }

    .filter-option {
        padding: 5px 10px;
        color: grey;
        border-radius: 5px;
        cursor: pointer;
    }

    #searchInput {
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
        outline: none;
    }


    table {
        border-collapse: collapse;
        width: 200%;
        border: 2px solid #000;
        border-spacing: 1;
        border-collapse: collapse;
        background: white;
        border-radius: 6px;
        overflow-x: scroll;
        max-width: 800px;
        width: 100%;
        margin: 0 auto;
        position: relative;

        * {
            position: relative
        }

        td,
        th {
            padding-left: 8px
        }

        thead tr {
            height: 60px;
            background: #FFED86;
            font-size: 16px;
        }

        tbody tr {
            height: 48px;
            border-bottom: 1px solid #E3F1D5;

            &:last-child {
                border: 0;
            }
        }

        td,
        th {
            text-align: left;

            &.l {
                text-align: right
            }

            &.c {
                text-align: center
            }

            &.r {
                text-align: center
            }
        }
    }

    .order_status_select {
        padding: 5px;
        border-radius: 10px;
        border: 1px solid #ccc;
    }


    @media #{$gl-xs} {

        table {
            display: block;

            >*,
            tr,
            td,
            th {
                display: block
            }

            thead {
                display: none
            }

            tbody tr {
                height: auto;
                padding: 8px 0;

                td {
                    padding-left: 45%;
                    margin-bottom: 12px;

                    &:last-child {
                        margin-bottom: 0
                    }

                    &:before {
                        position: absolute;
                        font-weight: 700;
                        width: 40%;
                        left: 10px;
                        top: 0
                    }

                    &:nth-child(1):before {
                        content: "Code";
                    }

                    &:nth-child(2):before {
                        content: "Stock";
                    }

                    &:nth-child(3):before {
                        content: "Cap";
                    }

                    &:nth-child(4):before {
                        content: "Inch";
                    }

                    &:nth-child(5):before {
                        content: "Box Type";
                    }
                }
            }
        }
    }

    blockquote {
        color: white;
        text-align: center;
    }
</style>
@php
    use Illuminate\Support\Facades\Auth;
    use App\General\DiscountClass;
    use App\General\InvoiceClass;
    $logged_in_user = Auth::user();
@endphp
<!-- Page Inner Start -->
<!--================================-->
<div class="mx-4 mx-md-5">
    <!--================================-->
    <!-- Breadcrumb Start -->
    <!--================================-->
    <div class="pageheader pd-t-25 pd-b-35">
        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}</a>
            </div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <div class="">
            <div class="row">
                <div class="col-lg-2 col-sm-12 d-flex justify-content-center dropdown"
                    style="border:1px ridge rgb(192, 189, 189);background-color:white;border-radius:10px;">
                    <div id="col"class="col py-2"
                        style="display: flex; flex-direction: column; justify-content: space-between;">
                        <h1 id="col-h1" style=" margin-bottom: 0px !important;">Filter Orders</h1>
                        <br>
                        <select name="filterDays" class="filterDays p-2" style="border:1px ridge rgb(192, 189, 189);">
                            <option value="7" selected>7 Days</option>
                            <option value="14">14 Days</option>
                            <option value="21">21 Days</option>
                            <option value="30">30 Days</option>
                            <option value="">All Orders</option>
                        </select>
                    </div>
                </div>
                <div class="col-lg-10 col-sm-12">
                    <div
                        class="row ordersCount "style="border:1px ridge rgb(192, 189, 189);background-color:white;border-radius:10px;padding:5px 0px 5px 0px">
                        <div class="d-flex border-left col-lg-2 col-sm-6">
                            <div id="col"class="col py-2"
                                style="display: flex; flex-direction: column; justify-content: space-between;">
                                <h1 id="col-h1">Orders</h1>
                                <br>
                                <p class="mb-0" id="col-h1">{{ $totalOrders ?? 0 }}</p>
                            </div>
                        </div>
                        <div class="d-flex border-left col-lg-2 col-sm-6">
                            <div id="col"class="col py-2"
                                style="display: flex; flex-direction: column; justify-content: space-between;">
                                <h1 id="col-h1">Pending Orders</h1>
                                <br>
                                <p class="mb-0" id="col-h1">{{ $pendingOrders ?? '' }}</p>
                            </div>
                        </div>
                        <div class="d-flex border-left col-lg-3 col-sm-6">
                            <div id="col" class="col py-2"
                                style="display: flex; flex-direction: column; justify-content: space-between;">
                                <h1 id="col-h1">In Progress Orders</h1>
                                <br>
                                <p class="mb-0" id="col-h1">{{ $inProcessOrders ?? '' }}</p>
                            </div>
                        </div>
                        <div class="d-flex border-left col-lg-2 col-sm-6">
                            <div id="col"class="col py-2"
                                style="display: flex; flex-direction: column; justify-content: space-between;">
                                <h1 id="col-h1">Completed Orders</h1>
                                <br>
                                <p class="mb-0" id="col-h1">{{ $completedOrders ?? '' }}</p>
                            </div>
                        </div>
                        <div class="d-flex border-left col-lg-2 col-sm-6">
                            <div id="col"class="col py-2"
                                style="display: flex; flex-direction: column; justify-content: space-between;">
                                <h1 id="col-h1">Cancelled Orders</h1>
                                <br>
                                <p class="mb-0" id="col-h1">{{ $cancelledOrders ?? '' }}</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <style>
                .filter-class {
                    display: flex;
                    justify-content: space-between;
                }
            </style>
            <div class="status_msgDiv"></div>
            <div
                class="w-100 mt-5"style="color:rgb(94, 92, 92);font-size:15px;border:1px ridge rgb(192, 189, 189);border-radius:10px">
                <div class="w-100 d-flex justify-content-between Order_History_Sec2_title pt-2 pb-4 pt-sm-0 pb-sm-0">
                    <div style="background-color:white;colspna:12" class="filter-class filter-options">
                  

                        <form action="{{ route('admin.orders') }}" method="GET" class="d-flex">
                        <div style="margin-right: 15px;">
                            <!-- Text Search -->
                            <input  style="padding: 10px 15px 10px 15px;background-color:rgb(238, 236, 236);border-radius:10px;outline:none;border:none; color: black;"
                                type="text" 
                                name="search" 
                                value="{{ request('search') }}" 
                                placeholder="Search orders..." 
                                class="form-control" 
                            />
                        </div>

                            <button type="submit"  style="padding: 10px 15px 10px 15px;background-color:rgb(238, 236, 236);border-radius:10px;outline:none;border:none; color: black;" class="btn">Search</button>
                        </form>
                        <button
                        style="padding: 10px 15px 10px 15px;background-color:rgb(238, 236, 236);border-radius:10px;outline:none;border:none; color: black;"
                            class="ms-5 btn "
                            onclick="window.location.href='{{ route('admin.orders') }}'"
                        >
                            Reset
                        </button>
                    </div>
                     @if (Session::has('permissions') && in_array('Delete All', Session::get('permissions')))
                    <div class="d-flex align-items-center mx-3">
                        <button class="btn btn-danger" name="multi_delete" id="multi_delete"
                            onclick="return confirm('Are you sure? Newsletter Subscription will permanently be deleted!')">Delete All</button>
                    </div>
               @endif
                </div>
                <div class="order-table-container" style="width: 100% !important;">
                    <table class="col-12 table-responsive" style="outline:none;border:none">
                        <thead>
                            <tr class="col-12"style="background-color: white">
                                <th><input type="checkbox" id="all_checked" name="checkall" value=""></th>
                                <th class="col-1">Order</th>
                                <th class="col-1">Date</th>
                                <th class="col-2">Customer</th>
                                <th class="col-1">Delivery Method</th>
                                <th class="col-1">Ordered Total</th>
                                <th class="col-1">Delivered Total</th>
                                <th class="col-2">Payment Method</th>
                                <th class="col-2">Status</th>
                                <th class="col-2">Fulfillment Status</th>
                                <th class="col-1">Item</th>
                                <th class="col-1">Delivery</th>
                                <th class="col-1">Action</th>
                            </tr>
                        </thead>
                        <tbody class="myTableBody col-12" id="myTable">
                            @if ($orders->isNotEmpty())
                                @foreach ($orders as $order)
                                    <tr>
                                        <td><input type="checkbox" data-id="{{ $order->id }}" name="check_it"
                                                class="checkbox" value=""></td>
                                        <td>{{ $order->invoice_number }}</td>
                                        <td>
                                            @php
                                                $carbonDate = Carbon::parse($order->created_at);
                                            @endphp
                                            {{ InvoiceClass::convertDateToDDMMYYYY($carbonDate->toDateString()) }}
                                        </td>
                                        <td>{{ $order->f_name . ' ' . $order->l_name ?? '' }}</td>
                                        <td>{{ $order->delivery_method }}</td>
                                        <td>
                                            @if ($order->grand_total < 0)
                                                $0
                                            @else
                                                ${{ $order->grand_total }}
                                            @endif
                                        </td>
                                        <td>
                                            @if ($order->delivered_price ==null)
                                               $0
                                            @else
                                                ${{ $order->delivered_price }}
                                            @endif
                                        </td>
                                        <td>
                                            {{ ucfirst($order->payment_method) }}
                                        </td>
                                        <td><span
                                                style="background-color: rgb(224, 219, 219);border-radius:10px;padding:5px 10px 5px 10px">{{ ucwords($order->payment_status) ?? '' }}</span>
                                        </td>
                                        <td>
                                             @if (Session::has('permissions') && in_array('Fulfillment Status', Session::get('permissions')))
                                            <select class="order_status_select" name="order_status" id="order_status"
                                                data-order-id="{{ $order->id }}"
                                                data-current-value="{{ $order->status }}"
                                                @if ($order->status == 'completed' || $order->status == 'cancelled') disabled @endif>
                                                <option value="pending"
                                                    {{ $order->status == 'pending' ? 'selected' : '' }}>
                                                    Pending</option>
                                                <option value="inProcess"
                                                    {{ $order->status == 'inProcess' ? 'selected' : '' }}>In Process
                                                </option>
                                                <option value="completed"
                                                    {{ $order->status == 'completed' ? 'selected' : '' }}>Completed
                                                </option>
                                                <option value="cancelled"
                                                    {{ $order->status == 'cancelled' ? 'selected' : '' }}>Cancelled
                                                </option>
                                            </select>
                                        @endif
                                        </td>
                                        <td>{{ count($order->orderMeta) }} item</td>
                                        <td>${{$order->delivery_charges ?? 0}}</td>
                                        <td>
                                             @if (Session::has('permissions') && (in_array('Print Order Invoice', Session::get('permissions'))  ||in_array('Orders Detail', Session::get('permissions'))||in_array('Orders Delete', Session::get('permissions'))))
                                            <div class="btn-group btn-group-sm" role="group" aria-label="...">
                                                 @if (Session::has('permissions') && in_array('Print Order Invoice', Session::get('permissions')))
                                                <button type="button" class="btn badge btn-warning" onclick="printInvoice({{ $order->id }})"><i class="fa fa-print"></i></button>
                                                @endif
                                                 @if (Session::has('permissions') && in_array('Orders Detail', Session::get('permissions')))
                                                <button class="btn btn-primary see_details" data-id="{{ $order->id }}" type="button">Details</button>
                                               @endif
                                                @if (Session::has('permissions') && in_array('Orders Delete', Session::get('permissions')))
                                                <button class="btn btn-danger deletetButton" type="submit" data-id="{{ $order->id }}">Delete</button>
                                            @endif
                                            </div>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <td colspan="11" class="text-center">No orders found.</td>
                            @endif
                        </tbody>
                    </table>
                    <div class="w-100 px-5 d-flex justify-content-end p-2">
                        <div class="d-flex">
                        {{ $orders->appends(request()->all())->links() }}


                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade bd-example-modal-lg" id="myLargeModal" tabindex="-1" role="dialog"
                aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Order Details</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--/ Page Inner End -->
<div id="statusToast"></div>
@include('Admin.Includes.footer')

<style>
    .pagination-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination-item {
  display: inline-flex;
  height: 40px;
  width: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  border: 1px solid #e5e7eb;
  margin: 0 4px;
}

.pagination-item.active {
  background-color: #3b82f6;
  color: white;
}

.pagination-item.disabled {
  color: #9ca3af;
  cursor: default;
}

.pagination-item:not(.active):not(.disabled) {
  background-color: white;
  color: #374151;
}

.pagination-item:not(.active):not(.disabled):hover {
  background-color: #f3f4f6;
}

.pagination-item:focus {
  outline: none;
  ring: 2px;
  ring-color: #93c5fd;
}

.pagination-dots {
  margin: 0 4px;
  display: inline-flex;
  height: 40px;
  width: 40px;
  align-items: center;
  justify-content: center;
  color: #6b7280;
}


</style>
<script>
    $(document).ready(function() {
        @if(session('status'))
            toastr.success("{{ session('message') }}");
        @endif
    });
</script>
<script>
    function printInvoice(id) {
        $.ajax({
            url: '/print-guest-order-invoice/' + id,
            type: 'GET',
            success: function(response) {
                var printWindow = window.open('', '', 'width=1200,height=720');
                printWindow.document.open();
                printWindow.document.title = 'OS INOICE';
                printWindow.document.write('<html><head><title>Print Invoice - ' +
                    id +
                    '</title><link href="{{ url('/') }}/AdminAssets/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet"></head><body>'
                );
                printWindow.document.write('<div class="invoice_Area">' + response
                    .invoice_review + '</div>');
                printWindow.document.write('</body></html>');
                printWindow.document.close();

                printWindow.print();
            },
            error: function(error) {
                console.log(JSON.stringify(error) + "========== error");
            }
        });
    }

    function colorchange(_this) {
        $('.filter-option').css('background', 'transparent');
        $(_this).css('background', 'rgb(216, 214, 214)');
    }

    function handleCheckAll() {
        var checkAllCheckbox = document.getElementById("all_checked");
        var checkboxes = document.querySelectorAll('.myTableBody input[name="check_it"]');
        checkboxes.forEach(function(checkbox) {
            checkbox.checked = checkAllCheckbox.checked;
        });
    }
    document.getElementById("all_checked").addEventListener("click", handleCheckAll);

    function handleAjaxCheckAll() {
        var checkAllCheckbox = document.getElementById("ajax_all_checked");
        var checkboxes = document.querySelectorAll('.myTableBody input[name="check_it"]');
        checkboxes.forEach(function(checkbox) {
            checkbox.checked = checkAllCheckbox.checked;
        });
    }

    $(document).ready(function() {
        $('#multi_delete').click(function() {
            var selectedIds = [];
            $('.checkbox:checked').each(function() {
                selectedIds.push($(this).data('id'));
            });
            if (selectedIds.length > 0) {
                if (confirm("Are you sure you want to delete this order?")) {
                    $.ajax({
                        url: "{{ route('Admin.orders.bulk-delete') }}",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            ids: selectedIds
                        },
                        success: function(response) {
                            $('.success-message').html(
                                `<div class="alert alert-success mt-1">${response.message}</div>`
                            );
                            location.reload();
                        },
                        error: function(xhr, status, error) {
                            console.error(error);
                        }
                    });
                }
            } else {
                alert("Please select at least one record to delete.");
            }
        });
    });

    $(document).on('click', '.see_details', function() {
        let id = $(this).data('id');
        $('.modal-body').empty();
        $.ajax({
            url: '/admin/order/detail',
            method: 'GET',
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
            },
            data: {
                id: id
            },
            success: function(response) {
                $("#myLargeModal").modal("show");
                $('.modal-body').append(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
    $(function() {
        $('#datePickerArrow').click(function() {
            $('#dateFilter').datepicker('show');
        });

        $('#dateFilter').datepicker({
            dateFormat: 'yy-mm-dd',
            onSelect: function(dateText, inst) {}
        });
    });

    function filterTableByDate(selectedDate) {
        $(document).ready(function() {
            $("#searchInput").on("keyup", function() {
                var value = $(this).val().toLowerCase();
                $("#myTable tr").filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
                });
            });
        });
    }

    function toggleFilterDropdown() {
        var filterDropdown = document.getElementById("filter-dropdown");

        if (filterDropdown.style.display === "none") {
            filterDropdown.style.display = "block";
        } else {
            filterDropdown.style.display = "none";
        }
    }

    function applyTimeFilter(selectedValue) {
        var breadcrumbText = document.getElementById("breadcrumb-text");
        breadcrumbText.textContent = selectedValue;
    }

    function filterTableByFulfillmentStatus(status) {
        var rows = document.querySelectorAll("#myTable tr");

        rows.forEach(function(row) {
            var fulfillmentCell = row.querySelector("td:nth-child(8)");
            var paymentStatusCell = row.querySelector('td:nth-child(7)');

            if (fulfillmentCell) {
                if (status === "All" || fulfillmentCell.textContent.trim() === status) {
                    row.style.display = "table-row";
                } else {
                    row.style.display = "none";
                }
            }

            if (paymentStatusCell) {
                const paymentStatus = paymentStatusCell.innerText.trim();
                if (status === 'All' || paymentStatus === status) {
                    row.style.display = '';
                } else if (status === "Refunded" && paymentStatus === 'refunded') {
                    row.style.display = '';
                } else if (status === "Paid" && paymentStatus === "paid") {
                    row.style.display = '';
                } else if (status === "UnPaid" && paymentStatus === "unpaid") {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            }
        });
    }

    function setupFilterListeners() {
        var filterOptions = document.querySelectorAll(".filter-option");

        filterOptions.forEach(function(option) {
            option.addEventListener("click", function() {
                var selectedStatus = option.textContent;
                filterTableByFulfillmentStatus(selectedStatus);
            });
        });
    }

    setupFilterListeners();

    function setupSearchToggle() {
    // When the search button is clicked
    $(".search-icon").click(function() {
        $(this).fadeOut(200, function() {
            $(".cancel-search").fadeIn(200); // Show the cancel icon
            $(".search-input").fadeIn(200); // Show the search input
        });
        $(".search-btn-area").fadeOut(200); // Hide the search button area
    });

    // When the cancel button is clicked
    $(".cancel-search").click(function() {
        $(this).fadeOut(200, function() {
            $(".search-icon").fadeIn(200); // Show the search button again
            $(".search-input").fadeOut(200); // Hide the search input
        });
        $(".search-btn-area").fadeIn(200); // Show the search button area again
    });
}

$(document).ready(function() {
    setupSearchToggle();
});


    $(document).ready(function() {
        $('.pagination').find('li:first').addClass('active');
        setupSearchToggle();

        $('.search-btn').click(function() {
            $('.search-btn-area, .dynamic-filter').hide();
            $('.search-section').removeClass('d-none');
        });
        $('.cancel-search').click(function() {
            $('.search-btn-area, .dynamic-filter').fadeIn();
            $('.search-section').addClass('d-none');
        });

    });

    $(document).ready(function() {
        let filterDaysSelectValue = 7;
        let currentPage = '1';
        $(document).on('change', '.order_status_select', function() {
            let status = $(this).val();
            let orderId = $(this).data('order-id');
            let currentValue = $(this).data('current-value');
            let selectField = $(this);
            $('.status_msgDiv').empty().show();

            if (status === 'completed' || status === 'cancelled') {
                selectField.prop('disabled', true);
            } else {
                selectField.prop('disabled', false);
            }
            $.ajax({
                url: "/change-order-status",
                method: "POST",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                },
                data: {
                    'orderId': orderId,
                    'status': status
                },
                success: function(response) {
                    if (response.redirect) {
                        // Redirect if response contains a redirect URL
                        window.location.href = response.redirect;
                        return;
                    }
                    if (response.status) {
                        $('.status_msgDiv').append(
                            `<div class="mt-3 px-3 py-2" style="background: rgb(144, 246, 144);"><span><b>` +
                            response.message + `</b></span></div>`
                        );
                        setTimeout(function() {
                            $('.status_msgDiv').hide();
                        }, 3000);
                    } else {
                        $('.order_status_select').val(currentValue);
                        $('.status_msgDiv').append(
                            `<div class="mt-3 px-3 py-2" style="background: rgb(248, 148, 148);"><span><b>` +
                            response.message + `</b></span></div>`
                        );
                        setTimeout(function() {
                            $('.status_msgDiv').hide();
                        }, 3000);
                    }
                },
                error: function(error) {
                    $('.order_status_select').val(currentValue);
                    console.log(error);
                }
            });
        });

        $('.filterDays').on('change', function() {
            let days = $(this).val();
            filterDaysSelectValue = days;
            filterData();
        });
        // Handle pagination links clicks
        $(document).on('click', '.pagination a.page-link', function(e) {
            e.preventDefault();
            let pageType = "Orders";
            let days = $('.filterDays').val();
            let page = $(this).attr('href').split('page=')[1];
            let searchTerm = $('input[name="search"]').val() || '';
            $('.pagination .page-item.active').removeClass('active');
            currentPage = page;
            let clickedPageNumber = page;
            $.ajax({
                url: "/admin/filter/orders",
                type: 'GET',
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                },
                data: {
                    'page': page,
                    'filterDays': days,
                    'search': searchTerm, 
                    'pageType': pageType
                },
                success: function(response) {
                    $("#all_checked").prop("checked", false);
                    $('.order-table-container').empty();
                    $('.order-table-container').append(response.orders);
                    $('.ordersCount').html(response.counts);
                    $('#currentPage').val(page);
                },
                error: function(xhr, status, error) {
                    console.log(error);
                }
            }).done(function() {
                document.getElementById("ajax_all_checked").addEventListener("click",
                    handleAjaxCheckAll);
                let clickedButton = $(
                    `.pagination a.page-link[href*="page=${clickedPageNumber}"]`).parent(
                    '.page-item');
                clickedButton.addClass('active');
            });
        });

        function filterData() {
            let days = $('#filterDays').val();
            let page = 1;
            let pageType = "Orders";
            $.ajax({
                url: '/admin/filter/orders',
                method: 'GET',
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                },
                data: {
                    'filterDays': filterDaysSelectValue,
                    'page': 1,
                    'pageType': pageType
                },
                success: function(response) {
                    console.log(response);
                    $('.order-table-container').empty();
                    $('.order-table-container').append(response.orders);

                    $('.ordersCount').html(response.counts);
                    $('.pagination').html(response.pagination);
                    $('.pagination .page-item.active').removeClass('active');
                    $('.pagination .page-item:nth-child(1)').addClass('active');
                },
                error: function(error) {
                    console.log(error + "========== error");
                }
            }).done(function() {
                document.getElementById("ajax_all_checked").addEventListener("click",
                    handleAjaxCheckAll);
            });
        }
        $(document).on('click', '.deletetButton', function(e) {
            e.preventDefault();
            let id = $(this).attr('data-id');
            // Show a simple JavaScript alert to confirm deletion
            if (confirm("Are you sure you want to delete this order?")) {
                $.ajax({
                    url: '/admin/delete/order',
                    method: 'post',
                    data: {
                        id: id,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(res) {
                        location.reload();
                        getallCategory();
                    }
                });
            }
        });
    });
</script>