@extends('layouts.admin')

@section('title', 'Add Category')

@section('content')

<div class="max-w-xl space-y-6">
    <div class="flex items-center gap-2 text-xs text-slate-400 mb-1">
        <a href="{{ route('admin.dashboard') }}" class="hover:text-brand-light">Dashboard</a>
        <span>/</span>
        <a href="{{ route('admin.categories.index') }}" class="hover:text-brand-light">Categories</a>
        <span>/</span>
        <span class="text-brand-light font-bold">Add Category</span>
    </div>

    @if($errors->any())
        <div class="bg-rose-950/80 border border-rose-500/30 text-rose-300 text-xs rounded-2xl p-4 space-y-1 shadow-lg">
            @foreach($errors->all() as $error)<div>• {{ $error }}</div>@endforeach
        </div>
    @endif

    <form action="{{ route('admin.categories.store') }}" method="POST" enctype="multipart/form-data" class="bg-ink-card rounded-3xl border border-white/10 p-6 sm:p-8 space-y-4 text-xs shadow-xl">
        @csrf
        <div>
            <label class="font-bold text-slate-300 block mb-1.5">Category Name *</label>
            <input type="text" name="name" value="{{ old('name') }}" required placeholder="e.g. Retro High-Tops"
                   class="w-full bg-ink border border-white/15 rounded-xl px-3.5 py-2.5 text-white placeholder-slate-500 focus:ring-2 focus:ring-brand-light focus:outline-none">
        </div>
        <div>
            <label class="font-bold text-slate-300 block mb-1.5">Short Description</label>
            <textarea name="description" rows="3" placeholder="Category highlights and styling notes..."
                      class="w-full bg-ink border border-white/15 rounded-xl px-3.5 py-2.5 text-white placeholder-slate-500 focus:ring-2 focus:ring-brand-light focus:outline-none">{{ old('description') }}</textarea>
        </div>
        <div class="p-3 bg-ink rounded-2xl border border-white/10">
            <label class="flex items-center gap-2.5 cursor-pointer">
                <input type="checkbox" name="is_active" value="1" checked class="rounded bg-ink border-white/20 text-brand focus:ring-brand">
                <span class="font-semibold text-white">Active (Visible in Storefront Filter)</span>
            </label>
        </div>
        <button type="submit" class="w-full bg-gradient-to-r from-brand to-brand-hover hover:from-brand-hover hover:to-brand text-white font-bold py-3 rounded-full text-xs shadow-glow transition mt-2">
            Save Category
        </button>
    </form>
</div>

@endsection