@extends('web.layouts.container')
@section('breadcrumb')
    <nav class="nav-breadcrumb" aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), url('/'), [], true)}}">{{__('main.home_page')}}</a></li>
            <li class="breadcrumb-item"><a href="{{route('our-categories.show', $category->category_id)}}">{{__('courses.inner_page')}}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{$course->name['name_'.getCurrentLocale()]}}</li>
        </ol>
    </nav>
@endsection
@section('content')

    <main>
        <!--start single course-->
        <section class="single-course">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
                        <div class="course-wrapper">
                            <div class="course-carousel owl-carousel owl-theme">

                                @if($course->images != null)
                                    @foreach($course->images as $image)
                                        <div class="item">
                                            <img src="{{asset($image)}}" alt="course-{{$loop->iteration}} image">
                                        </div>
                                    @endforeach
                                    @else

                                    <div class="item">
                                        <img src="{{asset('assets/web/images/courses-2.jpg')}}" alt="courses-2">
                                    </div>
                                    <div class="item">
                                        <img src="{{asset('assets/web/images/courses-1.jpg')}}" alt="courses-1">
                                    </div>
                                @endif

                            </div>
                            <div class="text ">
                                <h5>{{$course->name['name_'.getCurrentLocale()]}}</h5>
                                <div class="details-row">
                                    <div class="row">
                                        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                            <div class="item">
                                                <img src="{{asset('assets/web/images/instructor.jpg')}}" class="teacher-img" alt="teacher-img">
                                                <div class="content">
                                                    <p>{{__('courses.instructor')}}</p>
                                                    <h6>{{$course->instructor}}</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                            <div class="item">
                                                <img src="{{asset('assets/web/images/icons/bookmark.png')}}" class="icon" alt="bookmark.png">
                                                <div class="content">
                                                    <p>{{__('courses.category_id')}}</p>
                                                    <h6>{{$category->name}}</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                            <div class="item">
                                                <img src="{{asset('assets/web/images/icons/students.png')}}" class="icon" alt="students.png">
                                                <div class="content">
                                                    <p>{{__('courses.schedule')}}</p>
                                                    <h6><a target="_blank" href="{{asset($course->schedule)}}">Download</a></h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <h5 class="card-header">{{__('courses.description')}}</h5>
                                    <div class="card-body">
                                        <h6>{{__('courses.course_description')}}</h6>
                                        <p>{{$course->description['description_'.getCurrentLocale()]}}</p>
                                    </div>
                                </div>
                                <div class="card ">
                                    <h5 class="card-header">{{__('courses.content')}}</h5>
                                    <div class="card-body body-content">
                                        @if($course->units->count())
                                            @foreach($course->units as $unit)
                                                <h6>{{$unit->name['name_'.getCurrentLocale()]}}</h6>
                                                @if($unit->lessons->count())
                                                    @foreach($unit->lessons as $lesson)
                                                        <a data-fancybox href="{{$lesson->url}}">
                                                            <div class="single-video border-b">
                                                                <div class="row">
                                                                    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                                                                        <img src="{{asset('assets/web/images/icons/list.png')}}" class="icon" alt="list.png"> <span class="lec-num">المحاضرة 1 :</span>
                                                                    </div>
                                                                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                                                        <span>{{$lesson->name['name_'.getCurrentLocale()]}}</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    @endforeach
                                                    @else
                                                    <div class="alert alert-info">{{__('courses.no_lessons')}}</div>
                                                @endif
                                            @endforeach
                                            @else
                                            <div class="alert alert-info">{{__('courses.no_content')}}</div>
                                        @endif

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                        <div class="card-details">
                            <h6 class="card-header">{{__('courses.course_details')}}</h6>
                            <div class="card-body">

                                <div class="item">
                                    <p>
                                        <img src="{{asset('assets/web/images/icons/maintenance.png')}}" class="icon" alt="maintenance.png">
                                        {{__('courses.price')}}:
                                    </p>
                                    <p>{{$course->price}}</p>
                                </div>
                                <div class="item">
                                    <p>
                                        <img src="{{asset('assets/web/images/icons/time.png')}}" class="icon" alt="time.png">
                                        {{__('courses.start_at')}}:
                                    </p>
                                    <p>{{$course->start_at}}</p>
                                </div>
                                <div class="item">
                                    <p>
                                        <img src="{{asset('assets/web/images/icons/time.png')}}" class="icon" alt="time.png">
                                        {{__('courses.end_at')}}:
                                    </p>
                                    <p>{{$course->end_at}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="card-social">
                            <div class="card-body">
                                <a href="{{route('courseSubscription', $course->id)}}" class="butn active">
                                    <i class="fas fa-university"></i>{{__('courses.subscribe_now')}}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

@endsection

@section('inner_js')
    <script>
        $(document).ready(function () {
            $('.navs-container').addClass('page-heading')
        })
    </script>
@endsection