@extends('layouts/contentNavbarLayout')

@section('title', 'Staff Profile')

@section('vendor-style')
    <style>
        .img-fluid {
            width: 1140px;
            height: 250px;
        }
    </style>
@endsection

@section('page-script')
    <script>
        window.updateUrl = "{{ route('courses.update', ':id') }}";
        window.csrfToken = "{{ csrf_token() }}";
        window.statusUpdate = function(id, status) {
            const url = window.updateUrl.replace(':id', id);
            console.log(url);


            $.ajax({
                url: url,
                method: 'PUT',
                data: {
                    status: status
                },
                headers: {
                    'X-CSRF-TOKEN': window.csrfToken
                },
                beforeSend: function() {
                    showLoader();
                },
                complete: function() {
                    hideLoader();
                },
                success: function(response) {
                    // Refresh the DataTable
                    notyf.success(response.message);
                    window.location.reload()
                },
                error: function(response) {
                    if (response.responseJSON && response.responseJSON.message) {
                        notyf.error(response.responseJSON.message);
                    }
                }
            });
        };
    </script>
@endsection

@section('content')
    <div class="container">
        <div class="row mb-12 g-6">
            <div class="col-md-4 col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">{{ $course->name ?? '' }}</h5>
                    </div>
                    <img class="img-fluid" src="{{ $course->document->url ?? asset('assets/img/no-image.png') }}"
                        alt="Card image cap" />
                    <div class="card-body d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center">
                            <p class="card-text mb-0"><b>Category</b>: {{ $course->category->name ?? '' }}</p>
                        </div>
                        <div class="d-flex align-items-center">
                            <button type="button"
                                onclick="statusUpdate({{ $course->id }},{{ $course->status == 'active' ? '"archived"' : '"active"' }})"
                                class="btn btn-{{ $course->status == 'active' ? 'secondary' : 'primary' }} btnArchive"><i
                                    class="bx bx-hide me-1"></i>
                                {{ $course->status == 'active' ? 'Unpublicise' : 'Publicise' }}</button>
                            <a href="{{ route('courses.edit', $course->id) }}"
                                class="btn btn-icon btn-label-primary waves-effect ms-2">
                                <span class="icon-base ti tabler-edit icon-22px"></span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">

                        <!-- About Section -->
                        <span class="text-uppercase text-muted">About</span>
                        <ul class="list-unstyled mb-4">
                            <li class="mb-3 d-flex align-items-start">
                                <i class="icon-base ti tabler-folder icon-sm me-3 fs-5 mt-1"></i>
                                <span><strong>Course Name:</strong> {{ $course->name }}</span>
                            </li>
                            <li class="mb-3 d-flex align-items-start">
                                <i class="icon-base ti tabler-crown icon-sm me-3 fs-5 mt-1"></i>
                            </li>
                            <li class="mb-3 d-flex align-items-start">
                                <i class="icon-base ti tabler-flag icon-sm me-3 fs-5 mt-1"></i>
                                <span><strong>Type:</strong> {{ $course->category->name ?? '-' }}</span>
                            </li>
                            <li class="mb-3 d-flex align-items-start">
                                <i class="icon-base ti tabler-check icon-sm me-3 fs-5 mt-1"></i>
                                <span><strong>Status:</strong> {{ $course->status }}</span>
                            </li>
                            <li class="mb-3 d-flex align-items-start">
                                <i class="icon-base ti tabler-language icon-sm me-3 fs-5 mt-1"></i>
                                <span><strong>No. Of Lessons:</strong> {{ $course->lessons->count() ?? 0 }}</span>
                            </li>
                            <li class="mb-3 d-flex align-items-start">
                                <i class="icon-base ti tabler-books icon-sm me-3 fs-5 mt-1"></i>
                                <span><strong>Product:</strong> {{ $course->product->name ?? '-' }}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="card mb-3">
                    <div class="card-body">

                        <!-- Course Description Section -->
                        <span class="text-uppercase text-muted">Course Description</span>
                        <p>{!! $course->description !!}</p>
                    </div>
                </div>
                <div class="accordion mt-4 accordion-header-primary active" id="accordionStyle1">
                    <!-- Lessons without topic -->
                    @foreach ($course->lessons as $key => $lesson)
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse"
                                    data-bs-target="#accordionStyle1-lesson-{{ $key + 1 }}"
                                    aria-expanded="false">Lesson
                                    {{ $key + 1 }} Information</button>
                            </h2>
                            <div id="accordionStyle1-lesson-{{ $key + 1 }}"
                                class="accordion-collapse collapse {{ $key == 0 ? 'show' : '' }}"
                                data-bs-parent="#accordionStyle1">
                                <div class="accordion-body">
                                    <div class="card shadow-sm mb-4 border-0">
                                        <div
                                            class="card-header bg-white border-0 d-flex justify-content-between align-items-center">
                                            <h5 class="mb-0 fw-semibold">{{ $lesson->name }}</h5>
                                            <span class="text-orange fs-4" style="cursor: pointer;">⌄</span>
                                        </div>
                                        <!-- Image/Thumbnail Area -->
                                        <div class="bg-light mb-3 w-100"
                                            style="height: 250px; background-image: url('{{ $lesson->document->url ?? asset('assets/img/no-image.png') }}'); background-size: cover; background-position: center;">
                                            @if (!isset($lesson->document->url))
                                                <div class="w-100 h-100 d-flex align-items-center justify-content-center text-muted"
                                                    style="background-image: repeating-conic-gradient(#f1f1f1 0% 25%, transparent 0% 50%) 0% 0% / 20px 20px;">
                                                    <em>No Preview Available</em>
                                                </div>
                                            @endif
                                        </div>
                                        <!-- Description -->
                                        <div class="px-4 pb-4">
                                            <h6 class="fw-bold">Lesson Description:</h6>
                                            <p class="text-muted" style="line-height: 1.6;">
                                                {!! $lesson->description !!}
                                            </p>
                                            <!-- PDF Download -->
                                            @if (isset($lesson->document->url))
                                                <a href="{{ $lesson->document->url ?? '' }}" download=""
                                                    class="d-flex align-items-center justify-content-between border rounded p-3 text-decoration-none text-dark hover-shadow">
                                                    <div class="d-flex align-items-center gap-2">
                                                        <i class="bi bi-file-earmark-text-fill fs-4 text-primary"></i>
                                                        <div>
                                                            <div>{{ $lesson->document->name }}</div>
                                                        </div>
                                                    </div>
                                                </a>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach

                    <!-- Lessons grouped by topic (if any topics exist) -->
                    @if ($course->topics && $course->topics->count())
                        @foreach ($course->topics as $topicIndex => $topic)
                            @foreach ($topic->lessons as $lessonIndex => $lesson)
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse"
                                            data-bs-target="#accordionStyle1-topic-{{ $topicIndex + 1 }}-lesson-{{ $lessonIndex + 1 }}"
                                            aria-expanded="false">
                                            {{ $topic->title }} - Lesson {{ $lessonIndex + 1 }} Information
                                        </button>
                                    </h2>
                                    <div id="accordionStyle1-topic-{{ $topicIndex + 1 }}-lesson-{{ $lessonIndex + 1 }}"
                                        class="accordion-collapse collapse" data-bs-parent="#accordionStyle1">
                                        <div class="accordion-body">
                                            <div class="card shadow-sm mb-4 border-0">
                                                <div
                                                    class="card-header bg-white border-0 d-flex justify-content-between align-items-center">
                                                    <h5 class="mb-0 fw-semibold">{{ $lesson->name }}</h5>
                                                    <span class="text-orange fs-4" style="cursor: pointer;">⌄</span>
                                                </div>
                                                <!-- Image/Thumbnail Area -->
                                                <div class="bg-light mb-3 w-100"
                                                    style="height: 250px; background-image: url('{{ $lesson->document->url ?? asset('assets/img/no-image.png') }}'); background-size: cover; background-position: center;">
                                                    @if (!isset($lesson->document->url))
                                                        <div class="w-100 h-100 d-flex align-items-center justify-content-center text-muted"
                                                            style="background-image: repeating-conic-gradient(#f1f1f1 0% 25%, transparent 0% 50%) 0% 0% / 20px 20px;">
                                                            <em>No Preview Available</em>
                                                        </div>
                                                    @endif
                                                </div>
                                                <!-- Description -->
                                                <div class="px-4 pb-4">
                                                    <h6 class="fw-bold">Lesson Description:</h6>
                                                    <p class="text-muted" style="line-height: 1.6;">
                                                        {!! $lesson->description !!}
                                                    </p>
                                                    <!-- PDF Download -->
                                                    @if (isset($lesson->document->url))
                                                        <a href="{{ $lesson->document->url ?? '' }}" download=""
                                                            class="d-flex align-items-center justify-content-between border rounded p-3 text-decoration-none text-dark hover-shadow">
                                                            <div class="d-flex align-items-center gap-2">
                                                                <i
                                                                    class="bi bi-file-earmark-text-fill fs-4 text-primary"></i>
                                                                <div>
                                                                    <div>{{ $lesson->document->name }}</div>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection