@extends('portal.layouts.app')

@section('title', 'Product Catalogue')
@section('subtitle', 'Schedule 1 - Specified / Agreed Takaful Products')

@section('content')

    <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
        @foreach ($products as $product)
            <x-card>
                <div class="flex items-start justify-between gap-3">
                    <div class="min-w-0">
                        <span class="font-mono text-xs text-slate-400">{{ $product->code }}</span>
                        <h3 class="mt-1 text-sm font-semibold">
                            <a href="{{ route('products.show', $product) }}" class="hover:underline">{{ $product->name }}</a>
                        </h3>
                    </div>
                    <x-badge :variant="$product->is_active ? 'bg-emerald-100 text-emerald-800' : 'bg-slate-200 text-slate-600'">
                        {{ $product->is_active ? 'Live' : 'Withdrawn' }}
                    </x-badge>
                </div>

                <p class="mt-2 line-clamp-2 text-xs text-slate-500">{{ $product->tagline }}</p>

                <dl class="mt-4 grid grid-cols-3 gap-2 border-t border-slate-100 pt-3 text-center">
                    <div>
                        <dt class="text-[11px] uppercase tracking-wider text-slate-400">Categories</dt>
                        <dd class="text-sm font-semibold tabular-nums">{{ $product->plans_count }}</dd>
                    </div>
                    <div>
                        <dt class="text-[11px] uppercase tracking-wider text-slate-400">Applications</dt>
                        <dd class="text-sm font-semibold tabular-nums">{{ number_format($product->subscriptions_count) }}</dd>
                    </div>
                    <div>
                        <dt class="text-[11px] uppercase tracking-wider text-slate-400">Terms</dt>
                        <dd class="text-xs font-medium">{{ $product->coverage_term_label }}</dd>
                    </div>
                </dl>

                <div class="mt-4 flex items-center gap-2">
                    <a href="{{ route('products.show', $product) }}"
                       class="btn-secondary btn-sm flex-1">
                        View benefits
                    </a>
                    @if (auth()->user()->isAdmin())
                        <form method="POST" action="{{ route('products.toggle', $product) }}">
                            @csrf
                            <button class="btn btn-sm {{ $product->is_active ? 'text-rose-600 hover:bg-rose-50' : 'text-leaf-700 hover:bg-leaf-50' }}">
                                {{ $product->is_active ? 'Withdraw' : 'Publish' }}
                            </button>
                        </form>
                    @endif
                </div>
            </x-card>
        @endforeach
    </div>

@endsection