@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<form action="{{ Path::AppUrl('/save-contact-us') }}" method="POST" class="contact-form d-grid gap-3">
    @csrf
    <div>
        <input type="text" name="name" class="form-control rounded-3" placeholder="{{ __('website.name') }}" required />
    </div>

    <div>
        <input type="email" name="email" class="form-control rounded-3" placeholder="{{ __('website.email') }}" />
    </div>

    <div>
        <input type="tel" name="phone" class="form-control rounded-3" placeholder="{{ __('website.phone') }}"
            required />
    </div>

    <div>
        <textarea name="message" class="form-control rounded-3" rows="6"
            placeholder="{{ __('website.message') }}"></textarea>
    </div>
    @if (config('services.recaptcha.sitekey') && config('services.recaptcha.sitekey') !== 'Key')
        <div class="g-recaptcha" data-sitekey="{{ config('services.recaptcha.sitekey') }}"></div>
    @endif
    @error('recaptcha_token')
        <span class="text-danger">{{ $message }}</span>
    @enderror
    <button type="submit" class="btn-send px-4 py-3 rounded-3 mt-3 fw-semibold">
        <span class="btn-content">{{ __('website.send') }}
            <span><i class="fas fa-paper-plane ms-2"></i></span>
        </span>
    </button>
</form>
<!-- /.form-one -->
<!-- <======================= EndContactForm =========================> -->
@if (config('services.recaptcha.sitekey') && config('services.recaptcha.sitekey') !== 'Key')
    <script src="https://www.google.com/recaptcha/api.js?render={{ config('services.recaptcha.sitekey') }}"></script>
    <script>
        grecaptcha.ready(function () {
            // Generate token when form is loaded
            grecaptcha.execute('{{ config('services.recaptcha.sitekey') }}', {
                action: 'contact'
            }).then(function (token) {
                var tokenInput = document.getElementById('recaptcha_token');
                if (tokenInput) {
                    tokenInput.value = token;
                }
            }).catch(function (error) {
                console.warn('reCAPTCHA error:', error);
            });
        });
    </script>
@endif