@extends('layouts.app')
@section('title', 'Kategori')
@section('page-title', 'Manajemen Kategori')

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">

    {{-- Form Tambah --}}
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-5">
        <h3 class="font-bold text-slate-800 mb-4">➕ Tambah Kategori</h3>
        <form method="POST" action="{{ route('categories.store') }}" class="space-y-3">
            @csrf
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Nama Kategori</label>
                <input type="text" name="name" value="{{ old('name') }}" required
                    class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
                    placeholder="Makanan, Minuman...">
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Ikon (emoji)</label>
                <input type="text" name="icon" value="{{ old('icon') }}" maxlength="10"
                    class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
                    placeholder="🍔">
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Warna</label>
                <div class="flex gap-2 items-center">
                    <input type="color" name="color" value="{{ old('color', '#6366f1') }}" class="w-10 h-10 rounded-lg border border-slate-200 cursor-pointer">
                    <span class="text-xs text-slate-500">Warna label kategori</span>
                </div>
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Urutan</label>
                <input type="number" name="sort_order" value="{{ old('sort_order', 0) }}" min="0"
                    class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <button type="submit" class="w-full py-2.5 bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-xl text-sm transition">
                Tambah Kategori
            </button>
        </form>
    </div>

    {{-- List --}}
    <div class="lg:col-span-2 bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
        <div class="px-5 py-4 border-b border-slate-200">
            <h3 class="font-bold text-slate-800">Daftar Kategori ({{ $categories->total() }})</h3>
        </div>
        <div class="divide-y divide-slate-100">
            @forelse($categories as $cat)
            <div class="px-5 py-4 flex items-center gap-4">
                <div class="w-10 h-10 rounded-xl flex items-center justify-center text-xl font-bold flex-shrink-0"
                     style="background: {{ $cat->color }}20;">
                    {{ $cat->icon ?? '📦' }}
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2">
                        <span class="font-semibold text-slate-800">{{ $cat->name }}</span>
                        <span class="px-2 py-0.5 rounded-full text-xs font-semibold text-white" style="background:{{ $cat->color }}">
                            {{ $cat->products_count }} produk
                        </span>
                        @if(!$cat->is_active)
                        <span class="px-2 py-0.5 rounded-full text-xs bg-slate-100 text-slate-500">Nonaktif</span>
                        @endif
                    </div>
                    <div class="text-xs text-slate-400">Urutan: {{ $cat->sort_order }}</div>
                </div>
                <div class="flex gap-2">
                    <button onclick="showEditCat({{ $cat->id }}, '{{ addslashes($cat->name) }}', '{{ $cat->icon }}', '{{ $cat->color }}', {{ $cat->sort_order }})"
                        class="px-2.5 py-1.5 bg-blue-50 hover:bg-blue-100 text-blue-600 rounded-lg text-xs transition">Edit</button>
                    <form method="POST" action="{{ route('categories.destroy', $cat) }}" onsubmit="return confirm('Hapus kategori ini?')">
                        @csrf @method('DELETE')
                        <button class="px-2.5 py-1.5 bg-red-50 hover:bg-red-100 text-red-500 rounded-lg text-xs transition">Hapus</button>
                    </form>
                </div>
            </div>
            @empty
            <div class="px-5 py-12 text-center text-slate-400">Belum ada kategori</div>
            @endforelse
        </div>
        <div class="px-4 py-3 border-t border-slate-200">{{ $categories->links() }}</div>
    </div>
</div>

{{-- Modal Edit --}}
<div id="editCatModal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 hidden">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-sm p-6">
        <h3 class="font-bold text-slate-800 mb-4">Edit Kategori</h3>
        <form id="editCatForm" method="POST" class="space-y-3">
            @csrf @method('PUT')
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Nama</label>
                <input type="text" name="name" id="editCatName" required class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Ikon</label>
                <input type="text" name="icon" id="editCatIcon" maxlength="10" class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Warna</label>
                <input type="color" name="color" id="editCatColor" class="w-10 h-10 rounded-lg border border-slate-200 cursor-pointer">
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Urutan</label>
                <input type="number" name="sort_order" id="editCatOrder" min="0" class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <label class="flex items-center gap-2">
                <input type="checkbox" name="is_active" value="1" id="editCatActive" checked class="rounded">
                <span class="text-sm">Aktif</span>
            </label>
            <div class="flex gap-2 pt-2">
                <button type="button" onclick="document.getElementById('editCatModal').classList.add('hidden')"
                    class="flex-1 py-2 bg-slate-100 hover:bg-slate-200 rounded-xl text-sm font-semibold transition">Batal</button>
                <button type="submit" class="flex-1 py-2 bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-xl text-sm transition">Simpan</button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
function showEditCat(id, name, icon, color, order) {
    document.getElementById('editCatName').value = name;
    document.getElementById('editCatIcon').value = icon;
    document.getElementById('editCatColor').value = color;
    document.getElementById('editCatOrder').value = order;
    document.getElementById('editCatForm').action = `/categories/${id}`;
    document.getElementById('editCatModal').classList.remove('hidden');
}
</script>
@endpush
@endsection