@extends('web.layouts.layout')

@section('content')

    <!--  start header  -->
    <header class="style2">
        <div class="container">
            <div class="top_content">
                <div class="row gx-lg-0 align-items-center">
                    <div class="col-lg-3">
                        <div class="r_imgs wow fadeInUp" data-wow-delay="0.2s">
                            <div class="main_img">
                                <img src="{{ getImage($banner->image) }}" alt="{{ $banner->currentDescription->title ?? '' }}" class="img_cover">
                            </div>
                            <div class="sub_img">
                                <img src="{{ getImage($banner->image2) }}" alt="{{ $banner->currentDescription->title ?? '' }}" class="img_cover">
                            </div>
                            <img src="{{asset('assets/web/images/head_shap.png')}}" alt="" class="shap">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="info wow fadeInUp">
                            <h1>
                                {!! changeWordStyleInText(
                                        ['easily', 'بسهولة'],
                                        $banner->currentDescription->title ?? "",
                                        '<span class="mainColor">%s</span>'
                                    ) !!}
                            </h1>
                            <div class="text">
                                {{ strip_tags($banner->currentDescription->description ?? '') }}
                            </div>
                            <div class="btns d-flex align-items-center justify-content-center">
                                <a href="{{ route('web.programs.index') }}" class="butn butn_main">
                                    <span> {{ __('main.our_package') }} </span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="l_imgs wow fadeInUp" data-wow-delay="0.2s">
                            <div class="main_img">
                                <img src="{{ getImage($banner->image3) }}" alt="{{ $banner->currentDescription->title ?? '' }}" class="img_cover">
                            </div>
                            <img src="{{asset('assets/web/images/head_shap.png')}}" alt="" class="shap">
                            <div class="btn_cont">
                                <a href="{{ $banner->link }}" class="play_btn" data-fancybox="video">
                                    <i class="fas fa-play"></i>
                                    <div class="button-outer-circle has-scale-animation"></div>
                                    <div class="button-outer-circle has-scale-animation has-delay-short"></div>
                                </a>
                                <div class="float_div">
                                    <img src="{{asset('assets/web/images/icons/arrow.svg')}}" alt="">
                                    <span> {{ $banner->currentDescription->subtitle ?? '' }} </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="header_cards">
            <div class="container">
                <div class="content">
                    <div class="row gx-0">
                        @php $delayArr = ['0s', '0.2s', '0.4s']; @endphp

                        @foreach($ourAdvantages as $advantage)
                            @php
                                $imageStyle = '';
                                if ($advantage->image && is_file(public_path($advantage->image))){
                                    $imageStyle = "background-image: url(".getImage($advantage->image).");background-size: cover;background-repeat: no-repeat;background-color: transparent;";
                                }
                            @endphp

                            <div class="col-lg-4">
                                <div class="head_card wow fadeInUp" data-wow-delay="{{ $delayArr[$loop->index] ?? '' }}" style="{{ $imageStyle . ($loop->iteration % 2 == 0 ? 'background-color: #15141b;' : '') }}">
                                    <h5> {{ $advantage->currentDescription->title ?? "" }} </h5>
                                    <div class="text">
                                        {!! $advantage->currentDescription->description ?? "" !!}
                                    </div>
                                    @if($loop->last)
                                        <a href="{{ auth()->check() ? route('web.programs.index') : route('web.users.register') }}" class="butn butn_white">
                                            <span> {{ __('main.subscribe_now') }} </span>
                                        </a>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <img src="{{asset('assets/web/images/head_shap2.png')}}" alt="" class="head_shap">
    </header>
    <!--  end header  -->

    <!-- main -->
    <main>
        <!-- ---------- programs ----------- -->
        <section class="programs">
            <div class="container">
                <div class="section_head text-center">
                    <h2> <span class="mainColor"> {{ __('programs.programs2') }} </span> {{ __('main.anmar_fit') }} </h2>
                    <p> {{ __('main.various_programs_for_all') }} </p>
                </div>

                <div class="row">
                    @foreach($programs as $program)
                        <div class="col-lg-6">
                            <div class="program_card style2 wow fadeInUp" {{ $loop->even ? 'data-wow-delay="0.2s"':'' }}>
                                <div class="row">
                                    <div class="col-lg-5">
                                        <div class="img">
                                            <img src="{{ getImage($program->image) }}"
                                                 alt="{{ $program->currentDescription->title ?? '' }}" class="img_cover"/>
                                        </div>
                                    </div>
                                    <div class="col-lg-7">
                                        <div class="info">
                                            <h4> {{ $program->currentDescription->title ?? '' }} </h4>
                                            {!! $program->currentDescription->description ?? '' !!}
                                            <div class="btm_price">
                                                <h6> <span class="fs-3 me-1 mainColor fw-bold"> {{ $program->price }} </span> {{ __('main.saudi_riyal') }} </h6>
                                                <a href="{{ route('web.programs.show', $program->id) }}" class="butn butn_main">
                                                    <span> {{ __('main.more') }} </span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>


        <!-- ---------- steps ----------- -->
        <section class="steps">
            <div class="container">
                <div class="section_head text-center mb_50">
                    <h2> {{ $yourTripCat->currentDescription->title ?? "" }} </h2>
                    <p class="mainColor"> {{ strip_tags($yourTripCat->currentDescription->description ?? "") }} </p>
                </div>
                <div class="content">
                    <div class="row gx-lg-5">
                        @php
                            $relatedTrip = array(
                                'delay' => ['0s', '0.2s', '0.4s', '0.6s'],
                                'icon' => ['fal fa-hand-point-up', 'fal fa-credit-card', 'fal fa-clock', 'fab fa-whatsapp'],
                                'split_number' => [1, 1, 2, 1],
                            );
                        @endphp

                        @foreach($yourTrip as $trip)
                            <div class="col-lg-3">
                                <div class="step-card wow fadeInUp" data-wow-delay="{{ $relatedTrip['delay'][$loop->index] ?? '0.2s' }}">
                                    <small>  <span class="mainColor me-1"> {{ __('main.step') }} </span> {{ $loop->iteration }} </small>
                                    <div class="icon">
                                        <i class="{{ $relatedTrip['icon'][$loop->index] ?? 'fal fa-hand-point-up' }}"></i>
                                    </div>
                                    @php
                                        $splitResult = splitSentenceFromStart($trip->currentDescription->title ?? "", $relatedTrip['split_number'][$loop->index] ?? 1);
                                    @endphp
                                    <h4>
                                        <span class="mainColor"> {{ $splitResult['part1'] }} </span>
                                        {{ $splitResult['part2'] }}
                                    </h4>
                                    {{-- <div class="text">
                                        {{ stripText($trip->currentDescription->description ?? "") }}
                                    </div> --}}
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>


        <!-- ---------- stories   ----------- -->
        <section class="stories" id="home-stories">
            <div class="container">
                <div class="section_head text-center mb_50">
                    <h2> {{ __('main.be_one_monsters') }} </h2>
                    <p class="mainColor"> {{ __('main.your_turn_ready') }} </p>
                </div>
                <div class="content wow fadeInUp">
                    <div class="stories_slider">
                        <div class="swiper-wrapper">
                            @foreach($successStories as $story)
                                <div class="swiper-slide">
                                    <div class="story-card">
                                        <a href="{{ route('web.pages.success_stories', $story->id) }}" class="imgs">
                                            <div class="img">
                                                <img src="{{ getImage($story->image2) }}"
                                                     alt="{{ $story->currentDescription->title ?? "" }}" class="img_cover"/>
                                            </div>
                                            <div class="img">
                                                <img src="{{ getImage($story->image) }}"
                                                     alt="{{ $story->currentDescription->title ?? "" }}" class="img_cover"/>
                                            </div>
                                            <img src="{{asset('assets/web/images/logo_ltr.svg')}}" alt="" class="logo">
                                        </a>
                                        <h5> {{ $story->currentDescription->title ?? "" }} </h5>
                                        {{-- <div class="text">{{ strip_tags($story->currentDescription->description ?? "") }}</div> --}}
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                </div>
            </div>
            <img src="{{asset('assets/web/images/stories_shap.svg')}}" alt="" class="shap">
        </section>


        <!-- ---------- faq ----------- -->
        @include('web.home.other._common_questions')

        <!-- ---------- testimonials ----------- -->
        @include('web.home.other._reviews')

        <!-- ---------- instagram  ----------- -->
        @include('web.home.other._instagram')

        <!-- <div class="img_pattern1">
        </div> -->
    </main>

@endsection