@extends('layouts.admin')

@section('pageTitle', 'افزودن دسته‌بندی فلش‌کارت جدید')

@section('content')
<div class="container mx-auto px-6 py-8">
    <h3 class="text-gray-700 text-3xl font-medium mb-6">افزودن دسته‌بندی فلش‌کارت جدید</h3>

    <div class="bg-white rounded-lg shadow-md p-6">
        <form action="{{ route('flashcard-categories.store') }}" method="POST">
            @csrf

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Title -->
                <div>
                    <label class="block text-sm font-medium text-gray-700">عنوان دسته‌بندی <span class="text-red-500">*</span></label>
                    <input type="text" name="title" value="{{ old('title') }}" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 border p-2">
                    @error('title') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <!-- Parent -->
                <div>
                    <label class="block text-sm font-medium text-gray-700">دسته والد</label>
                    <select name="parent_id" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 border p-2">
                        <option value="">بدون والد (دسته اصلی)</option>
                        @foreach($parentCategories as $parent)
                            <option value="{{ $parent->id }}" {{ old('parent_id') == $parent->id ? 'selected' : '' }}>{{ $parent->title }}</option>
                        @endforeach
                    </select>
                </div>

                <!-- Color -->
                <div>
                    <label class="block text-sm font-medium text-gray-700">رنگ</label>
                    <input type="color" name="color" value="{{ old('color', '#6366f1') }}" class="mt-1 block w-full h-10 rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 border">
                </div>

                <!-- Icon -->
                <div>
                    <label class="block text-sm font-medium text-gray-700">آیکون (FontAwesome)</label>
                    <div class="flex gap-2 mt-1">
                        <input type="text" id="iconInput" name="icon" value="{{ old('icon', 'fas fa-graduation-cap') }}" readonly class="flex-1 rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 border p-2">
                        <button type="button" onclick="openIconModal()" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
                            <i class="fas fa-search ml-1"></i>انتخاب
                        </button>
                    </div>
                    <p class="text-xs text-gray-500 mt-1">آیکون انتخاب شده: <i id="iconPreview" class="fas fa-graduation-cap ml-2"></i></p>
                </div>

                <!-- Description -->
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700">توضیح</label>
                    <textarea name="description" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 border p-2">{{ old('description') }}</textarea>
                </div>

                <!-- Status -->
                <div class="flex items-center">
                    <input type="checkbox" name="is_active" value="1" {{ old('is_active') ? 'checked' : '' }} class="h-4 w-4 rounded border-gray-300">
                    <label class="mr-2 text-sm font-medium text-gray-700">فعال</label>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="mt-8 flex justify-end gap-3">
                <a href="{{ route('flashcard-categories.index') }}" class="px-4 py-2 text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200">
                    انصراف
                </a>
                <button type="submit" class="px-6 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:bg-indigo-700">
                    <i class="fas fa-plus ml-2"></i>افزودن
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Icon Modal -->
<div id="iconModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-96 flex flex-col">
        <div class="flex justify-between items-center p-6 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-bold text-gray-900 dark:text-white">انتخاب آیکون</h3>
            <button type="button" onclick="closeIconModal()" class="text-gray-500 hover:text-gray-700">
                <i class="fas fa-times text-2xl"></i>
            </button>
        </div>
        
        <div class="p-6 overflow-y-auto flex-1">
            <input type="text" id="iconSearch" placeholder="جستجو برای آیکون..." class="w-full px-4 py-2 border border-gray-300 rounded-lg mb-4">
            
            <div id="iconGrid" class="grid grid-cols-6 gap-4">
                <!-- Icons will be inserted here -->
            </div>
        </div>
    </div>
</div>

<script>
const icons = [
    'fas fa-graduation-cap', 'fas fa-lightbulb', 'fas fa-brain', 'fas fa-book', 
    'fas fa-bookmark', 'fas fa-code', 'fas fa-flask', 'fas fa-microscope',
    'fas fa-calculator', 'fas fa-chart-bar', 'fas fa-music', 'fas fa-paint-brush',
    'fas fa-camera', 'fas fa-video', 'fas fa-language', 'fas fa-globe',
    'fas fa-star', 'fas fa-heart', 'fas fa-trophy', 'fas fa-medal',
    'fas fa-pencil', 'fas fa-edit', 'fas fa-pen', 'fas fa-keyboard',
    'fas fa-file', 'fas fa-folder', 'fas fa-archive', 'fas fa-database',
    'fas fa-laptop', 'fas fa-desktop', 'fas fa-tablet', 'fas fa-mobile',
    'fas fa-user', 'fas fa-users', 'fas fa-team', 'fas fa-people',
    'fas fa-target', 'fas fa-rocket', 'fas fa-fire', 'fas fa-lightning-bolt'
];

function openIconModal() {
    document.getElementById('iconModal').classList.remove('hidden');
    renderIcons(icons);
}

function closeIconModal() {
    document.getElementById('iconModal').classList.add('hidden');
}

function renderIcons(iconsToRender) {
    const grid = document.getElementById('iconGrid');
    grid.innerHTML = '';
    
    iconsToRender.forEach(icon => {
        const div = document.createElement('div');
        div.className = 'p-4 border border-gray-200 rounded-lg cursor-pointer hover:bg-indigo-50 dark:hover:bg-indigo-900 transition text-center';
        div.onclick = () => selectIcon(icon);
        div.innerHTML = `<i class="${icon} text-2xl text-indigo-600 mb-2"></i><p class="text-xs text-gray-600 dark:text-gray-300 mt-2">${icon.replace('fas ', '')}</p>`;
        grid.appendChild(div);
    });
}

function selectIcon(icon) {
    document.getElementById('iconInput').value = icon;
    document.getElementById('iconPreview').className = icon;
    closeIconModal();
}

document.getElementById('iconSearch').addEventListener('keyup', function() {
    const search = this.value.toLowerCase();
    const filtered = icons.filter(icon => icon.toLowerCase().includes(search));
    renderIcons(filtered);
});
</script>
@endsection