@extends('layouts.app')

@section('title', 'Manage Products for ' . $campaign->title)

@section('content')
    {{-- Back Navigation & Title --}}
    <div class="mb-6">
        <a href="{{ route('admin.campaigns.show', $campaign) }}"
            class="text-sm text-indigo-600 hover:text-indigo-800 hover:underline">
            &larr; Back to Campaign: {{ $campaign->title }}
        </a>
        <h1 class="text-2xl md:text-3xl font-semibold text-gray-800 mt-2">
            Manage Associated Products
        </h1>
        <p class="text-sm text-gray-600">Select the products to associate with this campaign.</p>
    </div>

    {{-- Form Container --}}
    <div class="bg-white shadow-md rounded-lg p-6 md:p-8 border border-gray-200">

        <form method="POST" action="{{ route('admin.campaigns.products.update', $campaign) }}">
            @csrf
            @method('PUT') {{-- Use PUT for updating the relationship --}}

            {{-- List of Available Products with Checkboxes --}}
            <fieldset class="space-y-5">
                <legend class="sr-only">Products</legend>

                {{-- Consider adding search/filter for products if list is long --}}

                @if ($allProducts->count() > 0)
                    {{-- Responsive grid for product selection items --}}
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                        @foreach ($allProducts as $product)
                            {{-- Container for each product item --}}
                            <div
                                class="relative flex items-start rounded-md border border-gray-200 p-3 shadow-sm hover:border-gray-400 transition-colors duration-150">
                                {{-- Checkbox --}}
                                <div class="flex h-6 items-center mr-3"> {{-- Added right margin --}}
                                    <input id="product_{{ $product->id }}" name="product_ids[]" {{-- Send as array --}}
                                        value="{{ $product->id }}" type="checkbox" {{-- Check if this product ID is in the associated list passed from controller --}}
                                        @checked(in_array($product->id, $associatedProductIds ?? []))
                                        class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                </div>
                                {{-- Image Thumbnail --}}
                                <div class="flex-shrink-0 mr-3"> {{-- Added right margin --}}
                                    @if ($product->image_url)
                                        {{-- Assuming $product->image_url is a direct URL. Use asset() if needed. --}}
                                        <img class="h-10 w-10 rounded border border-gray-200 object-cover"
                                            src="{{ $product->image_url }}" alt="">
                                    @else
                                        {{-- Placeholder --}}
                                        <div
                                            class="h-10 w-10 rounded border border-gray-200 bg-gray-100 flex items-center justify-center">
                                            <svg class="h-6 w-6 text-gray-300" 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="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                                            </svg>
                                        </div>
                                    @endif
                                </div>
                                {{-- Text Content --}}
                                <div class="text-sm leading-6 flex-grow min-w-0"> {{-- Allow text to wrap/truncate --}}
                                    <label for="product_{{ $product->id }}"
                                        class="font-medium text-gray-900 hover:text-indigo-600 cursor-pointer">
                                        {{ $product->name }}
                                    </label>
                                    <p class="text-gray-500 text-xs truncate"> {{-- Truncate long ASIN/Type --}}
                                        ASIN: {{ $product->asin ?? 'N/A' }} | Type: {{ $product->type ?? 'N/A' }}
                                    </p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <p class="text-sm text-gray-500 text-center py-4">No products available in the system to associate.</p>
                    <div class="text-center">
                        {{-- Ensure products.create route exists if using this link --}}
                        <a href="{{ route('products.create') }}" class="text-sm text-indigo-600 hover:underline">Add a
                            product first?</a>
                    </div>
                @endif

                {{-- Validation Errors --}}
                @error('product_ids')
                    <p class="mt-2 text-xs text-red-600">{{ $message }}</p> {{-- Adjusted margin --}}
                @enderror
                @error('product_ids.*')
                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror

            </fieldset>

            {{-- Submit Button --}}
            <div class="flex justify-end pt-8 mt-6 border-t border-gray-200">
                <button type="submit"
                    class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out">
                    Update Associated Products
                </button>
            </div>

        </form>
    </div> {{-- End Form Container --}}

@endsection