@extends('layouts.admin')

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

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="bg-white rounded-xl shadow-md p-6">
        <div class="flex justify-between items-center mb-6 border-b pb-4">
            <h3 class="text-lg font-bold text-gray-800">Edit Kategori: {{ $category->name }}</h3>
            <a href="{{ route('admin.categories.index') }}" class="text-gray-500 hover:text-gray-700">
                <i class="fas fa-arrow-left mr-1"></i> Kembali
            </a>
        </div>

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

            <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 value="{{ old('name', $category->name) }}"
                    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" value="{{ old('product_name', $category->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>
                @if($category->image)
                    <div class="mb-2">
                        <img src="{{ $category->image }}" alt="{{ $category->name }}" class="w-20 h-20 object-cover rounded-lg border border-gray-200">
                    </div>
                @endif
                <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. Biarkan kosong jika tidak ingin mengubah gambar.</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" {{ old('input_type', $category->input_type) == 'username' ? 'selected' : '' }}>Username</option>
                    <option value="user_id" {{ old('input_type', $category->input_type) == 'user_id' ? 'selected' : '' }}>User ID</option>
                    <option value="user_id_server" {{ old('input_type', $category->input_type) == 'user_id_server' ? 'selected' : '' }}>User ID & Server (Manual Input)</option>
                    <option value="user_id_server_global" {{ old('input_type', $category->input_type) == 'user_id_server_global' ? 'selected' : '' }}>User ID & Server (Global/SEA/dll)</option>
                    <option value="user_id_server_v2" {{ old('input_type', $category->input_type) == 'user_id_server_v2' ? 'selected' : '' }}>User ID & Server V2 (Versi Berbeda)</option>
                    <option value="id_zone" {{ old('input_type', $category->input_type) == 'id_zone' ? 'selected' : '' }}>User ID & Zone ID (Game)</option>
                    <option value="email" {{ old('input_type', $category->input_type) == 'email' ? 'selected' : '' }}>Email</option>
                    <option value="none" {{ old('input_type', $category->input_type) == 'none' ? 'selected' : '' }}>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" value="{{ old('icon', $category->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 {{ $category->icon ?? '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>

            <div class="flex justify-end gap-2">
                <a href="{{ route('admin.categories.index') }}" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition">
                    Batal
                </a>
                <button type="submit" class="bg-yellow-600 text-white px-4 py-2 rounded-lg hover:bg-yellow-700 transition">
                    <i class="fas fa-save mr-1"></i> Simpan Perubahan
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    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