@push('js')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const colorInput = document.getElementById('colorInput');
            const colorTextInput = document.getElementById('colorTextInput');

            if (colorInput && colorTextInput) {
                // Sync color picker with text input
                colorInput.addEventListener('input', function () {
                    colorTextInput.value = this.value;
                });

                // Sync text input with color picker (with validation)
                colorTextInput.addEventListener('input', function () {
                    if (this.value.match(/^#[0-9A-F]{6}$/i)) {
                        colorInput.value = this.value;
                    }
                });
            }

            // Icon picker functionality
            const icons = [
                // Professional Services
                'fas fa-briefcase',           // Business/General
                'fas fa-user-tie',            // Executive/Professional
                'fas fa-gavel',               // Legal/Lawyer
                'fas fa-stethoscope',         // Medical/Doctor
                'fas fa-tooth',               // Dentist
                'fas fa-heartbeat',           // Healthcare/Cardiology
                'fas fa-brain',               // Neuroscience/Psychology
                'fas fa-flask',               // Science/Lab
                'fas fa-dna',                 // Genetics/Biology
                'fas fa-microscope',          // Research

                // Technology
                'fas fa-laptop-code',         // Developer
                'fas fa-robot',               // AI/Robotics
                'fas fa-microchip',           // Hardware/Engineering
                'fas fa-cloud',               // Cloud Computing
                'fas fa-database',            // Data Science
                'fas fa-chart-line',          // Analytics
                'fas fa-shield-alt',          // Cybersecurity
                'fas fa-network-wired',       // Networking
                'fas fa-cogs',                // Systems/Engineering

                // Finance & Business
                'fas fa-chart-pie',           // Finance/Analytics
                'fas fa-coins',               // Economics
                'fas fa-chart-bar',           // Statistics
                'fas fa-calculator',          // Accounting
                'fas fa-file-invoice-dollar', // Tax/Finance
                'fas fa-hand-holding-usd',    // Investment

                // Education
                'fas fa-graduation-cap',      // Education/Academic
                'fas fa-chalkboard-teacher',  // Teaching
                'fas fa-book-open',           // Reading/Literature
                'fas fa-school',              // Education
                'fas fa-university',          // Higher Education
                'fas fa-language',            // Languages
                // 'fas fa-math',                // Mathematics
                'fas fa-calculator',
                'fas fa-atom',                // Physics

                // Creative & Design
                'fas fa-paint-brush',         // Art/Design
                'fas fa-pencil-ruler',        // Architecture/Design
                'fas fa-camera',              // Photography
                'fas fa-video',               // Videography
                'fas fa-music',               // Music
                'fas fa-palette',             // Fine Arts
                'fas fa-vector-square',       // Graphic Design

                // Marketing & Media
                'fas fa-ad',                  // Advertising
                'fas fa-chart-line',          // Marketing Analytics
                'fas fa-bullhorn',            // PR/Marketing
                'fas fa-hashtag',             // Social Media
                'fas fa-envelope-open-text',  // Email Marketing
                'fas fa-newspaper',           // Journalism/Media
                'fas fa-podcast',             // Podcasting

                // Consulting & Coaching
                'fas fa-handshake',           // Consulting/Partnership
                'fas fa-users',               // Team/Group
                'fas fa-user-check',          // HR/Recruitment
                'fas fa-comments',            // Communication
                'fas fa-lightbulb',           // Innovation/Ideas
                'fas fa-clipboard-check',     // Project Management
                'fas fa-tasks',               // Task Management
                'fas fa-target',              // Goals/Achievement
                'fas fa-bullseye',

                // Health & Wellness
                'fas fa-spa',                 // Wellness/Spa
                'fas fa-heart',               // Health
                'fas fa-leaf',                // Nutrition/Nature
                'fas fa-dumbbell',            // Fitness
                'fas fa-yoga',                // Yoga/Meditation
                'fas fa-child',
                'fas fa-running',

                'fas fa-apple-alt',           // Nutrition

                // Real Estate & Construction
                'fas fa-building',            // Commercial Real Estate
                'fas fa-home',                // Residential Real Estate
                'fas fa-draw-polygon',        // Architecture
                'fas fa-hard-hat',            // Construction/Safety

                // Legal & Compliance
                'fas fa-scale-balanced',      // Justice/Law
                'fas fa-file-contract',       // Legal Documents
                'fas fa-stamp',               // Certification/Notary
                'fas fa-passport',            // Immigration

                // Science & Research
                'fas fa-microscope',          // Research
                'fas fa-dna',                 // Biotechnology
                'fas fa-flask',               // Chemistry
                'fas fa-globe-asia',          // Geography/Earth Science
                'fas fa-meteor',              // Astronomy

                // Miscellaneous Expert Categories
                'fas fa-utensils',            // Culinary/Chef
                'fas fa-car',                 // Automotive
                'fas fa-plane',               // Aviation/Travel
                'fas fa-ship',                // Maritime
                'fas fa-tree',                // Environmental
                'fas fa-paw',                 // Veterinary/Animals
                'fas fa-tshirt',              // Fashion
                'fas fa-ring',                // Jewelry
                'fas fa-futbol',              // Sports
                'fas fa-chess-queen',         // Strategy/Gaming

                'fas fa-comments', 'fas fa-question-circle', 'fas fa-shield-alt',
                'fas fa-lock', 'fas fa-globe', 'fas fa-code',
                'fas fa-database', 'fas fa-network-wired', 'fas fa-user-shield',
                'fas fa-folder', 'fas fa-tags', 'fas fa-lightbulb',
                'fas fa-book', 'fas fa-graduation-cap', 'fas fa-tools',
                'fas fa-chart-bar', 'fas fa-bug', 'fas fa-cloud',
                'fas fa-server', 'fas fa-mobile-alt', 'fas fa-cogs',
                'fas fa-key', 'fas fa-fingerprint', 'fas fa-laptop-code',
                'fas fa-bell', 'fas fa-exclamation-triangle', 'fas fa-check-circle',
                'fas fa-times-circle', 'fas fa-info-circle', 'fas fa-ban',
                'fas fa-wrench', 'fas fa-bolt', 'fas fa-fire',
                'fas fa-users', 'fas fa-user-tie', 'fas fa-user-secret'
            ];

            const iconModal = document.getElementById('iconPickerModal');
            const iconSearch = document.getElementById('iconSearch');
            const iconList = document.getElementById('iconList');
            const iconInput = document.getElementById('iconInput');
            const iconPreview = document.getElementById('iconPreview');

            // Populate icons in modal
            if (iconList) {
                icons.forEach(icon => {
                    const col = document.createElement('div');
                    col.className = 'col-3 col-md-2 mb-3 text-center';
                    col.innerHTML = `
                    <button type="button" class="btn btn-outline-light w-100 h-100 p-2 icon-select" 
                            data-icon="${icon}" data-bs-dismiss="modal">
                        <i class="${icon} fa-2x mb-2"></i>
                        <small class="d-block text-truncate">${icon.replace('fas fa-', '')}</small>
                    </button>
                `;
                    iconList.appendChild(col);
                });

                // Icon selection
                iconList.addEventListener('click', function (e) {
                    const iconBtn = e.target.closest('.icon-select');
                    if (iconBtn) {
                        const selectedIcon = iconBtn.dataset.icon;
                        iconInput.value = selectedIcon;
                        iconPreview.className = selectedIcon;

                        // Add visual feedback
                        document.querySelectorAll('.icon-select').forEach(btn => {
                            btn.classList.remove('btn-primary');
                            btn.classList.add('btn-outline-light');
                        });
                        iconBtn.classList.remove('btn-outline-light');
                        iconBtn.classList.add('btn-primary');
                    }
                });

                // Icon search
                if (iconSearch) {
                    iconSearch.addEventListener('input', function () {
                        const searchTerm = this.value.toLowerCase();
                        const buttons = iconList.querySelectorAll('.icon-select');

                        buttons.forEach(btn => {
                            const iconText = btn.dataset.icon.toLowerCase();
                            const display = iconText.includes(searchTerm) ? 'block' : 'none';
                            btn.parentElement.style.display = display;
                        });
                    });
                }
            }
        });
    </script>
@endpush
@if(!isset($readonly) || (isset($readonly) && !$readonly))
    <div class="modal fade" id="iconPickerModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('labels.choose_icon') }}</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="{{ __('labels.search_icons') }}...">
                    </div>
                    <div class="row" id="iconList">
                        <!-- Icons will be populated via JavaScript -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal">{{ __('labels.close') }}</button>
                </div>
            </div>
        </div>
    </div>
@endif
<div>
    <label for="{{ $name }}" class="form-label small">
        {{ $label ?? __('labels.icon') }}
    </label>
    <div class="input-group">
        <span class="input-group-text">
            <i id="iconPreview" class="{{ old($name, $selectedValue ?? 'fas fa-folder') }}"></i>
        </span>
        <input type="text" class="form-control @error($name) is-invalid @enderror" name="{{ $name }}" id="iconInput"
            value="{{ old($name, $selectedValue ?? '') }}" {{ isset($readonly) && $readonly ? "readonly" : "" }}
            placeholder="fas fa-folder">
        <button type="button" class="btn btn-outline-secondary" {{ isset($readonly) && $readonly ? "disabled" : "" }}
            data-bs-toggle="modal" data-bs-target="#iconPickerModal">
            <i class="fas fa-icons"></i>
        </button>
    </div>
    @error($name)
        <div class="invalid-feedback d-block">{{ $message }}</div>
    @enderror
</div>