@extends('layouts.main')
@push('title')
    <title>Fit Sport Hub - Wish List</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 ">
                            <i class="fas fa-list mr-3"></i>
                            <span>My Orders</span>
                        </a>
                        <a href="/wishlist" class="sidebar-link active">
                            <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="bg-white p-6 rounded-2xl shadow-xl border border-slate-200">
                    <div class="flex items-center gap-3 mb-6">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-500" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
                        </svg>
                        <h3 class="text-2xl font-bold">My Wish List</h3>
                    </div>
                    <hr class="mb-6">

                    @if($wishlistItems->isEmpty())
                        <div class="text-center py-8">
                            <div class="inline-block p-4 bg-red-50 rounded-full mb-4">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-red-400" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
                                </svg>
                            </div>
                            <h4 class="text-lg font-medium text-gray-900 mb-2">Your wishlist is empty</h4>
                            <p class="text-gray-500 mb-6">Start adding items you love!</p>
                            <a href="{{ route('shop.index') }}" class="inline-flex items-center px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
                                </svg>
                                Browse Products
                            </a>
                        </div>
                    @else
                        <div class="space-y-6">
                            <h4 class="text-lg font-medium text-gray-900">Items in Your Wishlist</h4>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                                @foreach($wishlistItems as $item)
                                <div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition">
                                    <!-- Image -->
                                    <div class="relative">
                                        @if($item->variant && $item->variant->picture_url)
                                            <img src="{{ $item->variant->picture_url }}" 
                                                alt="{{ $item->variant->title }}" 
                                                class="w-full h-48 object-cover">
                                        @elseif($item->product && $item->product->images)
                                            <a href="{{ url('product-views/' . $item->product->product_url) }}">
                                                <img src="{{ $item->product->images }}" 
                                                    alt="{{ $item->product->product_title }}" 
                                                    class="w-full h-48 object-cover">
                                            </a>
                                        @else
                                            <div class="w-full h-48 bg-gray-100 flex items-center justify-center">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                                </svg>
                                            </div>
                                        @endif
                                        
                                        <!-- Remove Button -->
                                        <form action="{{ route('wishlist.remove', $item->id) }}" method="POST" class="absolute top-2 right-2">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="p-2 bg-white rounded-full shadow hover:bg-red-50 transition" title="Remove">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
                                                    <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                                                </svg>
                                            </button>
                                        </form>
                                    </div>
                                    
                                    <!-- Content -->
                                    <div class="p-4">
                                        <!-- Title -->
                                        <h5 class="font-medium text-gray-900 mb-1">
                                            @if($item->variant)
                                                {{ $item->variant->title }}
                                            @elseif($item->product)
                                                <a href="{{ url('product-views/' . $item->product->product_url) }}" class="hover:text-blue-600 transition">
                                                    {{ $item->product->product_title }}
                                                </a>
                                            @endif
                                        </h5>
                                        
                                        <!-- Description -->
                                        <p class="text-sm text-gray-500 mb-3">
                                            @if($item->variant)
                                                {{ $item->variant->additional_title ?? 'No additional description' }}
                                            @elseif($item->product)
                                                {{ substr(strip_tags($item->product->description), 0, 50) . '...' }}
                                            @endif
                                        </p>
                                        
                                        <!-- Price and Add to Cart -->
                                        <div class="flex items-center justify-between">
                                            <span class="font-medium text-gray-900">
                                                <i class="fas fa-rupee-sign text-sm"></i>
                                                @if($item->variant)
                                                    {{ $item->variant->price }}
                                                @elseif($item->product)
                                                    {{ $item->product->price }}
                                                @endif
                                            </span>
                                            
                                            <form action="{{ route('cart.store', ['product' => $item->product_id, 'variant' => $item->variant_id ?? null]) }}" method="POST">
                                                @csrf
                                                <input type="hidden" name="product_qty" value="1">
                                                <button type="submit" class="flex items-center px-3 py-1.5 bg-blue-50 text-blue-600 text-sm font-medium rounded-full hover:bg-blue-100 transition">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                                                    </svg>
                                                    Add to Cart
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>  
                </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