@php
    $counters = getContent('counter.element', orderById: true);
@endphp
<section class="counter-section">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="counter-wrapper">
                    @foreach ($counters as $counter)
                        <div class="counter-item">
                            <h2 class="counter-item__number">
                                <span class="counting-number odometer" data-odometer-final="{{ $counter?->data_values?->counter_number }}">0</span>
                                <span class="suffix">{{ $counter?->data_values?->counter_type }}</span>
                            </h2>
                            <p class="counter-item__desc">{{ __($counter?->data_values?->title) }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>

@push('style-lib')
    <link rel="stylesheet" href="{{ asset($activeTemplateTrue . 'css/odometer.css') }}">
@endpush

@push('script-lib')
    <script src="{{ asset($activeTemplateTrue . 'js/odometer.min.js') }}"></script>
    <script src="{{ asset($activeTemplateTrue . 'js/viewport.jquery.js') }}"></script>
@endpush

@push('script')
    <script>
        $(document).ready(function () {
            $('.counting-number').each(function () {
                $(this).isInViewport(function (status) {
                    if (status === 'entered') {
                    for (
                        var i = 0;
                        i < document.querySelectorAll('.odometer').length;
                        i++
                    ) {
                        var el = document.querySelectorAll('.odometer')[i];
                        el.innerHTML = el.getAttribute('data-odometer-final');
                    }
                    }
                });
            });
        });
    </script>
@endpush

