k@section('seo')
@include('layouts._front_includes._seo', ['seo' => $page->seo])
@endsection

@extends('layouts.frontend_master')

@section('content')

@include(
'web._partials.page-banner',
[
'title' => $page->title,
'image' => $page->cover_image->getPath(),
]
)

<section class="section-padding-top section-padding-bottom section-light-bg-color">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-6">
                <div class="header-section mb-5 text-center">
                    <span class="section-subheader primary-color mb-0 text-uppercase text-center">[ INQUIRE WITH US
                        ]</span>
                    <h2 class="section-header center secondary-color">{{$page->short_title}}</h2>
                </div>
                <form action="{{ route('general-inquiry-submit') }}" method="POST" id="inquireForm"
                    class="whole-page-form px-4 py-5 p-sm-5">
                    @csrf
                    <div class="header-section text-center">
                        <h3 class="card-header mb-2">Inquire Now</h3>
                        <p class="text mb-2">{!!$page->description!!}</p>
                    </div>
                    <input type="text" class="form-input-fields text sm-text w-100 mt-3" placeholder="Full Name"
                        id="name" name="name">

                    <input type="email" class="form-input-fields text sm-text w-100 mt-3" placeholder="Email Address"
                        id="email" name="email">

                    <input type="text" class="form-input-fields text sm-text w-100 mt-3" placeholder="Phone No."
                        id="phone" name="phone">

                    <input type="text" class="form-input-fields text sm-text w-100 mt-3" placeholder="Subject"
                        id="subject" name="subject">

                    <textarea rows="3" name="message" id="message"
                        class="form-input-fields text sm-text w-100 mt-3 pt-2" placeholder="Message" id="message"
                        name="message"></textarea>

                    <!-- CAPTCHA HERE -->

                    <div class="d-flex justify-content-center align-items-center">
                        <button id="submit-btn" class="g-recaptcha main-button text-uppercase mt-4"
                               data-sitekey="{{ config('services.recaptcha_v3.siteKey') }}" data-callback="onSubmit"
                               data-action="submitInquiry">SEND MESSAGE</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</section>

@endsection


@push('frontend_js')
<script src="https://www.google.com/recaptcha/api.js?render={{ config('services.recaptcha_v3.siteKey') }}"></script>

<script>
    function onSubmit(token) {
        const submit_btn = document.getElementById("submit-btn");
        const attr = submit_btn.getAttribute("data-form");
        
        if (attr == "processing") {
            return false;
        }

        const form = document.getElementById('inquireForm');
        const url = form.action;
        const container = document.getElementById("inquireForm");

        try {
            submit_btn.classList.add("disabled");
            submit_btn.innerText = "Submitting...";
            
            const formData = new FormData(form);
            formData.append('g-recaptcha-response', token); 

            fetch(url, {
                method: 'POST',
                body: formData,
                redirect: 'follow',
                headers: {
                    "Accept": "application/json"
                }
            }).then(async response => {
                if (response.redirected) {
                    window.location.href = response.url;
                }
                let res = await response.json();
                res["flag"] = response.ok;
                submit_btn.setAttribute("data-form", "done");
                return res;
            }).then(response => {
                // Remove old error messages
                const oldErrors = document.querySelectorAll('.invalid-feedback');
                oldErrors.forEach(error => error.remove());

                if (!response.flag) {
                    // Show error messages
                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: response.message,
                        showConfirmButton: false,
                        timer: 2500
                    });

                    Object.keys(response.errors).forEach(input_name => {
                        const elements = container.querySelectorAll(`[name='${input_name}']`);
                        if (elements.length > 0) {
                            const element = elements[0];
                            response.errors[input_name].forEach(errorMessage => {
                                const errorElement = document.createElement("span");
                                errorElement.setAttribute("class", "invalid-feedback d-block");
                                errorElement.setAttribute("role", "alert");
                                errorElement.innerHTML = `<strong>${errorMessage}</strong>`;
                                element.closest('.form-group').appendChild(errorElement);
                            });

                            element.addEventListener("change", () => {
                                const errorElements = element.closest('.form-group')
                                    .querySelectorAll('.invalid-feedback');
                                errorElements.forEach(err => err.remove());
                            });
                        }
                    });
                } else {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: response.message,
                        showConfirmButton: false,
                        timer: 2000
                    }).then(() => {
                        form.reset();
                    });
                }
            }).finally(() => {
                submit_btn.classList.remove("disabled");
                submit_btn.innerText = "SEND MESSAGE"; // Reset button text
            });
        } catch (error) {
            console.error(error, 'Form submitting error');
        }

        return false;
    }
</script>

@endpush