@extends('layouts.admin')

@section('content')
   <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h4 class="text-white"> Orders
                            {{-- <a href="{{url('order-history')}}" class="btn btn-primary float-end">Order History</a> --}}
                        </h4>
                    </div>
                    <div class="card-body">
                        {{-- Filter and Search Form --}}
                        <form method="GET" action="{{ route('admin.orders.index') }}">
                            <div class="row mb-3">
                                <div class="col-md-3">
                                    <input type="text" name="search" class="form-control border border-primary px-2" placeholder="Search by User Name" value="{{ request('search') }}">
                                </div>
                                <div class="col-md-3">
                                    <select name="status" class="form-control border border-primary px-2">
                                        <option value="">Filter by Status</option>
                                        <option value="processing" {{ request('status') == 'processing' ? 'selected' : '' }}>Processing</option>
                                        <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>Completed</option>
                                        <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <button type="submit" class="btn btn-primary">Apply</button>
                                    <a href="{{ route('admin.orders.index') }}" class="btn btn-secondary">Reset</a>
                                </div>
                            </div>
                        </form>

                        <div class="table-responsive">
                            <table class="table align-middle text-center">
                                <thead>
                                    <tr>
                                        <th>User Name</th>
                                        <th>Tracking Number</th>
                                        <th>Total Price</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($orders as $item)
                                        <tr>
                                            <td>{{ $item->user->first_name . ' ' . $item->user->last_name }}</td>
                                            <td>{{ $item->order_ref }}</td>
                                            <td>{{ $item->total_price }}</td>
                                            <td>
                                                <select class="form-select order-status" data-order-id="{{ $item->id }}">
                                                    <option value="processing" 
                                                    {{ $item->status == 'processing' ? 'selected' : '' }}>Processing</option>
                                                    <option value="completed" {{ $item->status == 'completed' ? 'selected' : '' }}>Completed</option>
                                                    <option value="cancelled" {{ $item->status == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                                                </select>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="4">No orders found.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                        {{-- Pagination Links --}}
                        <div class="d-flex justify-content-center pagination">
                            {{ $orders->appends(request()->query())->links() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
   </div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.order-status').forEach(dropdown => {
            dropdown.addEventListener('change', function () {
                const orderId = this.dataset.orderId;
                const newStatus = this.value;

                fetch(`/admin/orders/${orderId}/update-status`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ status: newStatus })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert('Order status updated successfully');
                    } else {
                        alert('Failed to update order status');
                    }
                })
                .catch(error => console.error('Error:', error));
            });
        });
    });
</script>
@endsection