@extends('layouts.admin')

@section('title', 'Master Kategori Template')
@section('page_title', 'Master Kategori Template')

@section('admin_content')
<div>
    <!-- Page Header -->
    <div class="ax-page-head" style="margin-bottom:var(--ax-space-6);">
        <div class="ax-page-head__row">
            <div>
                <h1 class="ax-page-head__title font-heading" style="font-size:2rem;">Master Kategori Template</h1>
                <p class="ax-page-head__subtitle">Kelola klasifikasi tema undangan digital (Minimalist, Classic, Floral, Tradisional, Modern, dll).</p>
            </div>
            <div class="ax-page-head__actions">
                <button type="button" onclick="document.getElementById('newCategoryModal').classList.toggle('is-hidden')" class="ax-btn ax-btn--primary ax-btn--sm">
                    <i data-lucide="plus" style="width:14px;height:14px;"></i>
                    <span class="ax-btn__label">Tambah Kategori</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Alert Success -->
    @if(session('success'))
        <div style="padding:12px 16px; margin-bottom:var(--ax-space-4); background:rgba(83,107,91,0.12); border:1px solid var(--ax-accent); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); color:var(--ax-accent); display:flex; align-items:center; gap:8px;">
            <i data-lucide="check-circle" style="width:16px;height:16px;"></i>
            <span>{{ session('success') }}</span>
        </div>
    @endif

    <!-- Form Modal Tambah Kategori -->
    <div id="newCategoryModal" class="is-hidden" style="margin-bottom:var(--ax-space-6);">
        <section class="ax-card">
            <div class="ax-card__header">
                <div class="ax-card__titles">
                    <span class="ax-card__eyebrow">Form Master Data</span>
                    <h3 class="ax-card__title">Tambah Kategori Template Baru</h3>
                </div>
            </div>
            <div class="ax-card__body">
                <form action="{{ route('admin.categories.store') }}" method="POST">
                    @csrf
                    <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:var(--ax-space-4); margin-bottom:var(--ax-space-4);">
                        <div>
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Nama Kategori</label>
                            <input type="text" name="name" required placeholder="misal: Adat Tradisional" style="width:100%; padding:8px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface);">
                        </div>
                        <div>
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Slug URL (Opsional)</label>
                            <input type="text" name="slug" placeholder="misal: adat-tradisional" style="width:100%; padding:8px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface);">
                        </div>
                        <div>
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Urutan Tampilan</label>
                            <input type="number" name="sort_order" value="1" style="width:100%; padding:8px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface);">
                        </div>
                        <div style="grid-column: 1 / -1;">
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Deskripsi Singkat</label>
                            <input type="text" name="description" placeholder="Deskripsi konsep tema kategori..." style="width:100%; padding:8px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface);">
                        </div>
                    </div>
                    <div style="display:flex; justify-content:flex-end; gap:var(--ax-space-2);">
                        <button type="button" onclick="document.getElementById('newCategoryModal').classList.add('is-hidden')" class="ax-btn ax-btn--secondary ax-btn--sm">Batal</button>
                        <button type="submit" class="ax-btn ax-btn--primary ax-btn--sm">Simpan Kategori</button>
                    </div>
                </form>
            </div>
        </section>
    </div>

    <!-- Category Table & Cards -->
    <div style="display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap:var(--ax-space-4);">
        @foreach($categories as $cat)
            <section class="ax-card">
                <form action="{{ route('admin.categories.update', $cat->id) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="ax-card__body" style="padding:var(--ax-space-4); display:flex; flex-direction:column; gap:var(--ax-space-3);">
                        <div style="display:flex; justify-content:space-between; align-items:flex-start;">
                            <div style="flex-grow:1; margin-right:var(--ax-space-2);">
                                <label style="font-size:10px; color:var(--ax-text-muted); text-transform:uppercase;">Nama Kategori</label>
                                <input type="text" name="name" value="{{ $cat->name }}" required class="font-heading" style="font-size:1.2rem; font-weight:700; width:100%; border:none; border-bottom:1px dashed var(--ax-border); background:transparent; color:var(--ax-text-strong);">
                            </div>
                            <span class="ax-badge ax-badge--accent ax-badge--pill" style="font-size:11px; white-space:nowrap;">
                                {{ $cat->templates_count }} Template
                            </span>
                        </div>

                        <div style="display:grid; grid-template-columns: 2fr 1fr; gap:var(--ax-space-2);">
                            <div>
                                <label style="font-size:10px; color:var(--ax-text-muted); text-transform:uppercase;">Slug URL</label>
                                <input type="text" name="slug" value="{{ $cat->slug }}" style="width:100%; padding:4px 8px; font-size:11px; font-family:var(--ax-font-mono); border:1px solid var(--ax-border); border-radius:var(--ax-radius-xs); background:var(--ax-surface);">
                            </div>
                            <div>
                                <label style="font-size:10px; color:var(--ax-text-muted); text-transform:uppercase;">Urutan</label>
                                <input type="number" name="sort_order" value="{{ $cat->sort_order }}" style="width:100%; padding:4px 8px; font-size:11px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-xs); background:var(--ax-surface);">
                            </div>
                        </div>

                        <div>
                            <label style="font-size:10px; color:var(--ax-text-muted); text-transform:uppercase;">Deskripsi</label>
                            <textarea name="description" rows="2" style="width:100%; padding:6px 8px; font-size:11px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-xs); background:var(--ax-surface);">{{ $cat->description }}</textarea>
                        </div>

                        <div style="display:flex; justify-content:space-between; align-items:center; padding-top:var(--ax-space-2); border-top:1px solid var(--ax-border);">
                            <label style="display:flex; align-items:center; gap:6px; font-size:11px; cursor:pointer;">
                                <input type="checkbox" name="is_active" value="1" {{ $cat->is_active ? 'checked' : '' }} class="accent-deepsage">
                                <span>Status Aktif</span>
                            </label>
                            <div style="display:flex; gap:6px;">
                                <button type="submit" class="ax-btn ax-btn--primary ax-btn--xs">Update</button>
                            </div>
                        </div>
                    </div>
                </form>
                <div style="padding: 0 var(--ax-space-4) var(--ax-space-3); display:flex; justify-content:flex-end;">
                    <form action="{{ route('admin.categories.delete', $cat->id) }}" method="POST" onsubmit="return confirm('Hapus kategori ini? Template yang terhubung akan tetap aman.')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" style="background:none; border:none; color:var(--ax-danger, #dc2626); font-size:11px; cursor:pointer; padding:2px;">
                            Hapus Kategori
                        </button>
                    </form>
                </div>
            </section>
        @endforeach
    </div>
</div>
@endsection