@extends('layouts.usermaster')

@section('styles')

<style>
    #hideAfterloading {
				position: absolute;
				top: 180px;
				left: 45%;
				z-index: 100;
			}
</style>

@endsection

@section('content')

    <!-- Section -->
    <section>
        <div class="bannerimg cover-image" data-bs-image-src="{{asset('build/assets/images/photos/banner1.jpg')}}">
            <div class="header-text mb-0">
                <div class="container">
                    <div class="row text-white">
                        <div class="col">
                            <h1 class="mb-0">{{lang('FAQ’s', 'menu')}}</h1>
                        </div>
                        <div class="col col-auto">
                            <ol class="breadcrumb text-center d-flex align-items-center justify-content-center">
                                <li class="breadcrumb-item">
                                    <a href="#" class="text-white-50">{{lang('Home', 'menu')}}</a>
                                </li>
                                <li class="breadcrumb-item active">
                                    <a href="#" class="text-white">{{lang('FAQ’s')}}</a>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Section -->

    <!--Section-->
    <section>
        <div class="cover-image mt-0 sptb">
            <div id="hideAfterloading" class="d-none"><img src="{{ asset('build/assets/images/loader.svg') }}" alt="">
                <p>loading.. Please Wait</p>
            </div>
            <div class="container">
                @foreach($faqcats as $faqcat)
                @php
                $faq = $faqcat->faqdetails()->where('status', '1')->paginate('5');

                @endphp
                @if($faq->isNotEmpty())
                    <div class="accordion-group d-flex justify-content-between">
                        <p><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#dee5f7"/><path fill="#565b95" d="M15 10A3.0001 3.0001 0 0 0 9.40234 8.499a.99981.99981 0 0 0 1.73047 1.002A1.00022 1.00022 0 1 1 12 11a.99943.99943 0 0 0-1 1v1a1 1 0 0 0 2 0v-.18433A2.99487 2.99487 0 0 0 15 10zM12 17a.9994.9994 0 0 1-.37988-.08008 1.14718 1.14718 0 0 1-.33008-.21 1.16044 1.16044 0 0 1-.21-.33008A.83154.83154 0 0 1 11 16a1.39038 1.39038 0 0 1 .01953-.2002.65026.65026 0 0 1 .06055-.17968.74157.74157 0 0 1 .08984-.18067A1.61105 1.61105 0 0 1 11.29 15.29a1.04667 1.04667 0 0 1 1.41992 0A1.0321 1.0321 0 0 1 13 16a.9994.9994 0 0 1-.08008.37988.90087.90087 0 0 1-.54.54A.9994.9994 0 0 1 12 17z"/></svg>{{$faqcat->faqcategoryname}}</p>
                        @if($faq > '5')

                        <div>
                            <a href="{{url('faq/'.$faqcat->id)}}" class="btn btn-sm btn-light ms-auto">{{lang('View All')}}</a>
                        </div>

                        @endif

                    </div>
                    <div class="accordion accordionExample{{$faqcat->id}}" >
                        <div class="row mb-5">
                            @foreach ($faq as $faqs)

                            <div class="col-xl-12">
                                <div class="accordion-item">
                                        <h2 class="accordion-header" id="heading{{$faqs->id}}">
                                        {{-- <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{$faqs->id}}" aria-expanded="true" aria-controls="collapse{{$faqs->id}}">
                                            {{$faqs->question}}  <span class="btn btn-solid btn-sm float-end" id="translate-btn">
                                                <i class="fa fa-solid fa-language mb-2" style="font-size: 1rem;" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Translate" aria-label="Translate"></i>
                                            </span>
                                        </button> --}}
                                        <button class="accordion-button collapsed d-flex justify-content-between align-items-center position-relative" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{$faqs->id}}" aria-expanded="true" aria-controls="collapse{{$faqs->id}}" data-question="{{$faqs->question}}">
                                                {{$faqs->question}}
                                            @if(setting('cust_google_translate') == 'on')
                                                <span class="position-absolute end-0 d-flex align-items-center translate-btn" style="margin-right: 3.5rem" id="translate-btn">
                                                    <i class="fa fa-solid fa-language mb-2" style="font-size: 1rem;" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Translate" aria-label="Translate"></i>
                                                </span>
                                            @endif
                                        </button>
                                        </h2>
                                        <div id="collapse{{$faqs->id}}" class="accordion-collapse collapse " aria-labelledby="heading{{$faqs->id}}" data-bs-parent=".accordionExample{{$faqcat->id}}">
                                            <div class="accordion-body" data-answer="{{$faqs->answer}}">
                                            @if($faqs->privatemode == 1)
                                                @if(Auth::guard('customer')->check() && Auth::guard('customer')->user())

                                                {!!$faqs->answer!!}
                                                @else

                                                <div class="alert alert-light-warning ">
                                                    <p class="privatearticle">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
                                                    {{lang('You must be logged in and have valid account to access this content.')}}
                                                    </p>
                                                </div>
                                                @endif
                                            @else

                                            {!!$faqs->answer!!}
                                            @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach


                            </div>
                        </div>
                    @endif
                @endforeach

                @if(App\Models\FAQ::get()->all() == null)
                    <div class="card no-articles">
                        <div class="card-body p-8">
                            <div class="main-content text-center">
                                <div class="notification-icon-container p-4">
                                    <img src="{{asset('build/assets/images/noarticle.png')}}" alt="">
                                </div>
                                <h4 class="mb-1">{{lang('There are no new FAQ’s')}}</h4>
                                <p class="text-muted">{{lang('This faq section will be updated shortly.')}}</p>
                            </div>
                        </div>
                    </div>
                @endif


                @if($faqcats->all() == null)
                    <div class="card no-articles">
                        <div class="card-body p-8">
                            <div class="main-content text-center">
                                <div class="notification-icon-container p-4">
                                    <img src="{{asset('build/assets/images/noarticle.png')}}" alt="">
                                </div>
                                <h4 class="mb-1">{{lang('There are no new FAQ’s')}}</h4>
                                <p class="text-muted">{{lang('This faq section will be updated shortly.')}}</p>
                            </div>
                        </div>
                    </div>
                @endif
            </div>

        </div>
    </section>
    <!--Section-->

    @include('includes.texttranslationmodal')

@endsection


@section('scripts')

		<!-- INTERNAL Vertical-scroll js-->
		<script src="{{asset('build/assets/plugins/vertical-scroll/jquery.bootstrap.newsbox.js')}}"></script>

    <script>

        let modal = new bootstrap.Modal(document.getElementById('texttranslationmodal'));
        // let translateButtons = document.querySelectorAll('.translate-btn');
        document.querySelectorAll('.translate-btn').forEach(button => {
            button.onclick = () => {

                let questionButton = button.closest('button');
                let questionText = questionButton.innerText;
                let accordionItem = questionButton.closest('.accordion-item');
                let accordionBody = accordionItem.querySelector('.accordion-body');
                let answerText = accordionBody;
                modal.show();


                function getElementHtmlWithStyles(element) {
                    return element.outerHTML;
                }

                function saveTranslationHandler() {
                    let selectedLanguage = document.getElementById('translate-lang').value;
                    // let textToTranslate = answerText;
                    let textToTranslate = getElementHtmlWithStyles(answerText);
                    let articleTitle = questionText;


                    accordionItem.style.filter = "blur(2px)";
                    document.getElementById('hideAfterloading')?.classList.remove('d-none');
                    modal.hide();

                    fetch('{{ route('translate') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        },
                        body: JSON.stringify({
                            text: textToTranslate,
                            title: articleTitle,
                            target_lang: selectedLanguage,
                            user: 'customer',
                        }),
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {

                            accordionItem.style.filter = "";
                            document.getElementById('hideAfterloading')?.classList.add('d-none');
                            accordionBody.innerHTML = data.translated_text;
                            // questionButton.textContent = data.translated_title;
                            let textNode = questionButton.childNodes[0];
                            if (textNode.nodeType === Node.TEXT_NODE) {
                                textNode.nodeValue = data.translated_title + " ";
                            }

                        } else {
                            toastr.error('Translation failed: ' + data.message);
                            accordionItem.style.filter = "";
                            document.getElementById('hideAfterloading')?.classList.add('d-none');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                    });
                }
                document.getElementById('translateButtonSave').onclick= null;
                document.getElementById('translateButtonSave').onclick= saveTranslationHandler;

            };
        });

    </script>







@endsection