@php $id = 'popup_offline_eng' @endphp
@once
    @push('script')

    <script>
        const el_popup = $('#popup_offline_eng');

        el_popup.find('.status_item').hide();
        el_popup.on('show.bs.modal', function (e) {
            doAJAX('daily-challenges', 'GET').promise.then((res) => {
                if (res.success) {
                    const challenge = res.data.list.find(ch => ch.slug === 'offline_eng');

                    if (challenge) {
                        skaleChallenges.showChallengeItem(challenge).then(function(result) {
                            el_popup.find('.status_item').show();
                        });

                    } else {
                        console.error('offline_eng challenge not found in the list.');
                    }
                } else {
                    console.error('Failed to fetch challenges.');
                }
            }).catch((err) => {
                console.error('AJAX request failed:', err);
            });
        });

    </script>
    @endpush
@endonce


@component(getPopupLayout(), ['id'=>$id])
{{--    style="display: none"--}}
    <div class="status_item" status_id="default" >
        <x-main.challenge-details/>

        @include('components.main.6-digit-pin', ['id'=> $id.'_pin'])

        <div class="message mb-3"></div>

        <button class="btn btn-primary w-100" id="{{$id}}-submit">{!! __('enterprise.popupOfflineEngSubmit') !!}</button>

        <button class="btn btn-primary w-100" id="{{$id}}-close" data-dismiss="modal">{!! __('enterprise.popupOfflineEngOkay') !!}</button>

        <x-main.receipt-example-dynamic/>
    </div>


@endcomponent