@extends('layouts.admin')

@section('title', 'Tambah Kategori Baru')
@section('page_title', 'Tambah Kategori')
@section('breadcrumb')
    <a href="{{ route('admin.categories.index') }}">Kategori</a>
    <span class="sep">/</span> Tambah Baru
@endsection

@section('topbar_actions')
    <a href="{{ route('admin.categories.index') }}" class="btn-topbar-ghost btn-topbar-pink">
        <i class="bi bi-arrow-left"></i> Kembali
    </a>
@endsection

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-7">
        <div class="card-admin">
            <div class="card-header-admin">
                <div class="d-flex align-items-center gap-3">
                    <div style="width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#f472b6,#db2777);display:flex;align-items:center;justify-content:center;color:white;font-size:1.15rem;">
                        <i class="bi bi-tag-fill"></i>
                    </div>
                    <div>
                        <h5 style="font-size: 1rem;" class="mb-0">Tambah Kategori Baru</h5>
                        <p class="text-muted small mb-0">Isi data di bawah untuk membuat kategori baru</p>
                    </div>
                </div>
            </div>

            <div class="p-4">
                <form action="{{ route('admin.categories.store') }}" method="POST">
                    @csrf

                    <div class="mb-4">
                        <label for="name" class="form-label fw-semibold text-dark small">
                            Nama Kategori <span style="color:#ec4899;">*</span>
                        </label>
                        <input type="text"
                               class="form-control form-control-admin @error('name') is-invalid @enderror"
                               id="name" name="name"
                               value="{{ old('name') }}"
                               placeholder="Contoh: Fashion Wanita, Kecantikan..."
                               required>
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-5">
                        <label for="description" class="form-label fw-semibold text-dark small">Deskripsi</label>
                        <textarea class="form-control form-control-admin @error('description') is-invalid @enderror"
                                  id="description" name="description"
                                  rows="4"
                                  placeholder="Deskripsi singkat tentang kategori ini (opsional)...">{{ old('description') }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="d-flex justify-content-end gap-3">
                        <a href="{{ route('admin.categories.index') }}" class="btn-pink-outline">
                            <i class="bi bi-x-lg"></i> Batal
                        </a>
                        <button type="submit" class="btn-pink btn-topbar-pink">
                            <i class="bi bi-save2-fill"></i> Simpan Kategori
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection