@extends('layouts.app')
@section('title')
    @php echo $metatags @endphp
@endsection
@section('content')

<!-- Start breadcrumb Area -->
    <div class="rbt-breadcrumb-default ptb--100 ptb_md--50 ptb_sm--30 bg-gradient-1">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumb-inner text-center">
                        <h1 class="title">{{__('home.courses')}}</h1>
                        <ul class="page-list">
                            <li class="rbt-breadcrumb-item"><a href="{{url('/')}}">@lang('home.home')</a></li>
                            <li>
                                <div class="icon-right"><i class="feather-chevron-right"></i></div>
                            </li>
                            <li class="rbt-breadcrumb-item active">{{__('home.courses')}}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Breadcrumb Area -->
        <!-- Start Course Top  -->
        <div class="rbt-course-top-wrapper mt--40">
            <div class="container">
                <div class="row g-5 align-items-center">
                    <div class="col-lg-5 col-md-12">
                        <div class="rbt-sorting-list d-flex flex-wrap align-items-center">
                            <div class="rbt-short-item switch-layout-container">
                                <ul class="course-switch-layout">
                                    <li class="course-switch-item"><button class="rbt-grid-view active"
                                            title="Grid Layout"><i class="feather-grid"></i> <span
                                                class="text">{{__('home.grid')}}</span></button></li>
                                    <li class="course-switch-item"><button class="rbt-list-view" title="List Layout"><i
                                                class="feather-list"></i> <span class="text">{{__('home.list')}}</span></button></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @if(count($courses) > 0)
        <!-- End Course Top  -->
        @php
            $levels_filter = request()->has('levels') ?  request('levels') : [];
            $categories_filter = request()->has('categories') ?  request('categories') : [];
            $price_filter = request()->has('price') ?  request('price') : [];
            $free_courses_count = $courses->where('price',0)->count(); 
            $paid_courses_count = $courses->where('price','!=',0)->count(); 
        @endphp
        <!-- Start Card Style -->
        <div class="rbt-section-overlayping-top rbt-section-gapBottom">
            <div class="container">
            <form id="filter_form">
                <div class="row row--30 gy-5">
                    <div class="col-lg-3 order-1 order-lg-1">
                        <aside class="rbt-sidebar-widget-wrapper">

                            <!-- Start Widget Area  -->
                            <div class="rbt-single-widget rbt-widget-search">
                                <div class="inner">
                                       <input type="text" class="autoComplete_courses"  placeholder="{{__('home.search for')}}..." name="search_input_courses" >
                                        <i onclick="document.getElementById('filter_form').submit()" class="fa-light fa-magnifying-glass"></i>
                                </div>
                            </div>
                            
{{--
                            <!-- Start Widget Area  -->
                            <div class="rbt-single-widget rbt-widget-lavels">
                                <div class="inner">
                                    <h4 class="rbt-widget-title">{{__('home.categories')}}</h4>
                                    <ul class="rbt-sidebar-list-wrapper lavels-list-check">
                                        @foreach ($categories as $category)                         
                                        <li class="rbt-check-group">
                                                <input type="checkbox" name="categories[]" onchange="this.form.submit()" value="{{$category->id }}" 
                                                @if (in_array($category->id,$categories_filter) )@checked(true)  @endif id="category-{{$category->id}}">
                                                <label for="category-{{$category->id}}">{{$category->{'name_'.$lang} }}
                                                <span class="rbt-lable count">({{$category->coursesCount($levels_filter) }})</span></label>
                                        </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                            <!-- End Widget Area  -->
--}}
                        </aside>
                    </div>
                    
                    <div class="col-lg-9 order-1 order-lg-2">
                        <div class="infinite-scroll">
                          <div class="row rbt-course-grid-column">
                            
                            @foreach($courses as $course)
                                <!-- Start Single Card  -->
                                <div class="course-grid-3">
                                    <div class="rbt-card variation-01 rbt-hover">
                                        <div class="rbt-card-img">
                                                <a    href="{{ $course->publish ? LaravelLocalization::localizeUrl('course/' . $course->{'link_'.$lang}) : '#' }}" class="thumbnail">
                                                    <img src="{{ isset($course->image) ? Helper::uploadedImagesPath('courses/source', $course->image) : Helper::imageFilesPath('noimage.png') }}" alt="course">
                                                </a>
                                            </div>
                                            <div class="rbt-card-body">
                                                <div class="rbt-card-top">
                                                    <div class="rbt-review">
                                                        
                                                    </div>
                                                    <div class="rbt-bookmark-btn">
                                                <form action="{{ route('addWishlist') }}" method="POST">
                                                    @csrf
                                                    <input type="hidden" name="course_id" value="{{ $course->id }}">
                                                    <button type="submit" class="rbt-round-btn" title="Bookmark">
                                                        <i class="feather-bookmark"></i>
                                                    </button>
                                                </form>
                                            </div>
                                                </div>
        
                                                <h4 class="rbt-card-title">
                                                    <a href="{{ $course->publish ? LaravelLocalization::localizeUrl('course/' . $course->{'link_'.$lang}) : '#' }}">
                                                        <h5 class="title">{{ $course->{'name_' . $lang} }}</h5>
                                                    </a>
                                                </h4>
        
                                                <ul class="rbt-meta">
                                                    <li><i class="feather-book"></i>
                                                        {{ $course->category->{'name_' . $lang} ?? '' }}
                                                    </li>
                                                    <li>
                                                        <p class=' mb-3 rounded d-inline-block p-2 border 'style=' background: #f379241f;  color: #f37924;   border: 1px solid #f379245c !important; font-size: 13px;  padding: 3px 6px !important;'>
                                                           <i class="feather-user-plus"></i>
                                                            {{ $course->type->{'name_'.$lang} }} 
                                                        </p>
                                                         
                                                    </li>
                                                </ul>
                                                
                                                <div class="leasson-students">
                                                    <div class="lesson">
                                                        <i class="feather-clock"></i>
                                                        <span>{{ intval($course->duration).' '.__('home.hours') }}</span>
                                                    </div>
                                                    <div class="lesson">
                                                        <i class="feather-calendar"></i>
                                                        <span>  {{ intval($course->overall_days).' '.__('home.days') }}</span>
                                                    </div>
                                                </div> 
                                                <div class="rbt-card-bottom">
                                                    <div class="rbt-price">
                                                        @if($course->publish)
                                                @if ($course->discount)
                                                <span class="off-price">
                                                {{ $course->last_price() . ' ' . __('home.SAR') }}  
                                            </span>
                                                <span class="current-price">
                                                {{ $course->price . ' ' . __('home.SAR') }} 
                                            </span>
                                                @if(isset($course->discount->end_date))
                                                <div class="clock-area">
                                                    <i class="ms-1 fa-light fa-clock"></i>
                                                    @php
                                                    $end_date = \Carbon\Carbon::parse($course->discount->end_date);
                                                    $daysLeft = \Carbon\Carbon::now()->diffInDays($end_date);
                                                    @endphp
                                                    <span class="text-danger">{{ $daysLeft }} @lang('home.Day left at this price!')</span>
                                                </div>
                                                @endif
                                                @else
                                                <div class="current-price">
                                                    {{ $course->last_price() . ' ' . __('home.SAR') }}
                                                </div>
                                                @endif
                                            @else
                                                <span class="current-price">
                                                {{ __('home.soon') }}  
                                            </span>
                                            @endif
                                                    </div>
                                                    <a class="rbt-btn-link" href="{{ $course->publish ? LaravelLocalization::localizeUrl('course/' . $course->{'link_'.$lang}) : '#' }}">{{__('home.Learn_More')}}<i class="feather-arrow-right"></i></a>
                                                </div>
                                            </div>
                                    </div>
                                </div>
                                <!-- End Single Card  -->
                            @endforeach
                            {{ $courses->links() }}

                          </div>
                        </div>
                    </div>
                </div>
            </form>
            </div>
        </div>
        <!-- End Card Style -->
        @else
        <div class="col-md-12 col-lg-12 col-xl-12 mb-3 text-center">
            <h4>{{trans('home.no data found in this page')}}</h4>
        </div>
        @endif

   

@endsection
@section ('script')
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.4.1/jquery.jscroll.min.js"></script>
    <script>
    $(document).ready(function() {
        $('nav[aria-label="Pagination Navigation"]').hide();

        var $scrollContainer;
        if (window.innerWidth <= 767) {
            $scrollContainer = $('.infinite-scroll'); // Mobile: Scroll container
        } else {
            $scrollContainer = $(window); // Desktop: Window scroll
        }

        var jscrollInstance = $('.infinite-scroll').jscroll({
            autoTrigger: true,
            loadingMsg: '<div class="loading"><b>Loading...</b></div>',
            padding: 0,
            nextSelector: 'nav[aria-label="Pagination Navigation"] a[rel="next"]',
            contentSelector: '.infinite-scroll .row',
            callback: function() {
                var $container = $('.infinite-scroll');
                var scrollHeightBeforeAppend = $container[0].scrollHeight;
                var currentScrollTop = $container.scrollTop();

                $('nav[aria-label="Pagination Navigation"]').remove();

                if ($('nav[aria-label="Pagination Navigation"] a[rel="next"]').length === 0) {
                    jscrollInstance.destroy();
                }

                // Adjust scroll position to account for newly appended content
                var scrollHeightAfterAppend = $container[0].scrollHeight;
                var newContentHeight = scrollHeightAfterAppend - scrollHeightBeforeAppend;

                if (window.innerWidth <= 767) {
                    $container.scrollTop(currentScrollTop + newContentHeight);
                }
            }
        });
    });
</script>
   <script>
        $('.autoCompleteProduct').on('change', function () {
            $('#filter_form').submit();
        });
        // Initialize autocomplete
        function auto() {
            var options2 = {
                url: function (phrase) {
                    return "{{ url('searchAutoComplete') }}";
                },
                ajaxSettings: {
                    dataType: "json",
                    method: "GET",
                    data: {
                        dataType: "json"
                    }
                },
                getValue: function (element) {
                    return element.name;
                },
                preparePostData: function (data) {
                    data.phrase = $('.autoComplete_courses').val();
                    return data;
                },
                list: {
                    match: {
                        enabled: true
                    }
                }
            };

            $('.autoComplete_courses').easyAutocomplete(options2);
        }

        $(document).ready(function() {
            auto();
        });
    </script>

@endsection