@extends('layouts.app')

@section('content')
<div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
    <h1 class="text-3xl font-bold mb-8 text-gray-800">Products</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
        {{-- Free invoice plugin (always first) --}}
        @php $freeAvail = $productAvailability['free-invoice'] ?? 'open'; @endphp
        @if(! in_array($freeAvail, ['closed', 'auth']))
        <div class="bg-gray-100 rounded-lg shadow hover:shadow-lg transition p-6 flex flex-col justify-between {{ $freeAvail === 'disabled' ? 'opacity-50' : '' }}">
            <div>
                <h2 class="text-xl font-semibold text-gray-900 mb-2">Free Agency Invoice Plugin</h2>
                <div class="text-gray-700 mb-4 text-base [&_ul]:list-disc [&_ul]:ml-4 [&_ol]:list-decimal [&_ol]:ml-4">
                    <ul style="padding-left:20px;margin-left:0px;list-style: circle;">
                        <li> Full invoice building and auto delivery.</li>
                        <li> Partial and full gateway payments.</li>
                        <li> Dashboard and invoice management tools.</li>
                        <li> Custom invoice templating.</li>
                    </ul>
                </div>
            </div>
            <div class="mt-auto flex flex-col gap-2">
                <div class="flex justify-between items-center mb-2">
                    <span class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded">
                        Free
                    </span>
                </div>
                @if($freeAvail === 'open')
                <a href="/download" id="downloadFreePlugin" class="w-full inline-block text-center bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded transition" download>
                    Download Free Plugin
                </a>
                @else
                <span class="w-full inline-block text-center bg-gray-400 text-white font-semibold py-2 px-4 rounded cursor-not-allowed">Not Available</span>
                @endif
            </div>
        </div>
        @endif
        @forelse($products as $product)
            @if($product)
            @php $avail = $productAvailability[$product->sku] ?? 'open'; @endphp
            @if(in_array($avail, ['closed', 'auth'])) @continue @endif
            <div class="bg-gray-100 rounded-lg shadow hover:shadow-lg transition p-6 flex flex-col justify-between {{ $avail === 'disabled' ? 'opacity-50' : '' }}">
                <div>
                    <h2 class="text-xl font-semibold text-gray-900 mb-2">{{ $product->name ?? 'Unnamed Product' }}</h2>
                    <div class="text-gray-700 mb-4 text-base [&_ul]:list-disc [&_ul]:ml-4 [&_ol]:list-decimal [&_ol]:ml-4">
                        {!! $product->description ?? '' !!}
                    </div>
                </div>
                <div class="mt-auto flex flex-col gap-2">
                    <div class="flex justify-between items-center mb-2">
                        <span class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded">
                            ${{ number_format($product->price ?? 0, 2) }} / monthly
                        </span>
                        <span class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded">
                            ${{ number_format(($product->price ?? 0) * 10, 2) }} / yearly
                        </span>
                    </div>
                    @if($avail === 'open')
                    <form method="POST" action="{{ route('cart.add') }}" class="js-add-to-cart">
                        @csrf
                        <input type="hidden" name="product_id" value="{{ $product->id ?? '' }}">
                        <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded transition">Add to Cart</button>
                    </form>
                    @else
                    <span class="w-full inline-block text-center bg-gray-400 text-white font-semibold py-2 px-4 rounded cursor-not-allowed">Not Available</span>
                    @endif
                </div>
            </div>
            @endif
        @empty
            <p class="col-span-full text-center text-gray-500">No products available.</p>
        @endforelse
    </div>
</div>
@endsection