@php
$carouselId = 'carousel_'.uniqid();
@endphp
<section class="section-full" id="landing-survey">

    <div class="container">

        <div class="row align-items-center">

        {{-- LEFT SIDE --}}

            <div class="col-lg-6 col-12">
                @if ($hasMainTitle)
                    <div data-aos="fade-up" data-aos-duration="500" data-aos-anchor-placement="center-bottom"
                        data-aos-delay="300" class="slate-blue fw-300 font-size-24 line-height-100 mb-3">
                        <span class="btn-arrow-sq me-2">
                            <img src="/img/svg/arrow-right-red.svg" alt="" loading="lazy">
                        </span>
                        {{ $mainTitle }}
                    </div>
                @endif




                <div data-aos="fade-up" data-aos-duration="500" data-aos-anchor-placement="center-bottom"
                    data-aos-delay="350" class="fw-400 max-title-w-small font-size-48 line-height-60 mb-4 w-75">
                    @if (isset($titleParts))
                        @foreach ($titleParts as $item)
                            <span class="{{ $item['font'] }}">{!! $item['title'] !!}</span>
                            {{-- {!! $breakLine == $loop->iteration ? '<br>' : '' !!} --}}
                        @endforeach
                    @elseif(isset($title))
                        @foreach ($title as $item)
                            <span class="{{ $item['weight'] }} {{ $item['color'] }}">{!! $item['text'] !!}</span>
                        @endforeach
                    @endif


                </div>

                <div data-aos="fade-up" data-aos-duration="500" data-aos-anchor-placement="center-bottom"
                    data-aos-delay="400" class="fw-300 dark-gray max-p-w font-size-21 line-height-30 mb-4 w-75">
                    {!! $desc !!}
                </div>

                @if (isset($listItems) && !empty($listItems))
                    <div class="d-flex flex-column justify-content-center-center pb-4 ms-4">
                        @foreach ($listItems as $item)
                            <div data-aos="fade-up" data-aos-duration="500" data-aos-anchor-placement="center-bottom"
                                data-aos-delay="450" class="d-flex align-items-start">
                                <img src="{{ asset('img/svg/rectangle.svg') }}" alt="rectangle icon"
                                    class="me-2 mt-3 rectangle-icon Check-icon">
                                <div class="fw-300 dark-gray max-p-w font-size-21 line-height-45">
                                    {{ $item['title'] }}
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif

                @if (isset($hasButton) && $hasButton)
                    <div class="d-flex flex-wrap align-items-center gap-4 pb-4">
                        <div data-aos="fade-up" data-aos-duration="500" data-aos-anchor-placement="center-bottom"
                            data-aos-delay="500" data-aos-seq>
                            @include('components.button', [
                                'text' => $text ?? __('messages.VIEW_ALL'),
                                'TextDark' => $TextDark ?? true,
                                'BgDark' => $BgDark ?? true,
                                'hasText' => $hasText ?? true,
                                'hasBg' => $hasBg ?? true,
                                'link' => $link ?? 'null',
                            ])
                        </div>
                    </div>
                @endif

            </div>


            {{-- RIGHT SIDE --}}

            <div class="col-lg-6 col-12">

                <div class="survey-carousel" data-aos="fade-up" data-aos-duration="500" data-aos-anchor-placement="center-bottom"
                        data-aos-delay="300">

                    <div class="carousel-wrapper" id="{{ $carouselId }}_wrapper">

                        @foreach($surveys as $survey)

                            <div class="survey-card" data-aos="fade-up" data-aos-duration="500" data-aos-anchor-placement="center-bottom"
                                data-aos-delay="350">

                                @if(isset($survey->survey_status) && $survey->survey_status)
                                    <span class="badge font-size-14 fw-600 active" data-aos="fade-up" data-aos-duration="500"
                                        data-aos-anchor-placement="center-bottom" data-aos-delay="400">
                                        Active
                                    </span>
                                @else
                                    <span class="badge font-size-14 fw-600 completed" data-aos="fade-up" data-aos-duration="500"
                                        data-aos-anchor-placement="center-bottom" data-aos-delay="400">
                                        Completed
                                    </span>
                                @endif

                                <h4 class="fw-600 font-size-21 mt-3" data-aos="fade-up" data-aos-duration="500"
                                    data-aos-anchor-placement="center-bottom" data-aos-delay="450">
                                    {!! $survey->survey_question !!}
                                </h4>

                                <div class="survey-category font-size-16 fw-300 mb-4" data-aos="fade-up" data-aos-duration="500"
                                    data-aos-anchor-placement="center-bottom" data-aos-delay="500">
                                    <span class="dash"></span>
                                    {!! $survey->survey_title !!}
                                </div>

                                <div class="badge font-size-16 fw-700 d-flex align-items-center justify-content-end"
                                    data-aos="fade-up" data-aos-duration="500" data-aos-anchor-placement="center-bottom" data-aos-delay="550">
                                    <div class="me-2">
                                        <img src="{{ asset('/img/users-red.png') }}" alt="" loading="lazy">
                                    </div>
                                    <span class="primary-text me-1">
                                        {{ $survey->survey_response }}
                                    </span>
                                    <span class="fw-300 gray-text">Responses</span>
                                </div>

                            </div>

                        @endforeach

                    </div>


                    <div class="d-flex align-items-center justify-content-between" data-aos="fade-up" data-aos-duration="500" data-aos-anchor-placement="center-bottom"
                        data-aos-delay="600">
                        {{-- DOTS --}}

                        <div class="carousel-dots" id="{{ $carouselId }}_dots"></div>


                        {{-- ARROWS --}}

                        <div class="carousel-arrows">

                        <button id="{{ $carouselId }}_prev" class="btn rounded-circle arrow-btn bg-transparent">
                            <img src="/img/svg/arrow-testimonials-navy-left.svg" alt="Previous" width="14" loading="lazy">
                        </button>
                        <button id="{{ $carouselId }}_next" class="btn rounded-circle arrow-btn bg-transparent">
                            <img src="/img/svg/arrow-testimonials-navy-right.svg" alt="Next" width="14" loading="lazy">
                        </button>

                        </div>
                    </div>

                </div>

            </div>

        </div>

    </div>

</section>

@push('scripts')
<script>

document.addEventListener("DOMContentLoaded", function(){

const wrapper = document.getElementById("{{ $carouselId }}_wrapper");
const cards = wrapper.querySelectorAll(".survey-card");
const dotsContainer = document.getElementById("{{ $carouselId }}_dots");

const nextBtn = document.getElementById("{{ $carouselId }}_next");
const prevBtn = document.getElementById("{{ $carouselId }}_prev");

const nextImg = nextBtn.querySelector("img");
const prevImg = prevBtn.querySelector("img");

let current = 0;
let autoSlide;

cards.forEach((card,index)=>{

    const dot = document.createElement("span");

    if(index === 0){
        card.classList.add("active");
        dot.classList.add("active");
    }

    dot.addEventListener("click",()=>showSlide(index));

    dotsContainer.appendChild(dot);

});


function updateArrows(){

    if(current === 0){
        prevBtn.disabled = true;
        prevImg.src = "/img/svg/arrow-testimonials-gray-left.svg";
    }else{
        prevBtn.disabled = false;
        prevImg.src = "/img/svg/arrow-testimonials-navy-left.svg";
    }

    if(current === cards.length - 1){
        nextBtn.disabled = true;
        nextImg.src = "/img/svg/arrow-testimonials-gray-right.svg";
    }else{
        nextBtn.disabled = false;
        nextImg.src = "/img/svg/arrow-testimonials-navy-right.svg";
    }

}


function showSlide(index){

current = index;

const gap = 20; 
wrapper.style.transform = `translateX(calc(-${index * 100}% - ${index * gap}px))`;

Array.from(dotsContainer.children).forEach(dot=>{
    dot.classList.remove("active");
});

dotsContainer.children[index].classList.add("active");

updateArrows();
}


nextBtn.onclick = ()=>{

    if(current < cards.length - 1){

    showSlide(current + 1);

    }else{

    wrapper.style.transition = "none";
    showSlide(0);

    setTimeout(()=>{
    wrapper.style.transition = "transform 0.7s cubic-bezier(.4,0,.2,1)";
    },50);

    }

}


prevBtn.onclick = ()=>{

    if(current > 0){
        showSlide(current - 1);
    }

}


function startAutoSlide(){

    autoSlide = setInterval(()=>{

        if(current < cards.length - 1){
            showSlide(current + 1);
        }else{
            showSlide(0);
        }

    },7000); 

}


function stopAutoSlide(){
    clearInterval(autoSlide);
}


wrapper.addEventListener("mouseenter", stopAutoSlide);
wrapper.addEventListener("mouseleave", startAutoSlide);


updateArrows();
startAutoSlide();

});

</script>
@endpush