@extends('layouts.guest-landing')

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

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

        {{-- Back Navigation --}}
        <div class="mb-6">
            <a href="{{ route('landing') }}"
                class="inline-flex items-center text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 theme-text-accent">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                </svg>
                {{ __('landing.back_to_campaigns') }}
            </a>
        </div>

        {{-- Campaign Header --}}
        <div class="mb-8">
            <div class="flex flex-col md:flex-row md:items-start md:space-x-6">
                @if ($campaign->image_path)
                    <div class="w-full md:w-40 h-40 mb-4 md:mb-0 flex-shrink-0">
                        <img src="{{ asset('storage/' . $campaign->image_path) }}" alt="{{ $campaign->title }}"
                            class="w-full h-full object-cover rounded-lg border border-gray-200 dark:border-gray-700">
                    </div>
                @endif

                <div class="flex-1">
                    <h1 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-2">
                        {{ $campaign->title }}
                    </h1>
                    <p class="text-lg text-gray-600 dark:text-gray-300 mb-4">
                        {{ $campaign->description }}
                    </p>

                    {{-- Campaign Address (if enabled) --}}
                    @if ($campaign->show_address_on_landing_page && $campaign->shippingAddress)
                        <div
                            class="inline-flex items-center p-3 bg-blue-50 dark:bg-blue-900/50 rounded-lg border border-blue-200 dark:border-blue-800">
                            <svg class="w-5 h-5 text-blue-600 dark:text-blue-400 mr-2" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                            <div>
                                <span class="text-sm font-medium text-blue-900 dark:text-blue-100">
                                    {{ __('landing.shipping_to') }}:
                                </span>
                                <span class="text-sm text-blue-700 dark:text-blue-300 ml-1">
                                    {{ $campaign->shippingAddress->nickname ?? $campaign->shippingAddress->organization_name }}
                                </span>
                            </div>
                        </div>
                    @endif

                    {{-- Campaign Stats if available --}}
                    @if (isset($stats) && $stats)
                        <div class="mt-4 grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                            @if (isset($stats['total_requested']))
                                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3 text-center">
                                    <div class="font-semibold text-gray-900 dark:text-white">{{ $stats['total_requested'] }}
                                    </div>
                                    <div class="text-gray-600 dark:text-gray-400">Total Requested</div>
                                </div>
                            @endif
                            @if (isset($stats['total_donated']))
                                <div class="bg-green-50 dark:bg-green-900/50 rounded-lg p-3 text-center">
                                    <div class="font-semibold text-green-900 dark:text-green-100">
                                        {{ $stats['total_donated'] }}</div>
                                    <div class="text-green-600 dark:text-green-400">Total Donated</div>
                                </div>
                            @endif
                            @if (isset($stats['total_remaining']))
                                <div class="bg-blue-50 dark:bg-blue-900/50 rounded-lg p-3 text-center">
                                    <div class="font-semibold text-blue-900 dark:text-blue-100">
                                        {{ $stats['total_remaining'] }}</div>
                                    <div class="text-blue-600 dark:text-blue-400">Remaining</div>
                                </div>
                            @endif
                            @if (isset($stats['completion_percentage']))
                                <div class="bg-indigo-50 dark:bg-indigo-900/50 rounded-lg p-3 text-center">
                                    <div class="font-semibold text-indigo-900 dark:text-indigo-100">
                                        {{ number_format($stats['completion_percentage'], 1) }}%</div>
                                    <div class="text-indigo-600 dark:text-indigo-400">Complete</div>
                                </div>
                            @endif
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Products Section --}}
        @if ($products->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach ($products as $product)
                    <div
                        class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 hover:shadow-xl transition-shadow duration-300">
                        {{-- Product Image --}}
                        <div class="h-48 bg-gray-50 dark:bg-gray-700 flex items-center justify-center p-4">
                            @if ($product->image_url)
                                <img src="{{ $product->image_url }}" alt="{{ $product->name }}"
                                    class="max-h-full max-w-full object-contain">
                            @else
                                <div class="text-gray-400 dark:text-gray-500">
                                    <svg class="w-16 h-16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                                    </svg>
                                </div>
                            @endif
                        </div>

                        {{-- Product Content --}}
                        <div class="p-6">
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">
                                {{ $product->name }}
                            </h3>

                            {{-- Price --}}
                            @if ($product->price)
                                <p class="text-lg font-bold text-gray-900 dark:text-white mb-3">
                                    ${{ number_format($product->price, 2) }}
                                </p>
                            @endif

                            {{-- Availability Status --}}
                            @php
                                $availability = $product->availability_info ?? [
                                    'is_available' => false,
                                    'remaining_quantity' => 0,
                                ];
                            @endphp

                            <div class="mb-4">
                                @if ($availability['is_available'])
                                    @if ($availability['remaining_quantity'] === null)
                                        <span
                                            class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-400">
                                            {{ __('landing.unlimited') }}
                                        </span>
                                    @else
                                        <span
                                            class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/50 dark:text-yellow-400">
                                            {{ __('landing.limited_quantity', ['quantity' => $availability['remaining_quantity']]) }}
                                        </span>
                                    @endif
                                @else
                                    <span
                                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-400">
                                        {{ __('landing.goal_reached') }}
                                    </span>
                                @endif
                            </div>

                            {{-- Progress Bar for Limited Items --}}
                            @if (
                                $availability['is_available'] &&
                                    isset($availability['progress_percentage']) &&
                                    $availability['progress_percentage'] > 0)
                                <div class="mb-4">
                                    <div
                                        class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400 mb-1">
                                        <span>Progress</span>
                                        <span>{{ number_format($availability['progress_percentage'], 1) }}%</span>
                                    </div>
                                    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                                        <div class="bg-blue-600 h-2 rounded-full transition-all duration-300"
                                            style="width: {{ $availability['progress_percentage'] }}%"></div>
                                    </div>
                                    @if (isset($availability['quantity_donated']) && isset($availability['quantity_limit']))
                                        <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                            {{ $availability['quantity_donated'] }} of
                                            {{ $availability['quantity_limit'] }} donated
                                        </div>
                                    @endif
                                </div>
                            @endif

                            {{-- Add to Cart Form --}}
                            @if ($availability['is_available'] && $campaign->address_id)
                                <form action="{{ route('cart.add') }}" method="POST" class="space-y-3">
                                    @csrf
                                    <input type="hidden" name="campaign_id" value="{{ $campaign->id }}">
                                    <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 }}">
                                    <input type="hidden" name="image_url" value="{{ $product->image_url }}">
                                    <input type="hidden" name="address_id" value="{{ $campaign->address_id }}">

                                    <div class="flex items-center space-x-2">
                                        <label for="quantity_{{ $product->id }}"
                                            class="text-sm font-medium text-gray-700 dark:text-gray-300">
                                            {{ __('landing.quantity') }}:
                                        </label>
                                        <input type="number" id="quantity_{{ $product->id }}" name="quantity"
                                            value="1" min="1"
                                            max="{{ $availability['remaining_quantity'] ?? 99 }}"
                                            class="flex-1 rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm">
                                    </div>

                                    <button type="submit"
                                        class="w-full flex items-center justify-center px-4 py-2 text-sm font-medium text-white theme-button-accent rounded-lg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 theme-ring-accent transition-all duration-200">
                                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M3 3h2l.4 2M7 13h10l4-8H5.4m0 0L7 13m0 0l-2.5 5M7 13v8a2 2 0 002 2h6a2 2 0 002-2v-8m-8 0V9a2 2 0 012-2h4a2 2 0 012 2v4.01" />
                                        </svg>
                                        {{ __('landing.add_to_cart') }}
                                    </button>
                                </form>
                            @elseif(!$campaign->address_id)
                                <div
                                    class="w-full flex items-center justify-center px-4 py-2 text-sm font-medium text-yellow-700 bg-yellow-100 dark:bg-yellow-900/50 dark:text-yellow-200 rounded-lg border border-yellow-300 dark:border-yellow-700">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.667-.833-2.464 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
                                    </svg>
                                    Campaign address not configured
                                </div>
                            @else
                                <button type="button" disabled
                                    class="w-full flex items-center justify-center px-4 py-2 text-sm font-medium text-gray-500 bg-gray-200 dark:bg-gray-600 dark:text-gray-400 rounded-lg cursor-not-allowed">
                                    {{ __('landing.goal_reached') }}
                                </button>
                            @endif

                        </div>
                    </div>
                @endforeach
            </div>
        @else
            {{-- No Products Available --}}
            <div class="text-center py-12">
                <div class="max-w-md mx-auto">
                    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor"
                        viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                    </svg>
                    <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">
                        {{ $message ?? __('landing.no_products_available') }}
                    </h3>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                        {{ __('landing.check_back_later') }}
                    </p>
                </div>
            </div>
        @endif
    </div>
@endsection

@push('scripts')
    <script>
        // Add to cart functionality with availability checking
        // Add to cart functionality with availability checking
        document.addEventListener('DOMContentLoaded', function() {
            const forms = document.querySelectorAll('form[action*="cart.add"]');

            forms.forEach(form => {
                form.addEventListener('submit', function(e) {
                    e.preventDefault();

                    const formData = new FormData(this);
                    const button = this.querySelector('button[type="submit"]');
                    const originalText = button.innerHTML;

                    // Show loading state
                    button.disabled = true;
                    button.innerHTML =
                        '<svg class="animate-spin -ml-1 mr-3 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>Adding...';

                    fetch(this.action, {
                            method: 'POST',
                            body: formData,
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest',
                                'X-CSRF-TOKEN': document.querySelector(
                                    'meta[name="csrf-token"]').getAttribute('content')
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                // Show success message
                                showNotification('{{ __('landing.item_added_to_cart') }}',
                                    'success');

                                // Reset form
                                this.reset();
                                this.querySelector('input[name="quantity"]').value = 1;
                            } else {
                                showNotification(data.message ||
                                    '{{ __('landing.error_generic') }}', 'error');
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            showNotification('{{ __('landing.error_generic') }}', 'error');
                        })
                        .finally(() => {
                            // Restore button state
                            button.disabled = false;
                            button.innerHTML = originalText;
                        });
                });
            });

            function showNotification(message, type) {
                // Create notification element
                const notification = document.createElement('div');
                notification.className =
                    `fixed top-4 right-4 z-50 max-w-sm w-full bg-white dark:bg-gray-800 shadow-lg rounded-lg border ${type === 'success' ? 'border-green-400 dark:border-green-600' : 'border-red-400 dark:border-red-600'} p-4 transform transition-all duration-300 translate-x-full`;

                notification.innerHTML = `
            <div class="flex items-start">
                <div class="flex-shrink-0">
                    ${type === 'success' ?
                        '<svg class="h-6 w-6 text-green-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>' :
                        '<svg class="h-6 w-6 text-red-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" /></svg>'
                    }
                </div>
                <div class="ml-3 flex-1">
                    <p class="text-sm text-gray-900 dark:text-gray-100">${message}</p>
                </div>
                <button type="button" class="ml-4 flex-shrink-0 text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" onclick="this.parentElement.parentElement.remove()">
                    <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
                    </svg>
                </button>
            </div>
        `;

                document.body.appendChild(notification);

                // Animate in
                setTimeout(() => {
                    notification.classList.remove('translate-x-full');
                }, 100);

                // Auto remove after 5 seconds
                setTimeout(() => {
                    notification.classList.add('translate-x-full');
                    setTimeout(() => {
                        notification.remove();
                    }, 300);
                }, 5000);
            }
        });
    </script>
@endpush