@extends('Template.layouts.master')

@section('title','سایت دؤ هوش')
@section('content')
    <div id="main-wrapper">

    <!-- ============================ Page Title Start================================== -->
    <div class="ed_detail_head">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-4 col-md-5">

                    <div class="property_video">
                        <div class="thumb">
                            <img class="pro_img img-fluid w100" src="{{$book->cover}}" alt="7.jpg">
{{--                            <div class="overlay_icon">--}}
{{--                                <div class="bb-video-box">--}}
{{--                                    <div class="bb-video-box-inner">--}}
{{--                                        <div class="bb-video-box-innerup">--}}
{{--                                            <a href="" data-toggle="modal" data-target="#popup-video" class="theme-cl"><i class="ti-control-play"></i></a>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
                        </div>
                    </div>

                </div>

                <div class="col-lg-8 col-md-7">
                    <div class="ed_detail_wrap">
                        <ul class="cources_facts_list">
                            <li class="facts-1">{{$book->cat_title}}</li>
                            <li class="facts-5">{{$book->subCat_title1}}</li>
                        </ul>
                        <div class="ed_header_caption">
                            <h2 class="ed_title">{{$book->title}}</h2>
{{--                            <ul>--}}
{{--                                <li><i class="ti-calendar"></i>10 - 20 هفته</li>--}}
{{--                                <li><i class="ti-control-forward"></i>102 دوره</li>--}}
{{--                                <li><i class="ti-user"></i>502 هنرجو</li>--}}
{{--                            </ul>--}}
                        </div>
                        <div class="ed_header_short">
                            <p>{{$book->intro}}</p>
                        </div>

                        <div class="ed_rate_info">
                            <div class="star_info">
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star"></i>
                            </div>
                            <div class="review_counter">
                                <strong class="high">4.7</strong> 3572 امتیاز
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ============================ Page Title End ================================== -->

    <!-- ============================ Course Detail ================================== -->
    <section class="bg-light">
        <div class="container">
            <div class="row">

                <div class="col-lg-8 col-md-8">

                    <!-- Overview -->
                    <div class="edu_wraper">
                        <h4 class="edu_title">توضیحات</h4>
                       <div>
                           {{$book->description}}
                       </div>
                    </div>

{{--                    <div class="edu_wraper">--}}
{{--                        <h4 class="edu_title">سرفصل های دوره</h4>--}}
{{--                        <div id="accordionExample" class="accordion shadow circullum">--}}

{{--                            <!-- Part 1 -->--}}
{{--                            <div class="card">--}}
{{--                                <div id="headingOne" class="card-header bg-white shadow-sm border-0">--}}
{{--                                    <h6 class="mb-0 accordion_title"><a href="#" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="d-block position-relative text-dark collapsible-link py-2">دوره اول: مقدمه و معرفی مدرس</a></h6>--}}
{{--                                </div>--}}
{{--                                <div id="collapseOne" aria-labelledby="headingOne" data-parent="#accordionExample" class="collapse show">--}}
{{--                                    <div class="card-body pl-3 pr-3">--}}
{{--                                        <ul class="lectures_lists">--}}
{{--                                            <li><div class="lectures_lists_title"><i class="ti-control-play"></i>دوره: 1</div>معرفی دوره</li>--}}
{{--                                            <li><div class="lectures_lists_title"><i class="ti-control-play"></i>دوره: 2</div>ساخت منوها در بخش مدیریت</li>--}}
{{--                                            <li><div class="lectures_lists_title"><i class="ti-control-play"></i>دوره: 3</div>متاباکس و ذخیره اطلاعات برای پست ها</li>--}}
{{--                                            <li class="unview"><div class="lectures_lists_title"><i class="ti-control-play"></i>دوره: 4</div>استفاده از قالب استاندارد در پلاگین ها</li>--}}
{{--                                            <li class="unview"><div class="lectures_lists_title"><i class="ti-control-play"></i>دوره: 5</div>ذخیره و بازیابی تنظیمات در وردپرس</li>--}}
{{--                                        </ul>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}

{{--                            <!-- Part 2 -->--}}
{{--                            <div class="card">--}}
{{--                                <div id="headingTwo" class="card-header bg-white shadow-sm border-0">--}}
{{--                                    <h6 class="mb-0 accordion_title"><a href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" class="d-block position-relative collapsed text-dark collapsible-link py-2">دوره دوم: پیاده سازی پلاگین آمار بازدید</a></h6>--}}
{{--                                </div>--}}
{{--                                <div id="collapseTwo" aria-labelledby="headingTwo" data-parent="#accordionExample" class="collapse">--}}
{{--                                    <div class="card-body pl-3 pr-3">--}}
{{--                                        <ul class="lectures_lists">--}}
{{--                                            <li><div class="lectures_lists_title"><i class="ti-control-play"></i>دوره: 1</div>معرفی دوره</li>--}}
{{--                                            <li><div class="lectures_lists_title"><i class="ti-control-play"></i>دوره: 2</div>ساخت منوها در بخش مدیریت</li>--}}
{{--                                            <li><div class="lectures_lists_title"><i class="ti-control-play"></i>دوره: 3</div>متاباکس و ذخیره اطلاعات برای پست ها</li>--}}
{{--                                            <li class="unview"><div class="lectures_lists_title"><i class="ti-control-play"></i>دوره: 4</div>استفاده از قالب استاندارد در پلاگین ها</li>--}}
{{--                                            <li class="unview"><div class="lectures_lists_title"><i class="ti-control-play"></i>دوره: 5</div>ذخیره و بازیابی تنظیمات در وردپرس</li>--}}
{{--                                        </ul>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}

{{--                            <!-- Part 3 -->--}}
{{--                            <div class="card">--}}
{{--                                <div id="headingThree" class="card-header bg-white shadow-sm border-0">--}}
{{--                                    <h6 class="mb-0 accordion_title"><a href="#" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" class="d-block position-relative collapsed text-dark collapsible-link py-2">دوره سوم: پیاده سازی پلاگین رای دادن به مطالب</a></h6>--}}
{{--                                </div>--}}
{{--                                <div id="collapseThree" aria-labelledby="headingThree" data-parent="#accordionExample" class="collapse">--}}
{{--                                    <div class="card-body pl-3 pr-3">--}}
{{--                                        <ul class="lectures_lists">--}}
{{--                                            <li><div class="lectures_lists_title"><i class="ti-control-play"></i>دوره: 1</div>معرفی دوره</li>--}}
{{--                                            <li><div class="lectures_lists_title"><i class="ti-control-play"></i>دوره: 2</div>ساخت منوها در بخش مدیریت</li>--}}
{{--                                            <li><div class="lectures_lists_title"><i class="ti-control-play"></i>دوره: 3</div>متاباکس و ذخیره اطلاعات برای پست ها</li>--}}
{{--                                            <li class="unview"><div class="lectures_lists_title"><i class="ti-control-play"></i>دوره: 4</div>استفاده از قالب استاندارد در پلاگین ها</li>--}}
{{--                                            <li class="unview"><div class="lectures_lists_title"><i class="ti-control-play"></i>دوره: 5</div>ذخیره و بازیابی تنظیمات در وردپرس</li>--}}
{{--                                        </ul>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}

{{--                            <!-- Part 04 -->--}}
{{--                            <div class="card">--}}
{{--                                <div id="headingFour" class="card-header bg-white shadow-sm border-0">--}}
{{--                                    <h6 class="mb-0 accordion_title"><a href="#" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour" class="d-block position-relative collapsed text-dark collapsible-link py-2">دوره نهایی: پیاده سازی پلاگین فروشگاه اینترنتی با درگاه پرداخت</a></h6>--}}
{{--                                </div>--}}
{{--                                <div id="collapseFour" aria-labelledby="headingFour" data-parent="#accordionExample" class="collapse">--}}
{{--                                    <div class="card-body pl-3 pr-3">--}}
{{--                                        <ul class="lectures_lists">--}}
{{--                                            <li><div class="lectures_lists_title"><i class="ti-control-play"></i>دوره: 1</div>معرفی دوره</li>--}}
{{--                                            <li><div class="lectures_lists_title"><i class="ti-control-play"></i>دوره: 2</div>ساخت منوها در بخش مدیریت</li>--}}
{{--                                            <li><div class="lectures_lists_title"><i class="ti-control-play"></i>دوره: 3</div>متاباکس و ذخیره اطلاعات برای پست ها</li>--}}
{{--                                            <li class="unview"><div class="lectures_lists_title"><i class="ti-control-play"></i>دوره: 4</div>استفاده از قالب استاندارد در پلاگین ها</li>--}}
{{--                                            <li class="unview"><div class="lectures_lists_title"><i class="ti-control-play"></i>دوره: 5</div>ذخیره و بازیابی تنظیمات در وردپرس</li>--}}
{{--                                        </ul>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}

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

                    <!-- Reviews -->
                    <div class="rating-overview">
                        <div class="rating-overview-box">
                            <span class="rating-overview-box-total">4.2</span>
                            <span class="rating-overview-box-percent">از امتیاز 5</span>
                            <div class="star-rating" data-rating="5"><i class="ti-star"></i><i class="ti-star"></i><i class="ti-star"></i><i class="ti-star"></i><i class="ti-star"></i>
                            </div>
                        </div>

                        <div class="rating-bars">
                            <div class="rating-bars-item">
                                <span class="rating-bars-name">5 ستاره</span>
                                <span class="rating-bars-inner">
											<span class="rating-bars-rating high" data-rating="4.7">
												<span class="rating-bars-rating-inner" style="width: 85%;"></span>
											</span>
											<strong>85%</strong>
										</span>
                            </div>
                            <div class="rating-bars-item">
                                <span class="rating-bars-name">4 ستاره</span>
                                <span class="rating-bars-inner">
											<span class="rating-bars-rating good" data-rating="3.9">
												<span class="rating-bars-rating-inner" style="width: 75%;"></span>
											</span>
											<strong>75%</strong>
										</span>
                            </div>
                            <div class="rating-bars-item">
                                <span class="rating-bars-name">3 ستاره</span>
                                <span class="rating-bars-inner">
											<span class="rating-bars-rating mid" data-rating="3.2">
												<span class="rating-bars-rating-inner" style="width: 52.2%;"></span>
											</span>
											<strong>53%</strong>
										</span>
                            </div>
                            <div class="rating-bars-item">
                                <span class="rating-bars-name">1 ستاره</span>
                                <span class="rating-bars-inner">
											<span class="rating-bars-rating poor" data-rating="2.0">
												<span class="rating-bars-rating-inner" style="width:20%;"></span>
											</span>
											<strong>20%</strong>
										</span>
                            </div>
                        </div>
                    </div>

                    <!-- instructor -->
{{--                    <div class="single_instructor">--}}
{{--                        <div class="single_instructor_thumb">--}}
{{--                            <a href="#"><img src="assets/img/user-3.jpg" class="img-fluid" alt=""></a>--}}
{{--                        </div>--}}
{{--                        <div class="single_instructor_caption">--}}
{{--                            <h4><a href="#">{{$book->full_name}}</a></h4>--}}
{{--                            <ul class="instructor_info">--}}
{{--                                <li><i class="ti-video-camera"></i>72 ویدئو</li>--}}
{{--                                <li><i class="ti-control-forward"></i>102 دوره</li>--}}
{{--                                <li><i class="ti-user"></i>آپدیت بهمن ماه</li>--}}
{{--                            </ul>--}}
{{--                            <p>اول داستان، طراح گرافیک بودم و ۲ سالی به عنوان طراح مشغول بودم، بعد به برنامه‌نویسی علاقمند شدم و الان بیشتر از ۱۰ ساله که عاشق کدزنی و چالش‌های پروژه‌های مختلفم.</p>--}}
{{--                            <ul class="social_info">--}}
{{--                                <li><a href="#"><i class="ti-facebook"></i></a></li>--}}
{{--                                <li><a href="#"><i class="ti-twitter"></i></a></li>--}}
{{--                                <li><a href="#"><i class="ti-linkedin"></i></a></li>--}}
{{--                                <li><a href="#"><i class="ti-instagram"></i></a></li>--}}
{{--                            </ul>--}}
{{--                        </div>--}}
{{--                    </div>--}}

                    <!-- Reviews -->
{{--                    <div class="list-single-main-item fl-wrap">--}}
{{--                        <div class="list-single-main-item-title fl-wrap">--}}
{{--                            <h3>تاکنون <span> 3 </span> دیدگاه ثبت شده است!</h3>--}}
{{--                        </div>--}}
{{--                        <div class="reviews-comments-wrap">--}}
{{--                            <!-- reviews-comments-item -->--}}
{{--                            <div class="reviews-comments-item">--}}
{{--                                <div class="review-comments-avatar">--}}
{{--                                    <img src="assets/img/user-1.jpg" class="img-fluid" alt="">--}}
{{--                                </div>--}}
{{--                                <div class="reviews-comments-item-text">--}}
{{--                                    <h4><a href="#">محمد خاکپور</a><span class="reviews-comments-item-date"><i class="ti-calendar theme-cl"></i>10 بهمن 1399</span></h4>--}}

{{--                                    <div class="listing-rating high" data-starrating2="5"><i class="ti-star active"></i><i class="ti-star active"></i><i class="ti-star active"></i><i class="ti-star active"></i><i class="ti-star active"></i><span class="review-count">4.9</span> </div>--}}
{{--                                    <div class="clearfix"></div>--}}
{{--                                    <p>"ظاهرا آموزش کاملی بنظر میاد و میخوام بخرم ولی کاش بجای ساخت فروشگاه، پلاگین نویسی برا ووکامرس رو هم توضیح میدادین، البته میتونین تکمیل کنین این دوره رو و آپدیت کنین"</p>--}}
{{--                                    <div class="pull-left reviews-reaction">--}}
{{--                                        <a href="#" class="comment-like active"><i class="ti-thumb-up"></i> 12</a>--}}
{{--                                        <a href="#" class="comment-dislike active"><i class="ti-thumb-down"></i> 1</a>--}}
{{--                                        <a href="#" class="comment-love active"><i class="ti-heart"></i> 07</a>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                            <!--reviews-comments-item end-->--}}

{{--                            <!-- reviews-comments-item -->--}}
{{--                            <div class="reviews-comments-item">--}}
{{--                                <div class="review-comments-avatar">--}}
{{--                                    <img src="assets/img/user-2.jpg" class="img-fluid" alt="">--}}
{{--                                </div>--}}
{{--                                <div class="reviews-comments-item-text">--}}
{{--                                    <h4><a href="#">الهام پاکزاد</a><span class="reviews-comments-item-date"><i class="ti-calendar theme-cl"></i>26 مرداد 1399</span></h4>--}}

{{--                                    <div class="listing-rating mid" data-starrating2="5"><i class="ti-star active"></i><i class="ti-star active"></i><i class="ti-star active"></i><i class="ti-star active"></i><i class="ti-star"></i><span class="review-count">3.7</span> </div>--}}
{{--                                    <div class="clearfix"></div>--}}
{{--                                    <p>"سلام.من PHP رو تو دوران هنرستان یاد گرفتم.اگه PHP رو به صورت مقدماتی کار کرده باشم ولی در حدی باشیم که درک نسبتا کاملی از کد خط ها و معنا و مفهوم آن داشته باشیم، کفایت میکنه یا باید پیشرفته تر آموزش ویدیویی ببینم؟ "</p>--}}
{{--                                    <div class="pull-left reviews-reaction">--}}
{{--                                        <a href="#" class="comment-like active"><i class="ti-thumb-up"></i> 12</a>--}}
{{--                                        <a href="#" class="comment-dislike active"><i class="ti-thumb-down"></i> 1</a>--}}
{{--                                        <a href="#" class="comment-love active"><i class="ti-heart"></i> 07</a>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                            <!--reviews-comments-item end-->--}}

{{--                            <!-- reviews-comments-item -->--}}
{{--                            <div class="reviews-comments-item">--}}
{{--                                <div class="review-comments-avatar">--}}
{{--                                    <img src="assets/img/user-3.jpg" class="img-fluid" alt="">--}}
{{--                                </div>--}}
{{--                                <div class="reviews-comments-item-text">--}}
{{--                                    <h4><a href="#">مهدی فدایی</a><span class="reviews-comments-item-date"><i class="ti-calendar theme-cl"></i>20 بهمن 1398</span></h4>--}}

{{--                                    <div class="listing-rating good" data-starrating2="5"><i class="ti-star active"></i><i class="ti-star active"></i><i class="ti-star active"></i><i class="ti-star active"></i><i class="ti-star"></i> <span class="review-count">4.2</span> </div>--}}
{{--                                    <div class="clearfix"></div>--}}
{{--                                    <p>" سلام. برای یادگرفتن پیش نیاز این دوره که پی اچ پی هست تا کدام قسمت از اموزش پی اچ پی لازمه که یاد گرفته بشه؟(مطابق سرفصل های همین دوره در سایت) "</p>--}}
{{--                                    <div class="pull-left reviews-reaction">--}}
{{--                                        <a href="#" class="comment-like active"><i class="ti-thumb-up"></i> 12</a>--}}
{{--                                        <a href="#" class="comment-dislike active"><i class="ti-thumb-down"></i> 1</a>--}}
{{--                                        <a href="#" class="comment-love active"><i class="ti-heart"></i> 07</a>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                            <!--reviews-comments-item end-->--}}

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

                    <!-- Submit Reviews -->
{{--                    <div class="edu_wraper">--}}
{{--                        <h4 class="edu_title">ثبت دیدگاه</h4>--}}
{{--                        <div class="review-form-box form-submit">--}}
{{--                            <form>--}}
{{--                                <div class="row">--}}

{{--                                    <div class="col-lg-6 col-md-6 col-sm-12">--}}
{{--                                        <div class="form-group">--}}
{{--                                            <label>نام</label>--}}
{{--                                            <input class="form-control" type="text" placeholder="نام شما">--}}
{{--                                        </div>--}}
{{--                                    </div>--}}

{{--                                    <div class="col-lg-6 col-md-6 col-sm-12">--}}
{{--                                        <div class="form-group">--}}
{{--                                            <label>ایمیل</label>--}}
{{--                                            <input class="form-control" type="email" placeholder="ایمیل شما">--}}
{{--                                        </div>--}}
{{--                                    </div>--}}

{{--                                    <div class="col-lg-12 col-md-12 col-sm-12">--}}
{{--                                        <div class="form-group">--}}
{{--                                            <label>متن دیدگاه</label>--}}
{{--                                            <textarea class="form-control ht-140" placeholder="دیدگاه خود را وارد نمایید"></textarea>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}

{{--                                    <div class="col-lg-12 col-md-12 col-sm-12">--}}
{{--                                        <div class="form-group">--}}
{{--                                            <button type="submit" class="btn btn-theme">ثبت دیدگاه</button>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}

{{--                                </div>--}}
{{--                            </form>--}}
{{--                        </div>--}}
{{--                    </div>--}}

                </div>

                <!-- Sidebar -->
                <div class="col-lg-4 col-md-4">

                    <div class="ed_view_box style_2">

                        <div class="ed_author">
                            <div class="ed_author_thumb">
                                <img class="img-fluid" src="{{$book->avatar}}" alt="7.jpg">
                            </div>
                            <div class="ed_author_box">
                                <h4>{{$book->full_name}}</h4>
                                <span>طراح سایت و اپلیکیشن</span>
                            </div>
                        </div>

                        <div class="ed_view_price pr-4">
                            <span>قیمت آموزش</span>
                            <h2 class="theme-cl">{{$book->price}} تومان</h2>
                        </div>
{{--                        <div class="ed_view_features pr-4">--}}
{{--                            <span>ویدئوهای نمونه</span>--}}
{{--                            <ul>--}}
{{--                                <li><i class="ti-angle-left"></i>افزونه نویسی وردپرس بخش مقدمه</li>--}}
{{--                                <li><i class="ti-angle-left"></i>افزونه نویسی وردپرس بخش دهم</li>--}}
{{--                                <li><i class="ti-angle-left"></i>افزونه نویسی وردپرس بخش سی</li>--}}
{{--                                <li><i class="ti-angle-left"></i>پیاده سازی افزونه وردپرس</li>--}}
{{--                                <li><i class="ti-angle-left"></i>افزونه نویسی وردپرس بخش نهایی</li>--}}
{{--                            </ul>--}}
{{--                        </div>--}}
                        <div class="ed_view_link">
                            <a href="#" class="btn btn-theme enroll-btn">خرید<i class="ti-angle-left"></i></a>
                        </div>

                    </div>

{{--                    <div class="edu_wraper">--}}
{{--                        <h4 class="edu_title">ویژگی های دوره</h4>--}}
{{--                        <ul class="edu_list right">--}}
{{--                            <li><i class="ti-user"></i>شرکت کنندگان:<strong>1740 نفر</strong></li>--}}
{{--                            <li><i class="ti-files"></i>تعداد دوره:<strong>10</strong></li>--}}
{{--                            <li><i class="ti-game"></i>جلسات:<strong>4</strong></li>--}}
{{--                            <li><i class="ti-time"></i>مدت دوره:<strong>60 ساعت</strong></li>--}}
{{--                            <li><i class="ti-tag"></i>سطح دوره:<strong>مقدماتی</strong></li>--}}
{{--                            <li><i class="ti-flag-alt"></i>زبان:<strong>فارسی</strong></li>--}}
{{--                            <li><i class="ti-shine"></i>نوع دوره:<strong>رایگان</strong></li>--}}
{{--                        </ul>--}}
{{--                    </div>--}}

                </div>

            </div>
        </div>
    </section>
    <!-- ============================ Course Detail ================================== -->

    <a id="back2Top" class="top-scroll" title="Back to top" href="#"><i class="ti-arrow-up"></i></a>


    </div>
@endsection

@section('script')
    <script>
        var owl = $('.blog-slider');

        if (screen.width < 768) {
            owl.owlCarousel({
                items: 1,
                loop: true,
                margin: 3,
                autoplay: true,
                autoplaySpeed: 2000,
                autoplayTimeout: 4000,
                autoplayHoverPause: true,
                responsive: false
            });
        } else {
            owl.owlCarousel({
                items: 4,
                loop: true,
                margin: 3,
                autoplay: true,
                autoplaySpeed: 2000,
                autoplayTimeout: 4000,
                autoplayHoverPause: true,
                responsive: false
            });
        }

        $(window).on("resize", function () {
            if (screen.width < 768) {
                console.log('mobile');
                owl.items = 1;

            } else {
                console.log('desktop');
                owl.items = 4;
            }
        });

        function animateValue(obj, start, end, duration) {
            let startTimestamp = null;
            const step = (timestamp) => {
                if (!startTimestamp) startTimestamp = timestamp;
                const progress = Math.min((timestamp - startTimestamp) / duration, 1);
                obj.innerHTML = Math.floor(progress * (end - start) + start).toLocaleString();
                if (progress < 1) {
                    window.requestAnimationFrame(step);
                }
            };
            window.requestAnimationFrame(step);
        }


    </script>
@endsection