@extends('layouts.landing')

@section('title', 'Elearning')

@section('content')

<style>
    .input-group{
        border: 1px solid #d2ddec;
        border-radius: 0.375rem;
        font-size: .9375rem;
        font-weight: 400;
        line-height: 1.5;
        background: #fff;
        padding: 0.5rem 1.75rem 0.5rem 0.75rem;
        transition: border-color .15s
    }
    .input-group .form-control:focus{
        border: none !important;
        box-shadow: none !important;
    }
</style>

<div class="row mobile-mt-10">
    <div class="col">
        <h6 class="header-pretitle">
        </h6>
        <h3 class="header-title">
            @if(domain($_SERVER['HTTP_HOST'])->company_name == 'Nlsalumni')
                E-continuing Legal Education
            @else
                E-learning
            @endif
        </h3>
    </div>
    @if(Auth::user()->isSuperAdmin() || Auth::user()->isTenant() || Auth::user()->isAdmin())
        <div class="col-auto">
            <a href="{{route('elearn.create')}}" class="btn custom-btn text-white">
                <i class="fe fe-plus"></i> New Course
            </a>
        </div>
    @endif
</div>

<div class="row  justify-content-end mt-4 p-3">
    <form action="" method="GET" class="me-3">
        <div class="row">
            <div class="col-12 col-lg-12 col-xl">
                <form action="{{url('/elearning')}}" method="GET" class="float-left form-bg header-search w-100" role="search">
                    <div class="form-group mb-0 icon-input bor-20">
                        <i class="feather-search course-icon font-lg text-grey-500"></i>
                        <input type="text" name="search" id="navbar-search" placeholder="Search for courses" value="{{@$course_search}}" class="custom-border bor-20 custom-global-search w-100 border-0 pt-2 pb-2 ps-5 pe-3 fw-500 w350" style="background: #f0f2fd;">
                    </div>
                </form>
            </div>
            <div class="col-12 col-lg-6 col-xl">
                <div class="row">
                    {{-- <div class="col-12 col-lg-6 col-xl">
                        <div class="form-group">
                            <select name="package" class="form-select mr-8">
                                <option value="">Year</option>
                                <option value="">All</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-12 col-lg-6 col-xl">
                        <div class="form-group">
                            <select name="package" class="form-select mr-8">
                                <option value="">Author</option>
                                <option value="">All</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-12 col-lg-6 col-xl">
                        <div class="form-group">
                            <select name="package" class="form-select mr-8">
                                <option value="">Topics</option>
                                <option value="">All</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-12 col-lg-6 col-xl">
                        <div class="form-group">
                            <select name="package" class="form-select mr-8">
                                <option value="">Subject</option>
                                <option value="">All</option>
                            </select>
                        </div>
                    </div> --}}
                    <div class="col">
                        <button type="submit" ></button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="row ">
    <div class="col">
        <ul class="nav nav-tabs nav-overflow header-tabs" id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="all-tab" data-toggle="tab" href="#all" role="tab" aria-controls="all" aria-selected="true">
                    Top Courses
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="latest-tab" data-toggle="tab" href="#latest" role="tab" aria-controls="latest" aria-selected="false">
                    All courses
                </a>
            </li>
        </ul>
    </div>
</div>

<div class="row">
    <div class="tab-content" id="wizardSteps">
        <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tab">
            <div class="row mt-4">
                @if(count($courses) > 0)
                    @foreach ($courses as $course)
                        <div class="col-12 col-md-6 col-xl-3">
                            <div class="card w-100 mobile-h320 shadow-xss rounded-lg border-0 mb-3">
                                <a href="{{route('elearn.show', $course->id)}}">
                                    <video muted class="card-img-top mobile-cus-h object-cover" style="pointer-events: none;" poster="{{$course->photo}}">
                                        <source src="{{$course->preview}}" type="video/mp4">
                                    </video>
                                </a>
                                <div class="card-body">
                                    <div class="row justify-content-end">
                                        <div class="col-auto">
                                            <small class="small text-muted">
                                                @if($course->duration > 1)
                                                    {{$course->duration}} mins eCLE Value
                                                @elseif($course->duration < 2)
                                                    {{$course->duration}} min eCLE Value
                                                @elseif($course->duration >= 60 && $course->duration < 120)
                                                    {{$course->duration / 60}} hr eCLE Value
                                                @elseif($course->duration >= 120)
                                                    {{$course->duration / 60}} hrs eCLE Value
                                                @endif
                                            </small>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <h6 class="mb-2 name">
                                                <a href="{{route('elearn.show', $course->id)}}">{{Str::words($course->title, 3)}}</a>
                                            </h6>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12">
                                            <p class="card-text small text-muted">
                                                {{Str::words($course->description, 10)}}
                                            </p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <h6 class="card-text small text-muted">
                                                @php
                                                    $review_count = App\Models\CourseReview::where('course_id', $course->id)->count();
                                                    $viewed_count = App\Models\ViewedCourse::where('course_id', $course->id)->count();
                                                @endphp
                                                @if($review_count > 0)
                                                    {{number_format($review_count)}}
                                                    <i class="mdi mdi-star text-yellow"></i>
                                                    <i class="mdi mdi-star text-yellow"></i>
                                                    <i class="mdi mdi-star text-yellow"></i>
                                                    <i class="mdi mdi-star text-yellow"></i>
                                                    <i class="mdi mdi-star text-yellow"></i>
                                                @endif
                                            </h6>
                                        </div>
                                        <div class="col-auto">
                                            <small class="text-color">
                                                @if($viewed_count > 9999)
                                                    {{substr($viewed_count, 0, -3)}}K views
                                                @elseif($viewed_count > 99999)
                                                    {{substr($viewed_count, 0, -3)}}K views
                                                @elseif($viewed_count > 999999)
                                                    {{substr($viewed_count, 0, -4)}}M views
                                                @elseif($viewed_count < 2)
                                                    {{number_format($viewed_count)}} view
                                                @else
                                                    {{number_format($viewed_count)}} views
                                                @endif
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                    @else
                    <div class="mt-4">
                        <div class="text-center">
                            <h6 class="mb-4">No courses created</h6>
                            @if(Auth::user()->isSuperAdmin() || Auth::user()->isTenant() || Auth::user()->isAdmin())
                                <a class="btn custom-btn" href="{{route('elearn.create')}}"><i class="mdi mdi-plus"></i> Create Course</a>
                            @endif
                        </div>
                    </div>
                @endif
            </div>
        </div>
        <div class="tab-pane fade" id="latest" role="tabpanel" aria-labelledby="latest-tab">
            <div class="row mt-4">
                @if(count($courses) > 0)
                    @foreach ($courses as $course)
                        <div class="col-12 col-md-6 col-xl-3">
                            <div class="card w-100 mobile-h320 shadow-xss rounded-lg border-0 mb-3">
                                <a href="{{route('elearn.show', $course->id)}}">
                                    <video muted class="card-img-top mobile-cus-h object-cover" style="pointer-events: none;" poster="{{$course->photo}}">
                                        <source src="{{$course->preview}}" type="video/mp4">
                                    </video>
                                </a>
                                <div class="card-body">
                                    <div class="row justify-content-end">
                                        <div class="col-auto">
                                            <small class="small text-muted">
                                                @if($course->duration > 1)
                                                    {{$course->duration}} mins eCLE Value
                                                @elseif($course->duration < 2)
                                                    {{$course->duration}} min eCLE Value
                                                @elseif($course->duration >= 60 && $course->duration < 120)
                                                    {{$course->duration / 60}} hr eCLE Value
                                                @elseif($course->duration >= 120)
                                                    {{$course->duration / 60}} hrs eCLE Value
                                                @endif
                                            </small>
                                        </div>
                                    </div>
                                    <div class="row ">
                                        <div class="col">
                                            <h6 class="mb-2 name">
                                                <a href="{{route('elearn.show', $course->id)}}">{{Str::words($course->title, 3)}}</a>
                                            </h6>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12">
                                            <p class="card-text small text-muted">
                                                {{Str::words($course->description, 10)}}
                                            </p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <h6 class="card-text small text-muted">
                                                @php
                                                    $review_count = App\Models\CourseReview::where('course_id', $course->id)->count();
                                                    $viewed_count = App\Models\ViewedCourse::where('course_id', $course->id)->count();
                                                @endphp
                                                @if($review_count > 0)
                                                    {{number_format($review_count)}}
                                                    <i class="mdi mdi-star text-yellow"></i>
                                                    <i class="mdi mdi-star text-yellow"></i>
                                                    <i class="mdi mdi-star text-yellow"></i>
                                                    <i class="mdi mdi-star text-yellow"></i>
                                                    <i class="mdi mdi-star text-yellow"></i>
                                                @endif
                                            </h6>
                                        </div>
                                        <div class="col-auto">
                                            <small class="text-color">
                                                @if($viewed_count > 9999)
                                                    {{substr($viewed_count, 0, -3)}}K views
                                                @elseif($viewed_count > 99999)
                                                    {{substr($viewed_count, 0, -3)}}K views
                                                @elseif($viewed_count > 999999)
                                                    {{substr($viewed_count, 0, -4)}}M views
                                                @elseif($viewed_count < 2)
                                                    {{number_format($viewed_count)}} view
                                                @else
                                                    {{number_format($viewed_count)}} views
                                                @endif
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                    @else
                    <div class="mt-4">
                        <div class="text-center">
                            <h6 class="mb-4">No courses created</h6>
                            <a class="btn custom-btn" href="{{route('elearn.create')}}"><i class="mdi mdi-plus"></i> Create Course</a>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection