@extends('layouts.app')
@section('title', 'Contact Us - ')
@section('description', 'Have questions or need assistance? Reach out to us - we\'re here to help!')
@section('content')
<div id="contact-us">
    <div id="contact-us-banner" class="container-fluid px-lg-0 px-4">
        <div class="custom-container contact-us-container">
            <div class="row align-items-center mx-0">
                <div class="col-md-6 col-12 mt-md-0 mt-4 pb-md-0 pb-4">
                    <span class="banner-title montserrat-bold text-green">Contact Us</span>
                </div>
            </div>        
        </div> 
    </div>
    <div class="container-fluid px-lg-0 px-4">
        <div class="custom-container">
            <div class="row justify-content-start mx-0">
                <div class="col-xxl-8 col-xl-9 col-lg-10 col-12 my-lg-0 my-4 text-start col-12 my-lg-0 my-4 text-start">
                    <span class="main-paragraph">Reach out to us with any questions or for support - <span class="montserrat-bold text-green">we're here to help!</span></span>
                    <form action="{{ route('contact-us-form')}}" class="my-5" method="POST">
                        @csrf
                        <div class="mb-3 row">
                            <div class="col-md-6 col-12 mb-md-0 mb-3">
                                <label for="first_name" class="col-md-4 main-paragraph montserrat-bold text-grey mb-2 required-label">First Name</label>
                                <div class="col-12">
                                    <input id="first_name" type="text" class="form-control @error('first_name') is-invalid @enderror" name="first_name" value="{{ old('first_name') }}"/>
                                    @error('first_name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div><!-- First Name -->
                            <div class="col-md-6 col-12">
                                <label for="last_name" class="col-md-4 main-paragraph montserrat-bold text-grey mb-2">Last Name</label>
                                <div class="col-12">
                                    <input id="last_name" type="text" class="form-control @error('last_name') is-invalid @enderror" name="last_name" value="{{ old('last_name') }}"/>
                                    @error('last_name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div><!-- Last Name -->
                        </div>
                        <div class="mb-3 row">
                            <div class="col-12">
                                <label for="email" class="col-md-4 main-paragraph montserrat-bold text-grey mb-2 required-label">Email</label>
                                <div class="col-12">
                                    <input id="email" type="text" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}"/>
                                    @error('email')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                        </div><!-- Email -->
                        <div class="mb-3 row">
                            <div class="col-12">
                                <label for="topic" class="col-md-4 main-paragraph montserrat-bold text-grey mb-2 required-label">Topic</label>
                                <div class="col-12">
                                    <input id="topic" type="text" class="form-control @error('topic') is-invalid @enderror" name="topic" value="{{ old('topic') }}"/>
                                    @error('topic')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                        </div><!-- Topic -->
                        <div class="mb-3 row">
                            <div class="col-12">
                                <label for="message" class="col-md-4 main-paragraph montserrat-bold text-grey mb-2 required-label">Message</label>
                                <div class="col-12">
                                    <textarea id="message" type="text" class="form-control @error('message') is-invalid @enderror" name="message" rows="3">{{ old('message') }}</textarea>
                                    @error('message')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                               <!--  This site is protected by reCAPTCHA and the Google
                                <a href="https://policies.google.com/privacy" target="_blank">Privacy Policy</a> and
                                <a href="https://policies.google.com/terms" target="_blank">Terms of Service</a> apply. -->
                            </div>
                        </div><!-- Message -->
                        <!-- Google reCAPTCHA widget -->
                        <div id="recaptcha_container" class="g-recaptcha" data-sitekey="{{ config('app.google_recaptcha_site_key') }}"></div>

                        @error('g-recaptcha-response')
                            <span id="recaptcha_error" class="invalid-feedback d-block" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror

                        <button type="submit" class="button mt-4">
                            <span class="text">Submit</span>
                            <div class="span-wrapper">
                                <span class="s1"></span>
                                <span class="s2"></span>
                                <span class="s3"></span>
                            </div>
                        </button>
                    </form>
                </div>
            </div>
        </div>   
    </div>
</div>
@endsection
@push('js')
    <!-- reCAPTCHA JS -->
    <script src="https://www.google.com/recaptcha/api.js?onload=recaptchaOnloadCallback&render=explicit" async defer></script>

    <script>
        function recaptchaOnloadCallback() {
            const recaptcha_error = document.getElementById('recaptcha_error');

            // This callback is executed when user checks the reCAPTCHA box
            window.onRecaptchaSuccess = function () {
                if (recaptcha_error) {
                    recaptcha_error.remove(); // Completely remove from DOM
                }
            };

            // Render explicitly if needed (recommended way for better handling)
            if (typeof grecaptcha !== 'undefined') {
                grecaptcha.render('recaptcha_container', {
                    'sitekey': document.getElementById('recaptcha_container').dataset.sitekey,
                    'callback': onRecaptchaSuccess,
                });
            }
        };
    </script>
    
    @if(session('success') || session('error'))
        <script type="module">
            Swal.fire({
                title: "{{ session('success') ? 'Thank You!' : 'Oops!' }}",
                text: "{{ session('success') ?? session('error') }}",
                icon: "{{ session('success') ? 'success' : 'error' }}",
                confirmButtonColor: "{{ session('success') ? '#00B8B3' : '#DC3741' }}",
                confirmButtonText: 'OK'
            });
        </script>
    @endif
@endpush