@extends('layouts.frontend.master')

@section('title')
    {{ __('UNIGUIDE | e-Learning website') }}
@endsection
@push('css')
@endpush
@section('seo')
    @foreach ($jsonLdData as $item)
        <script type="application/ld+json">
            {!! json_encode($item) !!}
        </script>
    @endforeach
@endsection
@section('content')
    <!-- Carousel Start -->
    <div class="container-fluid p-0 mb-5 ltr">
        <div class="owl-carousel header-carousel position-relative">
            @foreach($sliders as $slider)
                <div class="owl-carousel-item position-relative">
                    <img class="img-fluid" src="{{ $slider->imagePath }}" alt="">
                    <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center"
                         style="background: rgba(24, 29, 56, .7);">
                        <div class="container">
                            <div class="row justify-content-start reverse">
                                <div class="col-sm-10 col-lg-8">
                                    <h5 class="text-white text-uppercase mb-3 animated slideInDown">
                                        {{ __('Educational Platform') }}</h5>
                                    <h1 class="display-3 text-white animated slideInDown">
                                        {{ $slider->name }}</h1>
                                    <p class="fs-5 text-white mb-4 pb-2 hero">
                                        {!! $slider->description !!}</p>
                                    <a href="{{route('about')}}"
                                       class="btn btn-primary py-md-3 px-md-5 me-3 animated slideInLeft">{{ __('Read More') }}</a>
                                    <a href="{{route('frontend.register.create')}}"
                                       class="btn btn-light py-md-3 px-md-5 animated slideInRight">{{ __('Register Now') }}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
    <!-- Carousel End -->
    <!-- Service Start -->
    <div class="container-xxl py-5">
        <div class="container">
            <div class="row g-4">
                @foreach ($serices as $serice)
                    <div class="col-lg-3 col-sm-6 wow fadeInUp" data-wow-delay="0.{{ $loop->index }}s">
                        <div class="service-item text-center pt-3">
                            <div class="p-4">
                                <i class="fa fa-3x fa-graduation-cap text-primary mb-4"></i>
                                <h5 class="mb-3">{{ $serice->title }}</h5>
                                {!! $serice->content !!}
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    <!-- Service End -->
    <!-- About Start -->
    @if($about)
        <div class="container-xxl py-5">
            <div class="container">
                <div class="row g-5">
                    <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.1s" style="min-height: 400px;">
                        <div class="position-relative h-100">
                            <img class="img-fluid position-absolute w-100 h-100" src="{{ $about->imagePath }}"
                                 alt="" style="object-fit: cover;">
                        </div>
                    </div>
                    <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.3s">
                        <h6 class="section-title bg-white text-start text-primary pe-3">{{ __('About Us') }}</h6>
                        <h1 class="mb-4">{{ $about->title }}</h1>
                        {!! $about->content !!}
                        <div class="row gy-2 gx-4 mb-4">
                            <h4 class="text-primary">{{ __('Contact us now and get your free consultation') }}</h4>
                        </div>
                        <a class="btn btn-primary py-3 px-5" href="{{ route('contact') }}">{{ __('Contact Us') }}</a>
                    </div>
                </div>
            </div>
        </div>
    @endif
    <!-- About End -->

    <!-- FAQ Start -->
    @if($tell_us)
        <section class="faq pt-5 pb-5">
            <div class="container">
                <div class="get-in-touch row">
                    <div class="col-md-6 text-white pt-5">
                        <h2 class="title wow fadeInLeft" data-wow-delay="0.1s">{{ $tell_us->title }}</h2>
                        <h3 class="wow fadeInLeft" data-wow-delay="0.1s">{{ __('common questions') }}</h3>
                        {!! $tell_us->content  !!}
                    </div>
                    <div class="col-md-6 form">
                        <h3>{{ __('Tell Us About You') }}</h3>
                        <p class="text-black-50 mb-4">
                            {{ __('Our team has the experience to answer all your inquiries about studying and residing in Turkey') }}
                        </p>
                        <form method="post" action="{{ route('tellUs') }}">
                            @csrf
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="name" name="name"
                                               placeholder="{{ __('Your Name') }}">
                                        <label for="name">{{ __('Your Name') }}</label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="email" class="form-control" id="email" name="email"
                                               placeholder="{{ __('Your Email') }}">
                                        <label for="email">{{ __('Your Email') }}</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="mobile" name="mobile"
                                               placeholder="{{ __('Phone Number') }}">
                                        <label for="mobile">{{ __('Phone Number') }}</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-floating">
                                        <textarea name="message" class="form-control" placeholder="Leave a message here" id="message"
                                                  style="height: 150px"></textarea>
                                        <label for="message">{{ __('Your Inquiry') }}</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <button class="btn btn-primary register w-100 py-3"
                                            type="submit">{{ __('Send Inquery') }}</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    @endif
    <!-- FAQ End -->


    <!-- Categories Start -->

    <div class="container-xxl py-5 category">
        <div class="container">
            <div class="text-center wow fadeInUp" data-wow-delay="0.1s">
                <h6 class="section-title bg-white text-center text-primary px-3">{{ __('Programs') }}</h6>
                <h1 class="mb-5">{{ __('Programs') }}</h1>
            </div>
            <div class="row g-3">
                    @foreach ($colleges as $college)
                        <div class="col-lg-4 col-md-6">
                            <a href="{{ route('collegeUniversities', $college->name) }}">
                                <div class="hcard">
                                    <img src="{{ $college->imagePath }}" alt="economics">
                                    <div class="overlay">
                                        <h3>{{ $college->name }}</h3>
                                        <p>{{$college->universities()->count()}} {{ __('Universities') }}</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
            </div>
        </div>
    </div>

    <!-- Counters Start -->

    <section class="counters pt-5 pb-5">
        <div class="container">
            <div class="row">
                <div class="col-md-4 counter">
                    <i class="fas fa-user-graduate"></i>
                    <span id="nums" data-val="{{ $countStudent != 0 ? $countStudent : 1 }}">+0</span>
                    <p>{{ __('Students') }}</p>
                </div>
                <div class="col-md-4 counter">
                    <i class="fas fa-place-of-worship"></i>
                    <span id="nums" data-val="{{ $countUniversities != 0 ? $countUniversities : 1 }}">+0</span>
                    <p>{{ __('Universities') }}</p>
                </div>
                <div class="col-md-4 counter">
                    <i class="fas fa-cubes"></i>
                    <span id="nums" data-val="{{ $countUniversityProgram != 0 ? $countUniversityProgram : 1 }}">+0</span>
                    <p>{{ __('Programs') }}</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Counters Start -->

    <!-- Universities Start -->
    <div class="text-center wow fadeInUp" data-wow-delay="0.1s">
        <h6 class="section-title bg-white text-center text-primary px-3">{{ __('The Best') }}</h6>
        <h1 class="mb-5">{{ __('Universities') }}</h1>
    </div>

    <div class="btns uniBtns">
        <button type="button" data-menu="all" class="active">{{ __('All') }}</button>
        @foreach ($countries as $country)
            <button type="button" data-menu="{{ $country->name }}"><img src="{{ $country->imagePath }}"
                    alt="{{ $country->name }}" />{{ $country->name }}
            </button>
        @endforeach
    </div>
    <div class="container allwrps">
        @foreach ($universities as $university)
            <a href="{{ route('frontend.programs.show', $university->slug) }}">
                <div data-menu="{{ $university->country->name }}" class="card new">
                    <img src="{{ $university->imagePath }}" alt="uni1" />
                    @if (calculateDiscountPercentage($university) != 0)
                        <span class="majorr"><i class="fas fa-tag"></i>{{ calculateDiscountPercentage($university) }}%
                            {{ __('Off') }}</span>
                    @endif
                    <div class="llogo">
                        <img src="{{ $university->logo }}" alt="logo">
                    </div>
                    <div class="card-body">
                        <div class="top">
                            <div>
                                <h5 class="card-title new">{{ $university->name }} {{ __('University') }}</h5>
                                <p class="place"><i class="fas fa-map-marker-alt"></i>{{ $university->country->name }}
                                </p>
                            </div>
                            <div class="info">
                                <p><i
                                        class="fas fa-user-friends"></i>{{ $university->applications->pluck('student')->flatten()->count() }}
                                    <span>{{ __('Students') }}</span>
                                </p>
                                <p><i class="fas fa-graduation-cap"></i>
                                    {{ $university->universityDegrees->pluck('universityColleges')->flatten()->pluck('universityPrograms')->flatten()->count() }}
                                    <span>{{ __('Programs') }}</span>
                                </p>
                            </div>
                        </div>
                        <div class="price pt-3 pb-2">
                            <p><span
                                    class="text-black-50">{{ __('Starting From') }}</span>${{ $university->price_after_discount }}
                            </p> <a href="{{ route('frontend.programs.show', $university->slug) }}"
                                class="btn btn-primary viewIt">{{ __('View Details') }}</a>
                        </div>
                    </div>
                </div>
            </a>
        @endforeach
    </div>

    <div class="center">
        <a href="{{ route('frontend.universities.index') }}"
            class="btn btn-primary seeAll mt-5">{{ __('See All Universities') }} <i
                class="fas fa-angle-double-right"></i></a>
    </div>
    <!-- Universities End -->
    @if ($blogs->count() != 0)
        <!-- Blog Start -->
        <section class="blog pt-5">
            <div class="container">
                <div class="text-center wow fadeInUp" data-wow-delay="0.1s">
                    <h6 class="section-title bg-white text-center text-primary px-3">{{ __('Blog') }}</h6>
                    <h1 class="mb-5">{{ __('Latest Blogs') }}</h1>
                </div>
                <div class="row">
                    <div class="col-md-7">
                        @if ($firstBlog)
                                <a href="{{ route('frontend.blogs.show', $firstBlog->slug) }}">
                                    <div class="card">
                                        <img src="{{ $firstBlog->imagePath }}" alt="blog">
                                        <div class="card-body">
                                            <h3 class="card-title title2">{{ $firstBlog->title }}</h3>
                                            {!! $firstBlog->description !!}
                                            <div class="card-foooter pt-2">
                                                <div class="name"><img src="{{ $firstBlog->user->imagePath }}"
                                                        alt="userImg">{{$firstBlog->user->name}}
                                                </div>
                                                <div class="date">{{ $firstBlog->created_at->format('d/m/Y') }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                        @endif
                    </div>
                    <div class="col-md-5">
                            @foreach ($blogs as $blog)
                                <a href="{{ route('frontend.blogs.show', $blog->slug) }}">
                                    <div class="blog-5">
                                        <div class="blog-header">
                                            <img src="{{ $blog->imagePath }}" alt="blog1">
                                            <div class="desc">
                                                <h4 class="title2">{{ $blog->title }}</h4>
                                                {!! $blog->description !!}
                                            </div>
                                        </div>
                                        <div class="card-foooter pt-3">
                                            <div class="name"><img src="{{ $blog->user->imagePath }}"
                                                                   alt="userImg">{{$blog->user->name}}
                                            </div>
                                            <div class="date">{{ $blog->created_at->format('d/m/Y') }}</div>
                                        </div>
                                    </div>
                                </a>
                            @endforeach
                    </div>
                </div>
            </div>
        </section>
    @endif

    <!-- Blog Start -->
    @push('scripts')
        <script src="{{ asset('frontend/js/counters.js') }}"></script>
        <script src="{{ asset('frontend/js/details.js') }}"></script>
    @endpush

@endsection