@extends('frontend.layouts.app')
@section('content')

    @push('css')
        <style>
            .video-section-right {
                border: 8px solid white;
                border-radius: 20px;
            }
            .video-section-right {
                position: relative;
                width: 100%;
                overflow: hidden;
                background: white;
                border-radius: 12px;
                padding-top: 53%;
            }

            .video-section-right > iframe {
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                width: 100%;
                height: 100%;
            }
        </style>
    @endpush

    <div class="rbt-breadcrumb-default rbt-breadcrumb-style-3">
        <div class="breadcrumb-inner">
            <img src="{{ asset('frontend/images/bg/bg-image-10.jpg') }}">
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="content">
                        <div class="content text-start mt--10">
                            <h2 class="title mb--0 text-dark">{{ $course->name }}</h2>
                        </div>
                        <p class="pt--20">{{$course->short_description}}</p>
                        <div class="rbt-author-meta mb--20">
                            <div class="rbt-avater">
                                <a href="#">
                                    <img src="{{ asset('backend/img/instructors/'.$course?->instructor?->image) }}" onerror="this.onerror=null;this.src='{{ asset('backend/img/default.png') }}';">
                                </a>
                            </div>
                            <div class="rbt-author-info">
                                By <a href="#">{{ $course?->instructor?->name }}</a>
                                <div class="feature-sin rating">
                                    <a href="#"><i class="fa fa-star"></i></a>
                                    <a href="#"><i class="fa fa-star"></i></a>
                                    <a href="#"><i class="fa fa-star"></i></a>
                                    <a href="#"><i class="fa fa-star"></i></a>
                                    <a href="#"><i class="fa fa-star"></i></a>
                                    <a href="#">{{ $course?->instructor?->rating }}</a>
                                </div>
                            </div>
                        </div>
                        <ul class="rbt-meta">
                            <li><i class="feather-clock"></i><b>Course Duration : </b>{{ $course->duration }} Hours</li>
                            <li><i class="feather-globe"></i>{{$course->language}}</li>
                            <li><i class="feather-award"></i>Certified Course</li>
                        </ul>
                        <div class="buy-now-btn mt--20 d-block d-xl-none d-md-none d-lg-none d-sm-none">
                            <a class="thm-btn w-100 d-block text-center" href="#">Buy Now <i class="feather-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    {{-- <a class="video-popup-with-text video-popup-wrapper text-center popup-video"
                        @isset($course->topic[0]) href="{{ $course->topic[0]->video_url }}" @endisset>
                        <div class="video-content">
                            <img class="w-100 rbt-radius" src="{{ asset('backend/img/topic/' . $course->topic[0]->cover_image) }}" onerror="this.onerror=null;this.src='{{ asset('frontend/images/thumbnail-cover.jpg') }}';">
                            <div class="position-to-top">
                                <span class="rbt-btn rounded-player-2 with-animation">
                                    <span class="play-icon"></span>
                                </span>
                            </div>
                            <span class="play-view-text d-block color-dark"><i class="feather-eye"></i> Preview this course</span>
                        </div>
                    </a> --}}

                    <div class="video-popup-wrapper rbt-shadow-box position-relative video-section-right">
                        <iframe width="100%" @isset($course->topic[0]) src="{{ $course->topic[0]->video_url }}" @endisset frameborder="0"  allowfullscreen></iframe>
                   </div>
                </div>
            </div>
        </div>
    </div>

    <div class="rbt-course-details-area rbt-section-gap">
        <div class="container">
            <div class="row g-5">
                <div class="col-lg-8">
                    <div class="course-details-content">
                        <div class="rbt-inner-onepage-navigation sticky-top">
                            <nav class="mainmenu-nav onepagenav">
                                <ul class="mainmenu">
                                    <li class="current">
                                        <a href="#overview">Overview</a>
                                    </li>
                                    <li>
                                        <a href="#coursecontent">Course Content</a>
                                    </li>
                                    <li>
                                        <a href="#details">Details</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                        <div class="rbt-feature-box rbt-shadow-box mt--20" id="overview">
                            <div class="row g-5">
                                <div class="col-lg-12">
                                    <div class="section-title">
                                        <h4 class="title mb--20">Course Overview</h4>
                                    </div>

                                    <div class="rbt-widget-details has-show-more">
                                        <div class="has-show-more-inner-content rbt-course-details-list-wrapper">
                                            {!! $course->description !!}
                                        </div>
                                        <div class="rbt-show-more-btn active">Show More</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="course-content rbt-shadow-box coursecontent-wrapper mt--20" id="coursecontent">
                            <div class="rbt-course-feature-inner">
                                <div class="section-title">
                                    <h4 class="rbt-title-style-3">Course Content</h4>
                                </div>
                                <div class="rbt-widget-details">
                                    <ul class="bt-course-video-list-wrapper">
                                        @foreach ($course->topic as $topic)
                                            @if (Auth::guard('web')->user())
                                                <li>
                                                    <div class="thumbnail">
                                                        <div class="video-popup-wrapper">
                                                            <img src="{{ asset('backend/img/topic/' . $topic->thumbnail_image) }}" onerror="this.onerror=null;this.src='{{ asset('frontend/images/no-img.jpg') }}';">

                                                                <a class="rbt-btn rounded-player-2 sm-size popup-video position-to-top with-animation" href="{{ $topic->video_url }}">
                                                                    <span class="play-icon"></span>
                                                                </a>
                                                        </div>
                                                    </div>
                                                    <div class="content">
                                                        <h6 class="title"><a href="#">{{ $topic->title }}</a></h6>
                                                    </div>
                                                </li>
                                            @else
                                            <li class="rbt-card variation-03 rbt-hover program-image-large" style="cursor:pointer">

                                                <div class="blur d-flex">
                                                    <div class="thumbnail">
                                                        <div class="video-popup-wrapper">
                                                            <img src="{{ asset('backend/img/topic/' . $topic->thumbnail_image) }}" onerror="this.onerror=null;this.src='{{ asset('frontend/images/no-img.jpg') }}';">
                                                            <a class="rbt-btn rounded-player-2 sm-size popup-video position-to-top with-animation disabled" href="https://www.youtube.com/watch?v=nA1Aqp0sPQo">
                                                                    <span class="play-icon"></span>
                                                            </a>
                                                        </div>
                                                    </div>
                                                    <div class="content">
                                                        <h6 class="title"><a href="#" class="disabled">{{ $topic->title }}</a></h6>
                                                    </div>
                                                </div>
                                                <div class="rbt-card-img">
                                                    <a class="thumbnail-link" href="{{ route('signin') }}">
                                                        <span class="thm-btn btn-white icon-hover btn-md">Buy Now/Loging <i class="feather-arrow-right"></i>
                                                        </span>
                                                    </a>
                                                </div>
                                            </li>
                                            @endif
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="rbt-course-feature-box rbt-shadow-box details-wrapper mt--30" id="details">
                            <div class="row g-5">
                                <div class="col-lg-6">
                                    <div class="section-title">
                                        <h4 class="rbt-title-style-3 mb--20">Requirements</h4>
                                    </div>
                                     {!!$course->detail!!}
                                </div>

                                <div class="col-lg-6">
                                    <div class="section-title">
                                        <h4 class="rbt-title-style-3 mb--20">Description</h4>
                                    </div>
                                    {!!$course->detail_description!!}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 mt_md--60 mt_sm--60">
                    <div class="course-sidebar rbt-gradient-border sticky-top rbt-shadow-box course-sidebar-top">
                        <div class="inner">
                            <div class="content pb--10">
                                @if (Auth::guard('web')->user())

                                <div class="buy-now-btn p-3">
                                    <a class="thm-btn w-100 d-block text-center">
                                        <span class="btn-text">About Course</span>
                                        <span class="btn-icon"><i class="feather-arrow-right"></i></span>
                                    </a>
                                </div>

                                @else
                                    <div class="buy-now-btn p-3">
                                        <a class="thm-btn w-100 d-block text-center" href="{{route('plan')}}">Buy Now <i class="feather-arrow-right"></i>
                                        </a>
                                    </div>
                                @endif

                                <div class="rbt-widget-details">
                                    <ul class="has-show-more-inner-content rbt-course-details-list-wrapper">
                                        <li><span>Course Videos</span><span class="rbt-feature-value rbt-badge-5">{{$course->topic_count}}</span></li>
                                        <li><span>Course Duration</span><span class="rbt-feature-value rbt-badge-5">{{ $course->duration }} Hours</span></li>
                                        <li><span>Skill Level</span><span class="rbt-feature-value rbt-badge-5">{{$course->skill_level}}</span></li>
                                        <li><span>Language</span><span class="rbt-feature-value rbt-badge-5">{{$course->language}}</span></li>
                                        <li><span>Certificate</span><span class="rbt-feature-value rbt-badge-5">Yes</span></li>
                                    </ul>
                                </div>
                                <div class="social-share-wrapper mt--30 text-center">
                                    <hr class="mt--20">
                                    <div class="contact-with-us text-center">
                                        <p class="rbt-badge-2 mt--10 justify-content-center w-100">
                                            <i class="feather-phone mr--5"></i> Call Us:
                                            <a href="tel:+91-{{websiteData('whatsapp')}}"><strong>+91-{{websiteData('whatsapp')}}</strong></a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection