@extends('admin.layouts.app')

@section('content')

<form method="POST" id="survey-question-form" action="{{ isset($question) && $question->id ? route('admin.survey.questions.update', $question->id) : route('admin.survey.questions.store') }}">
    @csrf
    @if(isset($question) && $question->id)
    @method('PUT')
    @endif

    <div class="row">
        <div class="col-xl-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
                <h4 class="mb-sm-0">{{ isset($question) && $question->id ? __('admin/survey.edit_question') : __('admin/survey.create_question') }}</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">{{ __('admin/survey.survey_questions') }}</a></li>
                        <li class="breadcrumb-item active">{{ isset($question) && $question->id ? __('admin/survey.edit') : __('admin/survey.create') }}</li>
                    </ol>
                </div>
            </div>

            <!-- Menu bar -->
            <div class="col-lg-12 sticky-menu-bar">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex align-items-center flex-wrap gap-2">
                            <div class="flex-grow-1">
                                <a href="{{ route('admin.survey.questions.index') }}" class="btn btn-light me-2">{{ __('admin/survey.close') }}</a>
                                <button type="submit" class="btn btn-info add-btn" id="savequestion" data-bs-loading-text="{{ __('admin/survey.saving') }}">
                                    <i class="ri-save-line me-1 align-bottom"></i> {{ __('admin/survey.save') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            @if ($errors->any())
            <div class="row">
                <div class="col-lg-12">
                    <div class="alert alert-danger">
                        <h5 class="alert-heading">{{ __('admin/survey.validation_errors') }}</h5>
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
            @endif

            <div class="row">
                <!-- Contenu principal -->
                <div class="col-lg-8">
                    <!-- Onglets de langues -->
                    <div class="card">
                        <div class="card-header">
                            <ul class="nav nav-tabs-custom rounded card-header-tabs border-bottom-0" role="tablist">
                                @foreach(config('translatable.locales') as $index => $locale)
                                <li class="nav-item">
                                    <a class="nav-link {{ $index === 0 ? 'active' : '' }}" data-bs-toggle="tab" href="#{{ $locale }}" role="tab">
                                        {{ strtoupper($locale) }}
                                        <span class="tab-error-indicator d-none text-danger ms-1" id="error-{{ $locale }}">●</span>
                                    </a>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="card-body p-4">
                            <div class="tab-content">
                                @foreach(config('translatable.locales') as $index => $locale)
                                <div class="tab-pane {{ $index === 0 ? 'active' : '' }}" id="{{ $locale }}" role="tabpanel">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="mb-3">
                                                <label class="form-label" for="question_text_{{ $locale }}">{{ __('admin/survey.question_text') }} ({{ strtoupper($locale) }}) <span class="text-danger">*</span></label>
                                                <textarea class="form-control @error($locale.'.question_text') is-invalid @enderror"
                                                    id="question_text_{{ $locale }}" name="{{ $locale }}[question_text]"
                                                    rows="3" placeholder="{{ __('admin/survey.question_text_placeholder', ['locale' => strtoupper($locale)]) }}">{{ old($locale.'.question_text', isset($question) ? $question->translate($locale)?->question_text : '') }}</textarea>
                                                @error($locale.'.question_text')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Options pour les questions à choix multiples -->
                                    <div class="options-section" id="options-section-{{ $locale }}" style="display: none;">
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="mb-3">
                                                    <label class="form-label">{{ __('admin/survey.answer_options') }} ({{ strtoupper($locale) }})</label>
                                                    <div id="{{ $locale }}-options-container">
                                                        @php
                                                            $options = old($locale.'.options', []);
                                                            if(isset($question) && empty($options)) {
                                                                $options = $question->getOptions($locale);
                                                            }
                                                            if(empty($options)) {
                                                                $options = ['', ''];
                                                            }
                                                        @endphp
                                                        
                                                        @foreach($options as $index => $option)
                                                        <div class="input-group mb-2 option-row">
                                                            <span class="input-group-text">{{ $index + 1 }}</span>
                                                            <input type="text" class="form-control" 
                                                                   name="{{ $locale }}[options][]" 
                                                                   placeholder="{{ __('admin/survey.option_placeholder', ['number' => $index + 1]) }}"
                                                                   value="{{ $option }}">
                                                            <button type="button" class="btn btn-outline-danger remove-option" title="{{ __('admin/survey.remove_option') }}">
                                                                <i class="ri-delete-bin-line"></i>
                                                            </button>
                                                        </div>
                                                        @endforeach
                                                    </div>
                                                    <button type="button" class="btn btn-outline-primary btn-sm add-option" data-locale="{{ $locale }}">
                                                        <i class="ri-add-line"></i> {{ __('admin/survey.add_option') }}
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <!-- Aperçu de la question -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/survey.question_preview') }}</h5>
                        </div>
                        <div class="card-body p-4">
                            <div id="question-preview">
                                <p class="text-muted">{{ __('admin/survey.select_question_type_for_preview') }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="col-lg-4">
                    <!-- Configuration -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/survey.configuration') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="question_type_id" class="form-label">{{ __('admin/survey.question_type') }} <span class="text-danger">*</span></label>
                                <select class="form-control @error('question_type_id') is-invalid @enderror" 
                                        id="question_type_id" name="question_type_id" required>
                                    <option value="">{{ __('admin/survey.select_type') }}</option>
                                    @foreach($questionTypes as $type)
                                    <option value="{{ $type->id }}" 
                                            data-code="{{ $type->type_code }}"
                                            {{ old('question_type_id', isset($question) ? $question->question_type_id : '') == $type->id ? 'selected' : '' }}>
                                        {{ $type->type_name }} - {{ $type->type_description }}
                                    </option>
                                    @endforeach
                                </select>
                                @error('question_type_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <div class="form-check form-switch form-switch-md">
                                    <input class="form-check-input" type="checkbox" name="is_required" id="is_required" value="1"
                                        {{ old('is_required', (isset($question) ? $question->is_required : false)) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_required">
                                        {{ __('admin/survey.required_question') }}
                                    </label>
                                </div>
                            </div>

                            <div class="mb-3">
                                <div class="form-check form-switch form-switch-md">
                                    <input class="form-check-input" type="checkbox" name="is_active" id="is_active" value="1"
                                        {{ old('is_active', (isset($question) ? $question->is_active : true)) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_active">
                                        {{ __('admin/survey.active_question') }}
                                    </label>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="order_position" class="form-label">{{ __('admin/survey.order_position') }}</label>
                                <input type="number" id="order_position" name="order_position"
                                    class="form-control @error('order_position') is-invalid @enderror"
                                    value="{{ old('order_position', isset($question) ? $question->order_position : 999) }}"
                                    min="0" step="1">
                                <small class="text-muted">{{ __('admin/survey.order_position_help') }}</small>
                                @error('order_position')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    @if(isset($question) && $question->id)
                    <!-- Informations -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/survey.informations') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-2">
                                <small class="text-muted">{{ __('admin/survey.created_at') }}</small>
                                <div>{{ $question->created_at->format('d/m/Y à H:i') }}</div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">{{ __('admin/survey.updated_at') }}</small>
                                <div>{{ $question->updated_at->format('d/m/Y à H:i') }}</div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">{{ __('admin/survey.responses_count') }}</small>
                                <div>{{ $question->responses()->count() }}</div>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</form>

<!-- Toast messages -->
<x-admin.toast-messages />

@endsection

@push('script')
<script>
// Configuration des locales
window.translatableLocales = {!! json_encode(config('translatable.locales')) !!};

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('survey-question-form');
    const submitBtn = document.getElementById('savequestion');
    const originalContent = submitBtn.innerHTML;
    const questionTypeSelect = document.getElementById('question_type_id');
    const questionPreview = document.getElementById('question-preview');
    
    function resetButton() {
        submitBtn.innerHTML = originalContent;
        submitBtn.disabled = false;
    }

    function showSpinner() {
        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status"></span>{{ __("admin/survey.saving") }}';
        submitBtn.disabled = true;
    }

    // Gestion du type de question
    function handleQuestionTypeChange() {
        const selectedOption = questionTypeSelect.options[questionTypeSelect.selectedIndex];
        const typeCode = selectedOption.getAttribute('data-code');
        
        // Afficher/masquer les options selon le type
        const optionsSections = document.querySelectorAll('.options-section');
        
        if (['radio', 'checkbox', 'yesno'].includes(typeCode)) {
            optionsSections.forEach(section => {
                section.style.display = 'block';
            });
            
            // Pour Yes/No, pré-remplir les options
            if (typeCode === 'yesno') {
                populateYesNoOptions();
            }
        } else {
            optionsSections.forEach(section => {
                section.style.display = 'none';
            });
        }
        
        // Mettre à jour l'aperçu
        updatePreview(typeCode);
    }

    // Pré-remplir les options pour Yes/No
    function populateYesNoOptions() {
        const locales = window.translatableLocales;
        
        locales.forEach(function(locale) {
            const container = document.getElementById(locale + '-options-container');
            const currentOptions = container.querySelectorAll('input[type="text"]');
            
            if (currentOptions.length === 0 || (currentOptions[0].value === '' && currentOptions[1].value === '')) {
                // Vider le conteneur
                container.innerHTML = '';
                
                // Ajouter les options Oui/Non selon la langue
                const yesNoOptions = locale === 'fr' ? ['{{ __("admin/survey.yes") }}', '{{ __("admin/survey.no") }}'] : ['Yes', 'No'];
                
                yesNoOptions.forEach(function(option, index) {
                    const optionHtml = `
                        <div class="input-group mb-2 option-row">
                            <span class="input-group-text">${index + 1}</span>
                            <input type="text" class="form-control" 
                                   name="${locale}[options][]" 
                                   placeholder="{{ __('admin/survey.option_placeholder', ['number' => '${index + 1}']) }}"
                                   value="${option}">
                            <button type="button" class="btn btn-outline-danger remove-option" title="{{ __('admin/survey.remove_option') }}">
                                <i class="ri-delete-bin-line"></i>
                            </button>
                        </div>
                    `;
                    container.insertAdjacentHTML('beforeend', optionHtml);
                });
            }
        });
    }

    // Mettre à jour l'aperçu
    function updatePreview(typeCode) {
        const questionTextFr = document.querySelector('textarea[name="fr[question_text]"]');
        const questionText = questionTextFr ? (questionTextFr.value || '{{ __("admin/survey.your_question_will_appear_here") }}') : '{{ __("admin/survey.your_question_will_appear_here") }}';
        let previewHtml = `<strong>${questionText}</strong><br><br>`;
        
        switch(typeCode) {
            case 'text':
                previewHtml += '<input type="text" class="form-control" placeholder="{{ __('admin/survey.short_answer') }}" disabled>';
                break;
            case 'textarea':
                previewHtml += '<textarea class="form-control" rows="3" placeholder="{{ __('admin/survey.long_answer') }}" disabled></textarea>';
                break;
            case 'radio':
            case 'yesno':
                const radioOptions = getOptionsForLocale('fr');
                if (radioOptions.length > 0) {
                    radioOptions.forEach(function(option, index) {
                        if (option.trim() !== '') {
                            previewHtml += `
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="preview_radio" id="preview_radio_${index}" disabled>
                                    <label class="form-check-label" for="preview_radio_${index}">${option}</label>
                                </div>
                            `;
                        }
                    });
                }
                break;
            case 'checkbox':
                const checkboxOptions = getOptionsForLocale('fr');
                if (checkboxOptions.length > 0) {
                    checkboxOptions.forEach(function(option, index) {
                        if (option.trim() !== '') {
                            previewHtml += `
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="preview_checkbox_${index}" disabled>
                                    <label class="form-check-label" for="preview_checkbox_${index}">${option}</label>
                                </div>
                            `;
                        }
                    });
                }
                break;
            case 'scale5':
                previewHtml += '<div class="d-flex gap-3">';
                for (let i = 1; i <= 5; i++) {
                    previewHtml += `
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="preview_scale5" id="preview_scale5_${i}" disabled>
                            <label class="form-check-label" for="preview_scale5_${i}">${i}</label>
                        </div>
                    `;
                }
                previewHtml += '</div><small class="text-muted">{{ __("admin/survey.scale_5_help") }}</small>';
                break;
            case 'scale10':
                previewHtml += '<div class="d-flex gap-2">';
                for (let i = 1; i <= 10; i++) {
                    previewHtml += `
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="preview_scale10" id="preview_scale10_${i}" disabled>
                            <label class="form-check-label" for="preview_scale10_${i}">${i}</label>
                        </div>
                    `;
                }
                previewHtml += '</div><small class="text-muted">{{ __("admin/survey.scale_10_help") }}</small>';
                break;
            default:
                previewHtml = '<p class="text-muted">{{ __("admin/survey.select_question_type_for_preview") }}</p>';
        }
        
        questionPreview.innerHTML = previewHtml;
    }

    // Récupérer les options pour une langue donnée
    function getOptionsForLocale(locale) {
        const inputs = document.querySelectorAll(`input[name="${locale}[options][]"]`);
        return Array.from(inputs).map(input => input.value);
    }

    // Gestion des options
    function addOption(locale) {
        const container = document.getElementById(locale + '-options-container');
        const currentOptions = container.querySelectorAll('.option-row');
        const newIndex = currentOptions.length + 1;
        
        const optionHtml = `
            <div class="input-group mb-2 option-row">
                <span class="input-group-text">${newIndex}</span>
                <input type="text" class="form-control" 
                       name="${locale}[options][]" 
                       placeholder="{{ __('admin/survey.option_placeholder', ['number' => '${newIndex}']) }}">
                <button type="button" class="btn btn-outline-danger remove-option" title="{{ __('admin/survey.remove_option') }}">
                    <i class="ri-delete-bin-line"></i>
                </button>
            </div>
        `;
        
        container.insertAdjacentHTML('beforeend', optionHtml);
        updateOptionNumbers(locale);
    }

    function removeOption(button) {
        const optionRow = button.closest('.option-row');
        const container = optionRow.parentNode;
        const locale = container.id.replace('-options-container', '');
        
        optionRow.remove();
        updateOptionNumbers(locale);
    }

    function updateOptionNumbers(locale) {
        const container = document.getElementById(locale + '-options-container');
        const options = container.querySelectorAll('.option-row');
        
        options.forEach(function(option, index) {
            const numberSpan = option.querySelector('.input-group-text');
            const input = option.querySelector('input');
            numberSpan.textContent = index + 1;
            input.placeholder = `{{ __("admin/survey.option") }} ${index + 1}`;
        });
    }

    // Event listeners
    questionTypeSelect.addEventListener('change', handleQuestionTypeChange);

    // Ajouter une option
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('add-option') || e.target.closest('.add-option')) {
            e.preventDefault();
            const button = e.target.classList.contains('add-option') ? e.target : e.target.closest('.add-option');
            const locale = button.getAttribute('data-locale');
            addOption(locale);
        }
    });

    // Supprimer une option
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('remove-option') || e.target.closest('.remove-option')) {
            e.preventDefault();
            const button = e.target.classList.contains('remove-option') ? e.target : e.target.closest('.remove-option');
            removeOption(button);
        }
    });

    // Mettre à jour l'aperçu quand le texte de la question change
    document.addEventListener('input', function(e) {
        if (e.target.name === 'fr[question_text]' || (e.target.name && e.target.name.includes('[options][]'))) {
            const selectedOption = questionTypeSelect.options[questionTypeSelect.selectedIndex];
            const typeCode = selectedOption.getAttribute('data-code');
            if (typeCode) {
                updatePreview(typeCode);
            }
        }
    });

    // Validation du formulaire
    function validateForm() {
        let isValid = true;
        
        // Vérifier que le type de question est sélectionné
        if (!questionTypeSelect.value) {
            questionTypeSelect.classList.add('is-invalid');
            isValid = false;
        } else {
            questionTypeSelect.classList.remove('is-invalid');
        }
        
        // Vérifier que les textes de question sont remplis
        const questionInputs = document.querySelectorAll('textarea[name$="[question_text]"]');
        questionInputs.forEach(function(input) {
            if (!input.value.trim()) {
                input.classList.add('is-invalid');
                isValid = false;
            } else {
                input.classList.remove('is-invalid');
            }
        });
        
        // Vérifier les options pour les types qui en ont besoin
        const selectedOption = questionTypeSelect.options[questionTypeSelect.selectedIndex];
        const typeCode = selectedOption.getAttribute('data-code');
        
        if (['radio', 'checkbox', 'yesno'].includes(typeCode)) {
            const locales = window.translatableLocales;
            
            locales.forEach(function(locale) {
                const optionInputs = document.querySelectorAll(`input[name="${locale}[options][]"]`);
                let hasValidOption = false;
                
                optionInputs.forEach(function(input) {
                    if (input.value.trim()) {
                        hasValidOption = true;
                        input.classList.remove('is-invalid');
                    }
                });
                
                if (!hasValidOption) {
                    optionInputs.forEach(function(input) {
                        input.classList.add('is-invalid');
                    });
                    isValid = false;
                }
            });
        }
        
        return isValid;
    }

    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        if (!validateForm()) {
            alert('{{ __("admin/survey.please_fill_all_required_fields") }}');
            return false;
        }

        showSpinner();
        
        // Soumettre le formulaire
        setTimeout(function() {
            form.submit();
        }, 100);

        setTimeout(() => {
            if (submitBtn.disabled) {
                resetButton();
            }
        }, 10000);
    });

    // Initialiser l'affichage au chargement
    handleQuestionTypeChange();
});    
</script>
@endpush