@extends('admin.layout')

@section('title', 'Kategori')

@section('content')
<div class="admin-categories-page">
    <section class="admin-section-header">
        <div>
            <span class="admin-page-eyebrow">Category Management</span>

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

            <p class="admin-section-description">
                Atur pengelompokan produk agar katalog tetap rapi dan mudah dijelajahi.
            </p>
        </div>

        <a href="{{ route('admin.categories.create') }}" class="admin-button admin-button-primary admin-category-create-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="M12 5v14M5 12h14"/>
            </svg>
            Tambah Kategori
        </a>
    </section>

    <section class="admin-category-overview">
        <div class="admin-category-overview-item">
            <span>Total Kategori</span>
            <strong class="font-figures">{{ number_format($categories->count(), 0, ',', '.') }}</strong>
        </div>

        <div class="admin-category-overview-divider"></div>

        <div class="admin-category-overview-item">
            <span>Kategori Aktif</span>
            <strong class="font-figures">{{ number_format($categories->where('is_active', true)->count(), 0, ',', '.') }}</strong>
        </div>

        <div class="admin-category-overview-divider"></div>

        <div class="admin-category-overview-item">
            <span>Nonaktif</span>
            <strong class="font-figures">{{ number_format($categories->where('is_active', false)->count(), 0, ',', '.') }}</strong>
        </div>
    </section>

    <section class="admin-category-table-panel">
        <div class="admin-category-table-scroll">
            <table class="admin-category-table">
                <thead>
                    <tr>
                        <th>Nama Kategori</th>
                        <th>Status</th>
                        <th aria-label="Aksi"></th>
                    </tr>
                </thead>

                <tbody>
                    @forelse ($categories as $category)
                        <tr>
                            <td>
                                <div class="admin-category-main">
                                    <span class="admin-category-icon">
                                        {{ strtoupper(substr($category->name, 0, 1)) }}
                                    </span>

                                    <div>
                                        <strong>{{ $category->name }}</strong>
                                        <span>Kelompok produk</span>
                                    </div>
                                </div>
                            </td>

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

                            <td>
                                <div class="admin-category-actions">
                                    <a href="{{ route('admin.categories.edit', $category) }}" class="admin-product-action-button is-edit">
                                        <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="m14 4 6 6M4 20l4.5-1 10-10a2.12 2.12 0 0 0-3-3l-10 10L4 20Z"/>
                                        </svg>
                                        Edit
                                    </a>

                                    <form
                                        method="POST"
                                        action="{{ route('admin.categories.destroy', $category) }}"
                                        onsubmit="return confirm('Yakin ingin menghapus kategori {{ addslashes($category->name) }}?')"
                                    >
                                        @csrf
                                        @method('DELETE')

                                        <button type="submit" class="admin-product-action-button is-delete">
                                            <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="M4 7h16M9 7V4h6v3m-8 0 1 13h8l1-13M10 11v5m4-5v5"/>
                                            </svg>
                                            Hapus
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="3">
                                <div class="admin-category-empty-state">
                                    <span class="admin-category-empty-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>
                                        <p>Belum ada kategori</p>
                                        <span>Tambahkan kategori pertama untuk merapikan katalog produk.</span>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>

    <section class="admin-category-mobile-list">
        @forelse ($categories as $category)
            <article class="admin-category-mobile-card">
                <div class="admin-category-mobile-main">
                    <span class="admin-category-icon">
                        {{ strtoupper(substr($category->name, 0, 1)) }}
                    </span>

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

                <div class="admin-category-mobile-actions">
                    <a href="{{ route('admin.categories.edit', $category) }}" class="admin-product-mobile-action is-edit">
                        Edit
                    </a>

                    <form
                        method="POST"
                        action="{{ route('admin.categories.destroy', $category) }}"
                        onsubmit="return confirm('Yakin ingin menghapus kategori {{ addslashes($category->name) }}?')"
                    >
                        @csrf
                        @method('DELETE')

                        <button type="submit" class="admin-product-mobile-action is-delete">
                            Hapus
                        </button>
                    </form>
                </div>
            </article>
        @empty
            <div class="admin-category-empty-state">
                <span class="admin-category-empty-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>
                    <p>Belum ada kategori</p>
                    <span>Tambahkan kategori pertama untuk merapikan katalog produk.</span>
                </div>
            </div>
        @endforelse
    </section>
</div>
@endsection