@extends('front.layouts.layout')
@section('meta_title'){{ $index_meta->{'title_' . App::getLocale()} }}@stop

@section('meta_description'){{ $index_meta->{'description_' . App::getLocale()} }}@stop

@section('meta_keywords')
    {{ $index_meta->{'kewords_' . App::getLocale()} }}
@stop

@section('meta')
    <!-- Schema.org markup for Google+ -->
    <meta itemprop="name" content="{{ $index_meta->{'title_' . App::getLocale()} }}">
    <meta itemprop="description" content="{{ $index_meta->{'description_' . App::getLocale()} }}">
    <!-- Twitter Card data -->
    <meta name="twitter:card" content="site">
    <meta name="twitter:site" content="@publisher_handle">
    <meta name="twitter:title" content="{{ $index_meta->{'title_' . App::getLocale()} }}">
    <meta name="twitter:description" content="{{ $index_meta->{'description_' . App::getLocale()} }}">
    <!-- Twitter Card data -->
    <meta name="twitter:creator" content="@author_handle">
    <meta name="twitter:image" content="{{ url($index_meta->{'image_' . App::getLocale()}) }}">
    <!-- Open Graph data -->
    <meta property="og:title" content="{{ $index_meta->{'title_' . App::getLocale()} }}" />
    <meta property="og:description" content="{{ $index_meta->{'description_' . App::getLocale()} }}" />
    <!-- Schema.org markup for Google+ -->
    <meta itemprop="image" content="{{ url($index_meta->{'image_' . App::getLocale()}) }}">
    <!-- Open Graph data -->
    <meta property="og:type" content="og:site">
    <meta property="og:url" content="{{ route('home') }}">
    <meta property="og:image" content="{{ url($index_meta->{'image_' . App::getLocale()}) }}">
    <!-- Schema.org markup for Google+ -->
    <meta itemprop="name" content="{{ $index_meta->{'title_' . App::getLocale()} }}">
    <meta itemprop="description" content="{{ $index_meta->{'description_' . App::getLocale()} }}">
@endsection
@section('content')
    <!-- HOW IT WORK START -->
    <section class="container-fluid how-it-work-container">
        <div class="row">
            <div class="col-lg-10 col-md-10 col-sm-12 m-auto head-row" data-aos="fade-up"
                data-aos-anchor-placement="bottom-bottom" data-aos-offset="100" data-aos-easing="ease-in-sine">
                <h2 class="head-title">
                    How
                    <span>60Scs</span> Work
                </h2>
            </div>
            <div class="row cards-row">
                @php
                    $aos_offset = 200;
                    $duration = 550;
                @endphp
                @forelse ($steps as $key => $step)
                    @php
                        $aos_offset += 50;
                    @endphp
                    @if ($key % 2 == 0)
                        <div class="col-lg-10 card-item col-md-10 col-sm-12 m-auto end-gradient" data-aos="fade-right"
                            data-aos-offset="{{ $aos_offset }}" data-aos-easing="ease-in-sine">
                            <div class="text-container">
                                <div class="number">
                                    <div class="number-wrapper">
                                        @if ($key + 1 < 9)
                                            0{{ $key + 1 }}
                                        @else
                                            {{ $key + 1 }}
                                        @endif
                                    </div>
                                </div>
                                <div class="text">
                                    <p>
                                        {{ $step->{'description_' . App::getLocale()} }}
                                    </p>
                                </div>
                            </div>
                            <div class="img-container">
                                <div class="img-wrapper">
                                    <img src="{{ url($step->{'image_' . App::getLocale()}) }}" alt="">
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="col-lg-10 card-item col-md-10 col-sm-12 m-auto start-gradient" data-aos="fade-left"
                            data-aos-offset="{{ $aos_offset }}" data-aos-duration="{{ $duration - 50 }}">
                            <div class="img-container">
                                <div class="img-wrapper">
                                    <img src="{{ url($step->{'image_' . App::getLocale()}) }}" alt="">
                                </div>
                            </div>
                            <div class="text-container">
                                <div class="number">
                                    <div class="number-wrapper">
                                        @if ($key + 1 < 9)
                                            0{{ $key + 1 }}
                                        @else
                                            {{ $key + 1 }}
                                        @endif
                                    </div>
                                </div>
                                <div class="text">
                                    <p>
                                        {{ $step->{'description_' . App::getLocale()} }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    @endif

                @empty

                @endforelse

            </div>
        </div>
    </section>
    <!-- HOW IT WORK END -->

    <!-- SCROLL SLIDER START -->
    <div class="pinContainer">
        @forelse ($guid_slider as $slider)
            <section class="container-fluid scroll-slider-container parallax-panel"
                style="background-color: {{ $slider->bg_color }}">
                <div class="row">
                    <div class="col-lg-10 col-md-10 col-sm-12 m-auto slider-container" id="parallax">
                        <div class="row" id="pin">
                            <div class="col-lg-6 col-md-6 col-sm-12 text-container">
                                <h3 class="title">{{ $slider->{'title_' . App::getLocale()} }}</h3>
                                <p class="desc">{{ $slider->{'description_' . App::getLocale()} }}</p>
                                @if ($slider->link_external == true)
                                    <a class="btn" target="blank"
                                        href="{{ $slider->{'link_' . App::getLocale()} }}"
                                        style="color: {{ $slider->btn_text_color }};background-color:{{ $slider->btn_color }}">{{ $slider->{'btn_text_' . App::getLocale()} }}</a>
                                @else
                                    <a class="btn" href="{{ $slider->{'link_' . App::getLocale()} }}"
                                        style="color: {{ $slider->btn_text_color }};background-color:{{ $slider->btn_color }}">{{ $slider->{'btn_text_' . App::getLocale()} }}</a>
                                @endif

                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 img-container">
                                <div class="img-wrapper">
                                    <img src="{{ url($slider->{'image_' . App::getLocale()}) }}" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @empty

        @endforelse
    </div>
    <!-- SCROLL SLIDER START -->

    <!-- FEATURES CARDS START -->
    <section class="container-fluid feature-cards-container">
        <div class="row">
            <div class="col-lg-10 col-md-10 col-sm-12 m-auto cards-wrapper">
                <div class="row">

                    @forelse ($features as $key => $feature)
                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 card-item">
                            <div class="card-img-wrapper">
                                <img src="{{ $feature->{'image_' . App::getLocale()} }}" alt="feature-card-icon">
                            </div>
                            <div class="card-text">
                                <h4 class="card-title">{{ $feature->{'title_' . App::getLocale()} }}</h4>
                                <p class="card-desc">
                                    {{ $feature->{'description_' . App::getLocale()} }}
                                </p>
                            </div>
                        </div>
                    @empty

                    @endforelse

                </div>
            </div>
        </div>
    </section>
    <!-- FEATURES CARDS END -->

    <!-- BANNER START -->
    <section class="container-fluid banner-container">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12 text-part">
                <div class="row">
                    <div class="col-lg-8 col-md-8 col-sm-12 m-auto text-wrapper">
                        <h3 class="title">
                            {{ Session::get('setting_data')->{'f_photo_slider_title_' . App::getLocale()} }}
                            <span>{{ Session::get('setting_data')->{'f_photo_slider_sub_title_' . App::getLocale()} }}</span>
                        </h3>
                        <p class="desc">
                            {{ Session::get('setting_data')->{'f_photo_slider_description_' . App::getLocale()} }}
                        </p>
                        @if (Session::get('setting_data')->f_photo_slider_link_external == 1)
                            <a target="blank"
                                href="{{ Session::get('setting_data')->{'f_photo_slider_link_' . App::getLocale()} }}"
                                class="btn btn-primary text-white">{{ Session::get('setting_data')->{'f_photo_slider_btn_text_' . App::getLocale()} }}</a>

                        @else
                            <a href="{{ Session::get('setting_data')->{'f_photo_slider_link_' . App::getLocale()} }}"
                                class="btn btn-primary text-white">{{ Session::get('setting_data')->{'f_photo_slider_btn_text_' . App::getLocale()} }}</a>

                        @endif
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 img-part">
                <div id="carouselExampleSlides" data-bs-touch="true" data-bs-interval="2000"
                    class="carousel carousel-fade slide" data-bs-ride="carousel">
                    <div class="carousel-inner">
                        @forelse ($photo_slider as $key => $photo)
                            @if ($photo->position == 'first')
                                <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                                    <img src="{{ url($photo->{'image_' . App::getLocale()}) }}" class="d-block w-100"
                                        alt="...">
                                </div>
                            @endif

                        @empty

                        @endforelse

                    </div>
                </div>
            </div>

        </div>
    </section>
    <!-- BANNER END -->

    <!-- MOBILE APPLICATION BANNER START -->
    @if (Session::get('setting_data')->banner_active == 1)
        <section class="container-fluid mobile-app-banner">
            <div class="row">
                <div class="col-lg-10 col-md-10 col-sm-12 m-auto">
                    <div class="row">
                        <div class="col-lg-7 col-md-7 col-sm-12 text-container">
                            <div class="content-wrapper">
                                <h2 class="title">
                                    {{ Session::get('setting_data')->{'banner_title_' . App::getLocale()} }}</h2>
                                <div class="app-links-section">
                                    <p class="download-text">
                                        {{ Session::get('setting_data')->{'banner_sub_title_' . App::getLocale()} }}</p>
                                    <div class="app-links">
                                        @if (Session::get('setting_data')->banner_f_btn_link_external == 1)
                                            <a target="blank"
                                                href="{{ Session::get('setting_data')->{'banner_f_btn_link_' . App::getLocale()} }}"
                                                class="link">
                                                <img src="{{ url(Session::get('setting_data')->{'banner_f_btn_image_' . App::getLocale()}) }}"
                                                    alt="">
                                            </a>
                                        @else
                                            <a href="{{ Session::get('setting_data')->{'banner_f_btn_link_' . App::getLocale()} }}"
                                                class="link">
                                                <img src="{{ url(Session::get('setting_data')->{'banner_f_btn_image_' . App::getLocale()}) }}"
                                                    alt="">
                                            </a>
                                        @endif

                                        @if (Session::get('setting_data')->banner_s_btn_link_external == 1)
                                            <a target="blank"
                                                href="{{ Session::get('setting_data')->{'banner_s_btn_link_' . App::getLocale()} }}"
                                                class="link">
                                                <img src="{{ url(Session::get('setting_data')->{'banner_s_btn_image_' . App::getLocale()}) }}"
                                                    alt="">
                                            </a>
                                        @else
                                            <a href="{{ Session::get('setting_data')->{'banner_s_btn_link_' . App::getLocale()} }}"
                                                class="link">
                                                <img src="{{ url(Session::get('setting_data')->{'banner_s_btn_image_' . App::getLocale()}) }}"
                                                    alt="">
                                            </a>
                                        @endif


                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-5 col-md-5 col-sm-12 img-container">
                            <div class="img-wrapper">
                                <img src="{{ url(Session::get('setting_data')->{'banner_image_' . App::getLocale()}) }}"
                                    alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif

    <!-- MOBILE APPLICATION BANNER END -->

    <!-- PRODUCTS EXAMPLES START -->
    <section class="container-fluid products-examples-container">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12 text-part">
                <div class="row">
                    <div class="col-lg-8 col-md-8 col-sm-10 m-auto text-wrapper">
                        <h3 class="title">
                            {{ Session::get('setting_data')->{'s_photo_slider_title_' . App::getLocale()} }}</h3>
                        <p class="desc">
                            {{ Session::get('setting_data')->{'s_photo_slider_description_' . App::getLocale()} }}
                        </p>
                        @if (Session::get('setting_data')->s_photo_slider_link_external == 1)
                            <a target="blank"
                                href="{{ Session::get('setting_data')->{'s_photo_slider_link_' . App::getLocale()} }}"
                                class="btn btn-primary text-white">{{ Session::get('setting_data')->{'s_photo_slider_btn_text_' . App::getLocale()} }}</a>

                        @else
                            <a href="{{ Session::get('setting_data')->{'s_photo_slider_link_' . App::getLocale()} }}"
                                class="btn btn-primary text-white">{{ Session::get('setting_data')->{'s_photo_slider_btn_text_' . App::getLocale()} }}</a>

                        @endif
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 imgs-part">
                <div class="swiper-container items-swiper">
                    <div class="swiper-wrapper">
                        @forelse ($photo_slider as $key => $photo)
                            @if ($photo->position == 'secound')
                                <div class="swiper-slide">
                                    <img src="{{ url($photo->{'image_' . App::getLocale()}) }}" class=""
                                        alt="...">
                                </div>
                            @endif

                        @empty

                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- PRODUCTS EXAMPLES END -->

@endsection
@section('modal')

@endsection
@section('script')

@endsection