@extends('layouts.previews.mercure')

@php
    use App\Enums\InquiryContentRequireType;
    use App\Enums\MultiLangMode;

    $formContact = [];
    if (!empty($elements)) {
        $formContact = dataContactPage($elements[0], $lang);
    }
@endphp

@section('content')
    <script>
        const contactData = {!! json_encode($formContact) !!};
        const routeSendContact = "{!! route('preview.sendMailContactRecaptchaV2', $project->id) !!}"
        const domainPublish = {!! json_encode($domainPublish ?? '') !!}
    </script>
    <div class="page-contact page-header-white" id="page-contact">
        <div class="container-custom flex between-justify">
            <div class="main-content">
                <div class="txt-heading-24" data-i18n="contact_page.title"></div>
                <form class="contact-form" id="contact-form"></form>
                <div class="success-screen hide" id="success-screen">
                    <div class="success-screen__heading pc" data-i18n="contact_page.success_screen.title"></div>
                    <div class="success-screen__des" data-i18n="contact_page.success_screen.content">
                    </div>
                </div>
                <button class="btn-submit-contact flex center-align center-justify" id="btn-next-step"
                    data-i18n="contact_page.btn_confirm"></button>
                <button class="btn-submit-contact flex center-align center-justify hide" id="btn-next-step2">
                    <i class="fa fa-refresh fa-spin hide icon" style="margin-right: 1.2rem"></i>
                    <span data-i18n="contact_page.btn_send"></span>
                </button>
                <a class="btn-submit-contact flex center-align center-justify hide" href="{!! setUrl($project->id, $domainPublish ?? false, $lang) !!}"
                    id="btn-sucess" data-i18n="contact_page.btn_redirect_top"></a>
                @if ($lang == MultiLangMode::DEFAULT)
                    <div style="margin: 1.2rem auto 0 auto; color:#E00123; font-size: 1.2rem; width:fit-content"
                        id="error-screen" class="hide">reCAPTCHA の認証に失敗しました。</div>
                @endif
                @if ($lang == MultiLangMode::ENGLISH)
                    <div style="margin: 1.2rem auto 0 auto; color:#E00123; font-size: 1.2rem; width:fit-content"
                        id="error-screen" class="hide">reCAPTCHA verification failed.</div>
                @endif
                @if ($lang == MultiLangMode::CHINESE_SIMPLIFIED)
                    <div style="margin: 1.2rem auto 0 auto; color:#E00123; font-size: 1.2rem; width:fit-content"
                        id="error-screen" class="hide">reCAPTCHA 验证失败。</div>
                @endif
                @if ($lang == MultiLangMode::CHINESE_TRADITIONAL)
                    <div style="margin: 1.2rem auto 0 auto; color:#E00123; font-size: 1.2rem; width:fit-content"
                        id="error-screen" class="hide">reCAPTCHA 驗證失敗。</div>
                @endif
                @if ($lang == MultiLangMode::KOREAN)
                    <div style="margin: 1.2rem auto 0 auto; color:#E00123; font-size: 1.2rem; width:fit-content"
                        id="error-screen" class="hide">reCAPTCHA 인증에 실패했습니다。</div>
                @endif
            </div>
            @include('preview.mercure.commons.navbar')
        </div>
    </div>
@endsection

@section('script_recaptcha')
    <script
        src="https://www.google.com/recaptcha/enterprise.js?render={{ env('RECAPTCHA_SITE_KEY') }}&hl={!! \App\Enums\MultiLangMode::getLangHtml($lang) !!}">
    </script>
@endsection