@extends('dispatch.layout')

@section('dispatch-content')
<div class="card">
    <div class="card-header">
        <div class="row align-items-center justify-content-between">
            <div class="col-4 col-sm-auto d-flex align-items-center pr-0">
                <h5 class="text-danger">Orders</h5>
            </div>
            <div class="col-8 col-sm-auto text-right pl-2">
                <form method="GET" action="{{ url('fetch/request_lists') }}">
                    <div id="order-table-actions">
                        <button class="btn btn-falcon-default btn-sm mr-1" type="submit" name="filter" value="bol">
                            Bol
                        </button>
                        <button class="btn btn-falcon-default btn-sm mr-1" type="submit" name="filter" value="woocommerce">
                            Woocommerce
                        </button>
                        <button class="btn btn-falcon-default btn-sm mr-1" type="submit" name="filter" value="manual">
                            Manual
                        </button>
                        <button class="btn btn-falcon-default btn-sm mr-1" type="submit" name="sort" value="asc">
                            Sort Ascending
                        </button>
                        <button class="btn btn-falcon-default btn-sm mr-1" type="submit" name="sort" value="desc">
                            Sort Descending
                        </button>
                        <button class="btn btn-falcon-default btn-sm mr-1" type="submit" name="filter" value="all">
                            Show All Orders
                        </button>
                        <button class="btn btn-falcon-default btn-sm" type="submit" name="filter" value="shipped">
                            Show Shipped Orders
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <div class="row mt-1">
            <div class="col-2 btn btn-primary btn-sm">
                <span>Delivered: {{ $statusCounts['delivered'] }}</span>
            </div>
            <div class="col-2 btn btn-primary btn-sm">
                <span>Pending: {{ $statusCounts['pending'] }}</span>
            </div>
            <div class="col-2 btn btn-primary btn-sm">
                <span>Cancelled: {{ $statusCounts['cancelled'] }}</span>
            </div>
        </div>
    </div>
    <div class="card-body p-0" style="height: calc(100vh - 170px)">
        <div class="falcon-data-table">
            <div style="overflow-y: scroll;max-height: calc(100vh - 164px);">

                <form id="orderForm" method="POST" action="{{ url('/book-ride') }}">
                    @csrf
                    <table class="table table-sm mb-0 table-dashboard fs--1 data-table border-bottom border-200">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Order ID</th>
                                <th>Address</th>
                                <th>Order Placed Date</th>
                                <th>Payment Method</th>
                                <th>Quantity</th>
                                <th>Status</th>
                                <th>Order From</th>
                            </tr>
                        </thead>
                        <tbody id="table-body">
                            @foreach($orders as $item)
                            <tr style="background-color:">
                                <td>
                                    <input type="checkbox" name="orders[{{ $item['id'] }}][selected]" value="1">
                                    <input type="hidden" name="orders[{{ $item['id'] }}][order_id]" value="{{ $item['id'] }}">
                                    <input type="hidden" name="orders[{{ $item['id'] }}][order_type]" value="{{ $item['order_type'] }}">
                                    <input type="hidden" name="type" value="delivery">
                                </td>
                                <td>
                                    {{ $item['id']??'' }}
                                    <!-- <a href="{{ url('request/detail_view/'.$item['id'].'/'.$item['order_type']) }}" data-id="{{ $item['id'] }}" data-type="{{ $item['order_type'] }}">
                                        {{ $item['id']??'' }}
                                    </a> -->
                                </td>
                                <td>{{ $item['shipping_address']??'' }}</td>
                                <td>{{ $item['created_date']??'' }}</td>
                                <td>{{ $item['payment_method']??'' }}</td>
                                <td>{{ $item['quantity']??0 }}</td>
                                <td>{{ $item['status']??'' }}</td>
                                <td>{{ $item['order_type']??'' }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>

                    {{ $orders->links() }}
                    <div class="row align-items-center justify-content-between">
                        <div class="col-md-5"></div>
                        <div class="col-2">
                            <button type="submit" id="send-selected-orders" class="btn btn-primary btn-sm turned-button mb-2">Submit</button>
                        </div>
                    </div>
                </form>
            </div>

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

@push('dispatch-js')
<script>
    $(document).ready(function() {

        $('#order-table-actions').on('click', '[data-sort], [data-filter]', function() {
            let _this = $(this); // Store reference to clicked button
            let sortDirection = _this.data('sort') || null;
            let filterType = _this.data('filter') || null;

            let params = new URLSearchParams(window.location.search);
            let currentPage = params.get('page') || 1; // Preserve pagination

            if (sortDirection) {
                params.set('sort', sortDirection);
            } else {
                params.delete('sort');
            }

            if (filterType) {
                params.set('filter', filterType);
            } else {
                params.delete('filter');
            }

            params.set('page', currentPage); // Preserve current page
            $("#spinner-div").show();
            $.ajax({
                url: '{{ route("fetch.request_lists") }}',
                type: 'GET',
                data: params.toString(),
                success: function(response) {
                    $('#table-body').html($(response).find('#table-body').html());
                    $('.pagination').html($(response).find('.pagination').html());

                    // Update URL without refreshing the page
                    window.history.replaceState({}, '', '?' + params.toString());

                    // Remove 'active' class from all buttons
                    $('#order-table-actions button').removeClass('active');

                    // Add 'active' class to the clicked button
                    _this.addClass('active');
                    $("#spinner-div").hide();
                },
                error: function(xhr) {
                    $("#spinner-div").hide();
                    console.error('Error:', xhr);
                    alert('Failed to fetch data. Please try again.');
                }
            });
        });

        // Maintain active state on page load
        let currentParams = new URLSearchParams(window.location.search);
        let activeSort = currentParams.get('sort');
        let activeFilter = currentParams.get('filter');

        if (activeSort) {
            $(`[data-sort="${activeSort}"]`).addClass('active');
        }

        if (activeFilter) {
            $(`[data-filter="${activeFilter}"]`).addClass('active');
        }
    });
</script>
@endpush
@endsection