@extends('front.layouts.master')

@push('css')
<!-- aos css -->
<link rel="preload" as="style" href="{{ asset('front/css/aos.css') }}" onload="this.onload=null;this.rel='stylesheet'">

<!-- wow animate css link -->
<link rel="stylesheet" href="{{ asset('front/css/vendors/wow.css') }}" media="print" onload="this.media='all'">
<link rel="stylesheet" type="text/css" href="{{ asset('front/css/vendors/wow-animate.css') }}" media="print"
    onload="this.media='all'">
<link rel="stylesheet" href="https://public.codepenassets.com/css/normalize-5.0.0.min.css">

@endpush
@section('title', __('static.landing_pages.landing_page'))
@section('content')
@php
$classes = ['ride-box', 'user-box', 'driver-box', 'rating-box', 'ride-box'];
$blogs = getBlogsByIds(@$content['blog']['blogs'] ?? []);
$faqs = getFaqsByIds(@$content['faq']['faqs'] ?? []);
$half = ceil(count($faqs ?? []) / 2);
$testimonials = getTestimonialByIds(@$content['testimonial']['testimonials'] ?? []);
@endphp

@if ((int) (@$content['home']['status'] ?? 0))
<section class="home-section" id="home">
    <div class="custom-container">
        <div class="gradient-bg">
            <div class="home-contain">
                <h1 class="wow fadeInUp" data-wow-delay="0.2s">{{ @$content['home']['title'] }}</h1>
                <p class="wow fadeInUp" data-wow-delay="0.5s">{{ @$content['home']['description'] }}</p>
                <div class="home-group">
                    @foreach($content['home']['button'] ?? [] as $index => $button)
                        <a href="{{ $button['url'] ?? '#' }}" target="_blank" class="btn {{ ($button['type'] ?? 'solid') == 'solid' ? 'btn-light' : 'btn-outline' }} fadeInUp" data-wow-delay="0.{{ 7 + $index }}s">
                            {{ $button['text'] ?? '' }}
                        </a>
                    @endforeach
                </div>
            </div>
            <div class="phone-image">
                <div class="phone-1 wow fadeInUp" data-wow-delay="1.05s">
                    <img class="img-fluid mobile-phone" alt="home-phone" src="{{ asset(@$content['home']['phone_1'] ?? 'front/images/phone-1.png') }}"
                        loading="lazy">
                </div>
                <div class="phone-2 position-placeholder" style="visibility: hidden; width: 100%;">
                    <div class="phone-2-inner">
                        <img class="img-fluid mobile-phone" alt="home-phone"
                            src="{{ asset(@$content['home']['phone_2'] ?? 'front/images/phone-2.png') }}" loading="lazy">
                    </div>
                </div>
                <div class="phone-3 wow fadeInUp" data-wow-delay="1.2s">
                    <img class="img-fluid mobile-phone" alt="home-phone" src="{{ asset(@$content['home']['phone_3'] ?? 'front/images/phone-3.png') }}"
                        loading="lazy">
                </div>
            </div>
        </div>
    </div>
</section>
@endif
<!-- Home Section End -->

<!-- Statistics section start -->
@if ((int) (@$content['statistics']['status'] ?? 0))
<section class="counter-section position-relative">
    <div class="marquee-wrapper">
        <ul class="marquee-line">
            <li class="solid-line">{{ @$content['statistics']['marquee'] }}</li>
            <li class="outline-line">{{ @$content['statistics']['marquee'] }}</li>
        </ul>
    </div>
    <div class="custom-container">
        <div class="row counters">
            @php
                $counters = $content['statistics']['counters'] ?? [];
                $leftCounters = array_slice($counters, 0, 2);
                $rightCounters = array_slice($counters, 2);
            @endphp
            <div class="col-lg-4 col-sm-6 d-flex flex-column order-lg-1 order-2">
                @foreach($leftCounters as $counter)
                <div class="counter-wrapper custom-shadow">
                    <div class="svg-wrapper">
                        <i class="{{ $counter['icon'] ?? 'ri-taxi-fill' }}"></i>
                        <h3>
                            <span class="counter" data-target="{{ $counter['count'] ?? 0 }}">{{ $counter['count'] ?? 0 }}</span>
                        </h3>
                    </div>
                    <h4>{{ $counter['title'] ?? '' }}</h4>
                    <p>{{ $counter['description'] ?? '' }}</p>
                </div>
                @endforeach
            </div>
            <div
                class="col-lg-4 col-sm-12 d-none d-md-flex gradient justify-content-center align-items-center order-lg-2 order-1">
                <div class="phone-2-target">
                    <img class="img-fluid mobile-phone target-phone-img" alt="home-phone"
                        src="{{ asset(@$content['home']['phone_2'] ?? 'front/images/phone-2.png') }}" loading="lazy"
                      >
                </div>
            </div>
            <div class="col-lg-4 col-sm-6 d-flex flex-column order-lg-3 order-3">
                @foreach($rightCounters as $counter)
                <div class="counter-wrapper custom-shadow">
                    <div class="svg-wrapper">
                        <i class="{{ $counter['icon'] ?? 'ri-taxi-fill' }}"></i>
                        <h3>
                            <span class="counter" data-target="{{ $counter['count'] ?? 0 }}">{{ $counter['count'] ?? 0 }}</span>
                        </h3>
                    </div>
                    <h4>{{ $counter['title'] ?? '' }}</h4>
                    <p>{{ $counter['description'] ?? '' }}</p>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>
@endif
<!-- Experience section end -->

<!-- Best choice section start -->
@if ((int) (@$content['feature']['status'] ?? 0) == 1)
<section class="best-choice-section-2 section-b-space overflow-hidden" id="why_cab_booking">
    <div class="container">
        <div class="title">
            <h2>{{ @$content['feature']['title'] }}</h2>
            <div class="d-inline-block">
                <p>{{ @$content['feature']['description'] }}</p>
            </div>
        </div>
        <div class="row align-items-center">
            <div class="col-xxl-6 order-2 order-xxl-1">
                <div class="feature-accordion" id="featureAccordion">
                    @foreach($content['feature']['images'] ?? [] as $index => $item)
                    <div class="accordion-item-feature {{ $index == 0 ? 'active' : '' }}" data-image="{{ asset($item['image'] ?? '') }}">
                        <div class="accordion-header-feature">
                            <div class="accordion-icon">
                                <i class="{{ $item['icon'] ?? 'ri-map-pin-user-fill' }}"></i>
                            </div>
                            <h4>{{ $item['title'] ?? '' }}</h4>
                        </div>
                        <div class="accordion-body-feature">
                            <p>{{ $item['description'] ?? '' }}</p>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            <div class="col-xxl-6 order-1 order-xxl-2">
                <div class="feature-image-wrapper">
                    <div class="feature-image-container">
                        @php
                            $firstImage = isset($content['feature']['images'][0]['image']) ? asset($content['feature']['images'][0]['image']) : '';
                        @endphp
                        <img id="featureImage" class="img-fluid" src="{{ $firstImage }}"
                            alt="Feature Image" loading="eager">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endif
<!-- Best choice section end -->

<!-- Rides screen section start -->
@if ((int) (@$content['ride']['status'] ?? 0) == 1)
<section class="sass-team-section" id="how_it_works">
    <div class="container">
        <div class="title">
            <h2>{{ @$content['ride']['title'] }}</h2>
            <p>{{ @$content['ride']['description'] }}</p>
        </div>

        <!-- Progress Tabs -->
        <div class="progress-tabs-wrapper">
            <div class="progress-line-container">
                <div class="progress-line-bg"></div>
                <div class="progress-line-fill" id="progressLineFill"></div>
            </div>
            <div class="progress-tabs">
                @foreach($content['ride']['step'] ?? [] as $index => $step)
                <div class="progress-tab {{ $index == 0 ? 'active' : '' }}" data-step="{{ $index }}">
                    <span class="tab-label">Step {{ $index + 1 }}</span>
                </div>
                @endforeach
            </div>
        </div>

        <!-- Tab Content -->
        <div class="tab-content-wrapper">
            @foreach($content['ride']['step'] ?? [] as $index => $step)
            <div class="tab-content {{ $index == 0 ? 'active' : '' }}" data-content="{{ $index }}">
                <div class="row align-items-center">
                    <div class="col-lg-6 col-md-6">
                        <div class="tab-image-wrapper">
                            <img class="img-fluid" alt="{{ $step['title'] ?? '' }}" src="{{ asset($step['image'] ?? '') }}"
                                loading="lazy">
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6">
                        <div class="tab-text-wrapper">
                            <div class="step-number">{{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}</div>
                            <h3>{{ $step['title'] ?? '' }}</h3>
                            <p>{{ $step['description'] ?? '' }}</p>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif
<!-- Rides screen section end -->

<!-- FAQ section start -->
@if ((int) (@$content['faq']['status'] ?? 0) == 1)
<section class="faq-section section-b-space" id="faqs">
    <div class="faq-container">
        <div class="title">
            <h2 class="wow fadeInDown">{{ @$content['faq']['title'] }}</h2>
            <div class="d-inline-block">
                <p class="wow fadeInDown">{{ @$content['faq']['sub_title'] }}</p>
            </div>
        </div>
        <div class="row gy-lg-0 gy-3">
            <div class="col-12">
                <div class="accordion faq-accordion" id="faqAccordion">
                    <div class="row">
                        @php
                            $faqs = collect($faqs ?? []);
                            $faqsCount = $faqs->count();
                            $halfFaqs = ceil($faqsCount / 2);
                            $leftFaqs = $faqs->take($halfFaqs);
                            $rightFaqs = $faqs->skip($halfFaqs);
                        @endphp
                        <div class="col-lg-6">
                            @foreach($leftFaqs as $index => $faq)
                            <div class="accordion-item wow fadeInUp">
                                <h2 class="accordion-header">
                                    <button class="accordion-button {{ $index != 0 ? 'collapsed' : '' }}" data-bs-toggle="collapse" data-bs-target="#faq{{ $index }}">
                                        {{ data_get($faq, 'title') }}
                                    </button>
                                </h2>
                                <div id="faq{{ $index }}" class="accordion-collapse collapse {{ $index == 0 ? 'show' : '' }}" data-bs-parent="#faqAccordion">
                                    <div class="accordion-body">
                                        <p>{{ data_get($faq, 'description') }}</p>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <div class="col-lg-6">
                            @foreach($rightFaqs as $index => $faq)
                            @php $realIndex = $index + $halfFaqs; @endphp
                            <div class="accordion-item wow fadeInUp">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" data-bs-toggle="collapse"
                                        data-bs-target="#faq{{ $realIndex }}">
                                        {{ data_get($faq, 'title') }}
                                    </button>
                                </h2>
                                <div id="faq{{ $realIndex }}" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                    <div class="accordion-body">
                                        <p>{{ data_get($faq, 'description') }}</p>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endif

<!-- FAQ section end -->

<!-- Testimonial section start -->
@if ((int) (@$content['testimonial']['status'] ?? 0) == 1)
<section class="comment-section section-b-space wow fadeIn" id="testimonials">
    <div class="container">
        <div class="title">
            <h2 class="wow fadeInDown">{{ @$content['testimonial']['title'] }}</h2>
            <div class="d-inline-block">
                <p class="wow fadeInDown">{{ @$content['testimonial']['sub_title'] }}</p>
            </div>
        </div>

        <div class="swiper comment-slider pagination-box">
            <div class="swiper-wrapper wow fadeInUp">
                @forelse ($testimonials ?? [] as $testimonial)
                <div class="swiper-slide">
                    <div class="comment-box">
                        <div class="rating-box">
                            <h6>
                                @for($i=0; $i<5; $i++)
                                <svg>
                                    <use xlink:href="{{ asset('front/images/star.svg#star') }}"></use>
                                </svg>
                                @endfor
                                {{ number_format(data_get($testimonial, 'rating') ?? 0, 1) }}
                            </h6>

                            <svg class="quotes-icon">
                                <use xlink:href="{{ asset('front/images/quotes-right.svg#quotes-right') }}"></use>
                            </svg>
                        </div>
                        <p class="comment-contain">{{ data_get($testimonial, 'description') }}</p>
                        <div class="top-comment">
                            <img class="img-fluid" alt="{{ data_get($testimonial, 'name') }}"
                                src="{{ asset(data_get($testimonial, 'profile_image.asset_url') ?? '') }}" loading="lazy">
                            <div class="content">
                                <h5>{{ data_get($testimonial, 'name') }}</h5>
                                <p>{{ data_get($testimonial, 'designation') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                @empty
                @endforelse
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
</section>
@endif
<!-- Testimonial section end -->

<!-- Blog section start -->
@if ((int) (@$content['blog']['status'] ?? 0) == 1)
<section class="blog-section section-b-space bg-section" id="blogs">
    <div class="custom-container">
        <div class="title">
            <h2 class="wow fadeInDown">{{ @$content['blog']['title'] }}</h2>
            <div class="d-inline-block">
                <p class="wow fadeInDown">{{ @$content['blog']['sub_title'] }}</p>
            </div>
        </div>

        <div class="swiper blog-swiper pagination-box swiper-initialized swiper-horizontal swiper-backface-hidden">
            <div class="swiper-wrapper">
                @forelse($blogs ?? [] as $index => $blog)
                <div class="swiper-slide wow fadeInUp {{ $index == 0 ? 'swiper-slide-active' : '' }}">
                    <div class="blog-box">
                        <div class="blog-image">
                            @php
                                $slug = data_get($blog, 'slug');
                                $thumbnail = data_get($blog, 'blog_thumbnail.original_url');
                                $createdAt = data_get($blog, 'created_at');
                                $title = data_get($blog, 'title');
                                $description = data_get($blog, 'description');
                            @endphp
                            <a href="{{ $slug ? route('blog.slug', $slug) : '#' }}">
                                <img class="img-fluid" src="{{ $thumbnail }}" alt="{{ $title ?? '' }}" loading="lazy">
                            </a>
                        </div>
                        <div class="blog-content">
                            <div class="blog-bottom">
                                <h6>{{ $createdAt instanceof \Carbon\Carbon ? $createdAt->format('d M, Y') : (is_string($createdAt) ? date('d M, Y', strtotime($createdAt)) : '') }}</h6>
                            </div>
                            <h5>{{ $title ?? '' }}</h5>
                            <p>{{ $description ?? '' }}</p>
                            <a class="btn btn-light" href="{{ $slug ? route('blog.slug', $slug) : '#' }}">
                                {{ __('static.landing_pages.know_more') }} <i class="ri-arrow-right-s-line"></i>
                            </a>
                        </div>
                    </div>
                </div>
                @empty
                @endforelse
            </div>
            <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
        </div>

        <a href="{{ route('web.blog.index') }}" class="btn btn-primary d-flex mx-auto">{{ __('static.landing_pages.view_all') }}</a>
    </div>
</section>
@endif
<!-- Blog section end -->


@endsection

@push('scripts')
<!-- WOW JS -->
<script src="{{ asset('front/js/wow.js') }}"></script>
<script src='https://unpkg.com/gsap@3/dist/gsap.min.js'></script>
<script src='https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js'></script>
<script>
    $(document).ready(function() {
            new WOW().init();
            $(window).on('load', function() {
                setTimeout(function() {
                    $('#fullScreenLoader').fadeOut('slow', function() {
                        $(this).remove();
                    });
                }, 3500);
            });
        });
</script>


<script>
    document.addEventListener('DOMContentLoaded', () => {

            const wrappers = document.querySelectorAll(".steps-content-wrapper");
            const progressFill = document.querySelector(".bar__fill");
            const bar = document.querySelector(".bar");

            if (!wrappers.length || !progressFill || !bar) return;

            wrappers.forEach(wrapper => {

                const rows = wrapper.querySelectorAll(".row");

                function updateBarFillSmooth() {
                    const rect = wrapper.getBoundingClientRect();
                    const windowHeight = window.innerHeight;

                    const totalScrollable = rect.height - windowHeight;
                    if (totalScrollable <= 0) return;

                    const scrollProgress = Math.min(
                        Math.max(-rect.top / totalScrollable, 0),
                        1
                    );

                    gsap.to(progressFill, {
                        height: scrollProgress * bar.offsetHeight + "px",
                        duration: 0.25,
                        ease: "power2.out"
                    });
                }

                function updateActiveStep() {
                    let activeRowIndex = 0;
                    const triggerLine = window.innerHeight * 0.55;

                    rows.forEach((row, index) => {
                        const rect = row.getBoundingClientRect();
                        if (rect.top <= triggerLine) {
                            activeRowIndex = index;
                        }
                    });

                    rows.forEach((row, index) => {
                        const features = row.querySelectorAll(".feature-text");
                        features.forEach(feature => {
                            feature.classList.toggle("active", index === activeRowIndex);
                        });
                    });
                }

                function onScroll() {
                    updateBarFillSmooth();
                    updateActiveStep();
                }

                window.addEventListener("scroll", onScroll);

                onScroll();
            });
        });
</script>
<script>
    //marquee loop
document.querySelectorAll('.marquee-line').forEach(marquee => {
  marquee.innerHTML += marquee.innerHTML;
});
</script>

<script>
    // Feature Accordion functionality
    document.addEventListener('DOMContentLoaded', function() {
        const accordionItems = document.querySelectorAll('.accordion-item-feature');
        const featureImage = document.getElementById('featureImage');

        accordionItems.forEach(item => {
            item.addEventListener('click', function() {
                // Remove active class from all items
                accordionItems.forEach(i => i.classList.remove('active'));

                // Add active class to clicked item
                this.classList.add('active');

                // Change the image with fade effect
                const newImageSrc = this.getAttribute('data-image');
                if (featureImage && newImageSrc) {
                    featureImage.style.opacity = '0';
                    setTimeout(() => {
                        featureImage.src = newImageSrc;
                        featureImage.style.opacity = '1';
                    }, 200);
                }
            });
        });
    });
</script>

<script>
    // Progress Tabs functionality
    document.addEventListener('DOMContentLoaded', function() {
        const tabs = document.querySelectorAll('.progress-tab');
        const contents = document.querySelectorAll('.tab-content');
        const progressLineFill = document.getElementById('progressLineFill');
        const totalTabs = tabs.length;
        let currentStep = 0;
        let autoPlayInterval;
        const autoPlayDelay = 4000; // 4 seconds per tab

        function updateProgressLine() {
            const progressPercentage = (currentStep / (totalTabs - 1)) * 100;
            progressLineFill.style.width = progressPercentage + '%';
        }

        function updateTabs() {
            tabs.forEach((tab, index) => {
                tab.classList.remove('active', 'completed');
                if (index === currentStep) {
                    tab.classList.add('active');
                } else if (index < currentStep) {
                    tab.classList.add('completed');
                }
            });
        }

        function updateContent() {
            contents.forEach((content, index) => {
                content.classList.remove('active');
                if (index === currentStep) {
                    content.classList.add('active');
                }
            });
        }

        function goToStep(step) {
            currentStep = step;
            updateTabs();
            updateContent();
            updateProgressLine();
        }

        function nextStep() {
            currentStep = (currentStep + 1) % totalTabs;
            goToStep(currentStep);
        }

        function startAutoPlay() {
            autoPlayInterval = setInterval(nextStep, autoPlayDelay);
        }

        function stopAutoPlay() {
            clearInterval(autoPlayInterval);
        }

        // Tab click events
        tabs.forEach((tab, index) => {
            tab.addEventListener('click', function() {
                stopAutoPlay();
                goToStep(index);
                startAutoPlay();
            });
        });

        // Initialize
        updateTabs();
        updateContent();
        updateProgressLine();
        startAutoPlay();
    });
</script>

<script>
    window.addEventListener('load', () => {
        gsap.registerPlugin(ScrollTrigger);

        let mm = gsap.matchMedia();

        mm.add("(min-width: 1200px)", () => {
            let phone2Placeholder = document.querySelector('.phone-2.position-placeholder');
            let placeholderImg = phone2Placeholder ? phone2Placeholder.querySelector('img') : null;
            let targetImg = document.querySelector('.target-phone-img');
            let gradientTarget = document.querySelector('.gradient');

            // Ensure both elements exist before animating
            if (phone2Placeholder && placeholderImg && targetImg && gradientTarget) {

                // Mathematically translate Y to precisely simulate a sticky effect
                let tl = gsap.timeline({
                    scrollTrigger: {
                        trigger: ".home-section",
                        start: "top top",
                        end: () => {
                            let targetRect = gradientTarget.getBoundingClientRect();
                            return "+=" + targetRect.top;
                        },
                        scrub: 1,
                        invalidateOnRefresh: true,
                    }
                });

                // "from" animation translates the phone UP to its placeholder position initially
                tl.from(targetImg, {
                    y: () => {
                        let startRect = phone2Placeholder.getBoundingClientRect();
                        let targetRect = gradientTarget.getBoundingClientRect();
                        return -(targetRect.top - startRect.top);
                    },
                    x: () => {
                        let startRect = phone2Placeholder.getBoundingClientRect();
                        let targetRect = gradientTarget.getBoundingClientRect();
                        return -(targetRect.left - startRect.left);
                    },
                    width: () => phone2Placeholder.offsetWidth,
                    height: () => phone2Placeholder.offsetHeight,
                    ease: "none"
                }, 0);

                // Animate phone-1 and phone-3 to close the gap
                let phone1 = document.querySelector('.phone-1');
                let phone3 = document.querySelector('.phone-3');

                if (phone1 && phone3) {
                    const moveDist = phone2Placeholder.offsetWidth / 2 + 15;
                    tl.to(phone1, {
                        x: moveDist,
                        ease: "none"
                    }, 0);

                    tl.to(phone3, {
                        x: -moveDist,
                        ease: "none"
                    }, 0);
                }
            }
        });
    });
</script>
@endpush