@extends('admin.layouts.app')

@section('title', 'Categories')
@section('header_title', 'Product Categories')

@section('content')
<div class="space-y-6">

    <!-- Flash Notification Banner -->
    @if(session('success'))
        <div class="p-4 bg-emerald-50 border border-emerald-200 rounded-2xl text-emerald-800 text-xs font-bold flex items-center justify-between shadow-xs">
            <div class="flex items-center gap-2">
                <i class="fa-solid fa-circle-check text-emerald-600 text-sm"></i>
                <span>{{ session('success') }}</span>
            </div>
            <button onclick="this.parentElement.remove()" class="text-emerald-500 hover:text-emerald-800 font-bold text-sm">✕</button>
        </div>
    @endif

    @if(session('error'))
        <div class="p-4 bg-rose-50 border border-rose-200 rounded-2xl text-rose-800 text-xs font-bold flex items-center justify-between shadow-xs">
            <div class="flex items-center gap-2">
                <i class="fa-solid fa-triangle-exclamation text-rose-600 text-sm"></i>
                <span>{{ session('error') }}</span>
            </div>
            <button onclick="this.parentElement.remove()" class="text-rose-500 hover:text-rose-800 font-bold text-sm">✕</button>
        </div>
    @endif

    <!-- Header & Action Button -->
    <div class="bg-white rounded-3xl p-6 border border-amber-900/10 shadow-xs flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h2 class="font-serif text-xl font-bold text-slate-900">Jewellery Categories</h2>
            <p class="text-xs text-slate-500">Organize your micro gold, bridal, and impon payal collections.</p>
        </div>
        <a href="{{ route('admin.categories.create') }}" class="inline-flex items-center justify-center gap-2 px-5 py-3 rounded-2xl gold-gradient-bg text-obsidian-900 font-bold text-xs shadow-md hover:scale-105 transition-transform">
            <i class="fa-solid fa-plus text-xs"></i>
            <span>NEW CATEGORY</span>
        </a>
    </div>

    <!-- Category Cards Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach($categories as $category)
            <div class="bg-white rounded-3xl p-6 border border-amber-900/10 shadow-xs hover:shadow-md transition-all flex flex-col justify-between">
                <div>
                    <div class="flex items-center justify-between mb-4">
                        <div class="w-12 h-12 rounded-2xl bg-amber-50 border border-amber-200 text-gold-700 flex items-center justify-center font-bold text-lg">
                            <i class="fa-solid fa-layer-group"></i>
                        </div>
                        <span class="px-2.5 py-1 rounded-full text-[10px] font-bold {{ strtolower($category->status) === 'active' ? 'bg-emerald-100 text-emerald-800' : 'bg-slate-100 text-slate-600' }}">
                            {{ strtoupper($category->status) }}
                        </span>
                    </div>

                    <h3 class="font-serif text-lg font-bold text-slate-900 mb-1">{{ $category->name }}</h3>
                    <p class="text-xs font-mono text-gold-600 mb-2">slug: {{ $category->slug }}</p>
                    <p class="text-xs text-slate-500 mb-4 line-clamp-2">{{ $category->description ?? 'No description provided.' }}</p>
                </div>
                
                <div class="pt-4 border-t border-slate-100 flex items-center justify-between text-xs">
                    <span class="font-semibold text-slate-700">{{ $category->products_count }} Products</span>
                    <div class="flex items-center gap-3">
                        <a href="{{ route('admin.products.index', ['category_id' => $category->id]) }}" class="text-gold-600 font-bold hover:underline">
                            View Items →
                        </a>
                        <a href="{{ route('admin.categories.edit', $category) }}" class="text-slate-400 hover:text-slate-700 p-1" title="Edit Category">
                            <i class="fa-solid fa-pen-to-square"></i>
                        </a>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>
@endsection