@extends('site.layouts.master')
@section('title', $course->name)
@section('link')
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
@endsection
@section('content')
    <style>
        .accordion button[aria-expanded="true"]+.accordion-content {
            max-height: 100%;
        }

        @media (max-width: 768px) {
            .w3-modal {
                padding-top: 110px !important;
            }
        }
    </style>
    <section class="single-course">
        <div class="container">
            <div class="row course-title">
                <div id="id01" class="w3-modal">
                    <div class="w3-modal-content w3-animate-top w3-card-4">
                        <header class="w3-container w3-teal">
                            <span onclick="document.getElementById('id01').style.display='none'"
                                class="w3-button w3-display-topright">&times;
                            </span>
                            {{--                            <h2>Modal Header</h2> --}}
                        </header>
                        <div class="row text-center">
                            <div class="col-lg-4 col-md-4 col-sm-12">
                                <div class="buy-coursesingle">
                                    <h4>
                                        خرید {{ $course->name }}
                                    </h4>
                                    <p>
                                        قیمت: {{ number_format($course->price) }} تومان
                                        <br>
                                        قیمت با تخفیف: {{ $course->getPrice() }} تومان
                                    </p>
                                    <a href="" class="addToCart" data-course="{{ $course->id }}">
                                        نهایی کردن سفارش
                                    </a>
                                    @if (!$installments->isEmpty())
                                        @if (auth()->check())
                                            <button type="button" class="btn btn-success ms-2 mt-4" data-bs-toggle="modal"
                                                data-bs-target="#installment-modal">
                                                خرید اقساطی
                                            </button>
                                        @else
                                            <a href="{{ route('login') }}" class="btn btn-success ms-2 mt-4">
                                                خرید اقساطی
                                            </a>
                                        @endif
                                    @endif
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-12 mt-4">
                                <p class="text-justify">
                                    {!! $course->buy_desc !!}
                                </p>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-12">
                                @if ($course->related)
                                    <div class="buy-coursebig">
                                        <h4>
                                            {{ $course->related->name }}
                                        </h4>
                                        <p>
                                            قیمت: {{ number_format($course->related->price) }} تومان
                                            <br>
                                            قیمت با تخفیف: {{ $course->related->getPrice() }} تومان
                                        </p>
                                        <a href="" class="addToCart" data-course="{{ $course->related->id }}">
                                            نهایی کردن سفارش
                                        </a>
                                        @if (!$installments->isEmpty())
                                            @if (auth()->check())
                                                <button type="button" class="btn btn-success ms-2 mt-4"
                                                    data-bs-toggle="modal" data-bs-target="#related-installment-modal">
                                                    خرید اقساطی
                                                </button>
                                            @else
                                                <a href="{{ route('login') }}" class="btn btn-success ms-2 mt-4">
                                                    خرید اقساطی
                                                </a>
                                            @endif

                                        @endif
                                    </div>
                                @endif
                            </div>
                        </div>

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

            <!-- Installments Modal -->
            @if (auth()->check())
                @if ($installments)
                    <div class="modal fade" id="installment-modal" tabindex="-1" aria-labelledby="exampleModalLabel"
                        aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h1 class="modal-title fs-5" id="exampleModalLabel">اقساط شما</h1>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="container">
                                        @foreach ($installments as $item)
                                            @php
                                                $prevUserIns = null;
                                                $userIns = $authUser->installments()->where(['installment_id' => $item->id, 'status' => '1']);
                                                $prevIns = App\Models\Installment::where('course_id', $item->course_id)
                                                    ->where('id', '<', $item->id)
                                                    ->orderByDesc('id')
                                                    ->first();
                                                if ($prevIns) {
                                                    $prevUserIns = $authUser
                                                        ->installments()
                                                        ->whereInstallmentId($prevIns->id)
                                                        ->whereHas('payment', function ($q) {
                                                            $q->whereStatus('paid');
                                                        })
                                                        ->first();
                                                }
                                            @endphp
                                            <div class="row my-3 shadow rounded p-2">
                                                <div class="col-4">
                                                    {{ $item->title }}
                                                </div>
                                                <div class="col-4">
                                                    @if ($existsIns = $authUser->installments()->whereInstallmentId($item->id)->first())
                                                        {{ number_format($existsIns->amount) }} تومان
                                                    @else
                                                        {{ number_format($item->price) }} تومان
                                                    @endif
                                                </div>
                                                <div class="col-4">
                                                    @if ($userIns->exists())
                                                        <button type="button" class="btn btn-success text-white"
                                                            disabled>پرداخت شده</button>
                                                    @elseif(($prevUserIns && $prevUserIns->status == '0') || (!$prevUserIns && $prevIns))
                                                        <button type="button" class="btn btn-dark text-white" disabled>غیر
                                                            قابل پرداخت</button>
                                                    @else
                                                        <form action="{{ route('pay') }}" method="GET">
                                                            @csrf
                                                            <input type="hidden" name="type" value="installment">
                                                            <input type="hidden" name="getway" value="bitpay">
                                                            <input type="hidden" name="installment_id"
                                                                value="{{ $item->id }}">
                                                            <button type="submit" class="btn btn-success text-white">پرداخت
                                                                کنید</button>
                                                        </form>
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بستن</button>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                @if ($relatedInstallments)
                    <div class="modal fade" id="related-installment-modal" tabindex="-1"
                        aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h1 class="modal-title fs-5" id="exampleModalLabel">اقساط شما</h1>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="container">
                                        @foreach ($relatedInstallments as $item)
                                            @php
                                                $prevUserIns = null;
                                                $userIns = $authUser->installments()->where(['installment_id' => $item->id, 'status' => '1']);
                                                $prevIns = App\Models\Installment::where('course_id', $item->course_id)
                                                    ->where('id', '<', $item->id)
                                                    ->orderByDesc('id')
                                                    ->first();
                                                if ($prevIns) {
                                                    $prevUserIns = $authUser
                                                        ->installments()
                                                        ->whereInstallmentId($prevIns->id)
                                                        ->whereHas('payment', function ($q) {
                                                            $q->whereStatus('paid');
                                                        })
                                                        ->first();
                                                }
                                            @endphp
                                            <div class="row my-3 shadow rounded p-2">
                                                <div class="col-4">
                                                    {{ $item->title }}
                                                </div>
                                                <div class="col-4">
                                                    {{ number_format($item->price) }} تومان
                                                </div>
                                                <div class="col-4">
                                                    @if ($userIns->exists())
                                                        <button type="button" class="btn btn-success text-white"
                                                            disabled>پرداخت شده</button>
                                                    @elseif(($prevUserIns && $prevUserIns->status == '0') || (!$prevUserIns && $prevIns))
                                                        <button type="button" class="btn btn-dark text-white"
                                                            disabled>غیر
                                                            قابل پرداخت</button>
                                                    @else
                                                        <form action="{{ route('pay') }}" method="GET">
                                                            @csrf
                                                            <input type="hidden" name="type" value="installment">
                                                            <input type="hidden" name="getway" value="bitpay">
                                                            <input type="hidden" name="installment_id"
                                                                value="{{ $item->id }}">
                                                            <button type="submit"
                                                                class="btn btn-success text-white">پرداخت کنید</button>
                                                        </form>
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">بستن</button>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            @endif


            <div class="row header-single">
                <div class="col-lg-6 col-sm-12">
                    <h4>{{ $course->name }}</h4>
                    {{-- <img src="" alt="لوگوی بیگ بنگ میلاد ناصح زاده - کافه کنکور"> --}}
                </div>
                @if($course->is_sell == 1)
                <div class="col-lg-3 col-sm-6 text-center">
                    <button onclick="document.getElementById('id01').style.display='block'"
                        class="w3-button w3-black">خرید
                        دوره</button>
                </div>
                @endif
                {{-- <div class="col-lg-3 col-sm-6 text-center">
                    <p>
                        قیمت نهایی :
                        <span>{{ $course->getPrice() }}</span>
                    </p>
                </div> --}}
                <div class="col-lg-3 col-sm-6 text-center">
                    <div class="Lesson-bigbang">
                        <p class="price-Lesson">
                            قیمت:
                            @if ($course->discount > 0)
                                <b>
                                    {{ number_format($course->price) }}
                                    تومان
                                </b>
                                <br>
                                <b>
                                    قیمت نهایی :
                                    {{ $course->getPrice() }}
                                </b>
                            @else
                                <b>
                                    {{ number_format($course->price) }} تومان
                                </b>
                            @endif
                        </p>
                    </div>
                </div>
            </div>
            <div class="row single-lesson">
                <div class="col-lg-6 col-sm-12 col-md-6">
                    {!! $course->short_desc !!}
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div id="94027445112">
                        {!! $course->teaser !!}
                    </div>
                </div>
                <div class="lesson-text">
                    {{-- {!! $course->long_desc !!} --}}
                    <div class="more-text" id="dots">
                        <p>
                            {!! $course->long_desc !!}
                        </p>
                    </div>
                    <button class="mt-10" onclick="myFunction()" id="myBtn">بیشتر ...</button>
                </div>
            </div>
            <div class="row teacher-video">
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="teacher-in">
                        <h4>{{ $course->teacher->name }}</h4>
                        <p>
                            {!! $course->teacher->description !!}
                        </p>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div id="94027445112">
                        {!! $course->intro !!}
                    </div>
                </div>
            </div>


            <div class="accordion">
                @foreach ($course->seasons()->orderBy('position')->get() as $item)
                    @php
                        $name = $item->name;
                        $name = explode('-', $name);
                    @endphp
                    <div class="accordion-item my-3">
                        <button class="shadow" aria-expanded="false">
                            <div class="row bigbang-class">
                                <div class="col-lg-3 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-3 col-md-6 col-sm-6">
                                    <div class="Lesson-bigbang">
                                        <b style="font-size: 15px">
                                            <p>{{ $item->name }}</p>
                                            <p>{{ $item->title }}</p>
                                        </b>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-4 col-sm-6">
                                    <div class="Lesson-bigbang">
                                        <p class="meet-Lesson">
                                            <b>
                                                {{ $item->lessonsCount() }} جلسه
                                            </b>
                                        </p>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-4 col-sm-6">
                                    <div class="Lesson-bigbang">
                                        <p class="meet-Lesson">
                                            {{ $item->duration() }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </button>
                        <div class="accordion-content">
                            @foreach ($item->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('lesson.stream', $lesson) }}" target="_blank"
                                                class="btn btn-dark">
                                                مشاهده جلسه
                                            </a>
                                        @else
                                            <span class="text-danger">این جلسه در دوره بیگ بنگ 60 موجود نیست</span>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    {{-- <div class="comment">
        <div class="title-comment">
            <h5>
                نظرات شما
            </h5>
        </div>
        <div class="comments">

        </div>
    </div> --}}


    <div class="container justify-center pt-30">
        <div class="">
            <div class="blogPost -comments">
                <div class="blogPost__content">
                    <h2 class="text-20 fw-500">
                        دیدگاه کاربران
                    </h2>

                    <ul class="comments__list mt-30">
                        @foreach ($course->comments()->whereStatus(1)->get() as $item)
                            <li class="comments__item">
                                <div class="comments__item-inner md:direction-column">
                                    <div class="comments__img ml-20">
                                        <div class="bg-image rounded-full js-lazy" data-bg="img/avatars/1.png"></div>
                                    </div>

                                    <div class="comments__body md:mt-15">
                                        <div class="comments__header">
                                            <h4 class="text-17 fw-500 lh-15">
                                                {{ $item->user->name }}
                                                <br>
                                                <span
                                                    class="text-13 text-light-1 fw-400">{{ verta($item->created_at)->format('%d %B، %Y') }}</span>
                                            </h4>

                                            <div class="stars"></div>
                                        </div>

                                        <div class="comments__text mt-10">
                                            <p>{{ $item->comment }}</p>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>


            <form class="contact-form respondForm__form row y-gap-30 pt-30 mb-5 m-auto"
                action="{{ route('courseComment', $course->id) }}" method="POST">
                @csrf
                <div class="col-12">
                    <label class="text-16 lh-1 fw-500 text-dark-1 mb-10">عنوان</label>
                    <input type="text" name="title" placeholder="عنوان نظر خود را وارد کنید...">
                </div>
                <div class="col-12">
                    <label class="text-16 lh-1 fw-500 text-dark-1 mb-10">متن دیدگاه</label>
                    <textarea name="comment" placeholder="نظر خود را بنویسید..." rows="8"></textarea>
                </div>
                <div class="col-12">
                    <button type="submit" name="submit" id="submit" class="button -md -purple-1 text-white">
                        ثبت دیدگاه
                    </button>
                </div>
            </form>
        </div>
    </div>


    <script>
        function myFunction() {
            var dots = document.getElementById("dots");
            var moreText = document.getElementById("more");
            var btnText = document.getElementById("myBtn");

            if (dots.style.display === "none") {
                dots.style.display = "none";
                btnText.innerHTML = "بیشتر ...";
                moreText.style.display = "inline";
            } else {

                dots.style.display = "inline";
                btnText.style.display = "none";
                moreText.style.display = "none";
            }
        }

        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