@extends('layouts.student')

@section('content')
    <div class="page-wrapper">
        <!-- Page header -->
        <div class="page-header d-print-none">
            <div class="container-xl">
                <div class="row g-2 align-items-center">
                    <div class="col">
                        <h2 class="page-title">
                            {{ $topic->title }}
                        </h2>
                    </div>
                    <!-- Page title actions -->
                </div>
            </div>
        </div>
        <!-- Page body -->
        <div class="page-body">
            <div class="container-xl">
                <div class="row g-4">
                    <div class="col-md-3">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="avatar avatar-md"
                                    style="background-image: url({{ asset('banners/' . $topic->banner) }})"></div>
                            </div>
                            <div class="col-md-12">
                                <hr>
                            </div>
                            <div class="col-md-12">
                                <label><b>Summary</b></label>
                                <p>{{ $topic->summary }}</p>
                            </div>
                            <div class="col-md-12">
                                <hr>
                            </div>
                            <div class="col-md-12  mt-4">
                                <label>Files</label>
                                <ul>
                                    @foreach ($topic->files as $file)
                                        <li><a href="{{ asset('documents/' . $file->file) }}">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="currentColor"
                                                    class="icon icon-tabler icons-tabler-filled icon-tabler-file">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                    <path
                                                        d="M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z" />
                                                    <path d="M19 7h-4l-.001 -4.001z" />
                                                </svg>
                                                {{ $file->created_at }}</a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>

                            <div class="col-md-12">
                                <hr>
                            </div>
                            <div class="col-md-12">
                                <label><b>Quizes</b></label>
                                <ul>
                                    @foreach ($topic->quizes as $quiz)
                                        <li><a href="{{ route('student.startquiz', $quiz->id) }}">{{ $quiz->title }}</a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="card">

                            <div class="card-body">
                                {!! $topic->content !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('includes.admin_footer')
    </div>
@endsection

@section('scripts')
@endsection