@extends('layouts.guest-landing')

@section('title', 'Wishlist for Campaign: ' . $campaign->title)

@section('content')
    <div class="bg-white py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

            {{-- Campaign Info Header --}}
            <div class="mb-10 pb-6 border-b border-gray-200">
                {{-- ... Campaign Title, Description, Back link ... --}}
                <div class="mb-4"><a href="{{ route('landing') }}#featured-campaigns"
                        class="text-sm text-indigo-600 hover:text-indigo-800 hover:underline">&larr; Back to Campaigns</a>
                </div>
                <h1 class="text-3xl font-bold text-gray-900 mb-2">{{ $campaign->title }}</h1>
                @if ($campaign->description)
                    <p class="text-base text-gray-600 max-w-3xl">{{ $campaign->description }}</p>
                @endif

                {{-- Display associated address clearly --}}
                @if ($campaign->shippingAddress)
                    <div class="mt-3 text-sm text-gray-600 p-3 bg-gray-50 rounded-md border border-gray-200 inline-block">
                        <strong class="text-gray-700">Shipping Address:</strong><br>
                        <address class="not-italic inline-block"> {{-- Use inline-block for address --}}
                            {{ $campaign->shippingAddress->address_line_1 }},
                            @if ($campaign->shippingAddress->address_line_2)
                                {{ $campaign->shippingAddress->address_line_2 }},
                            @endif
                            {{ $campaign->shippingAddress->city }}, {{ $campaign->shippingAddress->state }}
                            {{ $campaign->shippingAddress->zip_code }}
                        </address>
                    </div>
                @else
                    <p class="mt-3 text-sm text-red-600 font-semibold">Note: No shipping address is set for this campaign.
                        Products cannot be added to cart.</p>
                @endif
            </div>

            <h2 class="text-2xl font-semibold text-gray-800 mb-6">Wishlist</h2>

            {{-- Product Grid --}}
            @if ($campaign->products->count() > 0)
                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
                    @foreach ($campaign->products as $product)
                        {{-- Product Card --}}
                        <div class="bg-white rounded-lg shadow border border-gray-200 overflow-hidden flex flex-col group">
                            {{-- Image --}}
                            <div class="h-40 bg-gray-50 flex items-center justify-center flex-shrink-0 border-b p-2">
                                @if ($product->image_url)
                                    <img class="max-h-full max-w-full object-contain" src="{{ $product->image_url }}"
                                        alt="{{ $product->name }}">
                                @else
                                    <svg class="h-12 w-12 text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none"
                                        viewBox="0 0 24 24" stroke-width="1">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                                    </svg>
                                @endif
                            </div>
                            {{-- Content --}}
                            <div class="p-4 flex-grow flex flex-col justify-between">
                                <div> {{-- Top part of content --}}
                                    <h3 class="text-sm font-medium text-gray-800 mb-1 flex-grow line-clamp-2"
                                        title="{{ $product->name }}">
                                        {{ $product->name }}
                                    </h3>
                                    <div class="mt-1 text-xs text-gray-500">
                                        <p>ASIN: {{ $product->asin ?? 'N/A' }}</p>
                                        @if (isset($product->price) && is_numeric($product->price))
                                            <p class="font-semibold text-gray-700">Price:
                                                ${{ number_format($product->price, 2) }}</p>
                                        @endif
                                    </div>
                                </div>
                                {{-- Add to Cart Form --}}
                                <div class="mt-3">
                                    {{-- Disable button if campaign has no address --}}
                                    @if ($campaign->shippingAddress)
                                        <form action="{{ route('cart.add') }}" method="POST">
                                            @csrf
                                            <input type="hidden" name="product_id" value="{{ $product->id }}">
                                            <input type="hidden" name="name" value="{{ $product->name }}">
                                            <input type="hidden" name="price" value="{{ $product->price ?? 0 }}">
                                            <input type="hidden" name="quantity" value="1">
                                            <input type="hidden" name="image_url" value="{{ $product->image_url ?? '' }}">
                                            {{-- Add Campaign and Address IDs --}}
                                            <input type="hidden" name="campaign_id" value="{{ $campaign->id }}">
                                            <input type="hidden" name="address_id"
                                                value="{{ $campaign->shippingAddress->id }}">

                                            <button type="submit"
                                                class="w-full inline-flex items-center justify-center px-3 py-1.5 border border-transparent shadow-sm text-xs font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition duration-150 ease-in-out">
                                                <svg class="h-4 w-4 mr-1.5" xmlns="http://www.w3.org/2000/svg"
                                                    fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                                    stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
                                                </svg>
                                                Add to Cart
                                            </button>
                                        </form>
                                    @else
                                        <button type="button" disabled
                                            class="w-full inline-flex items-center justify-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-md text-gray-400 bg-gray-200 cursor-not-allowed">
                                            <svg class="h-4 w-4 mr-1.5" xmlns="http://www.w3.org/2000/svg" fill="none"
                                                viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
                                            </svg>
                                            Add to Cart
                                        </button>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <p class="text-center text-gray-500 py-10">No specific products listed for this campaign's wishlist yet.</p>
            @endif

        </div>
    </div>
@endsection