@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.archived_sessions') }}</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.survey.management.index') }}">{{ __('admin/survey.survey') }}</a></li>
                    <li class="breadcrumb-item active">{{ __('admin/survey.archive') }}</li>
                </ol>
            </div>
        </div>

        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <div class="row align-items-center g-1">
                        <div class="col-md-3">
                            <select class="form-select" id="filterTraining">
                                <option value="">{{ __('admin/survey.all_trainings') }}</option>
                                @foreach($trainings as $training)
                                    <option value="{{ $training->id }}">{{ $training->translateOrDefault(app()->getLocale())->title }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <input type="date" class="form-control" id="filterDateFrom" placeholder="{{ __('admin/survey.date_from') }}">
                        </div>
                        <div class="col-md-2">
                            <input type="date" class="form-control" id="filterDateTo" placeholder="{{ __('admin/survey.date_to') }}">
                        </div>
                        <div class="col-md-2">
                            <input type="text" class="form-control" id="filterSearch" placeholder="{{ __('admin/survey.search_placeholder') }}">
                        </div>
                        <div class="col-md-2">
                            <button type="button" class="btn btn-primary" id="clearFilters">
                                <i class="ri-close-line me-1"></i> {{ __('admin/survey.clear_search') }}
                            </button>
                        </div>
                        <div class="col-md-1">
                            <a href="{{ route('admin.survey.management.index') }}" class="btn btn-light w-100">
                                <i class="ri-arrow-left-line me-1"></i> {{ __('admin/survey.back_to_management') }}
                            </a>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <div id="sessions-container">
                        @include('admin.survey.management.archive-table', ['sessions' => $sessions])
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<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>

<x-admin.toast-messages />
@endsection

@push('script')
<script>
document.addEventListener('DOMContentLoaded', function() {
    let debounceTimer;

    function loadSessions() {
        const training = document.getElementById('filterTraining').value;
        const dateFrom = document.getElementById('filterDateFrom').value;
        const dateTo = document.getElementById('filterDateTo').value;
        const search = document.getElementById('filterSearch').value;

        const params = new URLSearchParams();
        if (training) params.append('training', training);
        if (dateFrom) params.append('date_from', dateFrom);
        if (dateTo) params.append('date_to', dateTo);
        if (search) params.append('search', search);

        const container = document.getElementById('sessions-container');
        container.innerHTML = '<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>';

        fetch('{{ route("admin.survey.management.archive") }}?' + params.toString(), {
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.text())
        .then(html => {
            container.innerHTML = html;
            initializeEventListeners();
        })
        .catch(error => {
            console.error('Error:', error);
            container.innerHTML = '<div class="alert alert-danger">{{ __("admin/survey.error_loading") }}</div>';
        });
    }

    function initializeEventListeners() {
        const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        tooltipTriggerList.forEach(function(tooltipTriggerEl) {
            const existingTooltip = bootstrap.Tooltip.getInstance(tooltipTriggerEl);
            if (existingTooltip) {
                existingTooltip.dispose();
            }
            new bootstrap.Tooltip(tooltipTriggerEl);
        });        
        
        document.querySelectorAll('.show-responses-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const sessionId = this.dataset.sessionId;
                const originalText = this.innerHTML;
                
                this.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';
                this.disabled = true;

                fetch('{{ route("admin.survey.management.responses", ":id") }}'.replace(':id', 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('Error:', error);
                        alert('{{ __("admin/survey.error_loading_responses") }}');
                    })
                    .finally(() => {
                        this.innerHTML = originalText;
                        this.disabled = false;
                    });
            });
        });

        document.querySelectorAll('.pagination a').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                const url = new URL(this.href);
                const page = url.searchParams.get('page');
                
                const training = document.getElementById('filterTraining').value;
                const dateFrom = document.getElementById('filterDateFrom').value;
                const dateTo = document.getElementById('filterDateTo').value;
                const search = document.getElementById('filterSearch').value;

                const params = new URLSearchParams();
                if (page) params.append('page', page);
                if (training) params.append('training', training);
                if (dateFrom) params.append('date_from', dateFrom);
                if (dateTo) params.append('date_to', dateTo);
                if (search) params.append('search', search);

                const container = document.getElementById('sessions-container');
                container.innerHTML = '<div class="text-center py-4"><div class="spinner-border text-primary" role="status"></div></div>';

                fetch('{{ route("admin.survey.management.archive") }}?' + params.toString(), {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.text())
                .then(html => {
                    container.innerHTML = html;
                    initializeEventListeners();
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                });
            });
        });
    }

    document.getElementById('filterTraining').addEventListener('change', loadSessions);
    document.getElementById('filterDateFrom').addEventListener('change', loadSessions);
    document.getElementById('filterDateTo').addEventListener('change', loadSessions);
    
    document.getElementById('filterSearch').addEventListener('input', function() {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(loadSessions, 500);
    });

    document.getElementById('clearFilters').addEventListener('click', function() {
        document.getElementById('filterTraining').value = '';
        document.getElementById('filterDateFrom').value = '';
        document.getElementById('filterDateTo').value = '';
        document.getElementById('filterSearch').value = '';
        loadSessions();
    });

    initializeEventListeners();
});
</script>
@endpush