@extends('web.layouts.layout')

@section('content')

    <main>
        <!-- Start section -->
        <section class="courses_det_pg products_det_pg section">
            <div class="container">
                <ul class="nav nav-pills mb-5" id="pills-tab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="pills-about-tab" data-bs-toggle="pill"
                                data-bs-target="#pills-about" type="button" role="tab" aria-controls="pills-about"
                                aria-selected="true">
                            {{ __('courses::courses.about_course') }}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-schedule-tab" data-bs-toggle="pill"
                                data-bs-target="#pills-schedule" type="button" role="tab" aria-controls="pills-schedule"
                                aria-selected="false">
                            {{ __('courses::courses.schedule') }}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-rates-tab" data-bs-toggle="pill"
                                data-bs-target="#pills-rates" type="button" role="tab" aria-controls="pills-rates"
                                aria-selected="false">
                            {{ __('products::products.ratings') }}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-trainer-tab" data-bs-toggle="pill"
                                data-bs-target="#pills-trainer" type="button" role="tab" aria-controls="pills-trainer"
                                aria-selected="false">
                            {{ __('courses::courses.trainer') }}
                        </button>
                    </li>
                </ul>

                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-8">
                            <div class="tab-content" id="pills-tabContent">
                                <div class="tab-pane fade show active" id="pills-about" role="tabpanel"
                                     aria-labelledby="pills-about-tab">
                                    @include('web.courses::show._about_course')
                                </div>
                                <div class="tab-pane fade" id="pills-schedule" role="tabpanel"
                                     aria-labelledby="pills-schedule-tab">
                                    @include('web.courses::show.live._schedule')
                                </div>
                                <div class="tab-pane fade" id="pills-rates" role="tabpanel"
                                     aria-labelledby="pills-rates-tab">
                                    <div class="rates_tab col-lg-11 mb-4">
                                        <div class="row align-items-center mb-4">
                                            <div class="col-lg-6">
                                                <h5 class="mb-0 fw-bold">
                                                    {{ __('products::products.ratings') }}
                                                </h5>
                                            </div>
                                            <div class="col-lg-6 text-lg-end">
                                                @if($canBeRated)
                                                    <a href="javascript:void(0);"
                                                       class="butn primary_butn d-inline-flex mt-5 mt-lg-0"
                                                       data-bs-toggle="modal"
                                                       data-bs-target="#modal-rate">
                                                        <span class="small">
                                                            <i class="fal fa-star me-1"></i>
                                                            {{ __('products::products.write_review') }}
                                                            <i class="fal fa-star ms-1"></i>
                                                        </span>
                                                    </a>
                                                @endif
                                            </div>
                                        </div>
                                        <!-- rating list -->
                                        @include('web.courses::show._rating_list')
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-trainer" role="tabpanel"
                                     aria-labelledby="pills-trainer-tab">
                                    @include('web.courses::show._trainer')
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            @include('web.courses::show._course_sidebar_info')
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    @if($canBeRated)
        <!-- Modal -->
        @include('web.courses::show._rating_modal')
    @endif

@endsection

@push('stack_scripts')

@endpush