@extends('admin.layouts.layouts')

@section('content')
    <div class="container mt-5">
        <h1 class="mb-5 text-center text-dark ">Course Details</h1>

        <!-- Assign Session -->
        <div class="mb-4 shadow-sm card">
            <div class="text-white card-header bg-dark">
                <h3 class="mb-0">Assign Session</h3>
            </div>
            <div class="card-body">
                <p><strong>Title:</strong> <span class="text-secondary">{{ $curriculumSession->title }}</span></p>
                <p><strong>Arabic Title:</strong> <span class="text-secondary">{{ $curriculumSession->title_ar }}</span></p>
                <p><strong>Language:</strong> <span class="text-secondary">{{ $curriculumSession->language }}</span></p>
                <p><strong>Arabic Language:</strong> <span
                        class="text-secondary">{{ $curriculumSession->language_ar }}</span></p>
                <p><strong>Rating:</strong> <span class="text-secondary">{{ $curriculumSession->rating }}</span></p>
                @if ($curriculumSession->image)
                    <img src="{{ asset('storage/' . $curriculumSession->image) }}" alt="Course Image"
                        class="mt-2 rounded img-fluid" style="max-width: 150px; height: auto;">
                @endif
            </div>
        </div>

        <!-- Details Session -->
        <div class="mb-4 shadow-sm card">
            <div class="text-white card-header bg-dark">
                <h3 class="mb-0">Details Session</h3>
            </div>
            <div class="card-body">
                @if ($onlineSessions->isNotEmpty())
                    @foreach ($onlineSessions as $session)
                        <div class="mb-3">
                            <p><strong>Price:</strong> <span class="text-secondary">{{ $session->price }}</span></p>
                            <p><strong>Duration (weeks):</strong> <span
                                    class="text-secondary">{{ $session->duration }}</span></p>
                            <p><strong>Lessons:</strong> <span class="text-secondary">{{ $session->lessons }}</span></p>
                            <p><strong>Language:</strong> <span
                                    class="text-secondary">{{ $session->language_details == 'en' ? 'English' : 'Arabic' }}</span>
                            </p>
                            <p><strong>Certificate:</strong> <span
                                    class="text-secondary">{{ $session->certificate }}</span></p>
                            <p><strong>Arabic Certificate:</strong> <span
                                    class="text-secondary">{{ $session->certificate_ar }}</span></p>
                            @if ($session->image)
                                <img src="{{ asset('storage/' . $session->image) }}" alt="Details Image"
                                    class="mt-2 rounded img-fluid" style="max-width: 150px; height: auto;">
                            @endif
                        </div>
                    @endforeach
                @else
                    <p class="text-muted">No online sessions found.</p>
                @endif
            </div>
        </div>

        <!-- Videos Session -->
        <div class="mb-4 shadow-sm card">
            <div class="text-white card-header bg-dark">
                <h3 class="mb-0">Videos Session</h3>
            </div>
            <div class="card-body">
                @if ($videos->isNotEmpty())
                    @foreach ($videos as $video)
                        <div class="mb-3">
                            <p><strong>Video URL:</strong> <a href="{{ $video->videos }}" target="_blank"
                                    class="text-info">{{ $video->videos }}</a></p>
                            @if ($video->video_image)
                                <img src="{{ asset('storage/' . $video->video_image) }}" alt="Video Image"
                                    class="mt-2 rounded img-fluid" style="max-width: 150px; height: auto;">
                            @endif
                        </div>
                    @endforeach
                @else
                    <p class="text-muted">No videos found.</p>
                @endif
            </div>
        </div>

        <!-- Overview -->
        <div class="mb-4 shadow-sm card">
            <div class="text-white card-header bg-dark">
                <h3 class="mb-0">Overview</h3>
            </div>
            <div class="card-body">
                @if ($overviews->isNotEmpty())
                    @foreach ($overviews as $overview)
                        <div class="mb-3">
                            <p><strong>Description:</strong> <span
                                    class="text-secondary">{{ $overview->description }}</span></p>
                            <p><strong>Arabic Description:</strong> <span
                                    class="text-secondary">{{ $overview->description_ar }}</span></p>
                            <p><strong>Other Description:</strong> <span
                                    class="text-secondary">{{ $overview->description_two }}</span></p>
                            <p><strong>Arabic Other Description:</strong> <span
                                    class="text-secondary">{{ $overview->description_two_ar }}</span></p>
                        </div>
                    @endforeach
                @else
                    <p class="text-muted">No overview found.</p>
                @endif
            </div>
        </div>

        <!-- Topic -->
        {{-- <div class="mb-4 shadow-sm card">
            <div class="text-white card-header bg-dark">
                <h3 class="mb-0">Topic</h3>
            </div>
            <div class="card-body">
                @if ($topics->isNotEmpty())
                    @foreach ($topics as $topic)
                        <div class="mb-3">
                            <p><strong>Title:</strong> <span class="text-secondary">{{ $topic->title }}</span></p>
                            <p><strong>Arabic Title:</strong> <span class="text-secondary">{{ $topic->title_ar }}</span>
                            </p>
                            <p><strong>Description:</strong> <span class="text-secondary">{{ $topic->description }}</span>
                            </p>
                            <p><strong>Arabic Description:</strong> <span
                                    class="text-secondary">{{ $topic->description_ar }}</span></p>
                        </div>
                    @endforeach
                @else
                    <p class="text-muted">No topics found.</p>
                @endif
            </div>
        </div>

        <!-- Topic Course Information -->
        <div class="mb-4 shadow-sm card">
            <div class="text-white card-header bg-dark">
                <h3 class="mb-0">Topic Course Information</h3>
            </div>
            <div class="card-body">
                @if ($topicInformation->isNotEmpty())
                    @foreach ($topicInformation as $topicInfo)
                        <div class="mb-3">
                            <p><strong>Title:</strong> <span class="text-secondary">{{ $topicInfo->title }}</span></p>
                            <p><strong>Arabic Title:</strong> <span
                                    class="text-secondary">{{ $topicInfo->title_ar }}</span></p>
                            <p><strong>Time:</strong> <span class="text-secondary">{{ $topicInfo->time }}</span></p>
                        </div>
                    @endforeach
                @else
                    <p class="text-muted">No topic course information found.</p>
                @endif
            </div>
        </div>

        <!-- Question & Answer -->
        <div class="mb-4 shadow-sm card">
            <div class="text-white card-header bg-dark">
                <h3 class="mb-0">Question & Answer</h3>
            </div>
            <div class="card-body">
                @if ($topicQuestions->isNotEmpty())
                    @foreach ($topicQuestions as $topicQues)
                        <div class="mb-3">
                            <p><strong>Question:</strong> <span class="text-secondary">{{ $topicQues->question }}</span>
                            </p>
                            <p><strong>Arabic Question:</strong> <span
                                    class="text-secondary">{{ $topicQues->question_ar }}</span></p>
                            <p><strong>Answer:</strong> <span class="text-secondary">{{ $topicQues->answer }}</span></p>
                            <p><strong>Arabic Answer:</strong> <span
                                    class="text-secondary">{{ $topicQues->answer_ar }}</span></p>
                        </div>
                    @endforeach
                @else
                    <p class="text-muted">No questions found.</p>
                @endif
            </div>
        </div> --}}

        <a href="{{ route('admin.courses.index') }}" class="mt-3 btn btn-outline-dark">Back to List</a>
    </div>
@endsection