@extends('frontend::layouts.master')
@section('content')
    @php
        $recaptchaSiteKey = $page_init['setting']['recapcha'] ?? '';
    @endphp
    @if ($recaptchaSiteKey)
        <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    @endif

    <section id="page-title" class="page-title-dark" style="background-image: url('{{ check_file($page_init['contact']['image'] ?? '') }}');">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                    <h2 class="m-b-0">{{ $page_init['contact']['local']['name'] ?? ($page_init['contact']['name'] ?? '') }}</h2>
                </div>
            </div>

            <!-- Breadcrumb -->
            <nav class="breadcrumb-container">
                <div class="container">
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="{{ mwz_route('frontend.index') }}">{{ __('frontend::text.breadcrumb.home') }}</a>
                        </li>
                        <li class="breadcrumb-item active">
                            <a>{{ $page_init['contact']['local']['name'] ?? ($page_init['contact']['name'] ?? '') }}</a>
                        </li>
                    </ul>
                </div>
            </nav>

        </div>
    </section>

    <!-- Contact Section -->
    <section class="section">
        <div class="container">
            <div class="row">

                <!-- CONTACT FORM -->
                <div class="col-lg-6 mb-4">
                    <div class="contact-box p-4">
                        <form method="post" onsubmit="sendContact(this); return false;">

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label>{{ __('frontend::text.contact_form.first_name') }}</label>
                                    <input type="text" class="form-control" name="first_name" placeholder="{{ __('frontend::text.contact_form.first_name_placeholder') }}">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label>{{ __('frontend::text.contact_form.last_name') }}</label>
                                    <input type="text" class="form-control" name="last_name" placeholder="{{ __('frontend::text.contact_form.last_name_placeholder') }}">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label>{{ __('frontend::text.contact_form.email') }}</label>
                                    <input type="email" class="form-control" name="email" placeholder="{{ __('frontend::text.contact_form.email_placeholder') }}">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label>{{ __('frontend::text.contact_form.tel') }}</label>
                                    <input type="text" class="form-control" name="tel" placeholder="{{ __('frontend::text.contact_form.tel_placeholder') }}">
                                </div>
                            </div>

                            <div class="mb-3">
                                <label>{{ __('frontend::text.contact_form.subject') }}</label>
                                <input type="text" class="form-control" name="subject" placeholder="{{ __('frontend::text.contact_form.subject_placeholder') }}">
                            </div>

                            <div class="mb-4">
                                <label>{{ __('frontend::text.contact_form.message') }}</label>
                                <textarea class="form-control" rows="4" name="msg" placeholder="{{ __('frontend::text.contact_form.message_placeholder') }}"></textarea>
                            </div>

                            <div class="form-check mb-4">
                                <input class="form-check-input" type="checkbox" id="privacy">
                                <label class="form-check-label" for="privacy">
                                    {{ __('frontend::text.contact_form.privacy_policy') }} <a href="{{ $page_init['pdpa']['url'] ?? '' }}" class="ms-1"> {{ __('frontend::text.contact_form.privacy_policy_link') }} </a>
                                </label>
                            </div>

                            <!-- Google reCAPTCHA -->
                            <div class="mb-4">
                                @if ($recaptchaSiteKey)
                                    <div class="g-recaptcha" data-sitekey="{{ $recaptchaSiteKey }}"></div>
                                @else
                                    <div class="alert alert-warning mb-0" role="alert">
                                        {{ __('Google reCAPTCHA site key is not configured.') }}
                                    </div>
                                @endif
                            </div>

                            <button type="submit" class="btn btn-dark btn-block w-100">
                                <i class="icon-mail me-2"></i> {{ __('frontend::text.contact_form.send_message') }}
                            </button>

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

                <!-- CONTACT INFO + MAP -->
                <div class="col-lg-6">
                    <div class="contact-info mb-4">
                        <div class="row">
                            @if (!empty($page_init['contact']['office']))
                                <div class="col-md-4">
                                    <h6 class="fw-bold">{{ __('frontend::text.footer.address') }}</h6>
                                    <p>{{ $page_init['contact']['local']['office'] ?? ($page_init['contact']['office'] ?? '') }}</p>
                                </div>
                            @endif
                            @if (!empty($page_init['contact']['email']))
                                <div class="col-md-4">
                                    <h6 class="fw-bold">{{ __('frontend::text.footer.email') }}</h6>
                                    <p>{{ $page_init['contact']['local']['email'] ?? ($page_init['contact']['email'] ?? '') }}</p>
                                </div>
                            @endif
                            @if (!empty($page_init['contact']['tel']))
                                <div class="col-md-4">
                                    <h6 class="fw-bold">{{ __('frontend::text.footer.phone') }}</h6>
                                    <p>{{ str_format($page_init['contact']['local']['tel'] ?? ($page_init['contact']['tel'] ?? '')) }}</p>
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- MAP -->
                    <div class="map-wrapper">
                        {!! $page_init['contact']['local']['gmap'] ?? ($page_init['contact']['gmap'] ?? '') !!}
                    </div>

                </div>

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


    <script>
        const IS_RECAPTCHA = {{ $recaptchaSiteKey ? 'true' : 'false' }};

        function sendContact(form) {
            const submitButton = form.querySelector('button[type="submit"]');
            const errors = [];
            const formData = new FormData(form);
            const previousErrors = form.querySelectorAll('.form-invalid-message');
            previousErrors.forEach((el) => el.remove());

            const firstName = formData.get('first_name')?.trim();
            const lastName = formData.get('last_name')?.trim();
            const email = formData.get('email')?.trim();
            const tel = formData.get('tel')?.trim();
            const subject = formData.get('subject')?.trim();
            const message = formData.get('msg')?.trim();
            const privacyAccepted = form.querySelector('#privacy')?.checked ?? false;

            const errorMap = [];

            if (!firstName) {
                errorMap.push({
                    input: form.querySelector('[name="first_name"]'),
                    message: '{{ __('frontend::text.contact_form.first_name_placeholder') }}'
                });
            }

            if (!lastName) {
                errorMap.push({
                    input: form.querySelector('[name="last_name"]'),
                    message: '{{ __('frontend::text.contact_form.last_name_placeholder') }}'
                });
            }

            if (!email) {
                errorMap.push({
                    input: form.querySelector('[name="email"]'),
                    message: '{{ __('frontend::text.contact_form.email_placeholder') }}'
                });
            } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
                errorMap.push({
                    input: form.querySelector('[name="email"]'),
                    message: '{{ __('frontend::text.contact_form.email_placeholder') }}'
                });
            }

            if (!tel) {
                errorMap.push({
                    input: form.querySelector('[name="tel"]'),
                    message: '{{ __('frontend::text.contact_form.tel_placeholder') }}'
                });
            }

            if (!subject) {
                errorMap.push({
                    input: form.querySelector('[name="subject"]'),
                    message: '{{ __('frontend::text.contact_form.subject_placeholder') }}'
                });
            }

            if (!message) {
                errorMap.push({
                    input: form.querySelector('[name="msg"]'),
                    message: '{{ __('frontend::text.contact_form.message_placeholder') }}'
                });
            }

            if (!privacyAccepted) {
                errorMap.push({
                    input: form.querySelector('#privacy'),
                    message: '{{ __('frontend::text.contact_form.privacy_policy_placeholder') }}',
                    wrapper: form.querySelector('#privacy')?.closest('.form-check')
                });
            }

            let recaptchaResponse = '';
            if (IS_RECAPTCHA) {
                if (typeof grecaptcha === 'undefined') {
                    errorMap.push({
                        input: form.querySelector('.g-recaptcha'),
                        message: '{{ __('frontend::text.contact_form.recaptcha_not_ready') }}'
                    });
                } else {
                    recaptchaResponse = grecaptcha.getResponse();
                    if (!recaptchaResponse) {
                        errorMap.push({
                            input: form.querySelector('.g-recaptcha'),
                            message: '{{ __('frontend::text.contact_form.recaptcha_not_verified') }}'
                        });
                    } else {
                        formData.append('g-recaptcha-response', recaptchaResponse);
                    }
                }
            }

            if (errorMap.length > 0) {
                errorMap.forEach(({
                    input,
                    message,
                    wrapper
                }) => {
                    const target = wrapper ?? input?.closest('.mb-3, .mb-4, .form-check') ?? input?.parentElement;
                    if (!target) {
                        return;
                    }

                    const errorElement = document.createElement('div');
                    errorElement.classList.add('form-invalid-message', 'mt-1', 'text-danger', 'small');
                    errorElement.textContent = message;

                    target.appendChild(errorElement);
                });

                const firstErrorInput = errorMap[0]?.input ?? null;
                firstErrorInput?.focus();

                return false;
            }

            submitButton?.setAttribute('disabled', 'disabled');

            $.ajax({
                url: '{{ route('api.contact.send') }}',
                method: 'POST',
                data: formData,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'lang': $('meta[name="lang"]').attr('content'),
                },
                processData: false,
                contentType: false,
                success: function(response) {
                    showToast(response?.message ?? '{{ __('frontend::text.contact_form.message_sent_successfully') }}', 'success');
                    form.reset();
                    if (IS_RECAPTCHA && typeof grecaptcha !== 'undefined') {
                        grecaptcha.reset();
                    }
                },
                error: function(xhr) {
                    const msg = xhr?.responseJSON?.message ?? '{{ __('frontend::text.contact_form.unable_to_send_message') }}';
                    showToast(msg, 'danger');
                },
                complete: function() {
                    submitButton?.removeAttribute('disabled');
                }
            });

            return false;
        }

        /**
         * Display toast using bootstrap 5
         */
        function showToast(message, type = 'info') {
            const toastContainerId = 'dynamic-toast-container';
            let container = document.getElementById(toastContainerId);

            if (!container) {
                container = document.createElement('div');
                container.id = toastContainerId;
                container.className = 'toast-container position-fixed bottom-0 end-0 p-3';
                container.style.zIndex = '1080';
                document.body.appendChild(container);
            }

            const toastEl = document.createElement('div');
            toastEl.className = `toast align-items-center text-bg-${type} border-0`;
            toastEl.role = 'alert';
            toastEl.ariaLive = 'assertive';
            toastEl.ariaAtomic = 'true';
            toastEl.innerHTML = `
                <div class="d-flex">
                    <div class="toast-body">
                        ${message}
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
            `;

            container.appendChild(toastEl);

            const toast = new bootstrap.Toast(toastEl, {
                delay: 4000
            });
            toast.show();

            toastEl.addEventListener('hidden.bs.toast', () => {
                toastEl.remove();
            });
        }
    </script>
@endsection