@extends('layouts.main')
@push('title')
    <title>Fit Sport Hub - My Orders</title>
@endpush
@section('main-section')

    <!-- Main Content -->
    <main class="container mx-auto px-4 py-8 md:py-12">
        <div class="flex flex-col lg:flex-row gap-8">

            <!-- Left Sidebar -->
            <aside class="w-full lg:w-1/4">
                <div class="bg-white p-4 rounded-2xl shadow-xl border border-slate-200">
                    <nav class="space-y-2">
                        <a href="{{ route('users.edits') }}" class="sidebar-link">
                            <i class="fas fa-user mr-3"></i>
                            <span>My Profile</span>
                        </a>
                        <a href="{{ route('order.index') }}" class="sidebar-link active">
                            <i class="fas fa-list mr-3"></i>
                            <span>My Orders</span>
                        </a>
                        <a href="/wishlist" class="sidebar-link">
                            <i class="fas fa-heart mr-3"></i>
                            <span>My Wish List</span>
                            @if($wishlistCount > 0)
                                <span class="ml-auto bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">
                                    {{ $wishlistCount }}
                                </span>
                            @endif
                        </a>
                        <a href="#" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" class="sidebar-link">
                            <i class="fas fa-sign-out-alt mr-3"></i>
                            <span>Log Out</span>
                        </a>
                    </nav>

                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="hidden">
                        @csrf
                    </form>
                </div>
            </aside>

            <!-- Right Content -->
            <div class="w-full lg:w-3/4">
                <div class="bg-white p-6 md:p-8 rounded-2xl shadow-xl border border-slate-200">
                    <h1 class="text-2xl font-bold mb-6">My Orders</h1>
                    
                    <div class="overflow-x-auto">
                        <table class="w-full order-table">
                            <thead>
                                <tr class="bg-gray-100">
                                    <th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Sr No.</th>
                                    <th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Purchase Date</th>
                                    <th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Order ID</th>
                                    <th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Order Image</th>
                                    
                                    <th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Total Amount</th>
                                    <th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Action</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200">
                                @foreach ($orders as $order)
                                <tr class="hover:bg-gray-50">
                                    <td class="px-4 py-3 text-sm text-gray-700">{{ $loop->iteration }}</td>
                                    <td class="px-4 py-3 text-sm text-gray-700">{{ presentDate($order->created_at) }}</td>
                                    <td class="px-4 py-3 text-sm text-gray-700">{{ $order->id }}</td>
                                    
                                    <td class="px-4 py-3">
                                        @php
                                            $firstProduct = $order->products->first();
                                            if ($firstProduct) {
                                                $pictures = json_decode($firstProduct->pictures, true);
                                                $firstImage = is_array($pictures) && count($pictures) > 0 ? $pictures[0] : asset('img/default-product.jpg');
                                            } else {
                                                $firstImage = asset('img/default-product.jpg');
                                            }
                                        @endphp
                                        <img src="{{ $firstImage }}" 
                                            alt="{{ $firstProduct->product_title ?? 'Product' }}" 
                                            class="w-20 h-20 object-cover rounded mx-auto">
                                    </td>
                                    
                                    <td class="px-4 py-3 text-sm text-gray-700">
                                        <i class="fas fa-rupee-sign"></i> {{ $order->billing_total }}
                                    </td>
                                    
                                    <td class="px-4 py-3 text-sm">
                                        <a href="{{ route('orders.show', $order->id) }}" 
                                        class="inline-flex items-center px-3 py-2 bg-blue-600 text-white text-sm font-medium rounded hover:bg-blue-700 transition">
                                            <i class="fas fa-eye mr-2"></i> View
                                        </a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    @if($orders->isEmpty())
                    <div class="text-center py-12">
                        <div class="inline-block p-6 bg-gray-100 rounded-full">
                            <i class="fas fa-box-open text-4xl text-gray-400"></i>
                        </div>
                        <h3 class="mt-4 text-lg font-medium text-gray-900">No orders found</h3>
                        <p class="mt-1 text-sm text-gray-500">You haven't placed any orders yet.</p>
                        <div class="mt-6">
                            <a href="{{ route('shop.index') }}" 
                            class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded hover:bg-blue-700 transition">
                                Start Shopping
                            </a>
                        </div>
                    </div>
                    @endif
                    
                    <!-- @if($orders->isEmpty())
                        <div class="text-center py-8">
                            <i class="fas fa-box-open text-4xl text-gray-300 mb-4"></i>
                            <p class="text-gray-500">You haven't placed any orders yet.</p>
                            <a href="{{ route('shop.index') }}" class="mt-4 inline-block bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 transition">
                                Start Shopping
                            </a>
                        </div>
                    @endif -->
                </div>
            </div>
        </div>
    </main>

@endsection
@section('extrascripts')
    <script>
        // Your existing JavaScript functions
        function getstates(val) {
            $.ajax({
                type: "POST",
                url: "/get-state",
                data: {
                    country_id: val,
                    _token: "{{ csrf_token() }}"
                },
                success: function(data) {
                    $("#state").html(data);
                }
            });
        }
    
        function getcity(val) {
            $.ajax({
                type: "POST",
                url: "/get-city",
                data: {
                    state_id: val,
                    _token: "{{ csrf_token() }}"
                },
                success: function(data) {
                    $("#city").html(data);
                }
            });
        }
    </script>
@endsection