@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_questions') }}</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.questions') }}</li>
                </ol>
            </div>
        </div>

        <!-- Menu bar -->
        <div class="col-lg-12">
            <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.create') }}" class="btn btn-info add-btn">
                                <i class="ri-add-fill me-1 align-bottom"></i> {{ __('admin/survey.new_question') }}
                            </a>
                        </div>
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-success" id="save-order" style="display: none;">
                                <i class="ri-save-line me-1"></i> {{ __('admin/survey.save_order') }}
                            </button>
                            <button type="button" class="btn btn-secondary" id="cancel-order" style="display: none;">
                                <i class="ri-close-line me-1"></i> {{ __('admin/survey.cancel') }}
                            </button>
                        </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.question_list') }}</h4>
                    <div class="flex-shrink-0">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="toggle-sorting">
                            <label class="form-check-label" for="toggle-sorting">
                                {{ __('admin/survey.enable_sorting') }}
                            </label>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    @if($questions->count() > 0)
                        <div class="list-group nested-list" id="questions-sortable">
                            @foreach($questions as $question)
                            <div class="list-group-item nested-1" data-question-id="{{ $question->id }}" data-order="{{ $question->order_position }}">
                                <div class="d-flex align-items-center">
                                    <div class="drag-handle me-3" style="display: none; cursor: move;">
                                        <i class="ri-drag-move-fill text-muted fs-18"></i>
                                    </div>
                                    
                                    <div class="flex-shrink-0 me-3">
                                        <span class="badge bg-secondary order-badge">{{ $question->order_position }}</span>
                                    </div>
                                    
                                    <div class="flex-grow-1">
                                        <div class="d-flex justify-content-between align-items-start">
                                            <div class="flex-grow-1 me-3">
                                                <h6 class="mb-2">{{ Str::limit($question->getTranslatedQuestionText() ?? __('admin/survey.no_translation'), 80) }}</h6>
                                                
                                                <div class="d-flex flex-wrap gap-2 mb-2">
                                                    <span class="badge bg-info">{{ $question->questionType->type_name ?? 'N/A' }}</span>
                                                    
                                                    @if($question->is_required)
                                                        <span class="badge bg-warning">{{ __('admin/survey.required') }}</span>
                                                    @else
                                                        <span class="badge bg-secondary">{{ __('admin/survey.optional') }}</span>
                                                    @endif
                                                    
                                                    @if($question->is_active)
                                                        <span class="badge bg-success-subtle text-success">{{ __('admin/survey.active') }}</span>
                                                    @else
                                                        <span class="badge bg-danger-subtle text-danger">{{ __('admin/survey.inactive') }}</span>
                                                    @endif
                                                    @if($question->questionType && in_array($question->questionType->type_code, ['radio', 'checkbox']))
                                                        <small class="text-muted">{{ count($question->getOptions()) }} {{ __('admin/survey.options') }}</small>
                                                    @endif
                                                </div>

                                            </div>
                                            
                                            <div class="flex-shrink-0">
                                                <div class="gap-1 d-flex">
                                                    <span data-bs-toggle="tooltip" data-bs-placement="top" title="{{ __('admin/survey.tooltip_view') }}">
                                                        <a class="btn btn-icon bg-info-subtle text-info" href="{{ route('admin.survey.questions.show', $question) }}">
                                                            <i class="ri-eye-line"></i>
                                                        </a>
                                                    </span>
                                                    <span data-bs-toggle="tooltip" data-bs-placement="top" title="{{ __('admin/survey.tooltip_edit') }}">
                                                        <a class="btn btn-icon bg-primary-subtle text-primary" href="{{ route('admin.survey.questions.edit', $question) }}">
                                                            <i class="ri-pencil-line"></i>
                                                        </a>
                                                    </span>
                                                    <span data-bs-toggle="tooltip" data-bs-placement="top" title="{{ __('admin/survey.tooltip_delete') }}">
                                                        <button class="open-delete-modal btn btn-icon bg-danger-subtle text-danger"
                                                            data-bs-toggle="modal"
                                                            href="#deleteRecordModal"
                                                            data-delete-url="{{ route('admin.survey.questions.destroy', $question) }}"
                                                            data-item-name="{{ $question->getTranslatedQuestionText() ?? __('admin/survey.question_without_title') }}"
                                                            data-item-type="{{ __('admin/survey.this_question') }}"
                                                            id="delete-record-{{ $question->id }}">
                                                            <i class="ri-delete-bin-line"></i>
                                                        </button>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="ri-questionnaire-line fs-1 text-muted mb-3 d-block"></i>
                            <h5 class="text-muted">{{ __('admin/survey.no_questions_found') }}</h5>
                            <p class="text-muted">{{ __('admin/survey.create_first_question') }}</p>
                            <a href="{{ route('admin.survey.questions.create') }}" class="btn btn-info">
                                <i class="ri-add-fill me-1"></i> {{ __('admin/survey.create_question') }}
                            </a>
                        </div>
                    @endif
                </div>

                @if($questions->hasPages())
                <div class="card-footer">
                    <div class="d-flex justify-content-center mt-4">
                        {{ $questions->links() }}
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Modal de suppression -->
<x-admin.delete-modal
    item-type="{{ __('admin/survey.this_question') }}"
    confirm-text="{{ __('admin/survey.delete_question_confirm') }}"
    delete-text="{{ __('admin/survey.delete_question') }}" />

<!-- Composant toast global -->
<x-admin.toast-messages /> 

@endsection

@push('style')
<style>
.list-group-item.sortable-ghost {
    background-color: #f8f9fa;
    border: 2px dashed #dee2e6;
}

.list-group-item.sortable-chosen {
    background-color: #e7f3ff;
    border-color: #0d6efd;
}

.drag-handle {
    transition: all 0.2s ease;
}

.drag-handle:hover {
    color: #0d6efd !important;
}

.order-badge {
    min-width: 35px;
    transition: all 0.3s ease;
}

.list-group-item {
    transition: all 0.3s ease;
}

.list-group-item:hover {
    background-color: #f8f9fa;
}

.sorting-enabled .list-group-item {
    cursor: move;
}

.sorting-enabled .drag-handle {
    display: block !important;
}
</style>
@endpush

@push('script')
<!-- Sortable JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    let sortable = null;
    let originalOrder = [];
    let isSortingEnabled = false;
    
    const toggleSorting = document.getElementById('toggle-sorting');
    const saveOrderBtn = document.getElementById('save-order');
    const cancelOrderBtn = document.getElementById('cancel-order');
    const questionsContainer = document.getElementById('questions-sortable');
    
    // Stocker l'ordre original
    function storeOriginalOrder() {
        originalOrder = Array.from(questionsContainer.children).map(item => ({
            id: item.dataset.questionId,
            order: parseInt(item.dataset.order)
        }));
    }
    
    // Initialiser le tri
    function initSortable() {
        if (questionsContainer && !sortable) {
            sortable = new Sortable(questionsContainer, {
                animation: 150,
                ghostClass: 'sortable-ghost',
                chosenClass: 'sortable-chosen',
                handle: '.drag-handle',
                disabled: true,
                onStart: function() {
                    questionsContainer.classList.add('sorting-active');
                },
                onEnd: function() {
                    questionsContainer.classList.remove('sorting-active');
                    updateOrderBadges();
                    showSaveButtons();
                }
            });
        }
    }
    
    // Activer/désactiver le tri
    function toggleSortMode(enabled) {
        isSortingEnabled = enabled;
        
        if (sortable) {
            sortable.option('disabled', !enabled);
        }
        
        questionsContainer.classList.toggle('sorting-enabled', enabled);
        
        if (enabled) {
            storeOriginalOrder();
            showSortingUI();
        } else {
            hideSortingUI();
        }
    }
    
    // Afficher l'interface de tri
    function showSortingUI() {
        document.querySelectorAll('.drag-handle').forEach(handle => {
            handle.style.display = 'block';
        });
    }
    
    // Masquer l'interface de tri
    function hideSortingUI() {
        document.querySelectorAll('.drag-handle').forEach(handle => {
            handle.style.display = 'none';
        });
        hideSaveButtons();
    }
    
    // Afficher les boutons de sauvegarde
    function showSaveButtons() {
        saveOrderBtn.style.display = 'inline-block';
        cancelOrderBtn.style.display = 'inline-block';
    }
    
    // Masquer les boutons de sauvegarde
    function hideSaveButtons() {
        saveOrderBtn.style.display = 'none';
        cancelOrderBtn.style.display = 'none';
    }
    
    // Mettre à jour les badges d'ordre
    function updateOrderBadges() {
        const items = questionsContainer.children;
        Array.from(items).forEach((item, index) => {
            const badge = item.querySelector('.order-badge');
            if (badge) {
                badge.textContent = index + 1;
            }
        });
    }
    
    // Restaurer l'ordre original
    function restoreOriginalOrder() {
        const items = Array.from(questionsContainer.children);
        
        // Trier selon l'ordre original
        items.sort((a, b) => {
            const orderA = originalOrder.find(o => o.id === a.dataset.questionId)?.order || 999;
            const orderB = originalOrder.find(o => o.id === b.dataset.questionId)?.order || 999;
            return orderA - orderB;
        });
        
        // Réorganiser les éléments
        items.forEach(item => questionsContainer.appendChild(item));
        
        // Restaurer les badges
        items.forEach((item, index) => {
            const originalOrderObj = originalOrder.find(o => o.id === item.dataset.questionId);
            if (originalOrderObj) {
                const badge = item.querySelector('.order-badge');
                if (badge) {
                    badge.textContent = originalOrderObj.order;
                }
            }
        });
    }
    
    // Sauvegarder le nouvel ordre
    function saveNewOrder() {
        const items = Array.from(questionsContainer.children);
        const newOrder = items.map((item, index) => ({
            id: parseInt(item.dataset.questionId),
            order: index + 1
        }));
        
        // Afficher le spinner sur le bouton
        const originalText = saveOrderBtn.innerHTML;
        saveOrderBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>{{ __('admin/survey.saving') }}';
        saveOrderBtn.disabled = true;
        
        fetch('{{ route("admin.survey.questions.reorder") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                questions: newOrder
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Mettre à jour les data-order
                items.forEach((item, index) => {
                    item.dataset.order = index + 1;
                });
                
                // Afficher le message de succès
                showToast(data.message, 'success');
                
                // Désactiver le mode tri
                toggleSorting.checked = false;
                toggleSortMode(false);
                
            } else {
                showToast(data.message || '{{ __("admin/survey.error_saving_order") }}', 'error');
                restoreOriginalOrder();
            }
        })
        .catch(error => {
            console.error('Erreur:', error);
            showToast('{{ __("admin/survey.error_saving_order") }}', 'error');
            restoreOriginalOrder();
        })
        .finally(() => {
            saveOrderBtn.innerHTML = originalText;
            saveOrderBtn.disabled = false;
        });
    }
    
    // Afficher un toast
    // function showToast(type, message) {
    //     // Si vous avez un système de toast, l'utiliser ici
    //     // Sinon, utiliser une alerte simple
    //     if (type === 'success') {
    //         alert(message);
    //     } else {
    //         alert('Erreur: ' + message);
    //     }
    // }
    function showToast(message, type = 'info') {
        console.log(`Toast ${type}:`, message);
        
        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 {
            // Fallback avec alerte
            alert(`[${type.toUpperCase()}] ${message}`);
        }
    }    
    
    // Event listeners
    toggleSorting.addEventListener('change', function() {
        toggleSortMode(this.checked);
    });
    
    saveOrderBtn.addEventListener('click', saveNewOrder);
    
    cancelOrderBtn.addEventListener('click', function() {
        restoreOriginalOrder();
        toggleSorting.checked = false;
        toggleSortMode(false);
    });
    
    // Gestion de la modal de suppression
    document.querySelectorAll('[data-bs-toggle="modal"]').forEach(button => {
        button.addEventListener('click', function() {
            const modalId = this.getAttribute('href').replace('#', '');
            const modal = document.getElementById(modalId);

            if (modal) {
                const deleteUrl = this.dataset.deleteUrl;
                const itemName = this.dataset.itemName;
                const itemType = this.dataset.itemType;

                // Mettre à jour l'action du formulaire
                const form = modal.querySelector('form');
                if (form) {
                    form.setAttribute('action', deleteUrl);
                }

                // Mettre à jour les textes dynamiques
                const itemNameElement = modal.querySelector('#item-name-text-' + modalId);
                const itemTypeElement = modal.querySelector('#item-type-text-' + modalId);
                
                if (itemNameElement) itemNameElement.textContent = itemName;
                if (itemTypeElement) itemTypeElement.textContent = itemType;
            }
        });
    });
    
    // Initialiser les tooltips
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
    
    // Initialiser le tri au chargement
    initSortable();
});
</script>
@endpush