@extends('layouts.front')

@section('content')
    <section id="page-banner" class="pt-105 pb-110 bg_cover" data-overlay="8"
        style="background-image: url(images/page-banner-2.jpg)">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="page-banner-cont">
                        <h2>{{ $mytopic->title }}</h2>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('front.index') }}">Home</a></li>
                                <li class="breadcrumb-item"><a href="#">Topics</a></li>
                                <li class="breadcrumb-item active" aria-current="page">{{ $mytopic->title }}</li>
                            </ol>
                        </nav>
                    </div> <!-- page banner cont -->
                </div>
            </div> <!-- row -->
        </div> <!-- container -->
    </section>

    <!--====== PAGE BANNER PART ENDS ======-->

    <!--====== COURSES SINGEl PART START ======-->

    <section id="corses-singel" class="pt-90 pb-120 gray-bg">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="corses-singel-left mt-30">
                        <div class="title">
                            <h3>{{ $mytopic->title }}</h3>
                        </div> <!-- title -->
                        <div class="course-terms">
                            <ul>
                                <li>
                                    <div class="teacher-name">
                                        {{-- <div class="thum">
                                            <img src="images/course/teacher/t-1.jpg" alt="Teacher">
                                        </div> --}}
                                        <div class="name">
                                            <span>Grade</span>
                                            <h6>{{ $mytopic->grade->title ?? null }}</h6>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="course-category">
                                        <span>Subject</span>
                                        <h6>{{ $mytopic->subject->title ?? null }} </h6>
                                    </div>
                                </li>
                                <li>
                                    <div class="review">
                                        <span>Review</span>
                                        <ul>
                                            <li><a href="#"><i class="fa fa-star"></i></a></li>
                                            <li><a href="#"><i class="fa fa-star"></i></a></li>
                                            <li><a href="#"><i class="fa fa-star"></i></a></li>
                                            <li><a href="#"><i class="fa fa-star"></i></a></li>
                                            <li><a href="#"><i class="fa fa-star"></i></a></li>
                                            <li class="rating">(20 Reviws)</li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </div> <!-- course terms -->

                        <div class="corses-singel-image pt-50">
                            <img src="{{ asset('banners/' . $mytopic->banner) }}" alt="Courses">
                        </div> <!-- corses singel image -->

                        <div class="corses-tab mt-30">
                            <ul class="nav nav-justified" id="myTab" role="tablist">
                                <li class="nav-item">
                                    <a class="active" id="overview-tab" data-toggle="tab" href="#overview" role="tab"
                                        aria-controls="overview" aria-selected="true">Overview</a>
                                </li>
                                <li class="nav-item">
                                    <a id="quiz-tab" data-toggle="tab" href="#quiz" role="tab" aria-controls="quiz"
                                        aria-selected="false">Quiz</a>
                                </li>
                                <li class="nav-item">
                                    <a id="reviews-tab" data-toggle="tab" href="#reviews" role="tab"
                                        aria-controls="reviews" aria-selected="false">Reviews</a>
                                </li>
                            </ul>

                            <div class="tab-content" id="myTabContent">
                                <div class="tab-pane fade show active" id="overview" role="tabpanel"
                                    aria-labelledby="overview-tab">
                                    <div class="overview-description">
                                        {!! $mytopic->summary !!}

                                    </div> <!-- overview description -->
                                    <br>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <a href="{{ route('student.topicdetails', $mytopic->id) }}"
                                                class="btn btn-success">Read the full topic</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="quiz" role="tabpanel" aria-labelledby="quiz-tab">
                                    <div class="quiz-cont">
                                        <div class="title">
                                            <h6>List of available quizes</h6>
                                            <ul>
                                                @foreach ($mytopic->quizes as $quiz)
                                                    <li><a
                                                            href="{{ route('student.startquiz', $quiz->id) }}">{{ $quiz->title }}</a>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>

                                    </div> <!-- quiz cont -->
                                </div>

                                <div class="tab-pane fade" id="reviews" role="tabpanel" aria-labelledby="reviews-tab">
                                    <div class="reviews-cont">
                                        <div class="title">
                                            <h6>Student Reviews (Coming Soon)</h6>
                                        </div>
                                        <ul>
                                            <li>
                                                <div class="singel-reviews">
                                                    <div class="reviews-author">
                                                        <div class="author-thum">
                                                            <img src="images/review/r-1.jpg" alt="Reviews">
                                                        </div>
                                                        <div class="author-name">
                                                            <h6>Bobby Aktar</h6>
                                                            <span>April 03, 2019</span>
                                                        </div>
                                                    </div>
                                                    <div class="reviews-description pt-20">
                                                        <p>There are many variations of passages of Lorem Ipsum available,
                                                            but the majority have suffered alteration in some form, by
                                                            injected humour, or randomised words which.</p>
                                                        <div class="rating">
                                                            <ul>
                                                                <li><i class="fa fa-star"></i></li>
                                                                <li><i class="fa fa-star"></i></li>
                                                                <li><i class="fa fa-star"></i></li>
                                                                <li><i class="fa fa-star"></i></li>
                                                                <li><i class="fa fa-star"></i></li>
                                                            </ul>
                                                            <span>/ 5 Star</span>
                                                        </div>
                                                    </div>
                                                </div> <!-- singel reviews -->
                                            </li>

                                        </ul>
                                        <div class="title pt-15">
                                            <h6>Leave A Comment</h6>
                                        </div>
                                        <div class="reviews-form">
                                            <form action="#">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-singel">
                                                            <input type="text" placeholder="Fast name">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-singel">
                                                            <input type="text" placeholder="Last Name">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-12">
                                                        <div class="form-singel">
                                                            <div class="rate-wrapper">
                                                                <div class="rate-label">Your Rating:</div>
                                                                <div class="rate">
                                                                    <div class="rate-item"><i class="fa fa-star"
                                                                            aria-hidden="true"></i></div>
                                                                    <div class="rate-item"><i class="fa fa-star"
                                                                            aria-hidden="true"></i></div>
                                                                    <div class="rate-item"><i class="fa fa-star"
                                                                            aria-hidden="true"></i></div>
                                                                    <div class="rate-item"><i class="fa fa-star"
                                                                            aria-hidden="true"></i></div>
                                                                    <div class="rate-item"><i class="fa fa-star"
                                                                            aria-hidden="true"></i></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-12">
                                                        <div class="form-singel">
                                                            <textarea placeholder="Comment"></textarea>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-12">
                                                        <div class="form-singel">
                                                            <button type="button" class="main-btn">Post Comment</button>
                                                        </div>
                                                    </div>
                                                </div> <!-- row -->
                                            </form>
                                        </div>
                                    </div> <!-- reviews cont -->
                                </div>
                            </div> <!-- tab content -->
                        </div>
                    </div> <!-- corses singel left -->

                </div>
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-lg-12 col-md-6">
                            <div class="course-features mt-30">
                                <h4>Course Features </h4>
                                <ul>
                                    <li><i class="fa fa-clone"></i>Files : <span>{{$mytopic->files->count()}}</span></li>
                                    <li><i class="fa fa-beer"></i>Quizzes : <span>{{$mytopic->quizes->count()}}</span></li>
                                    <li><i class="fa fa-user-o"></i>Students : <span>{{$mytopic->getstudents()->count()}}</span></li>
                                </ul>
                                <div class="price-button pt-10">
                                    <span>
                                        <b  @if($mytopic->is_paid == 1) style="color:red" @endif>{{ $mytopic->is_paid == 1 ? 'Premium' : 'Free' }}</b></span>
                                    <a href="#" class="main-btn">Enroll Now</a>
                                </div>
                            </div> <!-- course features -->
                        </div>
                        <div class="col-lg-12 col-md-6">
                            <div class="You-makelike mt-30">
                                <h4>Supporting Documents</h4>
                                @if(Auth::user())
                                <ul>
                                    @foreach ($mytopic->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>
                                @else
                                <a class="btn btn-xs btn-success" href="{{ route('student.dashboard')}}"> Login to view</a>
                                @endif
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-6">
                            <div class="You-makelike mt-30">
                                <h4>Tags</h4>
                                @foreach ($mytopic->topictags as $tags)
                                    <div class="singel-makelike mt-20">
                                        <div class="cont">
                                            <a href="#">
                                                <h4>{{ $tags->tag->title }}</h4>
                                            </a>
                                        </div>
                                    </div>
                                @endforeach

                            </div>
                        </div>
                    </div>
                </div>
            </div> <!-- row -->
            <div class="row">
                <div class="col-lg-8">
                    <div class="releted-courses pt-95">
                        <div class="title">
                            <h3>Releted Courses</h3>
                        </div>
                        <div class="row">
                            @foreach ($relateds as $ds)
                                <div class="col-md-6">
                                    <div class="singel-course mt-30">
                                        <div class="thum">
                                            <div class="image">
                                                <img src="{{ asset('banners/' . $ds->banner) }}" alt="Course"
                                                    style="height: 250px;">
                                            </div>
                                            <div class="price" >
                                                <span @if($ds->is_paid == 1) style="background:red;color:white" @endif>{{ $ds->is_paid == 1 ? 'Premium' : 'Free' }}</span>
                                            </div>
                                        </div>
                                        <div class="cont">
                                            <ul>
                                                <li><i class="fa fa-star"></i></li>
                                                <li><i class="fa fa-star"></i></li>
                                                <li><i class="fa fa-star"></i></li>
                                                <li><i class="fa fa-star"></i></li>
                                                <li><i class="fa fa-star"></i></li>
                                            </ul>
                                            <span>(20 Reviws)</span>
                                            <br>
                                            <a href="{{ route('front.topic', $ds->slug) }}">
                                                <h4>{{ $ds->title }}</h4>
                                            </a>
                                            <div class="course-teacher">
                                                <div class="name">
                                                    <a href="{{ route('front.topic', $ds->id) }}">
                                                        <h6>{{ $ds->grade->title ?? (null . '/' . $ds->subject->title ?? null) }}
                                                        </h6>
                                                    </a>
                                                </div>
                                                <div class="admin">
                                                    <ul>
                                                        <li><a href="#"><i
                                                                    class="fa fa-user"></i><span>{{$ds->getstudents()->count()}}</span></a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div> <!-- singel course -->
                                </div>
                            @endforeach

                        </div> <!-- row -->
                    </div> <!-- releted courses -->
                </div>
            </div> <!-- row -->
        </div> <!-- container -->
    </section>
@endsection

@section('scripts')
@endsection