@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="rbt-btn btn-gradient icon-hover w-100 d-block text-center" href="#">
                                <span class="btn-text">Buy Now</span>
                                <span class="btn-icon"><i class="feather-arrow-right"></i></span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <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-feature-box rbt-shadow-box thuumbnail">
                            <img src="{{ asset('backend/img/course/' . $course->image) }}" alt="Category Images"
                                onerror="this.onerror=null;this.src='{{ asset('frontend/images/default-image.jpg') }}';">
                        </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">
                                        <div class="has-show-more-inner-content rbt-course-details-list-wrapper">
                                            {!! $course->description !!}
                                        </div>
                                    </div>
                                </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">
                                <div class="rbt-widget-details">
                                    <h5 class="px-4 pt--20">Course Details</h5>
                                    <hr />
                                    <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