{{-- resources/views/backend/users/details/orders_table.blade.php --}}
<style>
    .table-title{
        border-bottom: 1px solid #dee2e6 !important;
    }
</style>
<div class="card card-default">
    <div class="card-header justify-content-between align-items-center border-l-warning d-flex" style="padding:4px 21px;">
        <h6 class="mb-0 text-capitalize">Customer Orders</h6>
        <button type="button" class="btn btn-sm btn-primary" id="send_statement_btn" data-user-id="{{ $user->id }}">
            <i class="fas fa-envelope me-1"></i> Send Statement
        </button>
    </div>

    <div class="card-body" style="padding:0 25px 20px;">

        {{-- ==== FILTER FORM (AJAX) ==== --}}
        <form id="orders_filter_form" method="GET">
            @csrf
            <input type="hidden" name="user_id" value="{{ $user->id }}">
            <input type="hidden" name="type" value="{{ $module_type }}">
            <div class="" style="    padding-bottom: 1.25rem !important;">
            <div class="card-header py-2">
                <div class="row align-items-center w-100">
                    <div class="col-md-1">
                        <div class="d-flex align-items-center gap-2">
                            {{-- <label for="orders_entries" class="text-muted fw-bold mb-0">Show</label> --}}
                            <select id="orders_entries" name="entries" class="form-select ">
                                @foreach([10, 20, 30, 75, 'all'] as $v)
                                    <option value="{{ $v }}" {{ request('entries', 10) == $v ? 'selected' : '' }}>
                                        {{ $v === 'all' ? 'All' : $v }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                  
                    <div class="col-md-3">
                        <select id="orders_status" name="status" class="form-select">
                            <option value="">All Status</option>
                            <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                            <option value="confirmed" {{ request('status') == 'confirmed' ? 'selected' : '' }}>Confirmed</option>
                            <option value="picked_up" {{ request('status') == 'picked_up' ? 'selected' : '' }}>Picked Up</option>
                            <option value="on_the_way" {{ request('status') == 'on_the_way' ? 'selected' : '' }}>On The Way</option>
                            <option value="delivered" {{ request('status') == 'delivered' ? 'selected' : '' }}>Delivered</option>
                            <option value="canceled" {{ request('status') == 'canceled' ? 'selected' : '' }}>Canceled</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <input type="date" class="form-control" id="orders_date_from" name="date_from"
                            value="{{ request('date_from') }}" placeholder="From Date">
                    </div>
                    <div class="col-md-2">
                        <input type="date" class="form-control" id="orders_date_to" name="date_to"
                            value="{{ request('date_to') }}" placeholder="To Date">
                    </div>
                    <div class="col-md-1">
                        <button type="button" class="btn btn-sm btn-secondary" id="orders_clear_filters">Clear</button>
                    </div>
                      <div class="col-md-3">
                        <input type="text" class="form-control" id="orders_search" name="search"
                            value="{{ request('search') }}" placeholder="Search Order Code">
                    </div>
                </div>
            </div>
            </div>
        </form>

        <div id="orders_table_content">
            @include('backend.users.details.orders_table_body', ['orders' => $orders, 'user' => $user, 'module_type' => $module_type])
        </div>
    </div>
</div>

<script>
    $(function () {
        const $form = $('#orders_filter_form');
        const $tableContainer = $('#orders_table_container'); // Ensure this ID wraps the table

        // Auto reload on any filter change
        $('#orders_entries, #orders_status, #orders_date_from, #orders_date_to').on('change', reload);
        $('#orders_search').on('input', debounce(reload, 300));
        
        // Clear filters
        $('#orders_clear_filters').on('click', function() {
            $('#orders_search, #orders_date_from, #orders_date_to').val('');
            $('#orders_status').val('');
            $('#orders_entries').val('10');
            reload();
        });
        
        // Debounce function
        function debounce(func, wait) {
            let timeout;
            return function executedFunction(...args) {
                const later = () => {
                    clearTimeout(timeout);
                    func(...args);
                };
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
            };
        }

        // Pagination click (delegated)
        $(document).on('click', '#productdetails_pagination .pagination a', function (e) {
            e.preventDefault();
            const url = $(this).attr('href');
            loadTable(url);
        });

        // Reload table via AJAX
        function reload() {
            const baseUrl = "{{ route('admin.users.tab.orders', ['type' => $module_type, 'id' => $user->id]) }}";
            loadTable(baseUrl);
        }

        function loadTable(url) {
            $.get(url, $form.serialize(), function (resp) {
                if (resp.html) {
                    $('#orders_table_content').html(resp.html);
                }
            }).fail(function () {
                alert('Failed to load data. Please try again.');
            });
        }
        
        // Send Statement button - prevent multiple clicks
        $(document).on('click', '#send_statement_btn', function(e) {
            e.preventDefault();
            
            const btn = $(this);
            
            // Check if already processing
            if (btn.data('processing')) {
                return false;
            }
            
            const userId = btn.data('user-id');
            
            // Mark as processing
            btn.data('processing', true);
            btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i> Sending...');
            
            $.post('{{ route("admin.users.send.statement", ["type" => $module_type]) }}', {
                user_id: userId,
                _token: '{{ csrf_token() }}'
            })
            .done(function(response) {
                if (response.success) {
                    Botble.showSuccess(response.message);
                } else {
                    Botble.showError(response.message);
                }
            })
            .fail(function() {
                Botble.showError('Failed to send statement. Please try again.');
            })
            .always(function() {
                // Reset after 2 seconds to allow retry if needed
                setTimeout(() => {
                    btn.data('processing', false);
                    btn.prop('disabled', false).html('<i class="fas fa-envelope me-1"></i> Send Statement');
                }, 2000);
            });
        });
    });
</script>