@extends('admin.layouts.layouts')

@section('content')
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-lg-10 col-md-12">
                <h1 class="mt-5 mb-4 text-center display-4 text-primary">View Topic Details</h1>

                <!-- Topic Details -->
                <div class="mb-4 shadow-sm card">
                    <div class="text-white card-header bg-primary">
                        <h3 class="mb-0">Topic Details</h3>
                    </div>
                    <div class="card-body">
                        <p class="h5"><strong>Online Session:</strong>
                            <span class="badge bg-info text-dark">{{ $topic->curriculumSession->title ?? 'N/A' }}</span>
                        </p>
                        <p class="h5"><strong>Title:</strong> {{ $topic->title }}</p>
                        <p class="h5"><strong>Arabic Title:</strong> {{ $topic->title_ar }}</p>
                        <p class="h5"><strong>Description:</strong> {{ $topic->description }}</p>
                        <p class="h5"><strong>Arabic Description:</strong> {{ $topic->description_ar }}</p>
                    </div>
                </div>

                <!-- Topic Course Information -->
                @if ($topicInformation && $topicInformation->count())
                    <div class="mb-4 shadow-sm card">
                        <div class="text-white card-header bg-primary">
                            <h3 class="mb-0">Topic Course Information</h3>
                        </div>
                        <div class="card-body">
                            @foreach ($topicInformation as $course)
                                <div class="p-3 mb-3 border rounded shadow-sm">
                                    <p class="h5"><strong>Title:</strong> {{ $course->title }}</p>
                                    <p class="h5"><strong>Arabic Title:</strong> {{ $course->title_ar }}</p>
                                    <p class="h5"><strong>Time:</strong> {{ $course->time }}</p>

                                    <!-- Display each Question-Answer Pair -->
                                    @if (isset($questionsByTopicInfo[$course->id]) && $questionsByTopicInfo[$course->id]->count())
                                        <div class="mt-3">
                                            <h5 class="mb-3 text-secondary">Questions & Answers:</h5>
                                            @foreach ($questionsByTopicInfo[$course->id] as $qa)
                                                <div class="p-2 mb-2 border rounded shadow-sm bg-light">
                                                    <p><strong>Question:</strong> {{ $qa->question }}</p>
                                                    <p><strong>Arabic Question:</strong> {{ $qa->question_ar }}</p>
                                                    <p><strong>Answer:</strong> {{ $qa->answer }}</p>
                                                    <p><strong>Arabic Answer:</strong> {{ $qa->answer_ar }}</p>
                                                </div>
                                            @endforeach
                                        </div>
                                    @else
                                        <p class="text-muted">No questions available for this course.</p>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>
                @else
                    <div class="mb-4 shadow-sm card">
                        <div class="text-white card-header bg-primary">
                            <h3 class="mb-0">No Course Information Available</h3>
                        </div>
                        <div class="card-body">
                            <p class="text-muted">No courses are associated with this topic.</p>
                        </div>
                    </div>
                @endif

                <!-- Back Button -->
                <div class="mt-4 text-center">
                    <a href="{{ route('admin.topics.index') }}" class="btn btn-secondary btn-lg">
                        <i class="fas fa-arrow-left"></i> Back to Topics List
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection