@extends('layouts.admin')

@section('header', 'Manajemen Kategori')

@section('content')
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
    <!-- Add Category Form -->
    <div class="md:col-span-1">
        <div class="bg-white rounded-xl shadow-md p-6 sticky top-24">
            <h3 class="text-lg font-bold text-gray-800 mb-4 border-b pb-2">Tambah Kategori</h3>
            <form action="{{ route('admin.categories.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="mb-4">
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Nama Kategori</label>
                    <input type="text" name="name" id="name" required placeholder="Contoh: Mobile Legends"
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
                </div>

                <div class="mb-4">
                    <label for="product_name" class="block text-sm font-medium text-gray-700 mb-1">Nama Produk (Opsional)</label>
                    <input type="text" name="product_name" id="product_name" placeholder="Contoh: Diamonds"
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
                    <p class="text-xs text-gray-500 mt-1">Nama item yang dijual dalam kategori ini (misal: Diamonds, UC, Token).</p>
                </div>

                <div class="mb-4">
                    <label for="image" class="block text-sm font-medium text-gray-700 mb-1">Gambar Kategori (Opsional)</label>
                    <input type="file" name="image" id="image" accept="image/*"
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
                    <p class="text-xs text-gray-500 mt-1">Format: JPG, PNG, JPEG. Max 2MB.</p>
                </div>

                <div class="mb-4">
                    <label for="input_type" class="block text-sm font-medium text-gray-700 mb-1">Tipe Input Akun</label>
                    <select name="input_type" id="input_type" required
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
                        <option value="username">Username</option>
                        <option value="user_id">User ID</option>
                        <option value="user_id_server">User ID & Server (Manual Input)</option>
                        <option value="user_id_server_global">User ID & Server (Global/SEA/dll)</option>
                        <option value="user_id_server_v2">User ID & Server V2 (Versi Berbeda)</option>
                        <option value="id_zone">User ID & Zone ID (Game)</option>
                        <option value="email">Email</option>
                        <option value="none">Tidak Perlu Input</option>
                    </select>
                    <p class="text-xs text-gray-500 mt-1">Jenis data akun yang harus diisi pembeli.</p>
                </div>

                <div class="mb-6">
                    <label for="icon" class="block text-sm font-medium text-gray-700 mb-1">Icon FontAwesome (Opsional)</label>
                    <div class="flex gap-2">
                        <input type="text" name="icon" id="icon" placeholder="fa-ring"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
                        <div class="w-10 h-10 flex items-center justify-center bg-gray-100 rounded border border-gray-300">
                            <i id="icon-preview" class="fas fa-question text-gray-400"></i>
                        </div>
                    </div>
                    <p class="text-xs text-gray-500 mt-1">
                        Jika gambar tidak diupload, icon ini akan digunakan.
                    </p>
                </div>

                <button type="submit" class="bg-yellow-600 text-white px-4 py-2 rounded-lg hover:bg-yellow-700 transition w-full">
                    <i class="fas fa-plus mr-1"></i> Tambah Kategori
                </button>
            </form>
        </div>
    </div>

    <!-- Category List -->
    <div class="md:col-span-2">
        <div class="bg-white rounded-xl shadow-md overflow-hidden">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Gambar / Icon</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nama Kategori</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Slug</th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Aksi</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @forelse($categories as $category)
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-center w-16">
                                @if($category->image)
                                    <img src="{{ $category->image }}" alt="{{ $category->name }}" class="w-10 h-10 object-cover rounded-full border border-gray-200 mx-auto">
                                @else
                                    <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 mx-auto">
                                        <i class="fas {{ $category->icon ?? 'fa-circle' }}"></i>
                                    </div>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                {{ $category->name }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ $category->slug }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <div class="flex justify-end gap-2">
                                    <a href="{{ route('admin.categories.edit', $category->id) }}" class="text-blue-600 hover:text-blue-900 bg-blue-50 px-3 py-1 rounded hover:bg-blue-100 transition">
                                        Edit
                                    </a>
                                    <form action="{{ route('admin.categories.destroy', $category->id) }}" method="POST" onsubmit="return confirm('Hapus kategori {{ $category->name }}?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="text-red-600 hover:text-red-900 bg-red-50 px-3 py-1 rounded hover:bg-red-100 transition">
                                            Hapus
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="px-6 py-10 text-center text-gray-500">
                                Belum ada kategori.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    // Simple script to preview FontAwesome icon
    document.getElementById('icon').addEventListener('input', function(e) {
        const iconClass = e.target.value;
        const preview = document.getElementById('icon-preview');
        preview.className = 'fas ' + (iconClass || 'fa-question');
    });
</script>
@endsection