@php
$statisticInfo = $sectionData->where('section', 'statistics')->first();
$statisticInfo = (!empty($statisticInfo->content) ? json_decode($statisticInfo->content) : '');
@endphp

<section class="relative z-[1] sectionGap bg-[#141820]">
    <div class="container">
        <div class="grid lg:grid-cols-12 items-start gap-y-6">
            <div class="lg:col-span-5">
                <p class="sectionSub text-white after:bg-white" data-aos="fade-up" data-aos-duration="700">
                    {{$statisticInfo->subtitle}}
                </p>
                <h2 class="sectionTitle text-white [&_span]:text-secondary" data-aos="fade-up" data-aos-duration="800">
                    {!! $statisticInfo->title !!}
                </h2>

                @if (!empty($statisticInfo->tagline))
                <ul class="my-8" data-aos="fade-up" data-aos-duration="900">
                    @foreach ($statisticInfo->tagline as $value)
                    <li class="flex items-center gap-2.5 text-white mb-4 text-lg">
                        {!! config('icons.checkCircle') !!}
                        {{$value}}
                    </li>
                    @endforeach
                </ul>
                @endif

                <a href="{{url('contact')}}" class="outline-btn text-white" data-aos="fade-up" data-aos-duration="1000">
                    Contact Us
                    {!! config('icons.arrowRightLine') !!}
                </a>
            </div>

            <div class="lg:col-span-7">
                <img src="{{asset($statisticInfo->image)}}"
                    class="max-w-[540px] lg:ml-auto w-full object-cover rounded-2xl aspect-[540/558]"
                    alt="Statistic image">
                <div class="grid sm:grid-cols-2 gap-6 mt-7 lg:pb-8 lg:-mt-40 lg:mr-24">
                    <div class="grid  gap-2 bg-white p-8 rounded-tl-xl" data-aos="zoom-in">
                        <h2 class="font-extrabold text-2xl md:text-3xl lg:text-4xl uppercase">
                            <span
                                data-target="{{ !empty($statisticInfo->founded_since) ? $statisticInfo->founded_since : 0 }}"
                                class="count">0</span> Y
                        </h2>
                        <p class="text-lg">Founded Since</p>
                    </div>

                    <div class="grid  gap-2 bg-[#83188c] p-8 rounded-br-xl" data-aos="zoom-in">
                        <h2 class="font-extrabold text-2xl md:text-3xl lg:text-4xl uppercase">
                            <span
                                data-target="{{ !empty($statisticInfo->active_post) ? $statisticInfo->active_post : 0 }}"
                                id="activePost" class="count">0</span> +
                        </h2>
                        <p class="text-lg">Active Post</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@push('footerPartial')
<script>
    function respondToVisibility(element, callback) {
            const observer = new IntersectionObserver(entries => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        observer.disconnect();
                        callback();
                    }
                });
            }, {
                root: null
            });
            observer.observe(element);
        }
        const speed = 200;

        document.querySelectorAll('.count').forEach(counter => {
            respondToVisibility(counter, () => {
                const target = parseInt(counter.getAttribute('data-target'));
                const increment = Math.max(Math.trunc(target / speed), 1);

                (async function update() {
                    const count = parseInt(counter.innerText);
                    if (count < target) {
                        counter.innerText = count + increment;
                        await new Promise(resolve => requestAnimationFrame(resolve));
                        await update();
                    } else {
                        counter.innerText = target;
                    }
                })();
            });
        });
</script>
@endpush