@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: linear-gradient(-45deg, #0b0b0b 0%, #e6c36c);">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                    <h2 class="m-b-0 text-white">{{ $page_init['contact']['local']['name'] ?? ($page_init['contact']['name'] ?? '') }}</h2>
                </div>
                <!-- Breadcrumb -->
                <nav class="breadcrumb-container">
                    <div class="container">
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item text-white">
                                <a href="{{ mwz_route('frontend.index') }}">{{ __('frontend::text.breadcrumb.home') }}</a>
                            </li>
                            <li class="breadcrumb-item text-white active">
                                <a>{{ $page_init['contact']['local']['name'] ?? ($page_init['contact']['name'] ?? '') }}</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section class="contact-section">
        <div class="container">
            <!-- Top Row: LOCATION + SOCIAL and Map -->
            <div class="row">
                <div class="col-md-12">
                    <div class="row contact-top-row">
                        <!-- Left: Location & Social -->
                        <div class="col-md-6 contact-info-column">
                            <div class="contact-info-wrapper">
                                <!-- Location -->
                                <div class="contact-location">
                                    @if (!empty($page_init['contact']['office']))
                                        <h4>{{ __('frontend::text.contact_form.location') }}</h4>
                                        <p>{{ $page_init['contact']['local']['office'] ?? ($page_init['contact']['office'] ?? '') }}</p>
                                    @endif
                                    <ul class="list list-contact m-b-0">
                                        @if (!empty($page_init['contact']['tel']))
                                            <li><i class="fa fa-phone"></i> <a href="tel:{{ $page_init['contact']['tel'] ?? ($page_init['contact']['tel'] ?? '') }}"><strong>Tel :</strong> {{ $page_init['contact']['local']['tel'] ?? ($page_init['contact']['tel'] ?? '') }}</a>
                                            </li>
                                        @endif
                                        @if (!empty($page_init['contact']['email']))
                                            <li><i class="fa fa-envelope"></i> <a href="mailto:{{ $page_init['contact']['email'] ?? ($page_init['contact']['email'] ?? '') }}"><strong>Email :</strong>{{ $page_init['contact']['local']['email'] ?? ($page_init['contact']['email'] ?? '') }}</a> </li>
                                        @endif
                                    </ul>
                                </div>
                                @if (!empty($page_init['contact']['social']))
                                    <!-- Social -->
                                    <div class="contact-social-section">
                                        <h4>{{ __('frontend::text.contact_form.social') }}</h4>
                                        <div class="social-icons social-icons-colored social-icons-rounded m-t-20">
                                            <ul>
                                                @if (!empty($page_init['contact']['social']['facebook']['url']))
                                                    <li class="social-facebook">
                                                        <a target="_blank" rel="noopener" href="{{ $page_init['contact']['social']['facebook']['url'] }}">
                                                            <i class="fab fa-facebook-f"></i>
                                                        </a>
                                                    </li>
                                                @endif
                                                @if (!empty($page_init['contact']['social']['line']['url']))
                                                    <li class="social-line">
                                                        <a target="_blank" rel="noopener" href="{{ $page_init['contact']['social']['line']['url'] }}">
                                                            <i class="fab fa-line"></i>
                                                        </a>
                                                    </li>
                                                @endif
                                                @if (!empty($page_init['contact']['social']['youtube']['url']))
                                                    <li class="social-youtube">
                                                        <a target="_blank" rel="noopener" href="{{ $page_init['contact']['social']['youtube']['url'] }}">
                                                            <i class="fab fa-youtube"></i>
                                                        </a>
                                                    </li>
                                                @endif
                                                @if (!empty($page_init['contact']['social']['instagram']['url']))
                                                    <li class="social-instagram">
                                                        <a target="_blank" rel="noopener" href="{{ $page_init['contact']['social']['instagram']['url'] }}">
                                                            <i class="fab fa-instagram"></i>
                                                        </a>
                                                    </li>
                                                @endif
                                                @if (!empty($page_init['contact']['social']['twitter']['url']))
                                                    <li class="social-twitter">
                                                        <a target="_blank" rel="noopener" href="{{ $page_init['contact']['social']['twitter']['url'] }}">
                                                            <i class="fab fa-x-twitter"></i>
                                                        </a>
                                                    </li>
                                                @endif
                                                @if (!empty($page_init['contact']['social']['tiktok']['url']))
                                                    <li class="social-tiktok">
                                                        <a target="_blank" rel="noopener" href="{{ $page_init['contact']['social']['tiktok']['url'] }}">
                                                            <i class="fab fa-tiktok"></i>
                                                        </a>
                                                    </li>
                                                @endif
                                            </ul>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>

                        <!-- Right: Map -->
                        <div class="col-md-6 contact-map-column">
                            <div class="contact-map">
                                {!! $page_init['contact']['local']['gmap'] ?? ($page_init['contact']['gmap'] ?? '') !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Bottom Row: Contact Us Heading and Form -->
            <div class="row">
                <div class="col-md-12">
                    <div class="row contact-bottom-row">
                        <!-- Left: Contact Us Heading -->
                        <div class="col-md-6 contact-heading-column">
                            <div class="contact-heading">
                                <h2 class="text-black">{{ $page_init['contact']['local']['name'] ?? ($page_init['contact']['name'] ?? '') }}</h2>
                                <p class="text-black">{{ $page_init['contact']['local']['desc'] ?? ($page_init['contact']['desc'] ?? '') }}</p>
                            </div>
                        </div>

                        <!-- Right: Contact Form -->
                        <div class="col-md-6 contact-form-column">
                            <div class="contact-form-wrapper">
                                <form method="post" onsubmit="sendContact(this); return false;" class="contact-form">
                                    <div class="form-group">
                                        <input type="text" class="form-control" name="name" placeholder="{{ __('frontend::text.contact_form.name_placeholder') }}" required>
                                    </div>
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-12 col-lg-6">
                                                {{-- <div class="form-group"> --}}
                                                <input type="email" class="form-control" name="email" placeholder="{{ __('frontend::text.contact_form.email_placeholder') }}" required>
                                                {{-- </div> --}}
                                            </div>
                                            <div class="col-12 col-lg-6">
                                                {{-- <div class="form-group"> --}}
                                                <input type="text" class="form-control" name="tel" placeholder="{{ __('frontend::text.contact_form.tel_placeholder') }}" required>
                                                {{-- </div> --}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <input type="text" class="form-control" name="subject" placeholder="{{ __('frontend::text.contact_form.subject_placeholder') }}" required>
                                    </div>
                                    <div class="form-group">
                                        <textarea class="form-control" name="msg" rows="5" placeholder="{{ __('frontend::text.contact_form.msg_placeholder') }}" required></textarea>
                                    </div>

                                    <div class="form-group">
                                        <label class="privacy-checkbox">
                                            <input type="checkbox" id="privacy" name="privacy" required>
                                            <span> {{ __('frontend::text.contact_form.privacy_policy') }} <a href="{{ $page_init['pdpa']['url'] ?? '#' }}">{{ __('frontend::text.contact_form.privacy_policy_link') }}</a></span>
                                        </label>
                                    </div>

                                    <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-send">{{ __('frontend::text.contact_form.submit') }}</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

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

        function sendContact(form) {
            console.log(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 name = formData.get('name')?.trim();
            const email = formData.get('email')?.trim();
            const tel = formData.get('tel')?.trim();
            const subject = formData.get('subject')?.trim();
            const msg = formData.get('msg')?.trim();
            const privacyAccepted = form.querySelector('#privacy')?.checked ?? false;

            const errorMap = [];

            if (!name) {
                errorMap.push({
                    input: form.querySelector('[name="name"]'),
                    message: '{{ __('frontend::text.contact_form.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') }}'
                });
            } else if (!/^[0-9]+$/.test(tel)) {
                errorMap.push({
                    input: form.querySelector('[name="tel"]'),
                    message: '{{ __('frontend::text.contact_form.tel_digits_only') }}'
                });
            }

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

            if (!msg) {
                errorMap.push({
                    input: form.querySelector('[name="msg"]'),
                    message: '{{ __('frontend::text.contact_form.msg_placeholder') }}'
                });
            } else if (msg.length > 255) {
                errorMap.push({
                    input: form.querySelector('[name="msg"]'),
                    message: '{{ __('frontend::text.contact_form.msg_max_length') }}'
                });
            }

            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