@extends('site.layouts.master')
@section('title', $course->name)
@section('content')
    <style>
        .content-wrapper {
            background: #f9f9f9;
        }

        .accordion button[aria-expanded="true"]+.accordion-content {
            max-height: 100%;
        }
        .breadcrumbs {
            margin-bottom: 3em;
        }
    </style>
        <div class="container">
            <div class="row teach">
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <h3>
                       {{ $course->name }}
                    </h3>
                    <b>
                        نام مدرس: {{ $course->teacher->name ?? 'تعریف نشده' }}
                    </b>
                    <p class="text-justify">
                        {!! $course->long_desc !!}
                    </p>
{{--                    <div class="buy-tecch">--}}
{{--                        <a href="">--}}
{{--                            خرید دوره--}}
{{--                        </a>--}}
{{--                    </div>--}}
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <img src="{{ $course->cover }}" alt="image">
                </div>
            </div>

            <div class="accordion">
                <div class="accordion-item my-5">
                    <button class="shadow" aria-expanded="false">
                        <div class="row bigbang-class"
                             style="background: rgb(199,199,199) !important;    padding: 5px 0;
                            background: linear-gradient(249deg, rgb(255 174 0) 2%, rgba(255,255,255,1) 18%, rgba(255,255,255,1) 35%, #ffffff 79%, #ffae00de 100%) !important">
                            <div class="col-lg-1 col-md-2 col-sm-6">
                                <div class="Lesson-bigbang">
{{--                                                <span style="font-size: 11px" class="btn btn-outline-success">--}}
{{--                                                    مشاهده جلسات--}}
{{--                                                </span>--}}
                                     <i class="fas fa-arrow-down"></i>
                                </div>
                            </div>
                            <div class="col-lg-2 col-md-4 col-sm-6">
                                <div class="Lesson-bigbang">
                                    <img class="teach-cou" style="width: 50%; height: 50%;"
                                         src="{{ $course->image }}">
                                </div>
                            </div>

                            <div class="col-lg-3 col-md-6 col-sm-6">
                                <div class="Lesson-bigbang">
                                    <b style="font-size: 15px">
                                        <p>{{ $course->name }}</p>
                                    </b>
                                </div>
                            </div>
                            <div class="col-lg-2 col-md-4 col-sm-6">
                                {{--  <div class="Lesson-bigbang">
                                    <p class="price-Lesson">
                                        قیمت:
                                            <b>
                                               {{ number_format($course->price) }} تومان
                                            </b>
                                    </p>
                                </div>  --}}
                            </div>
                            <div class="col-lg-2 col-md-4 col-sm-6">
                                {{--  <div class="Lesson-bigbang">
                                    <p class="meet-Lesson">
                                        تخفیف
                                        <b>
                                           {{ $course->discount }}%
                                        </b>
                                    </p>
                                </div>  --}}
                            </div>
                            <div class="col-lg-2 col-md-4 col-sm-6">
                                <div class="Lesson-bigbang p-3">
                                    <a>
                                        مشاهده دوره
                                    </a>
                                </div>
                            </div>
                        </div>
                    </button>
                    <div class="accordion-content">
                            <div class="row down-big bg-dark">
                                <div class="col-lg-4">
                                    {{ $course->name }}
                                </div>
                                <div class="col-lg-4"></div>
                                <div class="col-lg-4">
                                    تعداد جلسات :
                                {{ $course->lessonsCount() }}
                                </div>
                            </div>
                                <div class="row down-big">
                                    @foreach ($course->seasons()->orderBy('position')->get() as $season)
                                    <div class="row down-big bg-dark">
                                        <div class="col-lg-4">
                                            {{ $season->title }}
                                        </div>
                                        <div class="col-lg-4"></div>
                                        <div class="col-lg-4">
                                            تعداد جلسات : {{ $season->lessonsCount() }}
                                        </div>
                                    </div>
                                    @foreach ($season->lessons()->orderBy('position')->get() as $lesson)
                                        <div class="row down-big">
                                            <div class="col-lg-3">
                                                {{ $lesson->position }}
                                            </div>
                                            <div class="col-lg-3">
                                                {{ $lesson->title }}
                                            </div>
                                            <div class="col-lg-3">

                                            </div>
                                            <div class="col-lg-3">
                                                @if ($lesson->is_active)
                                                    <a href="{{ route('teachersho.stream', $lesson) }}" target="_blank"
                                                        class="btn btn-dark">
                                                        مشاهده جلسه
                                                    </a>
                                                @else
                                                @endif
                                            </div>
                                        </div>
                                    @endforeach
                                @endforeach

                                </div>
                    </div>
                </div>
            </div>
        </div>


    <script>
        const items = document.querySelectorAll(".accordion button");

        function toggleAccordion() {
            const itemToggle = this.getAttribute('aria-expanded');

            for (i = 0; i < items.length; i++) {
                items[i].setAttribute('aria-expanded', 'false');
            }

            if (itemToggle == 'false') {
                this.setAttribute('aria-expanded', 'true');
            }
        }

        items.forEach(item => item.addEventListener('click', toggleAccordion));
    </script>
@endsection