@extends('layouts.master')

@section('title', $course->title)

@section('pageContent')
    @include('layouts.breadcrumb', ['title' => 'Course Detail', 'subtitle' => $course->title, 'link' => 'admin.course.index'])

    <div class="card overflow-hidden">
        <div class="position-relative">
            {{-- Thumbnail --}}
            <img src="{{ $course->thumbnail ? asset('storage/'.$course->thumbnail) : asset('build/images/blog/blog-img5.jpg') }}"
                 class="card-img-top rounded-0 object-fit-cover w-100"
                 alt="{{ $course->title }}"
                 style="height: 300px; object-position: center;">

            <span class="badge text-bg-light mb-9 me-9 position-absolute bottom-0 end-0">
        {{ $course->duration ?? '0 min' }} Read
      </span>

            {{-- Avatar Author Placeholder --}}
            <img src="{{ asset('build/images/profile/user-1.jpg') }}"
                 class="img-fluid rounded-circle position-absolute bottom-0 start-0 mb-n9 ms-9"
                 alt="Author" width="40" height="40">
        </div>

        <div class="card-body p-4">
            {{-- Theme Badge --}}
            @if($course->theme)
                <span class="badge text-bg-light mt-3">{{ $course->theme }}</span>
            @endif

            <h2 class="fs-9 fw-semibold my-4">{{ $course->title }}</h2>

            <div class="d-flex align-items-center gap-4 mb-3">
                <div class="d-flex align-items-center fs-2 ms-auto">
                    <i class="ti ti-point text-dark"></i>{{ $course->created_at->format('D, M d') }}
                </div>
            </div>
        </div>

        {{-- Content --}}
        <div class="card-body border-top p-4">
            {{-- Description --}}
            @if($course->description)
                <p class="mb-3 text-muted">{{ $course->description }}</p>
            @endif

            {{-- YouTube Embed --}}
            @if($course->link_youtube)
                <div class="ratio ratio-16x9 mb-4">
                    <iframe src="{{ $course->link_youtube }}" frameborder="0" allowfullscreen></iframe>
                </div>
            @endif

            <div class="text-dark">
                {!! $course->content !!}
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ URL::asset('build/libs/quill/dist/quill.min.js') }}"></script>
    <script>
        var quillView = new Quill('.quill-content', {
            theme: 'snow',
            readOnly: true,
            modules: {
                toolbar: false
            }
        });
    </script>
@endsection