@extends('frontend.layouts.master')

@php
    $lang = selectedLang();
    $banner_slug = Illuminate\Support\Str::slug(App\Constants\SiteSectionConst::BANNER_SECTION);
    $banner = App\Models\Admin\SiteSections::getData( $banner_slug)->first();
    $banner_floting_slug = Illuminate\Support\Str::slug(App\Constants\SiteSectionConst::BANNER_FLOTING);
    $banner_floting = App\Models\Admin\SiteSections::getData( $banner_floting_slug)->first();
    $service_slug = Illuminate\Support\Str::slug(App\Constants\SiteSectionConst::SERVICE_SECTION);
    $service = App\Models\Admin\SiteSections::getData( $service_slug)->first();
    $blog_section_slug = Illuminate\Support\Str::slug(App\Constants\SiteSectionConst::BLOG_SECTION);
    $blog_section = App\Models\Admin\SiteSections::getData( $blog_section_slug)->first();
@endphp

@section('content')
<!-- <link href="https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700&display=swap" rel="stylesheet"> -->

 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">

 <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&display=swap" rel="stylesheet">



<!-- AOS CSS -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Start Banner
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div class="page-container">
    <section class="banner-section custom_font">
        <div class="container home-container">
            <div class="row mb-30-none">
                <div class="col-lg-6 col-md-6 mb-30" data-aos="fade-right" data-aos-duration="1000">
                    <div class="banner-thumb-area text-center">
                        <img src="{{ get_image(@$banner->value->images->banner_image,'site-section') }}" alt="banner" class="banner-image-float">
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 mb-30" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="200">
                    <div class="banner-content">
                        <span class="banner-sub-titel"><i class="fas fa-qrcode"></i>{{ __(@$banner->value->language->$lang->title) }}</span>
                        <h1 class="banner-title" style="color: white;">{{ __(@$banner->value->language->$lang->heading) }}</h1>
                        <p style="color: white;">{{ __(@$banner->value->language->$lang->sub_heading) }}</p>
                        <div class="app-btn-area" data-aos="fade-up" data-aos-delay="300">
                            <a href="{{ asset('public/apk/halapay_user_android_build.apk') }}" class="app-btn" target="_blank" download>
                                <div class="icon">
                                    <img src="{{ asset('frontend/') }}/images/app/play-store.png" alt="play-store">
                                </div>
                                <div class="content">
                                    <span class="sub-title">{{ __("Click It to get") }}</span>
                                    <h5 class="title">{{ __("APK File") }}</h5>
                                </div>
                            </a>
                            <a href="https://apps.apple.com/us/app/halapay-user/id6747932342" class="app-btn" target="_blank">
                                <div class="icon">
                                    <img src="{{ asset('frontend/') }}/images/app/apple-store.png" alt="play-store">
                                </div>
                                <div class="content">
                                    <span class="sub-title">{{ __("Download On The") }}</span>
                                    <h5 class="title">{{ __("Apple Store") }}</h5>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Start Banner floating section
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
    <section class="features-showcase-section custom_font">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="features-showcase-card" data-aos="fade-up" data-aos-duration="800">
                        <div class="features-list-section">
                            <h3 class="features-title">Our Key Features</h3>
                            <ul class="features-list">
                                @if(isset($banner_floting->value->items))
                                    @php $itemIndex = 0; @endphp
                                    @foreach($banner_floting->value->items ?? [] as $key => $item)
                                        @php $itemIndex++; @endphp
                                        <li class="feature-item" data-aos="fade-up" data-aos-delay="{{ $itemIndex * 10 }}">
                                            <div class="feature-icon">
                                                <i class="fas fa-check"></i>
                                            </div>
                                            <span class="feature-text">{{ @$item->language->$lang->name }}</span>
                                        </li>
                                    @endforeach
                                @endif
                            </ul>
                        </div>
                        <div class="features-content-section">
                            <h2 class="content-title">{{ __(@$banner_floting->value->language->$lang->title) }}</h2>
                            <p class="content-description">{{ __(@$banner_floting->value->language->$lang->sub_title) }}</p>
                            <a href="{{url('/').'/'.@$banner_floting->value->language->$lang->button_link}}" class="contact-btn">
                                {{ __(@$banner_floting->value->language->$lang->button_name) }}
                                <i class="fas fa-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Start how it's works section
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
    @php
        $lang = selectedLang();
        $work_slug = Illuminate\Support\Str::slug(App\Constants\SiteSectionConst::WORK_SECTION);
        $work = App\Models\Admin\SiteSections::getData( $work_slug)->first();
    @endphp
    <section class="how-it-work-section pt-120 custom_font">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-12 text-center">
                    <div class="section-header" data-aos="fade-up">
                        <span class="section-sub-titel"><i class="fas fa-qrcode"></i> {{ __(@$work->value->language->$lang->title) }}</span>
                        <h2 class="section-title" style="color: white;">{{ __(@$work->value->language->$lang->heading) }}</h2>
                        <p style="color: white;">{{ __(@$work->value->language->$lang->sub_heading) }}</p>
                    </div>
                </div>
            </div>
            <div class="how-it-works-wrapper">
                <div class="row justify-content-center mb-30-none">
                    @if(isset($work->value->items))
                    @php $num = 0 @endphp
                    @foreach($work->value->items ?? [] as $key => $item)
                    @php $num += 1; @endphp
                    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 mb-30" data-aos="fade-up" data-aos-delay="{{ $num * 150 }}">
                        <div class="how-it-works-item">
                            <div class="how-it-works-icon-wrapper">
                                <div class="how-it-works-icon">
                                    <i class="{{ @$item->language->$lang->icon }}"></i>
                                </div>
                            </div>
                            <div class="how-it-works-content">
                                <span class="sub-title">{{ __("Step") }} {{ __($num)}}</span>
                                <h4 class="title" style="color: white;">{{ @$item->language->$lang->name }}</h4>
                            </div>
                            @if($num != 4)
                            <span class="process-devider"></span>
                            @endif
                        </div>
                    </div>
                    @endforeach
                    @endif
                </div>
            </div>
        </div>
    </section>

    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Start about section
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
    @php
        $lang = selectedLang();
        $about_slug = Illuminate\Support\Str::slug(App\Constants\SiteSectionConst::ABOUT_SECTION);
        $about = App\Models\Admin\SiteSections::getData($about_slug)->first();
    @endphp
    <section class="about-section pt-120 custom_font">
        <div class="container">
            <div class="row mb-30-none align-items-center">
                <div class="col-xl-6 col-lg-6 col-md-6 mb-30" data-aos="fade-right">
                    <div class="about-thumb-area">
                        <div class="about-thumb">
                            <img src="{{ get_image(@$about->value->images->image,'site-section') }}" alt="about" class="about-image-float">
                        </div>
                    </div>
                </div>
                <div class="col-xl-6 col-lg-6 col-md-6 mb-30">
                    <div class="about-content-area">
                        <div class="row">
                            <div class="col-xl-12">
                                <div class="section-header" data-aos="fade-left">
                                    <span class="section-sub-titel"><i class="fas fa-qrcode"></i>{{ __(@$about->value->language->$lang->heading) }}</span>
                                    <h2 class="section-title" style="color: white;">{{ __(@$about->value->language->$lang->sub_heading) }}</h2>
                                    <p style="color: white;">{{ __(@$about->value->language->$lang->details) }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="about-item-wrapper">
                            @if(isset($about->value->items))
                            @php $numKey = 0; @endphp
                            @foreach($about->value->items ?? [] as $key => $item)
                            @php $numKey += 1; @endphp
                            <div class="about-content-item">
                                <div class="icon-area {{  $numKey == 1 ?'active':'' }}">
                                    <i class="{{ @$item->language->$lang->icon }} "></i>
                                </div>
                                <div class="title-area">
                                    <h4 class="title" style="color: white;">{{ __(@$item->language->$lang->title )}}</h4>
                                    <span class="sub-title" style="color: white;">{{__( @$item->language->$lang->sub_title) }}</span>
                                </div>
                            </div>
                            @endforeach
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Start Security section
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
    @php
        $lang = selectedLang();
        $security_slug = Illuminate\Support\Str::slug(App\Constants\SiteSectionConst::SECURITY_SECTION);
        $security = App\Models\Admin\SiteSections::getData( $security_slug)->first();
    @endphp

    <section class="security-section pt-120 custom_font">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-12 text-center">
                    <div class="section-header" data-aos="fade-up">
                        <span class="section-sub-titel"><i class="fas fa-qrcode"></i> {{ __(@$security->value->language->$lang->heading) }}</span>
                        <h2 class="section-title" style="color: white;">{{ __(@$security->value->language->$lang->sub_heading) }}</h2>
                        <p style="color: white;">{{ __(@$security->value->language->$lang->details) }}</p>
                    </div>
                </div>
            </div>
            <div class="row mb-30-none justify-content-center">
                @if(isset($security->value->items))
                    @php $securityIndex = 0; @endphp
                    @foreach($security->value->items ?? [] as $key => $item)
                    @php $securityIndex++; @endphp
                    <div class="col-lg-4 col-md-6 mb-30" data-aos="flip-up" data-aos-delay="{{ $securityIndex * 100 }}">
                        <div class="security-item" style="background-color: white;">
                            <span class="icon"><i class="{{ __( @$item->language->$lang->icon) }}"></i></span>
                            <div class="security-content">
                                <h4 class="title">{{ __( @$item->language->$lang->title) }}</h4>
                                <p>{{ __( @$item->language->$lang->sub_title) }}</p>
                            </div>
                        </div>
                    </div>
                    @endforeach
                @endif
            </div>
        </div>
    </section>

    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Start map section
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
    @php
        $lang = selectedLang();
        $overview_slug = Illuminate\Support\Str::slug(App\Constants\SiteSectionConst::OVERVIEW_SECTION);
        $overview = App\Models\Admin\SiteSections::getData( $overview_slug)->first();
        $currencies = App\Models\Admin\currency::count();
        $payment_gateways = App\Models\Admin\PaymentGateway::where('slug','add-money')->count();
        $send_remittamce = App\Models\Transaction::where('type','REMITTANCE')->where('attribute','SEND')->count();
    @endphp
    <div class="map-section pt-120 custom_font">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-7 text-center">
                    <div class="section-header" data-aos="fade-up">
                        <span class="section-sub-titel"><i class="fas fa-qrcode"></i> {{ __(@$overview->value->language->$lang->title) }}</span>
                        <h2 class="section-title" style="color: white;">{{ __(@$overview->value->language->$lang->heading) }}</h2>
                        <p style="color: white;">{{ __(@$overview->value->language->$lang->sub_heading) }}</p>
                    </div>
                </div>
            </div>
            <div class="map-wrapper" data-aos="zoom-in" data-aos-duration="1200">
                <div class="thumb">
                    <img src="{{ get_image(@$overview->value->images->map_image,'site-section') }}" alt="map" class="map-image-float">
                </div>
            </div>
            <div class="map-content">
                <div class="map-statistics-wrapper" data-aos="fade-up" data-aos-delay="300">
                    <div class="statistics-item">
                        <div class="statistics-content">
                            <div class="odo-area">
                                <h3 class="odo-title odometer" data-odometer-final="{{ @$payment_gateways }}" style="color: white;">0</h3>
                                <h3 class="title" style="color: white;">+</h3>
                            </div>
                            <p style="color: white;">{{ __("Payment Gateway") }}</p>
                        </div>
                    </div>
                    <div class="statistics-item">
                        <div class="statistics-content">
                            <div class="odo-area">
                                <h3 class="odo-title odometer" data-odometer-final="{{ __( @$currencies) }}" style="color: white;">0</h3>
                                <h3 class="title" style="color: white;">+</h3>
                            </div>
                            <p style="color: white;">{{ __("Currencies") }}</p>
                        </div>
                    </div>
                    <div class="statistics-item">
                        <div class="statistics-content">
                            <div class="odo-area">
                                <h3 class="odo-title odometer" data-odometer-final="{{ @$send_remittamce }}" style="color: white;">0</h3>
                                <h3 class="title" style="color: white;">+</h3>
                            </div>
                            <p style="color: white;">{{ __("Send Remittance") }}</p>
                        </div>
                    </div>
                </div>
                <div class="content-bottom">
                    <p style="color: white;"> {{ __(@$overview->value->language->$lang->botton_text) }}</p>
                    <a href="{{ url('/').'/'. @$overview->value->language->$lang->button_link}}" style="color: white;"> {{ __(@$overview->value->language->$lang->button_name) }} <i class="las la-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </div>

    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Start why choose us section
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
    @php
        $lang = selectedLang();
        $choose_slug = Illuminate\Support\Str::slug(App\Constants\SiteSectionConst::CHOOSE_SECTION);
        $choose = App\Models\Admin\SiteSections::getData( $choose_slug)->first();
    @endphp
    <section class="choose-us-section pt-120 custom_font">
        <div class="container">
            <div class="choose-us-main-wrapper">
                <div class="row justify-content-center">
                    <div class="col-xl-7 text-center">
                        <div class="section-header" data-aos="fade-up">
                            <span class="section-sub-titel"><i class="fas fa-qrcode"></i>{{ __(@$choose->value->language->$lang->heading) }}</span>
                            <h2 class="section-title" style="color: white;">{{ __(@$choose->value->language->$lang->sub_heading) }}</h2>
                            <p style="color: white;">{{ __(@$choose->value->language->$lang->details) }}</p>
                        </div>
                    </div>
                    <div class="row mb-60-none justify-content-center">
                    @if(isset($choose->value->items))
                    @php $num = 0; @endphp
                        @foreach($choose->value->items ?? [] as $key => $item)
                        @php $num += 1; @endphp
                        <div class="col-lg-4 col-md-6 mb-60" data-aos="flip-up" data-aos-delay="{{ $num * 100 }}">
                            <div class="choose-us-item" style="background-color: white;">
                                <div class="icon-wrapper">
                                    <div class="icon-area">
                                        <i class="{{ __( @$item->language->$lang->icon) }}"></i>
                                        <span class="choose-badge">{{'0'.@$num }}</span>
                                    </div>
                                </div>
                                <h3 class="title">{{ __( @$item->language->$lang->title) }}</h3>
                                <p>{{ __( @$item->language->$lang->sub_title) }}</p>
                            </div>
                        </div>
                        @endforeach
                    @endif
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Start testimonial
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
    @php
        $lang = selectedLang();
        $testimonial_slug = Illuminate\Support\Str::slug(App\Constants\SiteSectionConst::TESTIMONIAL_SECTION);
        $testimonial = App\Models\Admin\SiteSections::getData( $testimonial_slug)->first();
    @endphp
    <section class="testimonial-section ptb-120 custom_font">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-6 text-center">
                    <div class="section-header" data-aos="fade-up">
                        <span class="section-sub-titel"><i class="fas fa-qrcode"></i>{{ __(@$testimonial->value->language->$lang->title) }}</span>
                        <h2 class="section-title" style="color: white;">{{ __(@$testimonial->value->language->$lang->heading) }}</h2>
                        <p style="color: white;">{{ __(@$testimonial->value->language->$lang->sub_heading) }}</p>
                    </div>
                </div>
            </div>
            <div class="testimonial-slider-wrapper">
                <div class="testimonial-slider">
                    <div class="swiper-wrapper">
                        @if(isset($testimonial->value->items))
                        @foreach($testimonial->value->items ?? [] as $key => $item)
                        <div class="swiper-slide">
                            <div class="testimonial-item">
                                <div class="testimonial-user-area">
                                    <div class="user-area">
                                        <img src="{{ get_image(@$item->image ,'site-section') }}" alt="user">
                                    </div>
                                    <div class="title-area">
                                        <h5>{{ __(@$item->language->$lang->name )}}</h5>
                                        <p>{{ __(@$item->language->$lang->designation )}}</p>
                                    </div>
                                </div>
                                <h4 class="testimonial-title">{{ __(@$item->language->$lang->header )}}</h4>
                                <p>{{ __(@$item->language->$lang->details )}}</p>
                                @php
                                    $rating = $item->language->$lang->rating??"5";
                                @endphp
                                <ul class="testimonial-icon-list">
                                    @for($i = 0; $i <  $rating ; $i++)
                                    <li><i class="fas fa-star"></i></li>
                                    @endfor
                                </ul>
                            </div>
                        </div>
                        @endforeach
                        @endif
                    </div>
                </div>
                <div class="slider-nav-area">
                    <div class="slider-prev slider-nav">
                        <i class="las la-angle-left"></i>
                    </div>
                    <div class="slider-next slider-nav">
                        <i class="las la-angle-right"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Start Brand
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
    @php
        $lang = selectedLang();
        $brand_slug = Illuminate\Support\Str::slug(App\Constants\SiteSectionConst::BRAND_SECTION);
        $brand = App\Models\Admin\SiteSections::getData( $brand_slug)->first();
    @endphp
    <section class="brand-section pb-20 custom_font">
        <div class="container">
            <div class="line-head">
                <h6 class="title">{{ __(@$brand->value->language->$lang->title) }}</h6>
            </div>
            <div class="brand-slider">
                <div class="swiper-wrapper">
                        @if(isset($brand->value->items))
                            @foreach($brand->value->items ?? [] as $key => $item)
                            <div class="swiper-slide">
                                <div class="brand-item">
                                    <img src="{{ get_image(@$item->image ,'site-section') }}" alt="brand">
                                </div>
                            </div>
                            @endforeach
                        @endif
                </div>
            </div>
        </div>
    </section>
</div>

<style>
    .page-container {
        background-image: url(https://halapay.io/frontend/images/banner/bg-1.jpg);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }
    /* .custom_font{
        font-family: 'Alexandria', sans-serif;
    } */

    .custom_font {
        font-family: 'Poppins', sans-serif;
    }

    /* .custom_font {
        font-family: 'Manrope', sans-serif;
    } */
</style>

@endsection

@push("script")
<!-- AOS JavaScript -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
    AOS.init({
        duration: 800,
        easing: 'ease-in-out',
        once: true,
        mirror: false,
        offset: 120 // Start animation 100px before element comes into view
    });
</script>
@endpush