@php
    $newsletterSection = site_configurations('theme2_blog_newsletter_section', true);
@endphp

@if (getTranslatedData($newsletterSection, 'show_Newsletter') == 1)
    <section class="subscribe-section bg-grey-2" x-data="newsletterForm()">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="subscribe-content">

                        @if (getTranslatedData($newsletterSection, 'title'))
                            <h3 class="title">{{ getTranslatedData($newsletterSection, 'title') }}</h3>
                        @endif

                        <form class="subscribe-form" @submit.prevent="submitNewsletter">

                            <input x-model="email" type="email" id="email" name="email" class="form-control"
                                placeholder="{{ __('frontend::translate.Enter Your Email') }}">

                            <button id="submit" class="default-btn" type="submit">
                                <i class="lab la-telegram-plane"></i>

                                <span x-cloak
                                    x-show="!loading">{{ getTranslatedData($newsletterSection, 'button_text') }}</span>
                                <span x-cloak x-show="loading">{{ __('frontend::messages.Please wait...') }}</span>
                            </button>
                            <div class="form-icon">
                                <i class="las la-envelope"></i>
                            </div>
                        </form>
                    </div>
                </div>

                @if (getSingleImage($newsletterSection, 'image'))
                    <div class="col-lg-6">
                        <div class="subscribe-thumb">
                            <div class="line"></div>
                            <img src="{{ getSingleImage($newsletterSection, 'image') }}" alt="img">
                        </div>
                    </div>
                @endif

            </div>
        </div>
    </section>
    <!-- ./ subscribe-section -->

    @push('js_section')
        <script>
            function newsletterForm() {
                return {
                    name: '',
                    email: '',
                    loading: false,

                    submitNewsletter() {
                        this.loading = true;

                        $.ajax({
                            url: "{{ route('store-subscriber') }}",
                            method: "POST",
                            contentType: "application/json",
                            data: JSON.stringify({
                                name: this.name,
                                email: this.email
                            }),
                            headers: {
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                                    'content')
                            },
                            success: (data) => {
                                if (data.success === false) {
                                    toastr.error(data.message);
                                } else if (data.success === true) {
                                    toastr.success(data.message);
                                    this.name = '';
                                    this.email = '';
                                }
                            },
                            error: (xhr) => {
                                const message = xhr.responseJSON?.message || 'Something went wrong.';
                                toastr.error(message);
                            },
                            complete: () => {
                                this.loading = false;
                            }
                        });
                    }
                }
            }
        </script>
    @endpush

@endif