@extends('admin.layouts.app')

@section('content')
<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">{{ __('admin/survey.survey_management') }}</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">{{ __('admin/survey.survey') }}</a></li>
                    <li class="breadcrumb-item active">{{ __('admin/survey.management') }}</li>
                </ol>
            </div>
        </div>

        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col-md-4">
                            <div class="position-relative">
                                <input type="text" class="form-control" id="searchInput" placeholder="{{ __('admin/survey.search_session_placeholder') }}" autocomplete="off">
                                <i class="ri-search-line position-absolute" style="right: 12px; top: 50%; transform: translateY(-50%); color: #6c757d; pointer-events: none;"></i>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <button type="button" class="btn btn-light" id="clearSearch">
                                <i class="ri-close-line me-1"></i> {{ __('admin/survey.clear_search') }}
                            </button>
                        </div>
                        <div class="col-md-6 text-end">
                            <a href="{{ route('admin.survey.management.archive') }}" class="btn btn-primary">
                                <i class="ri-archive-line me-1"></i> {{ __('admin/survey.view_archive') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-12">
            <div class="card">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">{{ __('admin/survey.training_sessions') }}</h4>
                </div>

                <div class="card-body">
                    @if($trainings->where('sessions', '!=', collect())->isNotEmpty())
                        <div class="table-responsive table-card">
                            <table class="table align-middle table-nowrap mb-0" id="sessionsTable">
                                <thead class="table-light">
                                    <tr>
                                        <th scope="col" style="width: 40%;">{{ __('admin/survey.training_session') }}</th>
                                        <th scope="col">{{ __('admin/survey.dates') }}</th>
                                        <th scope="col">{{ __('admin/survey.qr_code') }}</th>
                                        <th scope="col">{{ __('admin/survey.responses') }}</th>
                                        <th scope="col" class="text-end">{{ __('admin/survey.actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($trainings as $training)
                                        @if($training->sessions->isNotEmpty())
                                            <tr class="table-active training-header" data-training-id="{{ $training->id }}">
                                                <td colspan="5">
                                                    <h6 class="mb-0 fw-bold text-primary">
                                                        <i class="ri-book-line me-2"></i>
                                                        <span class="training-title">{{ $training->translate()->title }}</span>
                                                    </h6>
                                                </td>
                                            </tr>
                                            
                                            @foreach($training->sessions as $session)
                                            <tr class="session-row" data-training-id="{{ $training->id }}" data-session-id="{{ $session->id }}">
                                                <td>
                                                    <div class="ms-4">
                                                        <h6 class="mb-1 session-name"> 
                                                            <small>({{ $session->id }})</small> {{ $session->name }}
                                                        </h6>
                                                        @if($session->seats_available)
                                                            <small class="text-muted session-seats">{{ $session->seats_available }} {{ __('admin/survey.seats') }}</small>
                                                        @endif
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="session-date">{{ \Carbon\Carbon::parse($session->start_date)->format('d/m/Y') }}</div>
                                                    @if($session->end_date && $session->end_date != $session->start_date)
                                                        <small class="text-muted">{{ __('admin/survey.to') }} {{ \Carbon\Carbon::parse($session->end_date)->format('d/m/Y') }}</small>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($session->qrCode && $session->qrCode->is_active)
                                                        <span class="badge bg-success-subtle text-success">
                                                            <i class="ri-qr-code-line me-1"></i>{{ __('admin/survey.generated') }}
                                                        </span>
                                                        <div>
                                                            <small class="text-muted">{{ $session->qrCode->created_at->format('d/m/Y H:i') }}</small>
                                                        </div>
                                                    @else
                                                        <span class="badge bg-secondary">{{ __('admin/survey.none') }}</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    @php
                                                        $responsesCount = $session->surveySubmissions ? $session->surveySubmissions->count() : 0;
                                                    @endphp
                                                    @if($responsesCount > 0)
                                                        <span class="badge bg-primary">{{ $responsesCount }}</span>
                                                    @else
                                                        <span class="text-muted">0</span>
                                                    @endif
                                                </td>
                                                <td class="text-end">
                                                    <div class="gap-1 d-flex justify-content-md-end">
                                                        @if(!$session->qrCode || !$session->qrCode->is_active)
                                                            <button class="btn btn-success btn-sm manage-questions-btn" 
                                                                    data-session-id="{{ $session->id }}">
                                                                <i class="ri-settings-3-line me-1"></i>{{ __('admin/survey.manage_questions') }}
                                                            </button>
                                                        @else
                                                            <a href="{{ route('survey.qr.display', $session->qrCode->qr_token) }}" class=" btn-icon bg-info-subtle text-info" target="_blank"
                                                               data-bs-toggle="tooltip" data-bs-placement="top" title="{{ __('admin/survey.view_qr') }}">
                                                                <i class="ri-eye-line"></i>
                                                            </a>

                                                            <button type="button" class="btn btn-icon bg-success-subtle text-success manage-questions-btn" 
                                                                    data-session-id="{{ $session->id }}"
                                                                    data-bs-toggle="tooltip" data-bs-placement="top" title="{{ __('admin/survey.manage_questions') }}">
                                                                <i class="ri-settings-3-line"></i>
                                                            </button>                                                            
                                                            

                                                            <!-- <button class="btn btn-icon bg-primary-subtle text-primary border-0 {{ $responsesCount > 0 ? '' : 'disabled' }} show-responses-btn" 
                                                                    data-session-id="{{ $session->id }}"
                                                                    {{ $responsesCount == 0 ? 'disabled' : '' }}
                                                                    data-bs-toggle="tooltip" data-bs-placement="top" title="{{ __('admin/survey.view_responses') }}">
                                                                <i class="ri-file-list-3-line"></i>
                                                            </button> -->
                                                            <span data-bs-toggle="tooltip" 
                                                                data-bs-placement="top" 
                                                                title="{{ $responsesCount > 0 ? __('admin/survey.view_responses') : __('admin/survey.no_responses') }}">
                                                                <button class="btn btn-icon bg-primary-subtle text-primary border-0 {{ $responsesCount > 0 ? '' : 'disabled' }} show-responses-btn" 
                                                                        data-session-id="{{ $session->id }}"
                                                                        {{ $responsesCount == 0 ? 'disabled' : '' }}
                                                                        style="{{ $responsesCount == 0 ? 'pointer-events: none;' : '' }}">
                                                                    <i class="ri-file-list-3-line"></i>
                                                                </button>
                                                            </span>

                                                            
                                                            @if($responsesCount > 0)
                                                                <a class="btn btn-icon bg-warning-subtle text-warning" 
                                                                   href="{{ route('admin.survey.management.export', $session) }}"
                                                                   data-bs-toggle="tooltip" data-bs-placement="top" title="{{ __('admin/survey.export_responses') }}">
                                                                    <i class="ri-download-line"></i>
                                                                </a>
                                                            @endif
                                                            

                                                            <button class="btn btn-icon bg-danger-subtle text-danger delete-qr-btn" 
                                                                    data-session-id="{{ $session->id }}"
                                                                    data-session-name="{{ $session->name }}"
                                                                    data-bs-toggle="tooltip" data-bs-placement="top" title="{{ __('admin/survey.delete_qr') }}">
                                                                <i class="ri-delete-bin-line"></i>
                                                            </button>
                                                        @endif
                                                    </div>
                                                </td>
                                            </tr>
                                            @endforeach
                                        @endif
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div class="text-center py-5" id="noResultsMessage" style="display: none;">
                            <i class="ri-search-line fs-1 text-muted mb-3 d-block"></i>
                            <h5 class="text-muted">{{ __('admin/survey.no_session_found') }}</h5>
                            <p class="text-muted">{{ __('admin/survey.try_different_search_terms') }}</p>
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="ri-calendar-line fs-1 text-muted mb-3 d-block"></i>
                            <h5 class="text-muted">{{ __('admin/survey.no_upcoming_sessions') }}</h5>
                            <p class="text-muted">{{ __('admin/survey.no_upcoming_sessions_desc') }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="manageQuestionsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white1 pb-3">
                <h5 class="modal-title text-white">
                    <i class="ri-settings-3-line me-2"></i>{{ __('admin/survey.manage_session_questions') }}
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="alert alert-info">
                            <i class="ri-information-line me-2"></i>
                            <strong>{{ __('admin/survey.information_label') }}</strong> {{ __('admin/survey.session_questions_info_detail') }}
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <button type="button" class="btn btn-primary" id="add-session-question-btn">
                        <i class="ri-add-line me-1"></i>{{ __('admin/survey.add_session_specific_question') }}
                    </button>
                </div>

                <div id="add-question-form" style="display: none;" class="card mb-3">
                    <div class="card-body">
                        <form id="session-question-form">
                            <input type="hidden" id="edit-question-id" value="">
                            
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label class="form-label">{{ __('admin/survey.question_type') }} <span class="text-danger">*</span></label>
                                    <select class="form-select" id="question-type" name="question_type_id" required>
                                        <option value="">{{ __('admin/survey.select_type') }}</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">{{ __('admin/survey.position') }}</label>
                                    <input type="number" class="form-control" id="question-order" name="order_position" min="0" value="999">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-12">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="question-required" name="is_required" value="1">
                                        <label class="form-check-label" for="question-required">
                                            {{ __('admin/survey.required_question') }}
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <ul class="nav nav-tabs mb-3" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" data-bs-toggle="tab" href="#question-fr" role="tab">FR</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-bs-toggle="tab" href="#question-en" role="tab">EN</a>
                                </li>
                            </ul>

                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="question-fr" role="tabpanel">
                                    <div class="mb-3">
                                        <label class="form-label">{{ __('admin/survey.question_text_fr') }} <span class="text-danger">*</span></label>
                                        <textarea class="form-control" name="fr[question_text]" rows="2" required></textarea>
                                    </div>
                                    <div class="options-container" data-locale="fr" style="display: none;">
                                        <label class="form-label">{{ __('admin/survey.options_fr') }}</label>
                                        <div class="options-list mb-2"></div>
                                        <button type="button" class="btn btn-sm btn-outline-primary add-option-btn" data-locale="fr">
                                            <i class="ri-add-line"></i> {{ __('admin/survey.add_option_btn') }}
                                        </button>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="question-en" role="tabpanel">
                                    <div class="mb-3">
                                        <label class="form-label">{{ __('admin/survey.question_text_en') }} <span class="text-danger">*</span></label>
                                        <textarea class="form-control" name="en[question_text]" rows="2" required></textarea>
                                    </div>
                                    <div class="options-container" data-locale="en" style="display: none;">
                                        <label class="form-label">{{ __('admin/survey.options_en') }}</label>
                                        <div class="options-list mb-2"></div>
                                        <button type="button" class="btn btn-sm btn-outline-primary add-option-btn" data-locale="en">
                                            <i class="ri-add-line"></i> {{ __('admin/survey.add_option_btn') }}
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex gap-2">
                                <button type="submit" class="btn btn-primary">
                                    <i class="ri-save-line me-1"></i>{{ __('admin/survey.save_button') }}
                                </button>
                                <button type="button" class="btn btn-secondary" id="cancel-question-btn">
                                    <i class="ri-close-line me-1"></i>{{ __('admin/survey.cancel_button') }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <div id="session-questions-list">
                    <div class="text-center py-4">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">{{ __('admin/survey.loading_text') }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button> -->
                <a href="javascript:void(0);" class="btn btn-link link-primary fw-medium material-shadow-none" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> {{ __('admin/survey.close_modal') }}</a>
                <button type="button" class="btn btn-success" id="generate-qr-from-modal" data-qr-exists="false">
                    <i class="ri-qr-code-line me-1"></i>{{ __('admin/survey.generate_qr_code') }}
                </button>

            </div>
        </div>
    </div>
</div>

<!-- Modal pour afficher les réponses -->
<div class="modal fade" id="responsesModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('admin/survey.survey_responses') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="responses-content"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('admin/survey.close') }}</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour supprimer un QR code -->
<x-admin.delete-modal
    item-type="{{ __('admin/survey.this_qr_code') }}"
    confirm-text="{{ __('admin/survey.delete_qr_confirm') }}"
    delete-text="{{ __('admin/survey.delete_qr_button') }}" />

<!-- Modal pour supprimer une question -->
<x-admin.delete-modal
    modal-id="deleteQuestionModal"
    item-type="question"
    confirm-text="{{ __('admin/survey.confirm_delete_question_title') }}"
    delete-text="{{ __('admin/survey.delete_question_button') }}" />    

<x-admin.toast-messages /> 

@endsection

@push('style')
<style>
.search-highlight {
    background-color: #fff3cd;
}
.option-input-group {
    margin-bottom: 8px;
}
</style>
@endpush

@push('script')
<script>
// Variables globales pour stocker l'ID de la session en cours et les types de questions disponibles
let currentSessionId = null;
let questionTypes = [];

// Attendre que le DOM soit complètement chargé avant d'exécuter le code
document.addEventListener('DOMContentLoaded', function() {
    
    // === RECHERCHE DE SESSIONS ===
    // Récupération des éléments DOM pour la fonctionnalité de recherche
    const searchInput = document.getElementById('searchInput');
    const clearSearchBtn = document.getElementById('clearSearch');
    const noResultsMessage = document.getElementById('noResultsMessage');
    const sessionsTable = document.getElementById('sessionsTable');
    let searchTimeout; // Pour le debouncing de la recherche
    
    // Fonction qui filtre les sessions selon la recherche
    function performSearch(query) {
        query = query.toLowerCase().trim();
        
        let visibleSessionsCount = 0;
        let visibleTrainings = new Set();
        
        const allSessionRows = document.querySelectorAll('.session-row');
        const allTrainingHeaders = document.querySelectorAll('.training-header');
        
        // Si la recherche est vide, afficher tout
        if (query === '') {
            allSessionRows.forEach(row => {
                row.style.display = '';
                row.classList.remove('search-highlight');
            });
            allTrainingHeaders.forEach(header => {
                header.style.display = '';
            });
            noResultsMessage.style.display = 'none';
            sessionsTable.style.display = '';
            return;
        }
        
        // Parcourir toutes les lignes de session et vérifier si elles correspondent à la recherche
        allSessionRows.forEach(row => {
            const trainingId = row.getAttribute('data-training-id');
            
            // Récupérer le texte de différents éléments
            const sessionNameEl = row.querySelector('.session-name');
            const sessionSeatsEl = row.querySelector('.session-seats');
            const sessionDateEl = row.querySelector('.session-date');
            
            const sessionName = sessionNameEl ? sessionNameEl.textContent : '';
            const sessionSeats = sessionSeatsEl ? sessionSeatsEl.textContent : '';
            const sessionDate = sessionDateEl ? sessionDateEl.textContent : '';
            
            // Récupérer aussi le titre de la formation
            const trainingHeader = document.querySelector('.training-header[data-training-id="' + trainingId + '"]');
            const trainingTitleEl = trainingHeader ? trainingHeader.querySelector('.training-title') : null;
            const trainingTitle = trainingTitleEl ? trainingTitleEl.textContent : '';
            
            // Créer un texte de recherche combiné
            const searchText = (sessionName + ' ' + sessionSeats + ' ' + sessionDate + ' ' + trainingTitle).toLowerCase();
            
            // Si le texte contient la recherche, afficher la ligne
            if (searchText.includes(query)) {
                row.style.display = '';
                row.classList.add('search-highlight');
                visibleSessionsCount++;
                visibleTrainings.add(trainingId);
            } else {
                row.style.display = 'none';
                row.classList.remove('search-highlight');
            }
        });
        
        // Gérer l'affichage des en-têtes de formation
        allTrainingHeaders.forEach(header => {
            const trainingId = header.getAttribute('data-training-id');
            if (visibleTrainings.has(trainingId)) {
                header.style.display = '';
            } else {
                header.style.display = 'none';
            }
        });
        
        // Afficher un message si aucun résultat
        if (visibleSessionsCount === 0) {
            noResultsMessage.style.display = 'block';
            sessionsTable.style.display = 'none';
        } else {
            noResultsMessage.style.display = 'none';
            sessionsTable.style.display = '';
        }
    }
    
    // Écouter les changements dans le champ de recherche avec debouncing (300ms)
    searchInput.addEventListener('input', function() {
        const query = this.value;
        
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(function() {
            performSearch(query);
        }, 300);
    });
    
    // Bouton pour effacer la recherche
    clearSearchBtn.addEventListener('click', function() {
        searchInput.value = '';
        performSearch('');
        searchInput.focus();
    });

    // === GESTION DE LA MODALE DES QUESTIONS ===
    
    // Ouvrir la modale quand on clique sur "Gérer les questions"
    document.querySelectorAll('.manage-questions-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            currentSessionId = this.dataset.sessionId;
            
            // Vérifier si le QR code existe déjà pour cette session
            const sessionRow = this.closest('.session-row');
            const qrBadge = sessionRow.querySelector('.badge.bg-success-subtle');
            const qrExists = qrBadge !== null;
            
            // Gérer l'affichage du bouton
            const generateBtn = document.getElementById('generate-qr-from-modal');
            if (qrExists) {
                generateBtn.style.display = 'none';
            } else {
                generateBtn.style.display = 'inline-block';
            }
            
            loadSessionQuestions(currentSessionId);
            const modal = new bootstrap.Modal(document.getElementById('manageQuestionsModal'));
            modal.show();
        });
    });

    // Afficher le formulaire d'ajout de question
    document.getElementById('add-session-question-btn').addEventListener('click', function() {
        showQuestionForm();
    });

    // Annuler l'édition/ajout d'une question
    document.getElementById('cancel-question-btn').addEventListener('click', function() {
        hideQuestionForm();
    });

    // Soumettre le formulaire de question (ajout ou modification)
    document.getElementById('session-question-form').addEventListener('submit', function(e) {
        e.preventDefault();
        saveSessionQuestion();
    });

    // Générer le QR code depuis la modale
    document.getElementById('generate-qr-from-modal').addEventListener('click', function() {
        if (currentSessionId) {
            generateQrCode(currentSessionId);
        }
    });

    // Réinitialiser le formulaire quand la modale est fermée
    document.getElementById('manageQuestionsModal').addEventListener('hidden.bs.modal', function() {
        hideQuestionForm();
        
        const form = document.getElementById('session-question-form');
        if (form) {
            form.reset();
        }
        
        document.getElementById('edit-question-id').value = '';
        
        document.querySelectorAll('.options-container .options-list').forEach(list => {
            list.innerHTML = '';
        });
        
        document.querySelectorAll('.options-container').forEach(container => {
            container.style.display = 'none';
        });
    });    

    // Gérer le changement de type de question (afficher/cacher les options)
    document.getElementById('question-type').addEventListener('change', function() {
        handleQuestionTypeChange(this.value);
    });

    // === GESTION DES CLICS DYNAMIQUES ===
    // Utiliser la délégation d'événements pour les éléments créés dynamiquement
    document.addEventListener('click', function(e) {
        // Ajouter une option
        if (e.target.classList.contains('add-option-btn')) {
            const locale = e.target.dataset.locale;
            addOptionField(locale);
        }

        // Supprimer une option
        if (e.target.classList.contains('remove-option-btn')) {
            e.target.closest('.option-input-group').remove();
        }

        // Éditer une question
        if (e.target.classList.contains('edit-session-question-btn')) {
            const questionId = e.target.dataset.questionId;
            editSessionQuestion(questionId);
        }

        // Supprimer une question
        if (e.target.classList.contains('delete-session-question-btn')) {
            const questionId = e.target.dataset.questionId;
            deleteSessionQuestion(questionId);
        }
    });

    // === AFFICHAGE DES RÉPONSES ===
    
    // Charger et afficher les réponses d'une session avec spinner
    document.querySelectorAll('.show-responses-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            if (this.disabled) return;
            
            const sessionId = this.dataset.sessionId;
            const originalText = this.innerHTML;
            
            // Afficher le spinner
            this.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>{{ __("admin/survey.loading_spinner") }}';
            this.disabled = true;

            // Charger les réponses via AJAX
            fetch('{{ route("admin.survey.management.responses", ":sessionId") }}'.replace(':sessionId', sessionId))
                .then(response => response.text())
                .then(html => {
                    document.getElementById('responses-content').innerHTML = html;
                    const modal = new bootstrap.Modal(document.getElementById('responsesModal'));
                    modal.show();
                })
                .catch(error => {
                    console.error('{{ __("admin/survey.error") }}:', error);
                    alert('{{ __("admin/survey.error_loading_responses") }}');
                })
                .finally(() => {
                    // Restaurer le bouton
                    this.innerHTML = originalText;
                    this.disabled = false;
                });
        });
    });

    // === SUPPRESSION DU QR CODE ===
    
    // Configurer la modale de suppression du QR code
    document.querySelectorAll('.delete-qr-btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            
            const sessionId = this.dataset.sessionId;
            const sessionName = this.dataset.sessionName;
            const deleteUrl = '{{ route("admin.survey.management.delete-qr", ":sessionId") }}'.replace(':sessionId', sessionId);
            
            const modal = document.getElementById('deleteRecordModal');
            if (modal) {
                const form = modal.querySelector('form');
                if (form) {
                    form.setAttribute('action', deleteUrl);
                    form.setAttribute('method', 'POST');
                    
                    // Ajouter le champ _method pour DELETE
                    let methodInput = form.querySelector('input[name="_method"]');
                    if (!methodInput) {
                        methodInput = document.createElement('input');
                        methodInput.type = 'hidden';
                        methodInput.name = '_method';
                        form.appendChild(methodInput);
                    }
                    methodInput.value = 'DELETE';
                }
                
                // Mettre à jour le texte de la modale
                const itemNameElement = modal.querySelector('#item-name-text-deleteRecordModal');
                const itemTypeElement = modal.querySelector('#item-type-text-deleteRecordModal');
                
                if (itemNameElement) itemNameElement.textContent = sessionName;
                if (itemTypeElement) itemTypeElement.textContent = '{{ __("admin/survey.this_qr_code") }}';
                
                const bootstrapModal = new bootstrap.Modal(modal);
                bootstrapModal.show();
            }
        });
    });

    // Initialiser les tooltips Bootstrap sur tous les éléments
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
});

// === FONCTIONS POUR LA GESTION DES QUESTIONS ===

/**
 * Charger les questions d'une session via AJAX
 * @param {number} sessionId - ID de la session
 */
function loadSessionQuestions(sessionId) {
    fetch('{{ route("admin.survey.management.session-questions", ":sessionId") }}'.replace(':sessionId', sessionId))
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                questionTypes = data.question_types;
                populateQuestionTypes();
                displaySessionQuestions(data.session_questions);
            }
        })
        .catch(error => {
            console.error('{{ __("admin/survey.error") }}:', error);
            alert('{{ __("admin/survey.error_loading_questions") }}');
        });
}

/**
 * Remplir le select des types de questions
 */
function populateQuestionTypes() {
    const select = document.getElementById('question-type');
    select.innerHTML = '<option value="">{{ __("admin/survey.select_type") }}</option>';

    questionTypes.forEach(type => {
        const option = document.createElement('option');
        option.value = type.id;
        option.textContent = type.type_name + ' - ' + type.type_description;
        option.dataset.code = type.type_code;
        select.appendChild(option);
    });
}

/**
 * Afficher la liste des questions d'une session
 * @param {Array} questions - Tableau des questions
 */
function displaySessionQuestions(questions) {
    const container = document.getElementById('session-questions-list');

    if (questions.length === 0) {
        container.innerHTML = '<div class="alert alert-warning">{{ __("admin/survey.no_session_specific_question") }}</div>';
        return;
    }

    // Construire le HTML des questions
    let html = '<div class="list-group">';
    questions.forEach(question => {
        const translation = question.translations.find(t => t.locale === 'fr') || question.translations[0];
        html += `
            <div class="list-group-item">
                <div class="d-flex align-items-start">
                    <div class="flex-shrink-0 me-3">
                        <span class="badge bg-primary">${question.order_position}</span>
                    </div>
                    <div class="flex-grow-1">
                        <h6 class="mb-1">${translation.question_text}</h6>
                        <div class="d-flex gap-2 flex-wrap">
                            <span class="badge bg-info">${question.question_type.type_name}</span>
                            ${question.is_required ? '<span class="badge bg-warning">{{ __("admin/survey.required") }}</span>' : '<span class="badge bg-secondary">{{ __("admin/survey.optional") }}</span>'}
                        </div>
                    </div>
                    <div class="flex-shrink-0">
                        <button type="button" class="btn btn-sm btn-primary edit-session-question-btn" data-question-id="${question.id}">
                            <i class="ri-pencil-line me-1"></i>{{ __("admin/survey.modify_button") }}
                        </button>
                        <button type="button" class="btn btn-sm btn-danger delete-session-question-btn ms-1" data-question-id="${question.id}">
                            <i class="ri-delete-bin-line me-1"></i>{{ __("admin/survey.delete_button") }}
                        </button>
                    </div>
                </div>
            </div>
        `;
    });
    html += '</div>';

    container.innerHTML = html;
}

/**
 * Afficher le formulaire d'ajout/modification de question
 */
function showQuestionForm() {
    document.getElementById('add-question-form').style.display = 'block';
    document.getElementById('add-session-question-btn').style.display = 'none';
    document.getElementById('session-question-form').reset();
    document.getElementById('edit-question-id').value = '';
    document.querySelectorAll('.options-container').forEach(c => c.style.display = 'none');
}

/**
 * Cacher le formulaire d'ajout/modification de question
 */
function hideQuestionForm() {
    document.getElementById('add-question-form').style.display = 'none';
    document.getElementById('add-session-question-btn').style.display = 'block';
    document.getElementById('session-question-form').reset();
}

/**
 * Gérer l'affichage des options selon le type de question
 * @param {number} typeId - ID du type de question
 */
function handleQuestionTypeChange(typeId) {
    const select = document.getElementById('question-type');
    const selectedOption = select.options[select.selectedIndex];
    const typeCode = selectedOption.dataset.code;
    
    const optionsContainers = document.querySelectorAll('.options-container');
    
    // Afficher les options uniquement pour radio, checkbox et yesno
    if (['radio', 'checkbox', 'yesno'].includes(typeCode)) {
        optionsContainers.forEach(container => {
            container.style.display = 'block';
            const locale = container.dataset.locale;
            const optionsList = container.querySelector('.options-list');
            
            // Ajouter 2 options par défaut si la liste est vide
            if (optionsList.children.length === 0) {
                addOptionField(locale);
                addOptionField(locale);
            }
        });
    } else {
        // Cacher et vider les options pour les autres types
        optionsContainers.forEach(container => {
            container.style.display = 'none';
            container.querySelector('.options-list').innerHTML = '';
        });
    }
}

/**
 * Ajouter un champ d'option pour une langue
 * @param {string} locale - Code de la langue (fr, en)
 */
function addOptionField(locale) {
    const container = document.querySelector(`.options-container[data-locale="${locale}"] .options-list`);
    const index = container.children.length + 1;
    
    const div = document.createElement('div');
    div.className = 'input-group option-input-group';
    div.innerHTML = `
        <span class="input-group-text">${index}</span>
        <input type="text" class="form-control" name="${locale}[options][]" placeholder="Option ${index}">
        <button type="button" class="btn btn-outline-danger remove-option-btn">
            <i class="ri-delete-bin-line"></i>
        </button>
    `;
    
    container.appendChild(div);
}

/**
 * Sauvegarder une question (création ou modification)
 */
function saveSessionQuestion() {
    const form = document.getElementById('session-question-form');
    const formData = new FormData(form);
    const editQuestionId = document.getElementById('edit-question-id').value;
    
    // Transformer les données du formulaire en objet JSON
    const data = {};
    formData.forEach((value, key) => {
        if (key.includes('[')) {
            // Gérer les champs avec traductions (ex: fr[question_text])
            const matches = key.match(/^(\w+)\[(.+)\]$/);
            if (matches) {
                const lang = matches[1];
                const field = matches[2];
                
                if (!data[lang]) {
                    data[lang] = {};
                }
                
                if (field === 'options') {
                    // Collecter toutes les options dans un tableau
                    if (!data[lang].options) {
                        data[lang].options = [];
                    }
                    if (value.trim()) {
                        data[lang].options.push(value);
                    }
                } else {
                    data[lang][field] = value;
                }
            }
        } else {
            data[key] = value;
        }
    });
    
    // Déterminer l'URL et la méthode selon si c'est une création ou modification
    const url = editQuestionId 
        ? '{{ route("admin.survey.management.update-session-question", [":sessionId", ":questionId"]) }}'.replace(':sessionId', currentSessionId).replace(':questionId', editQuestionId)
        : '{{ route("admin.survey.management.store-session-question", ":sessionId") }}'.replace(':sessionId', currentSessionId);
    
    const method = editQuestionId ? 'PUT' : 'POST';
    
    // Envoyer la requête AJAX
    fetch(url, {
        method: method,
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            hideQuestionForm();
            loadSessionQuestions(currentSessionId);
            showToast(result.message, 'success');
        } else {
            showToast(result.message, 'error');
        }
    })
    .catch(error => {
        console.error('{{ __("admin/survey.error") }}:', error);
        showToast('{{ __("admin/survey.error_saving_question") }}', 'error');
    });
}

/**
 * Charger une question pour l'édition
 * @param {number} questionId - ID de la question à éditer
 */
function editSessionQuestion(questionId) {
    // Récupérer le bouton pour afficher un spinner
    const editBtn = document.querySelector(`.edit-session-question-btn[data-question-id="${questionId}"]`);
    const originalBtnContent = editBtn ? editBtn.innerHTML : '';
    
    // Afficher le spinner sur le bouton
    if (editBtn) {
        editBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>{{ __("admin/survey.loading_spinner") }}';
        editBtn.disabled = true;
    }
    
    // Charger les données de la question via AJAX
    fetch('{{ route("admin.survey.management.session-questions", ":sessionId") }}'.replace(':sessionId', currentSessionId))
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const question = data.session_questions.find(q => q.id === parseInt(questionId));
                
                if (!question) {
                    console.error('Question non trouvee');
                    if (editBtn) {
                        editBtn.innerHTML = originalBtnContent;
                        editBtn.disabled = false;
                    }
                    return;
                }
                
                // Afficher le formulaire
                showQuestionForm();
                
                // Restaurer le bouton immédiatement après l'affichage du formulaire
                if (editBtn) {
                    editBtn.innerHTML = originalBtnContent;
                    editBtn.disabled = false;
                }
                
                // Attendre 100ms pour que le DOM soit prêt, puis remplir les champs
                setTimeout(() => {
                    const editIdField = document.getElementById('edit-question-id');
                    const typeField = document.getElementById('question-type');
                    const orderField = document.getElementById('question-order');
                    const requiredField = document.getElementById('question-required');
                    
                    // Remplir les champs du formulaire
                    if (editIdField) editIdField.value = question.id;
                    if (typeField) typeField.value = question.question_type_id;
                    if (orderField) orderField.value = question.order_position;
                    if (requiredField) requiredField.checked = question.is_required;
                    
                    // Remplir les traductions pour chaque langue
                    question.translations.forEach(translation => {
                        const textarea = document.querySelector(`textarea[name="${translation.locale}[question_text]"]`);
                        if (textarea) {
                            textarea.value = translation.question_text || '';
                        }
                        
                        // Remplir les options si elles existent
                        const optionsList = document.querySelector(`.options-container[data-locale="${translation.locale}"] .options-list`);
                        if (optionsList && translation.options_json) {
                            optionsList.innerHTML = '';
                            
                            const options = JSON.parse(translation.options_json);
                            if (options.options && Array.isArray(options.options)) {
                                options.options.forEach((option, index) => {
                                    const div = document.createElement('div');
                                    div.className = 'input-group option-input-group';
                                    div.innerHTML = `
                                        <span class="input-group-text">${index + 1}</span>
                                        <input type="text" class="form-control" name="${translation.locale}[options][]" value="${option}" placeholder="Option ${index + 1}">
                                        <button type="button" class="btn btn-outline-danger remove-option-btn">
                                            <i class="ri-delete-bin-line"></i>
                                        </button>
                                    `;
                                    optionsList.appendChild(div);
                                });
                            }
                        }
                    });
                    
                    // Gérer l'affichage des options selon le type de question
                    handleQuestionTypeChange(question.question_type_id);
                }, 100);
            }
        })
        .catch(error => {
            console.error('{{ __("admin/survey.error") }}:', error);
            showToast('{{ __("admin/survey.error_loading_question") }}', 'error');
            if (editBtn) {
                editBtn.innerHTML = originalBtnContent;
                editBtn.disabled = false;
            }
        });
}

/**
 * Supprimer une question après confirmation
 * @param {number} questionId - ID de la question à supprimer
 */
// function deleteSessionQuestion(questionId) {
//     if (!confirm('Êtes-vous sûr de vouloir supprimer cette question ?')) {
//         return;
//     }
    
//     fetch('{{ route("admin.survey.management.delete-session-question", [":sessionId", ":questionId"]) }}'.replace(':sessionId', currentSessionId).replace(':questionId', questionId), {
//         method: 'DELETE',
//         headers: {
//             'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
//         }
//     })
//     .then(response => response.json())
//     .then(result => {
//         if (result.success) {
//             loadSessionQuestions(currentSessionId);
//             showToast(result.message, 'success');
//         } else {
//             showToast(result.message, 'error');
//         }
//     })
//     .catch(error => {
//         console.error('Erreur:', error);
//         showToast('Erreur lors de la suppression de la question', 'error');
//     });
// }
/**
 * Ouvrir la modale de confirmation pour supprimer une question
 * @param {number} questionId - ID de la question à supprimer
 */
function deleteSessionQuestion(questionId) {
    const modal = document.getElementById('deleteQuestionModal');
    
    if (modal) {
        const deleteUrl = '{{ route("admin.survey.management.delete-session-question", [":sessionId", ":questionId"]) }}'
            .replace(':sessionId', currentSessionId)
            .replace(':questionId', questionId);
        
        const form = modal.querySelector('form');
        if (form) {
            form.setAttribute('action', deleteUrl);
            form.setAttribute('method', 'POST');
            
            // Ajouter le champ _method pour DELETE
            let methodInput = form.querySelector('input[name="_method"]');
            if (!methodInput) {
                methodInput = document.createElement('input');
                methodInput.type = 'hidden';
                methodInput.name = '_method';
                form.appendChild(methodInput);
            }
            methodInput.value = 'DELETE';
            
            // Supprimer l'ancien event listener s'il existe
            const newForm = form.cloneNode(true);
            form.parentNode.replaceChild(newForm, form);
            
            // Ajouter le nouvel event listener
            newForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const submitBtn = this.querySelector('button[type="submit"]');
                const originalBtnText = submitBtn ? submitBtn.innerHTML : '';

                if (submitBtn) {
                    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>{{ __("admin/survey.deleting_spinner") }}';
                    submitBtn.disabled = true;
                }
                
                fetch(deleteUrl, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    }
                })
                .then(response => response.json())
                .then(result => {
                    if (result.success) {
                        const bootstrapModal = bootstrap.Modal.getInstance(modal);
                        if (bootstrapModal) {
                            bootstrapModal.hide();
                        }
                        
                        loadSessionQuestions(currentSessionId);
                        showToast(result.message, 'success');
                    } else {
                        showToast(result.message, 'error');
                    }
                })
                .catch(error => {
                    console.error('{{ __("admin/survey.error") }}:', error);
                    showToast('{{ __("admin/survey.error_deleting_question_msg") }}', 'error');
                })
                .finally(() => {
                    if (submitBtn) {
                        submitBtn.innerHTML = originalBtnText;
                        submitBtn.disabled = false;
                    }
                });
            });
        }
        
        // Mettre à jour le texte de la modale
        const itemNameElement = modal.querySelector('#item-name-text-deleteQuestionModal');
        if (itemNameElement) {
            itemNameElement.textContent = 'Question #' + questionId;
        }
        
        // Ouvrir la modale
        const bootstrapModal = new bootstrap.Modal(modal);
        bootstrapModal.show();
    }
}

/**
 * Générer le QR code pour une session
 * @param {number} sessionId - ID de la session
 */
function generateQrCode(sessionId) {
    const btn = document.getElementById('generate-qr-from-modal');
    const originalText = btn.innerHTML;

    // Afficher le spinner
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>{{ __("admin/survey.generating_spinner") }}';
    btn.disabled = true;
    
    // Appel AJAX pour générer le QR code
    fetch('{{ route("admin.survey.management.generate-qr", ":sessionId") }}'.replace(':sessionId', sessionId), {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        }
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            // Fermer la modale
            const modal = bootstrap.Modal.getInstance(document.getElementById('manageQuestionsModal'));
            if (modal) {
                modal.hide();
            }            
            showToast(result.message, 'success');
            // Recharger la page après 1 seconde pour afficher le nouveau QR
            setTimeout(() => {
                location.reload();
            }, 1000);
        } else {
            showToast(result.message, 'error');
            btn.innerHTML = originalText;
            btn.disabled = false;
        }
    })
    .catch(error => {
        console.error('{{ __("admin/survey.error") }}:', error);
        showToast('{{ __("admin/survey.error_generating_qr_msg") }}', 'error');
        btn.innerHTML = originalText;
        btn.disabled = false;
    });
}

/**
 * Afficher un message toast (notification)
 * @param {string} message - Message à afficher
 * @param {string} type - Type de message (success, error, info)
 */
function showToast(message, type = 'info') {
    if (typeof window.showSuccessToast === 'function' && type === 'success') {
        window.showSuccessToast(message);
    } else if (typeof window.showErrorToast === 'function' && type === 'error') {
        window.showErrorToast(message);
    } else if (typeof window.showToast === 'function') {
        window.showToast(message, type);
    } else {
        alert(message);
    }
}
</script>
@endpush