@extends('admin.layout')

@section('title', 'Edit 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">
                Edit <span>Kategori</span>
            </h1>

            <p class="admin-section-description">
                Perbarui nama dan status kategori {{ $category->name }}.
            </p>
        </div>

        <span class="admin-status-pill {{ $category->is_active ? 'is-success' : 'is-neutral' }}">
            <span></span>
            {{ $category->is_active ? 'Aktif' : 'Nonaktif' }}
        </span>
    </section>

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

        <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', $category->name) }}"
                        required
                        autofocus
                        class="admin-form-control"
                    >

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

                <label class="admin-form-switch-card">
                    <input
                        type="checkbox"
                        name="is_active"
                        value="1"
                        @checked(old('is_active', $category->is_active))
                    >

                    <span class="admin-form-switch">
                        <span></span>
                    </span>

                    <span class="admin-form-switch-content">
                        <strong>Kategori aktif</strong>
                        <small>
                            Kategori aktif dapat digunakan untuk mengelompokkan produk di storefront.
                        </small>
                    </span>
                </label>
            </div>
        </section>

        <section class="admin-category-submit-panel">
            <div>
                <span class="admin-panel-eyebrow">Save Changes</span>
                <h2 class="admin-panel-title font-display">Perbarui Kategori</h2>
                <p>Simpan perubahan nama dan status kategori.</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>
                    Update Kategori
                </button>
            </div>
        </section>
    </form>
</div>
@endsection