@extends('themes.flaty.layouts.front')
@section('title', $seoConfiguration->title ?? '')
@if (!$themeSettings->home_page->header_section)
    @section('hide_header', true)
@endif
@section('content')
    @if ($themeSettings->home_page->header_section)
        <header class="header">
            <div class="container">
                <div class="header-inner">
                    <div class="header-container">
                        <div class="header-icon" data-upload-btn data-aos="fade-up" data-aos-duration="400">
                            <i class="fa-solid fa-cloud-arrow-up"></i>
                        </div>
                        <h1 class="header-title" data-aos="fade-up" data-aos-duration="400" data-aos-delay="100">
                            {{ translate('Upload Files & Earn Money', 'home page') }}
                        </h1>
                        <p class="header-text lead" data-aos="fade-up" data-aos-duration="400" data-aos-delay="200">
                            {{ translate('hero_description', 'home page') }}
                        </p>
                        @if (subscription()->plan->upload_status)
                            <button class="btn btn-primary btn-lg" data-upload-btn data-aos="fade-up"
                                data-aos-duration="300" data-aos-delay="400"><i
                                    class="fa-solid fa-arrow-up-from-bracket me-2"></i>{{ translate('Upload Files', 'home page') }}</button>
                        @else
                            <a href="{{ auth()->user() ? route('user.settings.subscription') : route('login') }}"
                                class="btn btn-primary btn-lg" data-aos="fade-up" data-aos-duration="300"
                                data-aos-delay="400"><i
                                    class="fa-solid fa-arrow-up-from-bracket me-2"></i>{{ translate('Upload Files', 'home page') }}</a>
                        @endif
                    </div>
                </div>
            </div>
        </header>
    @endif
    <x-ad alias="home_page_top" @class('ad-728x90 my-5') />
    @if ($themeSettings->home_page->features_section && $features->count() > 0)
        <section class="section">
            <div class="container">
                <div class="section-header">
                    <div class="section-title">
                        <h2 class="section-title-text">{{ translate('Our Features', 'home page') }}</h2>
                        <div class="section-title-divider"></div>
                    </div>
                    <div class="col-lg-7 mx-auto">
                        <p class="section-text">
                            {{ translate('features description', 'home page') }}
                        </p>
                    </div>
                </div>
                <div class="section-body">
                    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 justify-content-center g-3">
                        @foreach ($features as $feature)
                            <div class="col" data-aos="fade-up" data-aos-duration="400"
                                {{ !$loop->first ? 'data-aos-delay=' . $loop->index * 100 : '' }}>
                                <div class="card-v h-100">
                                    <div class="feature">
                                        <div class="feature-icon">
                                            <img src="{{ asset($feature->image) }}" alt="{{ $feature->title }}" />
                                        </div>
                                        <h5 class="feature-title">{{ $feature->title }}</h5>
                                        <p class="feature-text">{{ $feature->body }}</p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
    @endif
    @if ($themeSettings->home_page->steps_section && $steps->count() > 0)
        <section class="section section-white">
            <div class="container">
                <div class="section-header">
                    <div class="section-title">
                        <h2 class="section-title-text">{{ translate('How it Works', 'home page') }}</h2>
                        <div class="section-title-divider"></div>
                    </div>
                    <div class="col-lg-7 mx-auto">
                        <p class="section-text">{{ translate('How it Works Description', 'home page') }}</p>
                    </div>
                </div>
                <div class="section-body">
                    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 justify-content-center g-3">
                        @php
                            $stepCounter = 1;
                        @endphp
                        @foreach ($steps as $step)
                            <div class="col" data-aos="fade-right" data-aos-duration="400"
                                {{ !$loop->first ? 'data-aos-delay=' . $loop->index * 100 : '' }}>
                                <div class="card-v shadow-sm bg-light h-100">
                                    <div class="step {{ $stepCounter == 2 ? 'step-primary' : 'step-secondary' }}">
                                        <div class="step-number">{{ $loop->index + 1 }}</div>
                                        <h5 class="step-title">{{ $step->title }}</h5>
                                        <p class="step-text">{{ $step->body }}</p>
                                    </div>
                                </div>
                            </div>
                            @php
                                $stepCounter++;
                            @endphp
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
    @endif
    <x-ad alias="home_page_center" @class('ad-728x90 my-5') />
    @if ($themeSettings->home_page->faqs_section && $faqs->count() > 0)
        <section class="section">
            <div class="container">
                <div class="section-header">
                    <div class="section-title">
                        <h2 class="section-title-text">{{ translate('FAQs', 'home page') }}</h2>
                        <div class="section-title-divider"></div>
                    </div>
                    <div class="col-lg-7 mx-auto">
                        <p class="section-text">{{ translate('FAQs Description', 'home page') }}</p>
                    </div>
                </div>
                <div class="section-body">
                    <div class="col-xl-8 mx-auto" data-aos="zoom-in-up" data-aos-duration="400">
                        <div class="accordion-custom">
                            <div class="accordion" id="accordion">
                                @foreach ($faqs as $faq)
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="heading{{ $faq->id }}">
                                            <button class="accordion-button {{ !$loop->first ? 'collapsed' : '' }}"
                                                type="button" data-bs-toggle="collapse"
                                                data-bs-target="#collapse{{ $faq->id }}" aria-expanded="true"
                                                aria-controls="collapseOne">
                                                {{ $faq->title }}
                                            </button>
                                        </h2>
                                        <div id="collapse{{ $faq->id }}"
                                            class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }}"
                                            aria-labelledby="heading{{ $faq->id }}" data-bs-parent="#accordion">
                                            <div class="accordion-body">{!! $faq->body !!}</div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
    @if ($themeSettings->home_page->blog_section && $settings->actions->blog_status && $blogArticles->count() > 0)
        <section class="section section-white">
            <div class="container">
                <div class="section-header">
                    <div class="section-title">
                        <h2 class="section-title-text">{{ translate('Latest Blog Posts', 'home page') }}</h2>
                        <div class="section-title-divider"></div>
                    </div>
                    <div class="col-lg-7 mx-auto">
                        <p class="section-text">{{ translate('Latest Blog Posts Description', 'home page') }}</p>
                    </div>
                </div>
                <div class="section-body">
                    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 justify-content-center g-3">
                        @foreach ($blogArticles as $post)
                            <div class="col" data-aos="fade-up" data-aos-duration="400"
                                {{ !$loop->first ? 'data-aos-delay=' . $loop->index * 100 : '' }}>
                                @include('themes.flaty.partials.blog-post', [
                                    'post' => $post,
                                ])
                            </div>
                        @endforeach
                    </div>
                    <div class="d-flex justify-content-center mt-5">
                        <a href="{{ route('blog.index') }}" class="btn btn-outline-primary btn-icon btn-md">
                            {{ translate('View All Blog Posts', 'home page') }}
                            <i class="fa fa-arrow-right ms-2"></i>
                        </a>
                    </div>
                </div>
            </div>
        </section>
    @endif
    <x-ad alias="home_page_bottom" @class('ad-728x90 my-5') />
    @if ($themeSettings->home_page->withdrawal_methods_section && $withdrawalMethods->count() > 0)
        <section class="section">
            <div class="container">
                <div class="section-header">
                    <div class="section-title">
                        <h2 class="section-title-text">{{ translate('Withdrawal Methods', 'home page') }}</h2>
                        <div class="section-title-divider"></div>
                    </div>
                </div>
                <div class="section-body">
                    <div class="swiper brands-swiper" data-aos="zoom-in" data-aos-duration="400">
                        <div class="swiper-wrapper">
                            @foreach ($withdrawalMethods as $withdrawalMethod)
                                <div class="swiper-slide">
                                    <div class="brand-img">
                                        <img src="{{ asset($withdrawalMethod->logo) }}"
                                            alt="{{ $withdrawalMethod->name }}" />
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
    @include('themes.flaty.includes.uploadbox')
    @push('styles_libs')
        <link rel="stylesheet" href="{{ asset('vendor/libs/aos/aos.min.css') }}">
        <link rel="stylesheet" href="{{ asset('vendor/libs/swiper/swiper-bundle.min.css') }}">
    @endpush
    @push('scripts_libs')
        <script src="{{ asset('vendor/libs/aos/aos.min.js') }}"></script>
        <script src="{{ asset('vendor/libs/swiper/swiper-bundle.min.js') }}"></script>
    @endpush
@endsection