@extends('web.layouts.container')
@section('css')
    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/toastr.css') }}" />
@endsection
@section('header')
    <header>
        <div class="container-fluid">
              <div class="row">
                <div class="col-lg-4 valign">
                    <img src="{{asset('assets/web/images/header6.png')}}" alt="" class="head_img">
                </div>
                <div class="col-lg-8 valign">
                    <div class="head_content">
                        <div class="head_info w-100 text-center">
                            <h4> <span class="secondary-color">عين </span> <span class="main-color">المبدع</span></h4>
                            <h2>منصة رقمية لتطوير المعلمين والطلاب</h2>
                        </div>
    
                        @if(count($categories))
                            @foreach($categories as $category)
                                <div class="items">
                                    <img src="{{asset('assets/web/images/head_icon/'.$loop->iteration.'.png')}}" alt="" class="img_back">
                                    <a href="{{route('course.index').'?category='.$category->id}}"><h2>{{$category->name}}</h2></a>
                                </div>
                        @endforeach
                    @endif
    
                    <!--<div class="items">-->
                    <!--    <a href="#" class="link">{{settings('site_phone')}}<img src="{{asset('assets/web/images/icons/whats.svg')}}" alt=""> </a>-->
                        <!--</div>-->
                        <!--<div class="items">-->
                    <!--    <a href="#" class="link">{{settings('twitter')}}<img src="{{asset('assets/web/images/icons/twit.svg')}}" alt=""> </a>-->
                        <!--</div>-->
                        <!--<div class="items">-->
                    <!--    <a href="#" class="link"> Ienmetr.com <img src="{{asset('assets/web/images/icons/web.svg')}}" alt=""> </a>-->
                        <!--</div>-->
                    </div>
                </div>
            </div>  
        </div>
    </header>
@endsection

@section('content')
    <!-- -------------- courses --------------- -->
    <section class="courses section-padding bg-gray">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6">
                    <div class="section_head text-center">
                        <h2>{{array_key_exists('training_course_title_'.getCurrentLocale(), settings()) ? settings('training_course_title_'.getCurrentLocale()) : __('settings.training_course_title')}} </h2>
                        <p>{{array_key_exists('training_course_desc_'.getCurrentLocale(), settings()) ? settings('training_course_desc_'.getCurrentLocale()) : __('settings.training_course_desc')}} </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="container scroll_tabs">
                <ul class="nav nav-pills mb-4 justify-content-center" id="pills-tab" role="tablist">
                    @if(count($allPayedCourses))
                        <li class="nav-item">
                            <a class="active" id="pills-tab-all-tab" data-toggle="pill" href="#pills-tab-all" role="tab" aria-controls="pills-tab1" aria-selected="true">
                                الكل
                            </a>
                        </li>
                        @foreach($allPayedCourses as $category_name => $category)
                            <li class="nav-item">
                                <a id="pills-tab2-tab" data-toggle="pill" href="#pills-tab-{{$loop->iteration}}" role="tab" aria-controls="pills-tab-{{$loop->iteration}}" aria-selected="false">
                                    {{$category_name}}
                                </a>
                            </li>
                        @endforeach
                    @endif

                </ul>
            </div>
            <div class="container">
                <div class="tab-content" id="pills-tabContent">
                    <div class="tab-pane fade show active" id="pills-tab-all" role="tabpanel" aria-labelledby="pills-tab-all-tab">
                        <div class="swiper_products">
                            <div class="swiper-wrapper">
                                @if(count($allPayedCourses))
                                    @foreach($allPayedCourses as $allPayedCourse)
                                        @foreach($allPayedCourse as $PayedCourse)
                                            <div class="swiper-slide">
                                                <div class="prod_item">
                                                    <div class="img">
                                                        <img src="{{asset($PayedCourse['image'])}}" alt="">
                                                        <span class="sec">{{$PayedCourse['category_name']}}</span>
                                                    </div>
                                                    <div class="info">
                                                        <div class="author">
                                                            <div class="s_img">
                                                                <img src="{{$PayedCourse['instructor_image'] ? asset($PayedCourse['instructor_image']) : asset('assets/web/images/user.png')}}" alt="">
                                                            </div>
                                                            <div class="inf">
                                                                {{$PayedCourse['instructor_name']}}
                                                            </div>
                                                        </div>
                                                        <h3><a href="{{route('course.show', $PayedCourse['id'])}}">{{$PayedCourse['name']}}</a></h3>
                                                        <div class="prc">
                                                            <div class="str">
                                                                <small>
                                                                    ( {{$PayedCourse['evaluate_count']}} تقييم )
                                                                </small>
                                                                <div class="stars">
                                                                    <i class="{{abs(round($PayedCourse['evaluate_average'])) >=1 ? 'fas' : 'far'}} fa-star"></i>
                                                                    <i class="{{abs(round($PayedCourse['evaluate_average'])) >=2 ? 'fas' : 'far'}} fa-star"></i>
                                                                    <i class="{{abs(round($PayedCourse['evaluate_average'])) >=3 ? 'fas' : 'far'}} fa-star"></i>
                                                                    <i class="{{abs(round($PayedCourse['evaluate_average'])) >=4 ? 'fas' : 'far'}} fa-star"></i>
                                                                    <i class="{{abs(round($PayedCourse['evaluate_average'])) >=5 ? 'fas' : 'far'}} fa-star"></i>
                                                                </div>
                                                            </div>
                                                            <h3> {{$PayedCourse['price']}} <small> SAR </small></h3>
                                                        </div>
                                                        @if(in_array($PayedCourse['course_type'], ['payed']))
                                                            <ul class="prod_fot">
                                                                <li><i class="far fa-calendar"></i> يبدأ من <span>  {{date('d F', strtotime($PayedCourse['start_date']))}} </span> وينتهى <span>{{date('d F', strtotime($PayedCourse['end_date']))}}</span></li>
                                                                <li><i class="far fa-calendar"></i>
                                                                    أيام الأسبوع
                                                                    <br>
                                                                    <span class="mt-2">
                                                                @php

                                                                    /** @var TYPE_NAME $PayedCourse */
                                                                    $allDays = explode(', ', $PayedCourse['days']);
                                                                @endphp

                                                                        @foreach($allDays as $day)
                                                                            {{__('courses.'.$day)}}
                                                                        @endforeach
                                                                        {{--                                                                ({{str_replace(',', ' ', $allPayedCourse->days)}})--}}
                                                            </span>
                                                                </li>
                                                            </ul>
                                                        @endif
                                                        @if(in_array($PayedCourse['course_type'], ['record_payed']))
                                                            <ul class="prod_fot">
                                                                <li><i class="far fa-calendar"></i><span>دورة مسجلة</span></li>
                                                                <li><i class="far fa-calendar"></i> ساعات الدورة<span>{{$PayedCourse['hours']}}</span> </li>
                                                            </ul>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endforeach
                                @endif
                            </div>
                            <!-- Add Pagination -->
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                    @foreach($allPayedCourses as $categoryName => $ourCourses)
                        <div class="tab-pane fade" id="pills-tab-{{$loop->iteration}}" role="tabpanel" aria-labelledby="pills-tab-{{$loop->iteration}}-tab">
                            <div class="swiper_products">
                                <div class="swiper-wrapper">
                                    @foreach($ourCourses as $ourCourse)
                                        <div class="swiper-slide">
                                            <div class="prod_item">
                                                <div class="img">
                                                    <img src="{{asset($ourCourse['image'])}}" alt="">
                                                    <span class="sec">{{$categoryName}}</span>
                                                </div>
                                                <div class="info">
                                                    <div class="author">
                                                        <div class="s_img">
                                                            <img src="{{$ourCourse['instructor_image'] ? asset($ourCourse['instructor_image']) : asset('assets/web/images/user.png')}}" alt="">
                                                        </div>
                                                        <div class="inf">
                                                            {{$ourCourse['instructor_name']}}
                                                        </div>
                                                    </div>
                                                    <h3><a href="{{route('course.show', $ourCourse['id'])}}">{{$ourCourse['name']}}</a></h3>
                                                    <div class="prc">
                                                        <div class="str">
                                                            <small>
                                                                ( {{$ourCourse['evaluate_count']}} تقييم )
                                                            </small>
                                                            <div class="stars">
                                                                <i class="{{abs(round($ourCourse['evaluate_average'])) >=1 ? 'fas' : 'far'}} fa-star"></i>
                                                                <i class="{{abs(round($ourCourse['evaluate_average'])) >=2 ? 'fas' : 'far'}} fa-star"></i>
                                                                <i class="{{abs(round($ourCourse['evaluate_average'])) >=3 ? 'fas' : 'far'}} fa-star"></i>
                                                                <i class="{{abs(round($ourCourse['evaluate_average'])) >=4 ? 'fas' : 'far'}} fa-star"></i>
                                                                <i class="{{abs(round($ourCourse['evaluate_average'])) >=5 ? 'fas' : 'far'}} fa-star"></i>
                                                            </div>
                                                        </div>
                                                        <h3> {{$ourCourse['price']}} <small> SAR </small></h3>
                                                    </div>
                                                    @if(in_array($ourCourse['course_type'], ['payed']))
                                                        <ul class="prod_fot">
                                                            <li><i class="far fa-calendar"></i> يبدأ من <span>  {{date('d F', strtotime($ourCourse['start_date']))}} </span> وينتهى <span>{{date('d F', strtotime($ourCourse['end_date']))}}</span></li>
                                                            <li><i class="far fa-calendar"></i>
                                                                أيام الأسبوع
                                                                <br>
                                                                <span class="mt-2">
                                                                @php

                                                                    /** @var TYPE_NAME $ourCourse */
                                                                    $allDays = explode(', ', $ourCourse['days']);
                                                                @endphp

                                                                    @foreach($allDays as $day)
                                                                        {{__('courses.'.$day)}}
                                                                    @endforeach
                                                                    {{--                                                                ({{str_replace(',', ' ', $allPayedCourse->days)}})--}}
                                                            </span>
                                                            </li>
                                                        </ul>
                                                    @endif
                                                    @if(in_array($ourCourse['course_type'], ['record_payed']))
                                                        <ul class="prod_fot">
                                                            <li><i class="far fa-calendar"></i><span>دورة مسجلة</span></li>
                                                            <li><i class="far fa-calendar"></i> ساعات الدورة<span>{{$ourCourse['hours']}}</span> </li>
                                                        </ul>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <!-- Add Pagination -->
                                <div class="swiper-pagination"></div>
                            </div>
                        </div>
                    @endforeach

                </div>
            </div>
        </div>
    </section>
    <!-- -------------- courses ---------------- -->
    <section class="courses small_prod section-padding">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6">
                    <div class="section_head text-center">
                        <h2>{{array_key_exists('free_course_title_'.getCurrentLocale(), settings()) ? settings('free_course_title_'.getCurrentLocale()) : ''}}</h2>
                        <p>{{array_key_exists('free_course_desc_'.getCurrentLocale(), settings()) ? settings('free_course_desc_'.getCurrentLocale()) : ''}}</p>
                    </div>
                </div>
            </div>
            <div class="swiper_products_small">
                <div class="swiper-wrapper">
                    @foreach($freeCourses as $freeCourse)
                        <div class="swiper-slide">
                            <div class="prod_item">
                                <div class="img">
                                    <img src="{{asset($freeCourse->image)}}" alt="">
                                    <span class="sec">{{$freeCourse->category_name}}</span>
                                </div>
                                <div class="info">
                                    <div class="author">
                                        <div class="s_img">
                                            <img src="{{$freeCourse->instructor_image ? asset($freeCourse->instructor_image) : asset('assets/web/images/user.png')}}" alt="">
                                        </div>
                                        <div class="inf">
                                            {{$freeCourse->instructor_name}}
                                        </div>
                                    </div>
                                    <h3><a href="{{route('course.show', $freeCourse->id)}}">{{$freeCourse->name}}</a></h3>
                                    <div class="prc">
                                        <div class="str">
                                            <small>
                                                ( {{$freeCourse->evaluate_count}} تقييم )
                                            </small>
                                            <div class="stars">
                                                <i class="{{abs(round($freeCourse->evaluate_average)) >=1 ? 'fas' : 'far'}} fa-star"></i>
                                                <i class="{{abs(round($freeCourse->evaluate_average)) >=2 ? 'fas' : 'far'}} fa-star"></i>
                                                <i class="{{abs(round($freeCourse->evaluate_average)) >=3 ? 'fas' : 'far'}} fa-star"></i>
                                                <i class="{{abs(round($freeCourse->evaluate_average)) >=4 ? 'fas' : 'far'}} fa-star"></i>
                                                <i class="{{abs(round($freeCourse->evaluate_average)) >=5 ? 'fas' : 'far'}} fa-star"></i>
                                            </div>
                                        </div>
                                    </div>
                                    @if(in_array($freeCourse->course_type, ['free']))
                                        <ul class="prod_fot">
                                            <li><i class="far fa-calendar"></i><span>دورة مجانية</span></li>
                                            <li><i class="far fa-calendar"></i> ساعات الدورة<span>{{$freeCourse->hours}}</span> </li>
                                        </ul>
                                    @endif

                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>
    <!-- -------------- numbers ---------------- -->
    <section class="numbers section-padding">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6">
                    <div class="section_head text-center">
                        <h2>{{array_key_exists('honor_number_title_'.getCurrentLocale(), settings()) ? settings('honor_number_title_'.getCurrentLocale()) : __('settings.honor_number_title')}}</h2>
                        <p>{{array_key_exists('honor_number_desc_'.getCurrentLocale(), settings()) ? settings('honor_number_desc_'.getCurrentLocale()) : __('settings.testimonials_desc')}}</p>
                    </div>
                </div>
            </div>
            <div class="content mt-5">
                <div class="row">
                    <div class="col-lg-7">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="items">
                                    <div class="icons">
                                        <img src="{{asset('assets/web/images/icons/cap.svg')}}" alt="">
                                    </div>
                                    <div class="info">
                                        <h4> + <span class="counter">{{$students}}</span></h4>
                                        <small>طالب سعيد</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="items">
                                    <div class="icons">
                                        <img src="{{asset('assets/web/images/icons/clock.svg')}}" alt="">
                                    </div>
                                    <div class="info">
                                        <h4> + <span class="counter">{{$hours}}</span></h4>
                                        <small>ساعه</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="items">
                                    <div class="icons">
                                        <img src="{{asset('assets/web/images/icons/book.svg')}}" alt="">
                                    </div>
                                    <div class="info">
                                        <h4> + <span class="counter">{{$course}}</span></h4>
                                        <small>دوره</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="items">
                                    <div class="icons">
                                        <img src="{{asset('assets/web/images/icons/online_video.svg')}}" alt="">
                                    </div>
                                    <div class="info">
                                        <h4> + <span class="counter">{{$videos}}</span></h4>
                                        <small>فيديو</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <div class="img">
                            <img src="{{asset('assets/web/images/vid.png')}}" alt="">
                            <a href="{{array_key_exists('honer_video_url', settings()) ? settings('honer_video_url') : '#'}}" data-fancybox class="play_icon">
                                <i class="fas fa-play"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <img class="wave" src="{{asset('assets/web/images/wave.svg')}}">
    </section>
    <!-- --------------- partners --------------- -->

    <section class="partners bg-gray section-padding">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6">
                    <div class="section_head text-center">
                        <h2>شركاء النجاح </h2>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="swiper_partners">
                    <div class="swiper-wrapper">
                        @if(count($partners))
                            @foreach($partners as $partner)
                                <div class="swiper-slide">
                                    <a data-partner=".partner_{{$partner->id}}" href="#0" class="img partner_link" data-toggle="modal" data-target="#modal_partner">
                                        <img src="{{$partner->image ? asset($partner->image) : asset('assets/web/images/logo.png')}}" alt="">
                                    </a>
                                </div>
                                <div class="partner_{{$partner->id}} d-none">
                                    <div class="row">
                                        <div class="col-lg-4">
                                            <div class="img">
                                                <img src="{{$partner->image ? asset($partner->image) : asset('assets/web/images/logo.png')}}" alt="">
                                            </div>
                                        </div>
                                        <div class="col-lg-8 valign">
                                            <div class="info w-100">
                                                <h6 class="main-color">{{$partner->name}}</h6>
                                                <div class="text">{!! $partner->description !!}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
    </section>

    <div class="modal fade modal_partner" id="modal_partner" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-body">
                    <a href="#" class="part_inf d-block partner_container"></a>
                </div>
            </div>
        </div>
    </div>

    <!-- --------------- clients --------------- -->
    <section class="clients section-padding">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6">
                    <div class="section_head text-center">
                        <h2>{{array_key_exists('testimonials_title_'.getCurrentLocale(), settings()) ? settings('testimonials_title_'.getCurrentLocale()) : __('settings.testimonials_title')}}</h2>
                        <p>{{array_key_exists('testimonials_desc_'.getCurrentLocale(), settings()) ? settings('testimonials_desc_'.getCurrentLocale()) : __('settings.testimonials_desc')}}</p>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="swiper_clients">
                    <div class="swiper-wrapper">
                        @if(count($testimonials))
                            @foreach($testimonials as $testimonial)
                                <div class="swiper-slide">
                                    <div class="items">
                                        <div class="top">
                                            <div class="img_usr">
                                                <img src="{{asset($testimonial->image)}}" alt="">
                                            </div>
                                            <div class="inf">
                                                <h6>{{$testimonial->name}}</h6>
                                                <p>{{$testimonial->job_title}}</p>
                                                <div class="stars">
                                                    <i class="{{$testimonial->evaluate >= 1 ? 'fas' : 'far'}} fa-star"></i>
                                                    <i class="{{$testimonial->evaluate >= 2 ? 'fas' : 'far'}} fa-star"></i>
                                                    <i class="{{$testimonial->evaluate >= 3 ? 'fas' : 'far'}} fa-star"></i>
                                                    <i class="{{$testimonial->evaluate >= 4 ? 'fas' : 'far'}} fa-star"></i>
                                                    <i class="{{$testimonial->evaluate >= 5 ? 'fas' : 'far'}} fa-star"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="bottom">
                                            <div class="text">{!! $testimonial->comment !!} </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
    </section>
    <!-- -------------- subscribe --------------- -->
    <section class="subscribe bg-gray section-padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <h2>إشترك معنا <br> في النشرة البريدية</h2>
                </div>
                <div class="col-lg-6">
                    <form action="{{route('user.newsletters')}}" method="get" class="form newsletter_form">
                        @csrf()
                        <div class="form-group">
                            <input type="email" name="email" placeholder="{{__('users.email')}}" class="form-control newsletter_email">
                            <button class="butn color newsletter_button"><span>{{__('main.subscribe')}}</span></button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <div class="modal fade welcome_pop_up" id="welcomeModal" tabindex="-1" aria-labelledby="welcomeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <div class="modal-body">
                    <div class="col-md-8 m-auto">
                        <div class="welcome_modal_content">
                            <img src="{{asset('assets/web/images/logo.svg')}}" class="logo">
                            <h6>مرحبا بك في منصة <span class="secondary-color">عين</span> <span class="main-color">المبدع</span></h6>
                            <p>ستبدأ معنا رحلة التعلم خطوة بخطوة مع أفضل المدرسين والخبراء</p>
                            <button data-dismiss="modal" type="submit" class="submit-btn mt-5">  بدأ التصفح</button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

@endsection

@section('inner_js')
    <script src="{{ asset('assets/web/js/lib/toastr.min.js') }}"></script>

    <script>

        $(document).ready(function(){
            if ("{{session('welcome_pop_up')}}"){
                $('.welcome_pop_up').modal();
            }
        });

        $('.counter').countUp({
            delay: 10,
            time: 2000
        });

        $('.partner_link').click(function() {
            let partnerInfo = $($(this).data('partner')).html();
            $('.partner_container').html(partnerInfo);
        });

    </script>
@endsection