@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.question_detail') }}</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.survey.questions.index') }}">{{ __('admin/survey.survey_questions') }}</a></li>
                    <li class="breadcrumb-item active">{{ __('admin/survey.detail') }}</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.index') }}" class="btn btn-light me-2">
                                <i class="ri-arrow-left-line me-1"></i>{{ __('admin/survey.back_to_list') }}
                            </a>
                            <a href="{{ route('admin.survey.questions.edit', $question->id) }}" class="btn btn-primary">
                                <i class="ri-pencil-line me-1"></i>{{ __('admin/survey.edit') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <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) }}
                                    @if(!$question->translate($locale))
                                        <i class="ri-alert-line text-warning ms-1" title="{{ __('admin/survey.translation_missing') }}"></i>
                                    @endif
                                </a>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                    <div class="card-body p-4">
                        <div class="tab-content">
                            @foreach(config('translatable.locales') as $index => $locale)
                            @php
                                $translation = $question->translations->where('locale', $locale)->first();
                            @endphp
                            <div class="tab-pane {{ $index === 0 ? 'active' : '' }}" id="{{ $locale }}" role="tabpanel">
                                @if($translation)
                                <div class="mb-4">
                                    <div class="mb-4">
                                        <h5 class="text-muted mb-2">{{ __('admin/survey.question_text') }}</h5>
                                        <h3 class="mb-3">{{ $translation->question_text }}</h3>
                                    </div>

                                    @if(in_array($question->questionType->type_code, ['radio', 'checkbox', 'yesno']))
                                        <div class="mb-4">
                                            <h5 class="text-muted mb-3">{{ __('admin/survey.answer_options') }}</h5>
                                            <div class="">
                                                @php
                                                    $options = $question->getOptions($locale);
                                                @endphp
                                                @if(!empty($options))
                                                    <div class="list-group">
                                                        @foreach($options as $index => $option)
                                                            <div class="list-group-item d-flex align-items-center">
                                                                <span class="badge bg-primary me-3">{{ $index + 1 }}</span>
                                                                <span>{{ $option }}</span>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                @else
                                                    <p class="text-muted">{{ __('admin/survey.no_options_defined') }}</p>
                                                @endif
                                            </div>
                                        </div>
                                    @endif
                                </div>
                                @else
                                <div class="mb-4">
                                    <div class="alert alert-info">
                                        <i class="ri-information-line me-2"></i>
                                        {{ __('admin/survey.no_translation_available', ['locale' => strtoupper($locale)]) }}
                                    </div>
                                    <div class="text-center">
                                        <a href="{{ route('admin.survey.questions.edit', $question->id) }}" class="btn btn-primary">
                                            <i class="ri-add-line me-1"></i>{{ __('admin/survey.add_translation', ['locale' => strtoupper($locale)]) }}
                                        </a>
                                    </div>
                                </div>
                                @endif
                            </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">
                            @php
                                $questionText = $question->getTranslatedQuestionText() ?? __('admin/survey.question_not_translated');
                                $typeCode = $question->questionType->type_code;
                            @endphp
                            
                            <strong>{{ $questionText }}</strong>
                            @if($question->is_required)
                                <span class="text-danger">*</span>
                            @endif
                            <br><br>

                            @switch($typeCode)
                                @case('text')
                                    <input type="text" class="form-control" placeholder="{{ __('admin/survey.short_answer') }}" disabled>
                                    @break
                                @case('textarea')
                                    <textarea class="form-control" rows="3" placeholder="{{ __('admin/survey.long_answer') }}" disabled></textarea>
                                    @break
                                @case('radio')
                                @case('yesno')
                                    @php $options = $question->getOptions(); @endphp
                                    @if(!empty($options))
                                        @foreach($options as $index => $option)
                                            <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>
                                        @endforeach
                                    @endif
                                    @break
                                @case('checkbox')
                                    @php $options = $question->getOptions(); @endphp
                                    @if(!empty($options))
                                        @foreach($options as $index => $option)
                                            <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>
                                        @endforeach
                                    @endif
                                    @break
                                @case('scale5')
                                    <div class="d-flex gap-3">
                                        @for($i = 1; $i <= 5; $i++)
                                            <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>
                                        @endfor
                                    </div>
                                    <small class="text-muted">{{ __('admin/survey.scale_5_help') }}</small>
                                    @break
                                @case('scale10')
                                    <div class="d-flex gap-2">
                                        @for($i = 1; $i <= 10; $i++)
                                            <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>
                                        @endfor
                                    </div>
                                    <small class="text-muted">{{ __('admin/survey.scale_10_help') }}</small>
                                    @break
                                @default
                                    <p class="text-muted">{{ __('admin/survey.preview_not_available') }}</p>
                            @endswitch
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4">
                <!-- Configuration de la question -->
                <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 class="form-label">{{ __('admin/survey.question_type') }}</label>
                            <div>
                                <span class="badge bg-info fs-6">{{ $question->questionType->type_name }}</span>
                                <small class="text-muted d-block mt-1">{{ $question->questionType->type_description }}</small>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">{{ __('admin/survey.status') }}</label>
                            <div>
                                @if($question->is_active)
                                <span class="badge bg-success">
                                    <i class="ri-check-line me-1"></i>{{ __('admin/survey.active') }}
                                </span>
                                @else
                                <span class="badge bg-danger">
                                    <i class="ri-close-line me-1"></i>{{ __('admin/survey.inactive') }}
                                </span>
                                @endif
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">{{ __('admin/survey.required_question') }}</label>
                            <div>
                                @if($question->is_required)
                                <span class="badge bg-warning">
                                    <i class="ri-star-fill me-1"></i>{{ __('admin/survey.required') }}
                                </span>
                                <small class="text-muted d-block mt-1">{{ __('admin/survey.user_must_answer') }}</small>
                                @else
                                <span class="badge bg-secondary">{{ __('admin/survey.optional') }}</span>
                                @endif
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">{{ __('admin/survey.order_position') }}</label>
                            <div>
                                <span class="badge bg-primary fs-6">{{ $question->order_position }}</span>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">{{ __('admin/survey.created_at') }}</label>
                            <div>{{ $question->created_at->format('d/m/Y à H:i') }}</div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">{{ __('admin/survey.updated_at') }}</label>
                            <div>{{ $question->updated_at->format('d/m/Y à H:i') }}</div>
                        </div>
                    </div>
                </div>

                <!-- Statistiques des réponses -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">{{ __('admin/survey.response_statistics') }}</h5>
                    </div>
                    <div class="card-body">
                        @php
                            $responsesCount = $question->responses()->count();
                        @endphp
                        <div class="mb-3">
                            <label class="form-label">{{ __('admin/survey.total_responses') }}</label>
                            <div>
                                @if($responsesCount > 0)
                                    <span class="badge bg-primary fs-6">{{ $responsesCount }}</span>
                                @else
                                    <span class="text-muted">{{ __('admin/survey.no_responses_yet') }}</span>
                                @endif
                            </div>
                        </div>

                        @if($responsesCount > 0)
                            <div class="mb-3">
                                <label class="form-label">{{ __('admin/survey.last_response') }}</label>
                                <div>
                                    @php
                                        $lastResponse = $question->responses()->latest()->first();
                                    @endphp
                                    {{ $lastResponse ? $lastResponse->created_at->format('d/m/Y à H:i') : '-' }}
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Actions -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">{{ __('admin/survey.actions') }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <a href="{{ route('admin.survey.questions.edit', $question->id) }}" class="btn btn-primary">
                                <i class="ri-pencil-line me-1"></i>{{ __('admin/survey.edit_this_question') }}
                            </a>
                            <button class="btn btn-danger w-100 open-delete-modal"
                                    data-bs-toggle="modal"
                                    href="#deleteRecordModal"
                                    data-delete-url="{{ route('admin.survey.questions.destroy', $question->id) }}"
                                    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 me-1"></i>{{ __('admin/survey.delete_this_question') }}
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- Langues disponibles -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">{{ __('admin/survey.available_translations') }}</h5>
                    </div>
                    <div class="card-body">
                        @foreach(config('translatable.locales') as $locale)
                        <div class="d-flex align-items-center mb-2">
                            @if($question->translate($locale))
                            <i class="ri-check-line text-success me-2"></i>
                            <span>{{ strtoupper($locale) }} - {{ __('admin/survey.translated') }}</span>
                            @else
                            <i class="ri-close-line text-danger me-2"></i>
                            <span class="text-muted">{{ strtoupper($locale) }} - {{ __('admin/survey.not_translated') }}</span>
                            @endif
                        </div>
                        @endforeach
                    </div>
                </div>
            </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_this_question') }}" />

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