@extends('web.layouts.layout')

@section('content')

    <main class="mt-100">
        <!-- slider section-->
        <section
            class="hero-section background-secondary2 d-flex align-items-center"
        >
            <div class="container">
                <!-- for desktop view-->
                <div class="row align-items-center">
                    <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
                        <div class="right-section relative z-index wow clip-image-left">
                            <div class="card no-border no-bg">
                                <h1 class="card-title fs-1 mainColor fw-bold mb-0 pb-0">
                                    {{ $banner->currentDescription->subtitle ?? "" }}
                                </h1>
                                <div class="card-body pt-0">
                                    <article class="grey-text">
                                        {!! $banner->currentDescription->description ?? "" !!}
                                    </article>
                                    @if(!$hasAccessToWebsite)
                                        <div class="nav_btns mt-4 d-inline">
                                            <a
                                                href="{{ getRegisterRoute() }}"
                                                class="btn btn-primary half-rounded hvr-txt-trans"
                                            >
                                                <div class="txt" data-text="{{ __('main.subscribe_now') }}">
                                                  <span class="fs-7">
                                                    {{ __('main.subscribe_now') }}
                                                      {{-- __('users::users.create_account') --}}
                                                      {{-- __('users::users.new_registration') --}}
                                                    <img
                                                        data-src="{{ asset('assets/web/images/icons/arrows.svg') }}"
                                                        src="{{ asset('assets/web/images/icons/arrows.svg') }}"
                                                        alt="arrows"
                                                        class="lazyload img_contain ms-2"
                                                    />
                                                  </span>
                                                </div>
                                            </a>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
                        <div class="left-section relative z-index">
                            <img
                                data-src="{{ getImage($banner->image, 'assets/web/images/hero/board.png') }}"
                                src="{{ getImage($banner->image, 'assets/web/images/hero/board.png') }}"
                                alt="board"
                                class="lazyload img_contain main-img wow clip-image-right"
                            />
                            <img
                                data-src="{{ getImage($banner->image2, 'assets/web/images/hero/student.png') }}"
                                src="{{ getImage($banner->image2, 'assets/web/images/hero/student.png') }}"
                                alt="student"
                                class="lazyload img_contain front-img"
                            />
                            <div class="icons">
                                <img
                                    data-src="{{ asset('assets/web/images/hero/icons/icon1.svg') }}"
                                    src="{{ asset('assets/web/images/hero/icons/icon1.svg') }}"
                                    alt=""
                                    class="lazyload img_contain icon1"
                                />
                                <img
                                    data-src="{{ asset('assets/web/images/hero/icons/icon2.svg') }}"
                                    src="{{ asset('assets/web/images/hero/icons/icon2.svg') }}"
                                    alt="" r
                                    class="lazyload img_contain icon2"
                                />
                                <img
                                    data-src="{{ asset('assets/web/images/hero/icons/icon3.svg') }}"
                                    src="{{ asset('assets/web/images/hero/icons/icon3.svg') }}"
                                    alt=""
                                    class="lazyload img_contain icon3"
                                />
                                <img
                                    data-src="{{ asset('assets/web/images/hero/icons/icon4.svg') }}"
                                    src="{{ asset('assets/web/images/hero/icons/icon4.svg') }}"
                                    alt=""
                                    class="lazyload img_contain icon4"
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--about section-->
        <section class="about-section section_padding">
            <div class="container">
                <div class="row align-items-center">
                    <div
                        class="col-md-6 col-sm-12 col-lg-6 col-xs-12 mt-5 wow clip-image-left"
                    >
                        <h2 class="fs-2 orange-color fw-bold mb-3" data-wow-delay="0.2s">
                            {{ $aboutUs->currentDescription->title ?? "" }}
                        </h2>
                        <article class="dark-text">
                            {{ strip_tags($aboutUs->currentDescription->description ?? "") }}
                        </article>
                        <div class="nav_btns mt-4 d-inline">
                            <a href="{{ route('web.about_us') }}"
                               class="btn btn-primary half-rounded hvr-txt-trans">
                                <div class="txt" data-text="{{ __('main.view_more') }}">
                                    <span class="fs-7">
                                      {{ __('main.view_more') }}
                                      <img
                                          data-src="{{ asset('assets/web/images/icons/arrows.svg') }}"
                                          src="{{ asset('assets/web/images/icons/arrows.svg') }}"
                                          alt="arrows"
                                          class="lazyload img_contain ms-2"
                                      />
                                    </span>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-12 col-lg-6 col-xs-12 text-left">
                        <a class="about-img wow clip-image-right d-block" href="#">
                            <img
                                data-src="{{ getImage($aboutUs->image, 'assets/web/images/about-img.svg') }}"
                                src="{{ getImage($aboutUs->image, 'assets/web/images/about-img.svg') }}"
                                alt="about img"
                                class="lazyload img_contain"
                            />
                        </a>
                    </div>
                </div>
            </div>
        </section>
        <!--stages section-->
        <section class="stages-section section_padding">
            <div class="container">
                <h2
                    class="fs-2 orange-color fw-bold wow slow fadeInUp title"
                    data-wow-delay="0.2s"
                >
                    {{ __('stages::stages.stages') }}
                </h2>
                <div class="row mt-5">
                    @if(isset($stages) && $stages->isNotEmpty())
                        @foreach($stages as $stage)
                            <div
                                class="col-md-4 col-lg-4 col-sm-12 col-xs-12 wow slow fadeInUp"
                            >
                                <div class="card stages-card">
                                    <div class="card-body px-4 py-5">
                                        <div class="icon">
                                            <img
                                                data-src="{{ getImage($stage->image) }}"
                                                src="{{ getImage($stage->image) }}"
                                                alt="{{ $stage->title }}"
                                                class="lazyload img_contain"
                                            />
                                        </div>
                                        <a href="{{ route('web.courses.index', ['stage_id' => $stage->id]) }}"
                                           class="card-title fs-3 fw-bold mainColor mt-3">
                                            {{ $stage->title }}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </section>
        <!--banner section-->
        <section class="banner-section teacher-banner wow fadeInUp slow">
            <div class="container join-us-banner"
                 style="background-image: url('{{ getImage($joinUsTeacherBanner->image, 'assets/web/images/banner_1.png') }}');">
                <div class="join-us-banner-content">
                    <h2>{{ $joinUsTeacherBanner->currentDescription->subtitle ?? "" }}</h2>
                    <p>{{ strip_tags($joinUsTeacherBanner->currentDescription->description ?? "") }}</p>
                    <div class="nav_btns mt-4 d-inline">
                        <a href="{{ route('web.users.register.code', ['role' => 'teacher']) }}"
                           class="btn btn-primary half-rounded hvr-txt-trans join-us-btn">
                            <div class="txt" data-text="{{ __('users::teachers.register_teacher_now') }}">
                                <span class="fs-7">
                                  {{ __('users::teachers.register_teacher_now') }}
                                  <img
                                      data-src="{{ asset('assets/web/images/icons/arrows.svg') }}"
                                      src="{{ asset('assets/web/images/icons/arrows.svg') }}"
                                      alt="arrows"
                                      class="lazyload img_contain ms-2"
                                  />
                                </span>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </section>
        <!--numbers section-->
        <section class="wow fadeInUp slow">
            <div class="container">
                <div class="numbers-section raddius-15">
                    <div class="row">
                        <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                            <div class="wow slow fadeInUp card no-bg text-center no-border">
                                <div class="card-body">
                                    <h2
                                        class="card-title fw-bold fs-1 counter text-white"
                                        data-count="{{ $userCount ?? 0 }}"
                                    >
                                        0
                                    </h2>
                                    <p class="text-white fs-2 fw-bold">{{ __('users::members.student') }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                            <div class="wow slow fadeInUp card no-bg text-center no-border">
                                <div class="card-body">
                                    <h2
                                        class="card-title fw-bold fs-1 counter text-white"
                                        data-count="{{ $teacherCount ?? 0 }}"
                                    >
                                        0
                                    </h2>
                                    <p class="text-white fs-2 fw-bold">{{ __('users::teachers.teacher') }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                            <div class="wow slow fadeInUp card no-bg text-center no-border">
                                <div class="card-body">
                                    <h2
                                        class="card-title fw-bold fs-1 counter text-white"
                                        data-count="{{ $documentCount ?? 0 }}"
                                    >
                                        0
                                    </h2>
                                    <p class="text-white fs-2 fw-bold">{{ __('documents::documents.file2') }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--opinion section-->
        <section class="opinion-section section_padding">
            <div class="container">
                <h2
                    class="fs-2 orange-color fw-bold wow slow fadeInUp"
                    data-wow-delay="0.2s"
                >
                    {{ __('main.students_feedback') }}
                </h2>
                <div class="swiper opinion-slider mt-3 wow slow fadeInUp">
                    <div class="swiper-wrapper">
                        @if(isset($ratings) && $ratings->isNotEmpty())
                            @foreach($ratings as $rating)
                                <div class="swiper-slide">
                                    <div class="client-card box-shadow card no-border no-radius">
                                        <div class="card-body radius-15 px-4 py-4">
                                            <article class="card-text grey-text fs-5 min-height-115">
                                                {{ $rating->comment }}
                                            </article>
                                            <div class="d-flex mt-1">
                                                <img
                                                    data-src="{{ getImage($rating->owner->photo ?? "") }}"
                                                    src="{{ getImage($rating->owner->photo ?? "") }}"
                                                    width="60px"
                                                    height="60px"
                                                    class="img_cover client-img me-3 lazyloaded mt-2"
                                                    alt="{{ $rating->owner->name ?? "" }}"
                                                />
                                                <div>
                                                    <div class="card-title mt-2 fs-6 fw-bold">
                                                        {{ $rating->owner->name ?? "" }}
                                                    </div>
                                                    <p class="grey-text fs-6">
                                                        {{ $rating->course->stage->currentDescription->title ?? "" }}
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <img
                data-src="{{ asset('assets/web/images/icons/go.svg') }}"
                src="{{ asset('assets/web/images/icons/go.svg') }}"
                alt=""
                class="lazyload img_contain wow clip-image-bottom go"
                width="104px"
                height="83px"
            />
        </section>
    </main>

@endsection

@push('stack_scripts')

@endpush