@extends('layouts.guest-landing')

@section('title', __('campaign_products.title_prefix') . ' ' . $campaign->title)

@section('content')
    <div class="bg-white dark:bg-gray-900 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 dark:border-gray-700">
                {{-- ... Campaign Title, Description, Back link ... --}}
                <div class="mb-4"><a href="{{ route('landing') }}#featured-campaigns"
                        class="text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 hover:underline">&larr;
                        {{ __('campaign_products.back_to_campaigns') }}</a>
                </div>
                <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">{{ $campaign->title }}</h1>
                @if ($campaign->description)
                    <p class="text-base text-gray-600 dark:text-gray-300 max-w-3xl">{{ $campaign->description }}</p>
                @endif

                {{-- Display associated address clearly --}}
                @if ($campaign->shippingAddress && $campaign->show_address_on_landing_page)
                    <div
                        class="mt-3 text-sm text-gray-600 dark:text-gray-300 p-3 bg-gray-50 dark:bg-gray-800 rounded-md border border-gray-200 dark:border-gray-700 inline-block">
                        <strong
                            class="text-gray-700 dark:text-gray-200">{{ __('campaign_products.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>
                @elseif (!$campaign->shippingAddress)
                    <p class="mt-3 text-sm text-red-600 dark:text-red-400 font-semibold">
                        {{ __('campaign_products.no_shipping_address_note') }}</p>
                @endif
            </div>

            <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6">{{ __('campaign_products.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 dark:bg-gray-800 rounded-lg shadow border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col group">
                            {{-- Image --}}
                            <div
                                class="h-40 bg-gray-50 dark:bg-gray-700 flex items-center justify-center flex-shrink-0 border-b border-gray-200 dark:border-gray-600 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 dark:text-gray-500"
                                        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 dark:text-gray-200 mb-1 flex-grow line-clamp-2"
                                        title="{{ $product->name }}">
                                        {{ $product->name }}
                                    </h3>
                                    <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                        <p>{{ __('campaign_products.asin') }}
                                            {{ $product->asin ?? __('campaign_products.not_available') }}</p>
                                        @if (isset($product->price) && is_numeric($product->price))
                                            <p class="font-semibold text-gray-700 dark:text-gray-300">
                                                {{ __('campaign_products.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 dark:focus:ring-offset-gray-800 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>
                                                {{ __('campaign_products.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 dark:text-gray-500 bg-gray-200 dark:bg-gray-600 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>
                                            {{ __('campaign_products.add_to_cart') }}
                                        </button>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <p class="text-center text-gray-500 dark:text-gray-400 py-10">
                    {{ __('campaign_products.no_products_message') }}</p>
            @endif

        </div>
    </div>
@endsection