@extends('layouts.app')

@section('title', '{{ $category->name }} | Fashion Mitra')

@section('content')
<div class="space-y-6">
    <div class="rounded-3xl bg-white p-8 shadow-sm">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
            <div>
                <h1 class="text-3xl font-semibold">{{ $category->name }}</h1>
                <p class="mt-2 text-slate-600">{{ $category->description }}</p>
            </div>
            <div class="rounded-full bg-slate-100 px-4 py-2 text-sm text-slate-700">{{ $products->total() }} products</div>
        </div>
    </div>

    <div class="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
        @foreach($products as $product)
        <article class="rounded-3xl bg-white p-5 shadow-sm hover:shadow-md transition">
            <div class="relative overflow-hidden rounded-3xl">
                <img src="{{ $product->image }}" alt="{{ $product->name }}" class="h-56 w-full object-cover">
                @if($product->discount_percent)
                    <span class="absolute left-4 top-4 rounded-full bg-slate-900 px-3 py-1 text-xs text-white">-{{ $product->discount_percent }}%</span>
                @endif
            </div>
            <div class="mt-4 space-y-3">
                <h3 class="text-lg font-semibold"><a href="{{ route('product.show', $product->slug) }}">{{ $product->name }}</a></h3>
                <p class="text-slate-500 text-sm">{{ Str::limit($product->description, 90) }}</p>
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-slate-900 font-bold">₹{{ number_format($product->display_price, 2) }}</p>
                        @if($product->sale_price)
                            <p class="text-sm text-slate-500 line-through">₹{{ number_format($product->price, 2) }}</p>
                        @endif
                    </div>
                    <span class="rounded-full bg-slate-100 px-3 py-1 text-sm">{{ number_format($product->rating, 1) }} ★</span>
                </div>
                <div class="flex gap-2">
                    <form method="POST" action="{{ route('cart.add', $product->id) }}" class="flex-1">
                        @csrf
                        <button type="submit" class="w-full rounded-full bg-slate-900 py-2 text-white text-sm font-semibold hover:bg-slate-800">Add to Cart</button>
                    </form>
                    <form method="POST" action="{{ route('wishlist.add', $product->id) }}" class="flex-1">
                        @csrf
                        <button type="submit" class="w-full rounded-full border border-slate-300 py-2 text-slate-700 text-sm font-semibold hover:bg-slate-50">Wishlist</button>
                    </form>
                </div>
            </div>
        </article>
        @endforeach
    </div>

    <div class="mt-8">
        {{ $products->links() }}
    </div>
</div>
@endsection
