@props(['name' => 'icon', 'selected' => '', 'label' => 'انتخاب آیکون'])

<div class="mb-3">
    <label class="form-label">{{ $label }}</label>
    <div class="input-group">
        <input type="text"
               class="form-control"
               name="{{ $name }}"
               id="{{ $name }}"
               value="{{ $selected }}"
               placeholder="نام آیکون را وارد کنید"
               data-bs-toggle="modal"
               data-bs-target="#iconSelectorModal"
               readonly>
        <button class="btn btn-outline-secondary"
                type="button"
                data-bs-toggle="modal"
                data-bs-target="#iconSelectorModal">
            <i class="ri-grid-line"></i>
        </button>
    </div>
    @if($selected)
        <div class="mt-2">
            <small class="text-muted">پیش‌نمایش: </small>
            <i class="{{ $selected }} fs-4"></i>
        </div>
    @endif
</div>

<!-- Modal -->
<div class="modal fade" id="iconSelectorModal" tabindex="-1" aria-labelledby="iconSelectorModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="iconSelectorModalLabel">انتخاب آیکون</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <input type="text"
                           class="form-control"
                           id="iconSearch"
                           placeholder="جستجوی آیکون...">
                </div>
                <div class="icon-grid" style="max-height: 400px; overflow-y: auto;">
                    @php
                        $iconCategories = [
                            'رستوران و غذا' => [
                                'ri-restaurant-2-line',
                                'ri-restaurant-fill',
                                'ri-cake-3-line',
                                'ri-cake-2-line',
                                'ri-cake-line',
                                'ri-cake-fill',
                                'ri-drinks-2-line',
                                'ri-drinks-line',
                                'ri-drinks-fill',
                                'ri-cup-line',
                                'ri-cup-fill',
                                'ri-cake-3-fill'
                            ],
                            'سینما و تفریح' => [
                                'ri-film-line',
                                'ri-film-fill',
                                'ri-movie-2-line',
                                'ri-movie-2-fill',
                                'ri-ticket-2-line',
                                'ri-ticket-2-fill',
                                'ri-ticket-line',
                                'ri-ticket-fill',
                                'ri-camera-line',
                                'ri-camera-fill',
                                'ri-video-line',
                                'ri-video-fill'
                            ],
                            'هتل و اقامت' => [
                                'ri-hotel-line',
                                'ri-hotel-fill',
                                'ri-building-2-line',
                                'ri-building-2-fill',
                                'ri-home-4-line',
                                'ri-home-4-fill',
                                'ri-home-2-line',
                                'ri-home-2-fill',
                                'ri-home-line',
                                'ri-home-fill',
                                'ri-door-line',
                                'ri-door-fill'
                            ],
                            'کافه و نوشیدنی' => [
                                'ri-cup-line',
                                'ri-cup-fill',
                                'ri-cake-2-line',
                                'ri-cake-2-fill',
                                'ri-drinks-2-line',
                                'ri-drinks-2-fill',
                                'ri-coffee-line',
                                'ri-coffee-fill',
                                'ri-cake-3-line',
                                'ri-cake-3-fill',
                                'ri-cake-line',
                                'ri-cake-fill'
                            ],
                            'ورزشگاه و ورزش' => [
                                'ri-basketball-line',
                                'ri-basketball-fill',
                                'ri-football-line',
                                'ri-football-fill',
                                'ri-swimming-line',
                                'ri-swimming-fill',
                                'ri-run-line',
                                'ri-run-fill',
                                'ri-bike-line',
                                'ri-bike-fill',
                                'ri-trophy-line',
                                'ri-trophy-fill'
                            ],
                            'عمومی' => [
                                'ri-store-2-line',
                                'ri-store-2-fill',
                                'ri-store-3-line',
                                'ri-store-3-fill',
                                'ri-store-line',
                                'ri-store-fill',
                                'ri-shopping-bag-line',
                                'ri-shopping-bag-fill',
                                'ri-shopping-cart-line',
                                'ri-shopping-cart-fill',
                                'ri-shopping-basket-line',
                                'ri-shopping-basket-fill'
                            ]
                        ];
                    @endphp

                    @foreach($iconCategories as $category => $icons)
                        <div class="mb-4">
                            <h6 class="border-bottom pb-2 mb-3">{{ $category }}</h6>
                            <div class="row g-2">
                                @foreach($icons as $icon)
                                    <div class="col-4">
                                        <div class="icon-item p-3 text-center border rounded cursor-pointer"
                                             data-icon="{{ $icon }}"
                                             style="cursor: pointer;">
                                            <i class="{{ $icon }} fs-2"></i>
                                            <div class="small text-muted mt-2">{{ $icon }}</div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">انصراف</button>
                <button type="button" class="btn btn-primary" id="selectIcon">انتخاب</button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const iconInput = document.getElementById('{{ $name }}');
    const iconSearch = document.getElementById('iconSearch');
    const iconItems = document.querySelectorAll('.icon-item');
    let selectedIcon = null;

    // جستجوی آیکون‌ها
    iconSearch.addEventListener('input', function() {
        const searchTerm = this.value.toLowerCase();
        iconItems.forEach(item => {
            const iconName = item.dataset.icon.toLowerCase();
            const category = item.closest('.mb-4');
            if (iconName.includes(searchTerm)) {
                item.style.display = 'block';
                category.style.display = 'block';
            } else {
                item.style.display = 'none';
            }
            // مخفی کردن دسته‌بندی اگر هیچ آیکونی در آن نمایش داده نمی‌شود
            const visibleIcons = category.querySelectorAll('.icon-item[style="display: block;"]');
            category.style.display = visibleIcons.length > 0 ? 'block' : 'none';
        });
    });

    // انتخاب آیکون
    iconItems.forEach(item => {
        item.addEventListener('click', function() {
            iconItems.forEach(i => i.classList.remove('bg-light'));
            this.classList.add('bg-light');
            selectedIcon = this.dataset.icon;
        });
    });

    // ذخیره آیکون انتخاب شده
    document.getElementById('selectIcon').addEventListener('click', function() {
        if (selectedIcon) {
            iconInput.value = selectedIcon;
            // اضافه کردن پیش‌نمایش
            const preview = document.createElement('div');
            preview.className = 'mt-2';
            preview.innerHTML = `
                <small class="text-muted">پیش‌نمایش: </small>
                <i class="${selectedIcon} fs-4"></i>
            `;
            // حذف پیش‌نمایش قبلی اگر وجود دارد
            const oldPreview = iconInput.parentElement.nextElementSibling;
            if (oldPreview) {
                oldPreview.remove();
            }
            iconInput.parentElement.after(preview);
        }
        bootstrap.Modal.getInstance(document.getElementById('iconSelectorModal')).hide();
    });
});
</script>
@endpush