{{-- resources/views/pages/expert-questions/create.blade.php --}}
@extends('layouts.app')

@section('css')
<!-- FilePond Styles -->
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
<link href="{{ asset('assets/custom/css/documents/file-manger.css') }}" rel="stylesheet">

<style>
    .experts-list {
        max-height: 500px;
        overflow-y: auto;        
    }
    . {
        border: 2px solid transparent;
        transition: all 0.3s ease;
        cursor: pointer;
        position: relative;
    }
    .:hover {
        border-color: #0d6efd;
        background: #f8f9fa;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    ..selected {
        border-color: #0d6efd;
        background: #e7f1ff;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
    }
    ..selected::after {
        content: '✓';
        position: absolute;
        top: 10px;
        right: 10px;
        width: 24px;
        height: 24px;
        background: #0d6efd;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: bold;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    .expert-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        object-fit: cover;
    }
    .expert-initials {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 20px;
    }
    .note-editor {
        border-radius: 8px;
    }
    .note-editor .note-toolbar {
        background: #f8f9fa;
        border-radius: 8px 8px 0 0;
    }
    .step-indicator {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 30px;
        position: relative;
    }
    .step-indicator::before {
        content: '';
        position: absolute;
        top: 20px;
        left: 0;
        right: 0;
        height: 2px;
        background: #e9ecef;
        z-index: 1;
    }
    .step {
        position: relative;
        z-index: 2;
        background: white;
        padding: 0 15px;
        text-align: center;
    }
    .step .step-number {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #e9ecef;
        color: #6c757d;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 10px;
        font-weight: bold;
        transition: all 0.3s;
    }
    .step.active .step-number {
        background: #0d6efd;
        color: white;
    }
    .step.completed .step-number {
        background: #198754;
        color: white;
    }
    .step .step-label {
        font-size: 14px;
        color: #6c757d;
    }
    .step.active .step-label {
        color: #0d6efd;
        font-weight: 600;
    }
    .selected-info-card {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-left: 4px solid #0d6efd;
    }
    .toast-container {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1050;
    }
    /* Fix for nested expert card in selected section */
    #question-form . {
        cursor: default;
        border-color: #0d6efd;
        background: #e7f1ff;
    }
    #question-form .:hover {
        transform: none;
    }
    #question-form ..selected::after {
        display: none;
    }
</style>
@endsection

@section('js')
<!-- FilePond Library & Plugins -->
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script>


<script src="{{ asset('assets/custom/js/common/file-manger.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
    // Global variables
    let selectedCategoryId = '';
    let selectedExpertId = '';
    let isLoadingExperts = false;
    let allCategories = @json($categories);
    let initialized = false;

    const urlParams = new URLSearchParams(window.location.search);
    const preselectedExpertId = urlParams.get('expert_id') ?? "{{ old('expert_id') }}";
    const preselectedCategoryId = urlParams.get('category_id') ?? "{{ old('expert_category_id') }}";

    document.addEventListener('DOMContentLoaded', function() {
        // Prevent multiple initializations
        if (initialized) return;
        initialized = true;
        
        // Initialize Select2 with proper cleanup
        initializeSelect2();
        
        // Initialize Summernote
        // initializeSummernote();
        
        // Initialize FilePond
        initializeFilePond();

        // Create toast container if it doesn't exist
        if (!document.getElementById('toast-container')) {
            const toastContainer = document.createElement('div');
            toastContainer.id = 'toast-container';
            toastContainer.className = 'toast-container';
            document.body.appendChild(toastContainer);
        }

        if (preselectedCategoryId) {
            selectedCategoryId = preselectedCategoryId;
            const categorySelect = document.getElementById('category-select');
            if (categorySelect) {
                categorySelect.value = preselectedCategoryId;
                onCategoryChange(categorySelect);
            }

            if (preselectedExpertId) {
                selectedExpertId = preselectedExpertId;
                setTimeout(() => {
                    console.log('selectExpert - 100',selectedExpertId)
                    selectExpert(selectedExpertId, { preselectedExpertId: true });
                }, 100);
            }
            
        }
    });

    function initializeSelect2() {
        // Destroy existing instances first
        if ($('.select2').data('select2')) {
            $('.select2').select2('destroy');
        }
        
        $('.select2').select2({
            theme: 'bootstrap-5',
            placeholder: "{{ __('labels.select') }}",
            allowClear: true,
            width: '100%',
            dropdownParent: document.body
        });
    }

    // Step 1: Category Selection with AJAX
    function onCategoryChange(select) {
        selectedCategoryId = select.value;
        
        if (selectedCategoryId) {
            document.getElementById('expert_category_id').value = selectedCategoryId;

            // Show loading state
            document.getElementById('experts-section').style.display = 'block';
            document.getElementById('experts-list').innerHTML = `
                <div class="col-12 text-center py-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2 text-muted">{{ __('messages.loading_experts') }}</p>
                </div>
            `;
            
            // Enable Step 2
            document.getElementById('step-2').classList.add('active');
            document.getElementById('step-1').classList.add('completed');
            
            // Reset continue button
            document.getElementById('continue-btn').disabled = true;
            
            // Fetch experts via AJAX
            fetchExpertsByCategory(selectedCategoryId);
        } else {
            // Hide experts section if no category selected
            document.getElementById('experts-section').style.display = 'none';
            document.getElementById('expert_id').value = '';
            document.getElementById('step-2').classList.remove('active');
            document.getElementById('step-1').classList.remove('completed');
        }
    }

    // AJAX function to fetch experts by category
    function fetchExpertsByCategory(categoryId) {
        const url = "{{ route('experts.by-category', ['categoryId' => ':categoryId']) }}".replace(':categoryId', categoryId);
        
        $.ajax({
            url: url,
            type: 'GET',
            dataType: 'json',
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            },
            success: function(response) {
                if (response.status) {
                    displayExperts(response.payload);

                    if (preselectedExpertId) {
                        selectExpert(preselectedExpertId, { preselectedExpertId: true });
                    }

                } else {
                    showError(response.message || '{{ __("messages.error_loading_experts") }}');
                }


            },
            error: function(xhr, status, error) {
                console.error('AJAX Error:', error);
                let errorMessage = '{{ __("messages.error_loading_experts") }}';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                showError(errorMessage);
            }
        });
    }

    // Display experts in the UI
    function displayExperts(experts) {
        const expertsList = document.getElementById('experts-list');
        
        if (!experts || experts.length === 0) {
            expertsList.innerHTML = `
                <div class="col-12">
                    <div class="alert alert-info text-center">
                        <i class="fas fa-info-circle me-2"></i>
                        {{ __('messages.no_experts_in_category') }}
                    </div>
                </div>
            `;
            return;
        }
        
        let expertsHtml = '';
        experts.forEach(expert => {
            // Sanitize strings for data attributes
            const expertName = (expert.user?.name || '').toLowerCase().replace(/"/g, '&quot;');
            const expertBio = (expert.bio || '').toLowerCase().replace(/"/g, '&quot;');
            const expertCompany = (expert.company || '').toLowerCase().replace(/"/g, '&quot;');
            
            expertsHtml += `
                <div class="col-md-6 expert-item" 
                     data-expert-id="${expert.id}" 
                     data-expert-name="${expertName}"
                     data-expert-bio="${expertBio}" 
                     data-expert-company="${expertCompany}" onclick="selectExpert(${expert.id})">
                    <div class="card expert-card h-100" >
                        <div class="card-body">
                            <div class="d-flex gap-3">
                                <div>
                                    ${expert.user?.profile_image ? 
                                        `<img src="${expert.user.profile_image}" class="expert-avatar" alt="${expert.user.name}">` : 
                                        `<div class="expert-initials bg-primary-opacity-10 text-primary">
                                            ${expert.user?.name ? expert.user.name.charAt(0).toUpperCase() : '?'}
                                        </div>`
                                    }
                                </div>
                                <div class="flex-grow-1">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <h6 class="mb-1">qw ${expert.user?.name || 'Unknown Expert'}</h6>
                                        <button class="btn btn-sm btn-link p-0 text-primary" onclick="showExpertInfo(${expert.id}, event)">
                                            <i class="fas fa-info-circle"></i>
                                        </button>
                                    </div>
                                    
                                    ${expert.bio ? 
                                        `<div class="small text-muted">${expert.bio}</div>` : ''}
                                        
                                    ${expert.company ? 
                                        `<div class="small text-muted">${expert.company}</div>` : ''}
                                    <div class="mt-2">
                                        <span class="badge bg-light text-dark">
                                            <i class="fas fa-star text-warning me-1"></i>
                                            ${expert.total_answers || 0} answers
                                        </span>
                                        <span class="badge bg-light text-dark">
                                            <i class="fas fa-thumbs-up text-success me-1"></i>
                                            ${expert.helpful_votes || 0} helpful
                                        </span>
                                    </div>
                                    ${expert.experience_years ? 
                                        `<div class="mt-1 small text-muted">
                                            <i class="fas fa-briefcase me-1"></i>${expert.experience_years} years experience
                                        </div>` : ''}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        });
            
        expertsList.innerHTML = expertsHtml;
        
        // If there was a previously selected expert in this category, highlight it
        if (selectedExpertId) {
            const previouslySelected = document.querySelector(`.expert-item[data-expert-id="${selectedExpertId}"] .expert-card`)
                                            ?.querySelector('.expert-card');
            if (previouslySelected) {
                previouslySelected.classList.add('selected');
            }
        }
    }

    // Show expert info (you can implement modal here)
    function showExpertInfo(expertId, event) {
        event.stopPropagation();
        window.open(`/experts/${expertId}`, '_blank', 'noopener,noreferrer');
    }

    // Update the selected expert card with the chosen expert's data
    function updateSelectedExpertCard(expert) {
        // Update name
        const nameElement = document.getElementById('selected-expert-name');
        if (nameElement) nameElement.textContent = expert.user?.name || expert.name || 'Expert';
        
        // Update bio
        const bioElement = document.getElementById('selected-expert-bio');
        if (bioElement) {
            bioElement.textContent = expert.bio || 'No bio available';
        }
        
        // Update company
        const companyElement = document.getElementById('selected-expert-company');
        if (companyElement) {
            companyElement.textContent = expert.company || 'Independent Expert';
        }
        
        // Update answers count
        const answersElement = document.getElementById('selected-expert-answers');
        if (answersElement) {
            answersElement.innerHTML = `
                <i class="fas fa-star text-warning me-1"></i>
                ${expert.total_answers || 0} answers
            `;
        }
        
        // Update votes count
        const votesElement = document.getElementById('selected-expert-votes');
        if (votesElement) {
            votesElement.innerHTML = `
                <i class="fas fa-thumbs-up text-success me-1"></i>
                ${expert.helpful_votes || 0} helpful
            `;
        }
        
        // Update experience
        const experienceElement = document.getElementById('selected-expert-experience');
        if (experienceElement) {
            if (expert.experience_years) {
                experienceElement.innerHTML = `
                    <i class="fas fa-briefcase me-1"></i>${expert.experience_years} years experience
                `;
                experienceElement.style.display = 'block';
            } else {
                experienceElement.style.display = 'none';
            }
        }
        
        // Update avatar
        const avatarContainer = document.getElementById('selected-expert-avatar');
        if (avatarContainer) {
            const profileImage = expert.user?.profile_image || expert.profile_image;
            const expertName = expert.user?.name || expert.name || 'Expert';
            
            if (profileImage) {
                avatarContainer.innerHTML = `
                    <img src="${profileImage}" class="expert-avatar" alt="${expertName}">
                `;
            } else {
                const initials = expertName.charAt(0).toUpperCase();
                avatarContainer.innerHTML = `
                    <div class="expert-initials bg-primary-opacity-10 text-primary">
                        ${initials}
                    </div>
                `;
            }
        }

        const infoButton = document.getElementById('selected-expert-info');
        if(infoButton)
        {
            infoButton.href = `/experts/${expert?.id}`;
        }
    }

    // Step 2: Expert Selection
    function selectExpert(expertId, options = {}) {

        console.log('selectExpert called with expertId:',expertId);
        // Remove selected class from all expert cards

        document.querySelectorAll('.expert-card').forEach(el => {
            el.classList.remove('selected');
        });
       
        

        const element = document.querySelector(`.expert-item[data-expert-id="${expertId}"]`)
                                ?.querySelector('.expert-card');

        // Add selected class to clicked card
        element.classList.add('selected');
        
        // Set expert_id field
        document.getElementById('expert_id').value = expertId;
        selectedExpertId = expertId;
        
        // Get the full expert data
        const expertItem = element.closest('.expert-item');
        if (expertItem) {
            // Extract expert data from the card
            const badges = element.querySelectorAll('.badge');
            const experienceEl = element.querySelector('.fa-briefcase')?.parentElement;
            
            const expertData = {
                id: expertId,
                name: expertItem.dataset.expertName || 'Expert',
                user: {
                    name: expertItem.dataset.expertName || 'Expert',
                    profile_image: element.querySelector('img')?.src || null
                },
                bio: expertItem.dataset.expertBio,
                company: expertItem.dataset.expertCompany,
                total_answers: badges.length > 0 ? parseInt(badges[0]?.textContent.match(/\d+/) || 0) : 0,
                helpful_votes: badges.length > 1 ? parseInt(badges[1]?.textContent.match(/\d+/) || 0) : 0,
                experience_years: experienceEl ? parseInt(experienceEl.textContent.match(/\d+/) || 0) : null
            };
            
            // Store for later use
            window.selectedExpertData = expertData;
            
            // Update the selected expert card (if visible)
            if (document.getElementById('question-form').style.display === 'block') {
                updateSelectedExpertCard(expertData);
            }
        }
        
        // Visual feedback
        element.style.transform = 'scale(1.02)';
        setTimeout(() => {
            element.style.transform = 'scale(1)';
        }, 200);
        
        // Enable Step 3
        document.getElementById('step-2').classList.add('completed');
        document.getElementById('step-3').classList.add('active');
        
        // Enable continue button
        document.getElementById('continue-btn').disabled = false;
        if (options.preselectedExpertId) {
            continueToQuestion();
            return;
        }
        // Show success message
        showNotification('Expert selected successfully!', 'success');
        continueToQuestion();
    }

    // Get selected category details
    function getSelectedCategoryDetails(categoryId) {
        const categorySelect = document.getElementById('category-select');
        const selectedOption = categorySelect.options[categorySelect.selectedIndex];
        
        // Also get the full category details from the categories array
        const fullCategory = allCategories.find(c => c.id == categoryId);
        
        return {
            id: categoryId,
            name: selectedOption ? selectedOption.text : (fullCategory?.name || 'Selected Category'),
            description: fullCategory?.description || ''
        };
    }

    // Get selected expert details
    function getSelectedExpertDetails(expertId) {
        // Try to get from DOM first
        const expertElement = document.querySelector(`.expert-item[data-expert-id="${expertId}"]`);
        
        if (expertElement) {
            return {
                id: expertId,
                name: expertElement.dataset.expertName || 'Expert',
                bio: expertElement.dataset.expertBio || '',
                company: expertElement.dataset.expertCompany || ''
            };
        }
        
        // If not in DOM, try to get from stored data
        if (window.selectedExpertData && window.selectedExpertData.id == expertId) {
            return window.selectedExpertData;
        }
        
        return { 
            id: expertId, 
            name: 'Selected Expert', 
            bio: '', 
            company: '' 
        };
    }

    // Step 3: Continue to Question Form
    function continueToQuestion() {
        console.log('continueToQuestion called - selectedCategoryId:', selectedCategoryId);
        console.log('selectedExpertId:', selectedExpertId);
        if (selectedCategoryId) {
            // Get selected category details
            const selectedCategory = getSelectedCategoryDetails(selectedCategoryId);
            
            // Get selected expert details
            const selectedExpert = selectedExpertId ? 
                (window.selectedExpertData || getSelectedExpertDetails(selectedExpertId)) : 
                null;
            
            // Update the question form with selected data
            if (selectedExpert) {
                updateSelectedExpertCard(selectedExpert);
            } else {
                // Hide the expert card or show empty state
                const expertCard = document.querySelector('#question-form .selected-info-card .');
                if (expertCard) {
                    expertCard.style.opacity = '0.5';
                }
            }
            
            // Update category display
            const categoryDisplay = document.getElementById('selected-category-display');
            if (categoryDisplay) {
                categoryDisplay.textContent = selectedCategory.name;
            }
            
            // Hide selection, show form
            document.getElementById('expert-selection').style.display = 'none';
            document.getElementById('question-form').style.display = 'block';
            
            // Scroll to form
            document.getElementById('question-form').scrollIntoView({ behavior: 'smooth' });
            
            // showNotification('{{ __("messages.ready_to_ask_question") }}', 'success');
        } else {
            showNotification('{{ __("messages.select_category_first") }}', 'error');
        }
    }

    // Skip expert selection
    function skipExpertSelection() {
        document.getElementById('expert_id').value = '';
        selectedExpertId = null;
        
        // Update step indicators
        document.getElementById('step-2').classList.add('completed');
        document.getElementById('step-3').classList.add('active');
        
        // Enable continue button
        document.getElementById('continue-btn').disabled = false;
        
        showNotification('{{ __("messages.skipped_expert_selection") }}', 'info');
    }

    // Change expert (go back to selection)
    function changeExpert() {
        // Show selection, hide form
        document.getElementById('question-form').style.display = 'none';
        document.getElementById('expert-selection').style.display = 'block';
        
        // Update step indicators
        document.getElementById('step-3').classList.remove('active');
        document.getElementById('step-2').classList.add('active');
        
        // Scroll back to selection
        document.getElementById('expert-selection').scrollIntoView({ behavior: 'smooth' });
        
        // Highlight previously selected expert if any
        if (selectedExpertId) {
            const selectedCard = document.querySelector(`.expert-item[data-expert-id="${selectedExpertId}"] .`);
            if (selectedCard) {
                selectedCard.classList.add('selected');
            }
        }
    }

    // Change category (go back to category selection)
    function changeCategory() {
        // Show selection, hide form
        document.getElementById('question-form').style.display = 'none';
        document.getElementById('expert-selection').style.display = 'block';
        
        // Reset to category selection step
        document.getElementById('step-1').classList.add('active');
        document.getElementById('step-2').classList.remove('active');
        document.getElementById('step-3').classList.remove('active');
        
        // Scroll back to selection
        document.getElementById('expert-selection').scrollIntoView({ behavior: 'smooth' });
    }

    // Reset selection
    function resetSelection() {
        selectedCategoryId = '';
        selectedExpertId = '';
        document.getElementById('category-select').value = '';
        
        // Safely destroy and reinitialize Select2
        if ($('#category-select').data('select2')) {
            $('#category-select').select2('destroy');
        }
        $('#category-select').select2({
            theme: 'bootstrap-5',
            placeholder: "{{ __('labels.select') }}",
            allowClear: true,
            width: '100%',
            dropdownParent: document.body
        });
        
        document.getElementById('experts-section').style.display = 'none';
        document.getElementById('expert_id').value = '';
        document.getElementById('continue-btn').disabled = true;
        
        // Reset steps
        document.getElementById('step-1').classList.remove('completed', 'active');
        document.getElementById('step-2').classList.remove('completed', 'active');
        document.getElementById('step-3').classList.remove('completed', 'active');
        document.getElementById('step-1').classList.add('active');
    }

    // Search function
    function searchExperts() {
        const searchInput = document.getElementById('expert-search');
        const searchTerm = searchInput.value.toLowerCase().trim();
        const expertItems = document.querySelectorAll('.expert-item');
        
        let visibleCount = 0;
        
        expertItems.forEach(item => {
            const name = item.dataset.expertName || '';
            const bio = item.dataset.expertBio || '';
            const company = item.dataset.expertCompany || '';
            
            if (name.includes(searchTerm) || bio.includes(searchTerm) || company.includes(searchTerm)) {
                item.style.display = 'block';
                visibleCount++;
            } else {
                item.style.display = 'none';
            }
        });
        
        // Show "no results" message if needed
        const expertsList = document.getElementById('experts-list');
        let noResultsMsg = document.getElementById('no-search-results');
        
        if (visibleCount === 0 && searchTerm !== '') {
            if (!noResultsMsg) {
                noResultsMsg = document.createElement('div');
                noResultsMsg.id = 'no-search-results';
                noResultsMsg.className = 'col-12 text-center py-5';
                noResultsMsg.innerHTML = `
                    <div class="text-muted">
                        <i class="fas fa-search fa-3x mb-3 opacity-50"></i>
                        <p>{{ __('messages.no_experts_found') }}</p>
                        <button class="btn btn-sm btn-link" onclick="clearSearch()">
                            {{ __('labels.
                             ') }}
                        </button>
                    </div>
                `;
                expertsList.appendChild(noResultsMsg);
            }
        } else if (noResultsMsg) {
            noResultsMsg.remove();
        }
    }

    // Clear search function
    function clearSearch() {
        const searchInput = document.getElementById('expert-search');
        searchInput.value = '';
        searchExperts();
        
        const noResultsMsg = document.getElementById('no-search-results');
        if (noResultsMsg) {
            noResultsMsg.remove();
        }
    }

    // Debounce function for search
    function debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }

    const debouncedSearch = debounce(searchExperts, 300);
</script>
<script>
</script>
@endsection

@push('pageTitle')
    {{ isset($expertQuestion) ? __('labels.edit_question') : __('labels.ask_expert') }}
@endpush

@section('content')
@include('components.common.page-header', [
    'pageTitle' => isset($expertQuestion) ? __('labels.edit_question') : __('labels.ask_expert'),
    'actionButton' => [
        'url' => route('expert-questions.index'),
        'text' => __('labels.back_to_questions'),
    ],
])

@include('components.common.flush-message')
@include('components.common.validation-errors')

{{-- Expert Selection Step --}}
@if(!isset($expertQuestion))
    <div id="expert-selection" class="card mb-4">
        <div class="card-header">
            <h5 class="card-title mb-0">{{ __('labels.select_expert') }}</h5>
        </div>
        <div class="card-body">
            {{-- Step Indicator --}}
            <div class="step-indicator">
                <div class="step active" id="step-1">
                    <div class="step-number">1</div>
                    <div class="step-label">{{ __('labels.choose_category') }}</div>
                </div>
                <div class="step" id="step-2">
                    <div class="step-number">2</div>
                    <div class="step-label">{{ __('labels.choose_expert') }}</div>
                </div>
                <div class="step" id="step-3">
                    <div class="step-number">3</div>
                    <div class="step-label">{{ __('labels.ask_question') }}</div>
                </div>
            </div>
            
            {{-- Step 1: Category Selection --}}
            <div class="mb-4">
                <label class="form-label fw-semibold">{{ __('labels.select_category_first') }}</label>
                <select class="form-select select2" id="category-select" onchange="onCategoryChange(this)">
                    <option value="">{{ __('labels.choose_category') }}</option>
                    @foreach($categories as $category)
                        <option value="{{ $category->id }}"
                        {{ old('expert_category_id', $expertQuestion->expert_category_id ?? '') == $category->id ? 'selected' : '' }}
                        >{{ $category->name }}</option>
                    @endforeach
                </select>
                <small class="text-muted">{{ __('messages.select_category_to_see_experts') }}</small>
            </div>
            
            {{-- Step 2: Experts List (Hidden until category selected) --}}
            <div id="experts-section" style="display: none;">
                <hr>
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div>
                        <h6 class="fw-semibold mb-1">{{ __('labels.available_experts') }}</h6>
                        <p class="text-muted small mb-0">{{ __('messages.select_expert_help') }}</p>
                    </div>
                    <div class="ms-3" style="min-width: 250px;">
                        <div class="input-group">
                            <span class="input-group-text bg-light border-end-0">
                                <i class="fas fa-search text-muted"></i>
                            </span>
                            <input type="text" 
                                class="form-control border-start-0 ps-0" 
                                id="expert-search" 
                                placeholder="{{ __('labels.search_experts') }}" 
                                onkeyup="debouncedSearch()">
                            <button class="btn btn-outline-secondary" type="button" onclick="clearSearch()">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="row g-3 experts-list" id="experts-list">
                    {{-- Will be populated by JavaScript --}}
                </div>
                
                <div class="d-flex justify-content-end align-items-center mt-4">
                    {{-- // <button type="button" class="btn btn-link text-muted" onclick="skipExpertSelection()">
                    //     {{ __('labels.skip_expert_selection') }}
                    // </button>
                    --}}
                    <div>
                        <button type="button" id="continue-btn" class="btn btn-primary" onclick="continueToQuestion()" disabled>
                            {{ __('labels.continue') }} <i class="fas fa-arrow-right ms-1"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif

{{-- Question Form --}}
<div id="question-form" style="{{ !isset($expertQuestion) ? 'display: none;' : '' }}">
    <form action="{{ isset($expertQuestion) ? route('expert-questions.update', $expertQuestion) : route('expert-questions.store') }}" 
          method="POST" enctype="multipart/form-data">
        @csrf
        @if(isset($expertQuestion))
            @method('PUT')
        @endif

        <div class="row">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">{{ __('labels.ask_question') }}</h5>
                    </div>
                    <div class="card-body">
                        <input type="hidden" name="id" value="{{ $expertQuestion->id ?? '' }}" />

                        <input type="hidden" name="expert_id" id="expert_id" value="{{ old('expert_id', $expertQuestion->expert_id ?? request('expert_id')) }}" />
                        <input type="hidden" name="expert_category_id" id="expert_category_id" value="{{ old('expert_category_id', $expertQuestion->expert_category_id ?? request('expert_category_id')) }}" />
                    
                        <div class="row mb-4">
                            <div class="col-md-12">
                                <div class="card bg-light selected-info-card">
                                    <div class="card-body py-2">
                                        <small class="text-muted">{{ __('labels.selected_category') }}</small>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="fw-semibold" id="selected-category-display">
                                                {{ $expertQuestion->category->name ?? '' }} 
                                            </span>
                                            @if(!isset($expertQuestion))
                                            <button type="button" class="btn btn-sm btn-link" onclick="changeCategory()">
                                                <i class="fas fa-edit"></i> {{ __('labels.change') }}
                                            </button>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="card bg-light selected-info-card">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <small class="text-muted">{{ __('labels.selected_expert') }}</small>
                                            @if(!isset($expertQuestion))
                                            <button type="button" class="btn btn-sm btn-link" onclick="changeExpert()">
                                                <i class="fas fa-edit"></i> {{ __('labels.change') }}
                                            </button>
                                            @endif
                                        </div>
                                        <div class="card  h-100" style="cursor: default;" onclick="event.stopPropagation()">
                                            <div class="card-body">
                                                <div class="d-flex gap-3">
                                                    <div id="selected-expert-avatar">
                                                        @if(isset($expertQuestion?->expert))
                                                            @if(isset($expertQuestion?->expert?->user?->profile_image))
                                                                <img src="{{ $expertQuestion?->expert?->user?->profile_image }}" class="expert-avatar" alt="Expert">
                                                            @else
                                                                <div class="expert-initials bg-primary-opacity-10 text-primary">
                                                                    {{ $expertQuestion?->expert?->user?->name ? strtoupper(substr($expertQuestion?->expert?->user?->name, 0, 1)) : '?' }}
                                                                </div>
                                                            @endif
                                                        @else
                                                            <img src="{{ asset('assets/images/no-img-avatar.png') }}" class="expert-avatar" alt="Expert">
                                                        @endif
                                                    </div>
                                                    <div class="flex-grow-1">
                                                        <div class="d-flex justify-content-between align-items-start">
                                                            <h6 class="mb-1" id="selected-expert-name">{{ $expertQuestion->expert->user->name ?? __('labels.expert_name') }} </h6>
                                                            <a class="btn btn-sm btn-link p-0 text-primary" id="selected-expert-info"
                                                                href="/experts/{{ $expertQuestion->expert_id ?? '' }}" 
                                                                target='_blank'>
                                                                <i class="fas fa-info-circle"></i>
                                                            </a>
                                                        </div>
                                                        <div class="small text-muted" id="selected-expert-bio">
                                                            {{ $expertQuestion->expert->bio ?? '' }}
                                                        </div>
                                                        <div class="small text-muted" id="selected-expert-company">
                                                            {{ $expertQuestion->expert->company ?? '' }}
                                                        </div>
                                                        <div class="mt-2">
                                                            <span class="badge bg-light text-dark" id="selected-expert-answers">
                                                                <i class="fas fa-star text-warning me-1"></i>
                                                                {{ $expertQuestion->expert->total_answers ?? '0' }} answers
                                                            </span>
                                                            <span class="badge bg-light text-dark" id="selected-expert-votes">
                                                                <i class="fas fa-thumbs-up text-success me-1"></i>
                                                                {{ $expertQuestion->expert->helpful_votes ?? '0' }} helpful
                                                            </span>
                                                        </div>
                                                        <div class="mt-1 small text-muted" id="selected-expert-experience">
                                                            <i class="fas fa-briefcase me-1"></i>{{ $expertQuestion->expert->experience_years ?? '0' }} years experience
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label for="title" class="col-md-2 col-form-label">
                                {{ __('labels.title') }} <span class="text-danger">*</span>
                            </label>
                            <div class="col-md-10">
                                <input class="form-control @error('title') is-invalid @enderror" 
                                       type="text" name="title" 
                                       value="{{ old('title', $expertQuestion->title ?? '') }}" 
                                       placeholder="{{ __('labels.enter_question_title') }}" required>
                                @error('title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">{{ __('messages.question_title_help') }}</small>
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label for="question" class="col-md-2 col-form-label">
                                {{ __('labels.description') }} <span class="text-danger">*</span>
                            </label>
                            <div class="col-md-10">
                                <textarea class="form-control @error('question') is-invalid @enderror" 
                                          name="question" id="question" rows="6" required>{{ old('question', $expertQuestion->question ?? '') }}</textarea>
                                @error('question')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                {{-- <small class="text-muted">{{ __('messages.question_details') }}</small> --}}
                            </div>
                        </div>
                    </div>
                </div>


                {{-- File Manager --}}
                @isset($expertQuestion->assets)
                    @include('components.form.file-manager.existing-files', [
                        'readonly' => isset($readonly) && $readonly,
                        'assets' => $expertQuestion->assets,
                    ])
                @endisset

                @if (!isset($readonly) || !$readonly)
                    @include('components.form.file-manager.upload-files')
                @endif


                @if (!isset($readonly) || !$readonly)
                    <div class="text-end mt-3">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i>
                            <i class="fas fa-paper-plane me-1"></i>{{ isset($expertQuestion) ? __('labels.update') : __('labels.submit_question') }}
                        </button>
                        <a href="{{ route('expert-questions.index') }}" class="btn btn-secondary">
                            {{ __('labels.cancel') }}
                        </a>
                    </div>
                @endif


            </div>
        </div>
    </form>
</div>
@endsection