@extends('admin.layout')
@section('heading','Product categories')
@section('content')
<div class="grid gap-8 xl:grid-cols-[1fr_360px]">
  <section class="overflow-x-auto rounded-2xl bg-white p-6 shadow-sm">
    <div class="mb-5 flex items-center justify-between"><div><h2 class="display text-lg font-bold text-[#271044]">Your categories</h2><p class="text-sm text-slate-500">Manage how customers browse the shop.</p></div><span class="rounded-full bg-violet-100 px-3 py-1 text-xs font-bold text-violet-700">{{$categories->total()}} total</span></div>
    <table class="w-full text-left text-sm"><thead class="border-b text-xs uppercase tracking-wide text-slate-400"><tr><th class="pb-3">Category</th><th class="pb-3">Products</th><th class="pb-3">Order</th><th class="pb-3">Status</th><th class="pb-3"></th></tr></thead><tbody>@forelse($categories as $category)<tr class="border-b border-slate-100"><td class="py-4"><div class="flex items-center gap-3">@if($category->image)<img src="{{$category->image}}" class="h-9 w-9 rounded-lg object-cover" alt="">@else<div class="grid h-9 w-9 place-items-center rounded-lg bg-violet-100 text-violet-700">▣</div>@endif<div><p class="font-bold">{{$category->name}}</p><p class="text-xs text-slate-400">/{{$category->slug}}</p></div></div></td><td>{{$category->products()->count()}}</td><td>{{$category->sort_order}}</td><td><span class="rounded-full px-2 py-1 text-xs font-bold {{$category->is_active?'bg-emerald-100 text-emerald-700':'bg-slate-100 text-slate-500'}}">{{$category->is_active?'Active':'Hidden'}}</span></td><td><form method="POST" action="{{route('admin.categories.delete',$category)}}">@csrf @method('DELETE')<button class="text-xs font-bold text-red-600">DELETE</button></form></td></tr>@empty<tr><td class="py-8 text-center text-slate-500" colspan="5">No categories yet. Create your first one.</td></tr>@endforelse</tbody></table><div class="mt-5">{{$categories->links()}}</div>
  </section>
  <aside class="rounded-2xl bg-white p-6 shadow-sm"><h2 class="display text-lg font-bold text-[#271044]">Add category</h2><p class="mt-1 text-sm text-slate-500">It will immediately be available when adding products.</p><form method="POST" action="{{route('admin.categories.store')}}" class="mt-5 grid gap-4">@csrf<label class="text-sm font-semibold">Name<input name="name" required placeholder="e.g. Wine" class="mt-2 w-full rounded-lg border border-slate-200 p-3 font-normal"></label><label class="text-sm font-semibold">Image URL <span class="font-normal text-slate-400">(optional)</span><input name="image" type="url" placeholder="https://…" class="mt-2 w-full rounded-lg border border-slate-200 p-3 font-normal"></label><label class="text-sm font-semibold">Description<textarea name="description" rows="3" class="mt-2 w-full rounded-lg border border-slate-200 p-3 font-normal" placeholder="Short category description"></textarea></label><label class="text-sm font-semibold">Display order<input name="sort_order" type="number" min="0" value="0" class="mt-2 w-full rounded-lg border border-slate-200 p-3 font-normal"></label><label class="text-sm"><input name="is_active" type="checkbox" value="1" checked> Show this category in the shop</label><button class="rounded-lg bg-red-600 py-3 text-xs font-bold text-white shadow-lg shadow-red-100">CREATE CATEGORY</button></form></aside>
</div>
@endsection