@extends('layouts.app')

@section('title', __('navigation.home'))

@section('content')

<!-- Carousel Start -->
<div class="container-fluid p-0 wow fadeIn" data-wow-delay="0.1s">
    <div id="header-carousel" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            @if($homeSliders->count() > 0)
                @foreach($homeSliders as $index => $homeSlider)
                <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                    <img class="w-100" src="{{ $homeSlider->getEffectiveImage() ? $homeSlider->getEffectiveImage()->url : asset('img/drivin/carousel-1.jpg') }}" alt="{{ $homeSlider->getTitle() }}">
                    <div class="carousel-caption">
                        <div class="container">
                            <div class="row justify-content-center">
                                <div class="col-lg-7">
                                    @if($homeSlider->getTitle())
                                    <h1 class="display-2 text-light mb-5 animated slideInDown">{{ $homeSlider->getTitle() }}</h1>
                                    @endif
                                    @if($homeSlider->getSubtitle())
                                    <p class="text-light mb-4">{{ $homeSlider->getSubtitle() }}</p>
                                    @endif
                                    @if($homeSlider->getButtonText() && $homeSlider->button_link)
                                    <a href="{{ $homeSlider->button_link }}" class="btn btn-primary py-sm-3 px-sm-5">{{ $homeSlider->getButtonText() }}</a>
                                    @endif
                                    @if($homeSlider->getSecondaryButtonText() && $homeSlider->secondary_button_link)
                                    <a href="{{ $homeSlider->secondary_button_link }}" class="btn btn-light py-sm-3 px-sm-5 ms-3">{{ $homeSlider->getSecondaryButtonText() }}</a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            @else
                <!-- Fallback static carousel -->
                <div class="carousel-item active">
                    <img class="w-100" src="{{ asset('img/drivin/carousel-1.jpg') }}" alt="Image">
                    <div class="carousel-caption">
                        <div class="container">
                            <div class="row justify-content-center">
                                <div class="col-lg-7">
                                    <h1 class="display-2 text-light mb-5 animated slideInDown">{{ __('navigation.slider_1') }}</h1>
                                    <a href="{{ route('services', ['locale' => app()->getLocale()]) }}" class="btn btn-primary py-sm-3 px-sm-5">{{ __('home.carousel.learn_more') }}</a>
                                    <a href="{{ route('courses', ['locale' => app()->getLocale()]) }}" class="btn btn-light py-sm-3 px-sm-5 ms-3">{{ __('home.carousel.our_courses') }}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="w-100" src="{{ asset('img/drivin/carousel-2.jpg') }}" alt="Image">
                    <div class="carousel-caption">
                        <div class="container">
                            <div class="row justify-content-center">
                                <div class="col-lg-7">
                                    <h1 class="display-2 text-light mb-5 animated slideInDown">{{ __('navigation.slider_3') }}</h1>
                                    <a href="{{ route('services', ['locale' => app()->getLocale()]) }}" class="btn btn-primary py-sm-3 px-sm-5">{{ __('home.carousel.learn_more') }}</a>
                                    <a href="{{ route('courses', ['locale' => app()->getLocale()]) }}" class="btn btn-light py-sm-3 px-sm-5 ms-3">{{ __('home.carousel.our_courses') }}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#header-carousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#header-carousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</div>
<!-- Carousel End -->

<!-- Facts Start -->
<div class="container-fluid facts py-5 pt-lg-0">
    <div class="container py-5 pt-lg-0">
        <div class="row gx-0">
            <div class="col-lg-4 wow fadeIn" data-wow-delay="0.1s">
                <div class="bg-white shadow d-flex align-items-center h-100 p-4" style="min-height: 150px;">
                    <div class="d-flex">
                        <div class="flex-shrink-0 btn-lg-square bg-primary">
                            <i class="fa fa-car text-white"></i>
                        </div>
                           <div class="ps-4 {{ app()->isLocale('ar') ? 'pe-3' : '' }}">
                            <h5>{{ __('navigation.fact_1') }}</h5>
                            <span>{{ __('navigation.fact_1_desc') }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 wow fadeIn" data-wow-delay="0.3s">
                <div class="bg-white shadow d-flex align-items-center h-100 p-4" style="min-height: 150px;">
                    <div class="d-flex">
                        <div class="flex-shrink-0 btn-lg-square bg-primary">
                            <i class="fa fa-users text-white"></i>
                        </div>
                           <div class="ps-4 {{ app()->isLocale('ar') ? 'pe-3' : '' }}">
                            <h5>{{ __('navigation.fact_2') }}</h5>
                            <span>{{ __('navigation.fact_2_desc') }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 wow fadeIn" data-wow-delay="0.5s">
                <div class="bg-white shadow d-flex align-items-center h-100 p-4" style="min-height: 150px;">
                    <div class="d-flex">
                        <div class="flex-shrink-0 btn-lg-square bg-primary">
                            <i class="fa fa-file-alt text-white"></i>
                        </div>
                           <div class="ps-4 {{ app()->isLocale('ar') ? 'pe-3' : '' }}">
                            <h5>{{ __('navigation.fact_3') }}</h5>
                            <span>{{ __('navigation.fact_3_desc') }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Facts End -->

@if($featuredConferences->count() > 0)
<!-- Conference Ads Start -->
<div class="container-xxl py-5">
    <div class="container">
        <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 500px;">
            <h6 class="text-primary text-uppercase mb-2">{{ __('navigation.upcoming_conferences') }}</h6>
            <h1 class="display-6 mb-4">{{ __('navigation.join_our_featured_events') }}</h1>
        </div>
        <div class="row g-4 justify-content-center">
            @foreach($featuredConferences->take(4) as $conference)
            <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
                <div class="conference-ad bg-white shadow-lg rounded overflow-hidden h-100 position-relative">
                    <div class="position-relative">
                        <img class="img-fluid w-100" src="{{ $conference->image_url ? asset('storage/' . $conference->image_url) : asset('img/drivin/conference-default.jpg') }}" alt="{{ $conference->title }}" style="height: 200px; object-fit: cover;">
                        <div class="conference-overlay position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center opacity-0 hover-opacity-100 transition-all">
                            <div class="text-center">
                                <a href="{{ route('conferences.show', ['slug' => $conference->slug, 'locale' => app()->getLocale()]) }}" class="btn btn-primary me-2">{{ __('navigation.view_details') }}</a>
                                @if($conference->registration_url)
                                <a href="{{ $conference->registration_url }}" class="btn btn-outline-primary">{{ __('navigation.register_now') }}</a>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="p-4">
                        <h5 class="mb-2">{{ $conference->title }}</h5>
                        <p class="text-muted mb-2"><i class="fa fa-calendar me-2"></i>{{ $conference->formatted_date }}</p>
                        <p class="text-muted mb-3"><i class="fa fa-map-marker me-2"></i>{{ $conference->location }}</p>
                        <p class="mb-0">{{ Str::limit($conference->short_description, 80) }}</p>
                    </div>
                    <div class="conference-actions p-3 bg-light">
                        <div class="d-flex justify-content-between">
                            <a href="{{ route('conferences.show', ['slug' => $conference->slug, 'locale' => app()->getLocale()]) }}" class="btn btn-sm btn-primary">{{ __('navigation.view_details') }}</a>
                            @if($conference->registration_url)
                            <a href="{{ $conference->registration_url }}" class="btn btn-sm btn-outline-primary">{{ __('navigation.register_now') }}</a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>
<!-- Conference Ads End -->
@endif

<!-- Features Start -->
<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">
                @php
                    $features = App\Models\FeatureContent::active()->ordered()->get();

                    // Get subtitle (why_choose_us)
                    $subtitle = $features->where('section_key', 'why_choose_us')->first();
                    // Get main title (best_driving_training)
                    $mainTitle = $features->where('section_key', 'excellence_in_education')->first();
                    // Get description (main_description)
                    $description = $features->where('section_key', 'main_description')->first();
                    // Get feature items
                    $featureItems = $features->where('content_type', 'feature_item')->sortBy('display_order');
                @endphp

                @if($subtitle)
                    <h6 class="text-primary text-uppercase mb-2">{{ $subtitle->getTranslated(app()->getLocale())->title ?? $subtitle->getTranslated('en')->title }}</h6>
                @endif

                @if($mainTitle)
                    <h1 class="display-6 mb-4">{{ $mainTitle->getTranslated(app()->getLocale())->title ?? $mainTitle->getTranslated('en')->title }}</h1>
                @endif

                @if($description)
                    <p class="mb-5">{{ $description->getTranslated(app()->getLocale())->content ?? $description->getTranslated('en')->content }}</p>
                @endif

                <div class="row gy-5 gx-4">
                    @foreach($featureItems as $index => $feature)
                        @php
                            $delay = ($index + 1) * 0.1;
                            $translation = $feature->getTranslated(app()->getLocale()) ?? $feature->getTranslated('en');
                        @endphp

                        <div class="col-sm-6 wow fadeIn" data-wow-delay="{{ $delay }}s">
                            <div class="d-flex align-items-center mb-3">
                                <div class="flex-shrink-0 btn-square bg-primary {{$iconSpacing = app()->isLocale('ar') ? 'ms-3' : 'me-3';
}}">
                                    <i class="fa fa-check text-white"></i>
                                </div>
                                <h5 class="mb-0">{{ $translation->title ?? '' }}</h5>
                            </div>
                            @if($translation->content)
                                <span>{{ $translation->content }}</span>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.5s">
                <div class="position-relative overflow-hidden pe-5 pt-5 h-100" style="min-height: 400px;">
                    <img class="position-absolute w-100 h-100" src="{{ asset('img/drivin/about-1.jpg') }}" alt="" style="object-fit: cover;">
                    <img class="position-absolute top-0 end-0 bg-white ps-3 pb-3" src="{{ asset('img/drivin/about-2.jpg') }}" alt="" style="width: 200px; height: 200px;">
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Features End -->

<!-- About Start -->
<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">
                <h6 class="text-primary text-uppercase mb-2">{{ __('About Us') }}</h6>
                <h1 class="display-6 mb-4">{{ $about->{'title_' . app()->getLocale()} ?? (app()->getLocale() == 'ar' ? 'تعرف علينا' : 'Learn About Us') }}</h1>
                <p class="mb-5">{{ $about->{'content_' . app()->getLocale()} ?? (app()->getLocale() == 'ar' ? 'لوريم إيبسوم دولور سيت أميت، كونسيكتيتور أديبيسينغ إليت. فاسيلوس نيك بريتيوم مي. كورابيتور فاسيليسس أورناري فيليت نون فولبوتاتي. أليكوام ميتوس تورتور، أوكتور إد غرافيدا كونديمينتوم، فيفيرا كويس سيم.' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem.') }}</p>
                <a href="{{ route('about', ['locale' => app()->getLocale()]) }}" class="btn btn-primary py-sm-3 px-sm-5">{{ __('navigation.learn_more') }}</a>
            </div>
            <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.5s">
                <div class="position-relative overflow-hidden pe-5 pt-5 h-100" style="min-height: 400px;">
                    <img class="position-absolute w-100 h-100" src="{{ asset('img/drivin/about-1.jpg') }}" alt="" style="object-fit: cover;">
                    <img class="position-absolute top-0 end-0 bg-white ps-3 pb-3" src="{{ asset('img/drivin/about-2.jpg') }}" alt="" style="width: 200px; height: 200px;">
                </div>
            </div>
        </div>
    </div>
</div>
<!-- About End -->
@if($featuredCourses->count() > 0)
<!-- Courses Start -->
<div class="container-xxl courses my-6 py-5 pb-0">
    <div class="container">
        <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 500px;">
            <h6 class="text-primary text-uppercase mb-2">{{ __('navigation.trending_courses') }}</h6>
            <h1 class="display-6 mb-4">{{ __('navigation.our_courses_upskill_you') }}</h1>
        </div>
        <div class="row g-4 justify-content-center">
            @foreach($featuredCourses->take(3) as $service)
            <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
                <div class="courses-item d-flex flex-column bg-white overflow-hidden h-100">
                    <div class="text-center p-4 pt-0">
                        <div class="d-inline-block bg-primary text-white fs-5 py-1 px-4 mb-4">$99</div>
                        <h5 class="mb-3">{{ $service->{'title_' . app()->getLocale()} }}</h5>
                        <p>{{ Str::limit($service->{'content_' . app()->getLocale()}, 100) }}</p>
                        <ol class="breadcrumb justify-content-center mb-0">
                            <li class="breadcrumb-item small"><i class="fa fa-signal text-primary me-2"></i>{{ __('navigation.beginner') }}</li>
                            <li class="breadcrumb-item small"><i class="fa fa-calendar-alt text-primary me-2"></i>3 {{ __('navigation.week') }}</li>
                        </ol>
                    </div>
                    <div class="position-relative mt-auto">
                        <img class="img-fluid" src="{{ $service->featured_image ? asset('storage/' . $service->featured_image) : asset('img/drivin/courses-1.jpg') }}" alt="">
                        <div class="courses-overlay">
                            <a class="btn btn-outline-primary border-2" href="{{ route('services', ['locale' => app()->getLocale()]) }}">{{ __('navigation.read_more') }}</a>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>
<!-- Courses End -->
@endif

@if($team && $team->count() > 0)
<!-- Team Start -->
<div class="container-xxl py-6">
    <div class="container">
        <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 500px;">
            <h6 class="text-primary text-uppercase mb-2">{{ __('Meet The Team') }}</h6>
            <h1 class="display-6 mb-4">{{ __('We Have Great Experience Of Driving') }}</h1>
        </div>
        <div class="row g-0 team-items">
            @foreach($team->take(4) as $member)
            <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
                <div class="team-item position-relative">
                    <div class="position-relative">
                        <img class="img-fluid" src="{{ $member->avatar ? asset('storage/' . $member->avatar) : asset('img/drivin/team-1.jpg') }}" alt="">
                        <div class="team-social text-center">
                            <a class="btn btn-square btn-outline-primary border-2 m-1" href=""><i class="fab fa-facebook-f"></i></a>
                            <a class="btn btn-square btn-outline-primary border-2 m-1" href=""><i class="fab fa-twitter"></i></a>
                            <a class="btn btn-square btn-outline-primary border-2 m-1" href=""><i class="fab fa-instagram"></i></a>
                        </div>
                    </div>
                    <div class="bg-light text-center p-4">
                        <h5 class="mt-2">{{ $member->{'name_' . app()->getLocale()} }}</h5>
                        <span>{{ $member->{'position_' . app()->getLocale()} }}</span>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>
<!-- Team End -->
@endif

@if($testimonials && $testimonials->count() > 0)
<!-- Testimonial Start -->
<div class="container-xxl py-6">
    <div class="container">
        <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 500px;">
            <h6 class="text-primary text-uppercase mb-2">{{ __('Testimonial') }}</h6>
            <h1 class="display-6 mb-4">{{ __('What Our Clients Say!') }}</h1>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-8 wow fadeInUp" data-wow-delay="0.1s">
                <div class="owl-carousel testimonial-carousel">
                    @foreach($testimonials as $testimonial)
                    <div class="testimonial-item text-center">
                        <div class="position-relative mb-5">
                            <img class="img-fluid rounded-circle mx-auto" src="{{ $testimonial->client_avatar ? Storage::url($testimonial->client_avatar) : asset('img/drivin/testimonial-1.jpg') }}" alt="">
                            <div class="position-absolute top-100 start-50 translate-middle d-flex align-items-center justify-content-center bg-white rounded-circle" style="width: 60px; height: 60px;">
                                <i class="fa fa-quote-left fa-2x text-primary"></i>
                            </div>
                        </div>
                        <p class="fs-4">{{ $testimonial->{'content_' . app()->getLocale()} }}</p>
                        <hr class="w-25 mx-auto">
                        <h5>{{ $testimonial->{'name_' . app()->getLocale()} }}</h5>
                        <span>{{ $testimonial->{'position_' . app()->getLocale()} }}</span>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Testimonial End -->
@endif

@endsection