@extends('site.layouts.master')
@section('title', $package->name)
@section('link')
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
@endsection
@section('content')
    <style>
        .content-wrapper {
            background: #f9f9f9;
        }

        .accordion button[aria-expanded="true"]+.accordion-content {
            max-height: 100%;
        }

        @media (max-width: 768px) {
            .w3-modal {
                padding-top: 110px !important;
            }
        }
    </style>
    <div id="id01" class="w3-modal">
        <div class="w3-modal-content w3-animate-top w3-card-4 w-50">
            <header class="w3-container w3-teal">
                <span onclick="document.getElementById('id01').style.display='none'"
                    class="w3-button w3-display-topright">&times;
                </span>
            </header>
            <div class="row text-center">
                <div class="col-lg-4 col-md-4 col-sm-12 w-100">
                    <div class="buy-coursesingle">
                        <h4>
                            خرید {{ $package->name }}
                        </h4>
                        <p>
                            قیمت: {{ $package->getPrice() }} تومان
                        </p>
                        <a href="" class="addToCart" data-course="{{ $package->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>
        </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)
                                                ->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
    <section class="single-bigbang">
        <div class="container">
            <div class="header-single row">
                <div class="col-lg-6 col-sm-12">

                    <p class="text-right">
                        <img class="w-10"
                            src="https://static.cdn.asset.aparat.cloud/avt/49663257-1172-b__3479.jpg?width=300&quality=90&secret=4SdswxrzEF6PsdFXapxJfA"
                            alt="لوگوی بیگ بنگ میلاد ناصح زاده - کافه کنکور">
                        {{-- دوره بیگ بنگ جامع میلاد ناصح  --}}
                        {{ $package->name }}
                    </p>
                </div>
                <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>
                <div class="col-lg-3 col-sm-6 text-center">
                    <div class="Lesson-bigbang">
                        <p class="price-Lesson">
                            قیمت:
                            @if ($package->discount > 0)
                                <b>
                                    {{ number_format($package->price) }}
                                    تومان
                                </b>
                                <br>
                                <b>
                                    قیمت نهایی :
                                    {{ $package->getPrice() }}
                                </b>
                            @else
                                <b>
                                    {{ number_format($package->price) }} تومان
                                </b>
                            @endif
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row single-lesson">
                <div class="col-lg-6 col-sm-12 col-md-6">
                    <p>
                        {!! $package->short_desc !!}
                    </p>
                </div>
                <div class="col-lg-6 col-sm-12 col-md-6">
                    <img src="{{ asset($package->image) }}" alt="ویدیو تک درس بیگ بنگ استاد میلاد ناصح زاده - کافه کنکور">
                </div>
                <div class="lesson-text mb-10">
                    <div class="more-text" id="dots">
                        {!! $package->long_desc !!}
                    </div>
                    <button class="mt-10" onclick="myFunction()" id="myBtn">بیشتر ...</button>
                </div>
            </div>
            <div class="title-single" style="margin-top: 2em;">
                <h4>
                    تک دوره ها:
                </h4>
            </div>

            <div class="accordion">
                @foreach ($package->items()->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-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-3 col-md-4 col-sm-6">
                                    <div class="Lesson-bigbang">
                                        <img class="teach-cou" style="width: 50%; height: 50%;"
                                            src="{{ asset($item->image) }}">
                                    </div>
                                </div>

                                <div class="col-lg-3 col-md-6 col-sm-6">
                                    <div class="Lesson-bigbang">
                                        <b style="font-size: 15px">
                                            <p>{{ $item->teacher->name }}</p>
                                            <p>{{ $name[0] }}</p>
                                            <p>{{ $name[1] }}</p>
                                        </b>
                                    </div>
                                </div>
                                <div class="col-lg-1 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-2 col-md-4 col-sm-6">
                                    <div class="Lesson-bigbang">
                                        <p class="meet-Lesson">
                                            {{ $item->duration() }}
                                        </p>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-md-4 col-sm-6">
                                    <div class="Lesson-bigbang p-3">
                                        <a href="{{ route('course', $item->slug) }}">
                                            مشاهده دوره
                                        </a>
                                    </div>
                                    @if($item->is_sell == 1)

                                    <div>
                                        <a class="btn btn-outline-dark d-inline-block addToCart"
                                            data-course="{{ $item->id }}">افزودن به سبد خرید</a>
                                    </div>

                                    @endif
                                </div>
                            </div>
                        </button>
                        <div class="accordion-content">
                            @foreach ($item->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('lesson.stream', $lesson) }}" target="_blank"
                                                    class="btn btn-dark">
                                                    مشاهده جلسه
                                                </a>
                                            @else
                                                <span class="text-danger">این جلسه در دوره بیگ بنگ 60 موجود نیست</span>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>





            {{-- @foreach ($package->items as $item)
                <div class="gradient-border row box-course" style="margin-top: 3em">
                    <div class="col-lg-2 col-md-3 col-sm-12">
                        <div class="img-tracher">
                            <img src="https://miladnasehzadeh.com/site-assets/images/milad-nasehzade.png" alt="">
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-12">
                        <p>
                            {{ $item->teacher->name }} - {{ $item->name }}
                        </p>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-12">
                        <div class="meeting-lesson">
                            <p class="meet-single">
                                تعداد جلسات:
                                <b>
                                    {{ $item->seasons()->sum('lessons_count') }}
                                </b>
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-12">
                        <div class="time-bigbang">
                            <p class="time">
                               50 ساعت تدریس
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-12">
                        <div class="view-bigbang">
                            <a href="">
                                مشاهده هر جلسه
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach --}}


            <div class="comment">
                <div class="title-comment">
                    <h5>
                        نظرات شما
                    </h5>
                </div>
                <div class="comments">
                    <ul class="comments__list mt-30">
                        @foreach ($package->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"
                action="{{ route('courseComment', $package->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>
    </section>
    <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>
    <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";
            }
        }
    </script>
@endsection