@extends('components.dashboard.layouts.master')

@section('title', __('Question Details'))

@section('styles')
    <style>
        .question-title {
            font-size: 1.5rem;
            font-weight: bold;
            letter-spacing: 0.5px;
            color: white;
            margin: 0;
        }
         #imageModal {
             display: none;
             position: fixed;
             z-index: 10000;
             left: 0; top: 0;
             width: 100%;
             height: 100%;
             background-color: rgba(0,0,0,0.8);
             justify-content: center;
             align-items: center;
         }
        #imageModal img {
            max-width: 90%;
            max-height: 90%;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0,0,0,0.7);
        }
        #imageModal.show {
            display: flex;
        }
        #imageModal .closeBtn {
            position: absolute;
            top: 20px;
            right: 30px;
            font-size: 40px;
            color: white;
            cursor: pointer;
            font-weight: bold;
            user-select: none;
        }
    </style>
@endsection

@section('content')
    <div class="app-content content">
        <div class="content-wrapper">
            <div class="content-body">

                <x-dashboard.layouts.breadcrumb now="{{ __('Question Details') }}">
                    <li class="breadcrumb-item">
                        <a href="{{ route('teacher.questions-bank.index') }}">{{ __('Questions bank') }}</a>
                    </li>
                </x-dashboard.layouts.breadcrumb>

                <section id="question-details" class="mt-3">
                    <div class="row justify-content-center">
                        <div class="col-md-10">
                            <div class="card shadow rounded" >
                                <div class="card-header bg-primary d-flex justify-content-center" style="padding-bottom: 20px;">
                                    <h5 class="question-title">{{ __('Question Details') }}</h5>
                                </div>

                                <div class="card-body">

                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <strong>{{ __('Course name') }}:</strong>
                                            <p>{{ $questionBank->lesson->course->title ?? '-' }}</p>
                                        </div>
                                        <div class="col-md-6">
                                            <strong>{{ __('Lesson Name') }}:</strong>
                                            <p>{{ $questionBank->lesson->title ?? '-' }}</p>
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <strong>{{ __('Question Text') }}:</strong>
                                        <p>{{ $questionBank->question_text }}</p>
                                    </div>

                                    @if($questionBank->getFirstMediaUrl('image'))
                                        <img
                                            id="thumbnailImage"
                                            src="{{ $questionBank->getFirstMediaUrl('image') }}"
                                            alt="Question Image"
                                            style="max-width: 300px; cursor: pointer; border-radius: 8px;"
                                            onclick="openModal()"
                                        >
                                    @endif

                                    <div id="imageModal" onclick="closeModal(event)">
                                        <span class="closeBtn" onclick="closeModal(event)">&times;</span>
                                        <img id="modalImg" src="" alt="Expanded Image" onclick="event.stopPropagation()">
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-md-4">
                                            <strong>{{ __('Question Type') }}:</strong><br>
                                            <span class="badge bg-primary">{{ __($questionBank->question_type) }}</span>
                                        </div>

                                        <div class="col-md-4">
                                            <strong>{{ __('Question Score') }}:</strong><br>
                                            <span class="badge bg-primary">{{ $questionBank->score }}</span>
                                        </div>

                                        <div class="col-md-4">
                                            <strong>{{ __('Difficulty Level') }}:</strong><br>
                                            @php
                                                $iconClass = match($questionBank->difficulty_level) {
                                                    'easy' => 'fa-circle-check text-success',
                                                    'medium' => 'fa-circle-half-stroke text-warning',
                                                    'hard' => 'fa-circle-xmark text-danger',
                                                    default => 'fa-circle-question text-muted',
                                                };
                                            @endphp
                                            <i class="fas {{ $iconClass }}"></i>
                                            <span>{{ __($questionBank->difficulty_level) }}</span>
                                        </div>
                                    </div>

                                    @if($questionBank->question_type === 'mcq' && $questionBank->options)
                                        <div class="mb-3">
                                            <strong>{{ __('Choices') }}:</strong>
                                            <ul class="list-group mt-2">
                                                @foreach ($questionBank->options as $option)
                                                    <li class="list-group-item"
                                                        style="{{ $option->is_correct ? 'background-color: #d4edda; border-color: #28a745;' : '' }}">

                                                        <!-- Answer text -->
                                                        <div class="answer-text mb-1 text-dark">
                                                            <strong>{{ __('Answer') }}:</strong> {{ $option->answer }}
                                                        </div>

                                                        <!-- Answer image if exists -->
                                                        @if($option->getFirstMediaUrl('answers_image'))
                                                            <img src="{{ $option->getFirstMediaUrl('answers_image') }}"
                                                                 alt="Answer Image"
                                                                 class="img-thumbnail mb-2"
                                                                 style="max-width: 150px;">
                                                        @endif

                                                        <!-- Comment section -->
                                                        @if($option->comment)
                                                            <div class="option-comment p-2 border rounded" style="background-color: #f8f9fa;">
                                                                <strong>{{ __('Comment')}}:</strong>
                                                                <p class="mb-0 text-dark">{{ $option->comment }}</p>
                                                            </div>
                                                        @endif

                                                    </li>
                                                @endforeach


                                            </ul>
                                        </div>
                                    @elseif($questionBank->answer)
                                           <div class="mb-3">
                                               <strong>{{ __('Answer') }}:</strong>
                                               <p>{{ $questionBank->answer }}</p>
                                           </div>
                                           <div class="mb-9">
                                               <strong>{{ __('Comment') }}:</strong>
                                               <p>{{ $questionBank->comment }}</p>
                                           </div>
                                    @endif

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

            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        function openModal() {
            const modal = document.getElementById('imageModal');
            const modalImg = document.getElementById('modalImg');
            const thumbnail = document.getElementById('thumbnailImage');
            modalImg.src = thumbnail.src;
            modal.classList.add('show');
        }

        function closeModal(event) {
            event.stopPropagation();
            const modal = document.getElementById('imageModal');
            modal.classList.remove('show');
            document.getElementById('modalImg').src = '';
        }
    </script>
@endsection