@extends('admin.layouts.app')

@section('title', 'Orders')
@section('page-title', 'Orders')

@section('content')
<div class="mb-4 md:mb-6">
    <form id="filter-form" method="GET" action="{{ route('admin.orders.index') }}" class="flex flex-col sm:flex-row flex-wrap gap-3">
        <input type="text" name="search" id="filter-search" value="{{ request('search') }}" placeholder="Search order number, name, or email..." class="w-full sm:flex-1 px-4 py-2 md:py-3 border-2 border-[#d1d5db] rounded-xl focus:ring-2 focus:ring-black focus:border-black transition-all outline-none text-black text-sm md:text-base">
        <select name="status" id="filter-status" class="w-full sm:w-auto px-4 py-2 md:py-3 border-2 border-[#d1d5db] rounded-xl focus:ring-2 focus:ring-black focus:border-black transition-all outline-none text-black bg-white text-sm md:text-base">
            <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="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>
        <input type="date" name="date_from" id="filter-date-from" value="{{ request('date_from') }}" class="w-full sm:w-auto px-4 py-2 md:py-3 border-2 border-[#d1d5db] rounded-xl focus:ring-2 focus:ring-black focus:border-black transition-all outline-none text-black text-sm md:text-base">
        <input type="date" name="date_to" id="filter-date-to" value="{{ request('date_to') }}" class="w-full sm:w-auto px-4 py-2 md:py-3 border-2 border-[#d1d5db] rounded-xl focus:ring-2 focus:ring-black focus:border-black transition-all outline-none text-black text-sm md:text-base">
        <button type="submit" class="w-full sm:w-auto bg-black text-white px-4 md:px-6 py-2 md:py-3 rounded-xl hover:bg-[#1a1a1a] transition-all font-semibold shadow-md text-sm md:text-base">Filter</button>
        <a href="{{ route('admin.orders.index') }}" id="clear-filters" class="w-full sm:w-auto bg-[#d1d5db] text-black px-4 md:px-6 py-2 md:py-3 rounded-xl hover:bg-[#e5e7eb] transition-all font-semibold text-center text-sm md:text-base">Clear</a>
        <input type="hidden" name="sort" id="sort-column" value="{{ request('sort', 'created_at') }}">
        <input type="hidden" name="direction" id="sort-direction" value="{{ request('direction', 'desc') }}">
    </form>
</div>

<!-- Mobile Card View -->
<div class="lg:hidden space-y-4">
    @foreach($orders as $order)
        <div class="bg-white rounded-2xl shadow-md border border-[#d1d5db] p-4">
            <div class="flex justify-between items-start mb-3">
                <div>
                    <h3 class="font-bold text-black text-lg">{{ $order->order_number }}</h3>
                    <p class="text-sm text-black">{{ $order->customer_name }}</p>
                    <p class="text-xs text-black">{{ $order->customer_email }}</p>
                </div>
                <span class="px-3 py-1 rounded-full text-xs font-semibold {{ $order->status === 'pending' ? 'bg-[#fef3c7] text-[#92400e]' : ($order->status === 'completed' ? 'bg-[#d1fae5] text-[#065f46]' : ($order->status === 'cancelled' ? 'bg-[#fee2e2] text-[#991b1b]' : 'bg-[#dbeafe] text-[#1e40af]')) }}">
                    {{ ucfirst($order->status) }}
                </span>
            </div>
            <div class="space-y-2 mb-3">
                <p class="text-sm text-black"><strong>Items:</strong> {{ $order->items->count() }}</p>
                <p class="text-sm text-black"><strong>Total:</strong> R{{ number_format($order->total, 2) }}</p>
                <p class="text-sm text-black"><strong>Date:</strong> {{ $order->created_at->format('M d, Y') }}</p>
            </div>
            <div class="flex gap-2">
                <a href="{{ route('admin.orders.show', $order->id) }}" class="flex-1 bg-black text-white px-4 py-2 rounded-xl hover:bg-[#1a1a1a] transition-all font-semibold text-center text-sm">View</a>
            </div>
        </div>
    @endforeach
</div>

<!-- Desktop Table View -->
<div class="hidden lg:block bg-white rounded-2xl shadow-md border border-[#d1d5db] overflow-x-auto">
    <table class="w-full">
        <thead class="bg-[#f3f4f6] border-b border-[#d1d5db]">
            <tr>
                <th class="px-4 xl:px-6 py-3 md:py-4 text-left text-black font-semibold cursor-pointer hover:bg-[#d1d5db] transition-colors select-none text-sm md:text-base" data-sort="order_number">
                    <div class="flex items-center gap-2">
                        <span>Order Number</span>
                        @if(request('sort') == 'order_number')
                            @if(request('direction') == 'asc')
                                <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
                                </svg>
                            @else
                                <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                </svg>
                            @endif
                        @endif
                    </div>
                </th>
                <th class="px-4 xl:px-6 py-3 md:py-4 text-left text-black font-semibold cursor-pointer hover:bg-[#d1d5db] transition-colors select-none text-sm md:text-base" data-sort="customer_name">
                    <div class="flex items-center gap-2">
                        <span>Customer</span>
                        @if(request('sort') == 'customer_name')
                            @if(request('direction') == 'asc')
                                <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
                                </svg>
                            @else
                                <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                </svg>
                            @endif
                        @endif
                    </div>
                </th>
                <th class="px-4 xl:px-6 py-3 md:py-4 text-left text-black font-semibold text-sm md:text-base">Items</th>
                <th class="px-4 xl:px-6 py-3 md:py-4 text-left text-black font-semibold cursor-pointer hover:bg-[#d1d5db] transition-colors select-none text-sm md:text-base" data-sort="total">
                    <div class="flex items-center gap-2">
                        <span>Total</span>
                        @if(request('sort') == 'total')
                            @if(request('direction') == 'asc')
                                <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
                                </svg>
                            @else
                                <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                </svg>
                            @endif
                        @endif
                    </div>
                </th>
                <th class="px-4 xl:px-6 py-3 md:py-4 text-left text-black font-semibold text-sm md:text-base">Status</th>
                <th class="px-4 xl:px-6 py-3 md:py-4 text-left text-black font-semibold cursor-pointer hover:bg-[#d1d5db] transition-colors select-none text-sm md:text-base" data-sort="created_at">
                    <div class="flex items-center gap-2">
                        <span>Date</span>
                        @if(request('sort') == 'created_at')
                            @if(request('direction') == 'asc')
                                <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
                                </svg>
                            @else
                                <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                </svg>
                            @endif
                        @endif
                    </div>
                </th>
                <th class="px-4 xl:px-6 py-3 md:py-4 text-left text-black font-semibold text-sm md:text-base">Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse($orders as $order)
                <tr class="border-b border-[#d1d5db] hover:bg-[#f3f4f6] transition-colors">
                    <td class="px-4 xl:px-6 py-3 md:py-4 text-black font-semibold text-sm md:text-base">
                        <a href="{{ route('admin.orders.show', $order->id) }}" class="hover:text-black transition-colors">
                            {{ $order->order_number }}
                        </a>
                    </td>
                    <td class="px-4 xl:px-6 py-3 md:py-4 text-black text-sm md:text-base">
                        <div>
                            <div class="font-medium">{{ $order->customer_name }}</div>
                            <div class="text-xs text-black">{{ $order->customer_email }}</div>
                        </div>
                    </td>
                    <td class="px-4 xl:px-6 py-3 md:py-4 text-black text-sm md:text-base">{{ $order->items->count() }}</td>
                    <td class="px-4 xl:px-6 py-3 md:py-4 text-black font-semibold text-sm md:text-base">R{{ number_format($order->total, 2) }}</td>
                    <td class="px-4 xl:px-6 py-3 md:py-4">
                        <span class="px-3 py-1 rounded-full text-xs font-semibold {{ $order->status === 'pending' ? 'bg-[#fef3c7] text-[#92400e]' : ($order->status === 'completed' ? 'bg-[#d1fae5] text-[#065f46]' : ($order->status === 'cancelled' ? 'bg-[#fee2e2] text-[#991b1b]' : 'bg-[#dbeafe] text-[#1e40af]')) }}">
                            {{ ucfirst($order->status) }}
                        </span>
                    </td>
                    <td class="px-4 xl:px-6 py-3 md:py-4 text-black text-sm md:text-base">{{ $order->created_at->format('M d, Y') }}</td>
                    <td class="px-4 xl:px-6 py-3 md:py-4">
                        <a href="{{ route('admin.orders.show', $order->id) }}" class="text-black hover:text-black transition-colors font-medium text-sm md:text-base">
                            View
                        </a>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="7" class="px-4 xl:px-6 py-8 text-center text-black text-sm md:text-base">No orders found.</td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

<!-- Pagination -->
@if($orders->hasPages())
    <div class="mt-4 md:mt-6">
        {{ $orders->links() }}
    </div>
@endif
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Sort functionality
    document.querySelectorAll('[data-sort]').forEach(header => {
        header.addEventListener('click', function() {
            const column = this.getAttribute('data-sort');
            const currentSort = document.getElementById('sort-column').value;
            const currentDirection = document.getElementById('sort-direction').value;
            
            let newDirection = 'asc';
            if (currentSort === column && currentDirection === 'asc') {
                newDirection = 'desc';
            }
            
            document.getElementById('sort-column').value = column;
            document.getElementById('sort-direction').value = newDirection;
            document.getElementById('filter-form').submit();
        });
    });
});
</script>
@endpush






