@extends('admin.layout')

@section('title', 'Tambah Kategori')

@section('content')
<div class="admin-category-form-page">
    <section class="admin-section-header">
        <div>
            <a href="{{ route('admin.categories.index') }}" class="admin-order-back-link">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m15 18-6-6 6-6"/>
                </svg>
                Kembali ke Kategori
            </a>

            <span class="admin-page-eyebrow">Category Management</span>

            <h1 class="admin-section-title font-display">
                Tambah <span>Kategori</span>
            </h1>

            <p class="admin-section-description">
                Buat kategori baru untuk mengelompokkan produk di storefront.
            </p>
        </div>
    </section>

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

        <section class="admin-form-panel">
            <header class="admin-form-panel-header">
                <span class="admin-form-panel-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M20.59 13.41 11 3.83A2 2 0 0 0 9.59 3.24L3.24 9.59A2 2 0 0 0 3.83 11l9.58 9.59a2 2 0 0 0 2.83 0l4.35-4.35a2 2 0 0 0 0-2.83ZM7 7h.01"/>
                    </svg>
                </span>

                <div>
                    <span class="admin-panel-eyebrow">Category Detail</span>
                    <h2 class="admin-panel-title font-display">Informasi Kategori</h2>
                </div>
            </header>

            <div class="admin-form-panel-body">
                <div class="admin-form-group">
                    <label for="category-name" class="admin-form-label">
                        Nama Kategori <span>*</span>
                    </label>

                    <input
                        id="category-name"
                        type="text"
                        name="name"
                        value="{{ old('name') }}"
                        required
                        autofocus
                        class="admin-form-control"
                        placeholder="Contoh: Streaming, Design, Productivity"
                    >

                    <p class="admin-form-help">
                        Gunakan nama singkat dan jelas agar mudah dipahami pelanggan.
                    </p>

                    @error('name')
                        <p class="admin-form-error">{{ $message }}</p>
                    @enderror
                </div>
            </div>
        </section>

        <section class="admin-category-submit-panel">
            <div>
                <span class="admin-panel-eyebrow">Save Category</span>
                <h2 class="admin-panel-title font-display">Simpan Kategori</h2>
                <p>Kategori baru akan langsung tersedia untuk dipilih pada form produk.</p>
            </div>

            <div class="admin-category-submit-actions">
                <a href="{{ route('admin.categories.index') }}" class="admin-product-cancel-button">
                    Batal
                </a>

                <button type="submit" class="admin-button admin-button-primary admin-category-submit-button">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m5 13 4 4L19 7"/>
                    </svg>
                    Simpan Kategori
                </button>
            </div>
        </section>
    </form>
</div>
@endsection