{{-- <div> --}}
    <div class="col-lg-6">
        <div class="bg-white p-4 p-md-5 rounded-4 shadow-sm h-100">
            <h4 class="fw-bold mb-4">@lang('frontend::text.contact.send_message_note')</h4>
            <form wire:submit.prevent="save">
                <div class="mb-4">
                    <label class="form-label fw-medium text-secondary small">@lang('frontend::text.field.name')<span class="text-danger">*</span></label>
                    <input type="text" class="form-control bg-light border-0 py-2" placeholder=""  wire:model="name">
                    @error('name')
                        <span class="text-danger d-block"> @lang('frontend::text.validation.name_required') </span>
                    @enderror
                </div>
                <div class="mb-4">
                    <label class="form-label fw-medium text-secondary small">@lang('frontend::text.field.company')<span class="text-danger">*</span></label>
                    <input type="text" class="form-control bg-light border-0 py-2" placeholder=""  wire:model="company">
                    @error('company')
                        <span class="text-danger d-block"> @lang('frontend::text.validation.company_required') </span>
                    @enderror
                </div>
                <div class="row g-0">
                    <div class="col-md-6 mb-4">
                        <label class="form-label fw-medium text-secondary small">@lang('frontend::text.field.email') <span class="text-danger">*</span></label>
                        <input type="email" class="form-control bg-light border-0 py-2" placeholder=""  wire:model="email">
                        @error('email')
                            <span class="text-danger d-block"> @lang('frontend::text.validation.email_required') </span>
                        @enderror
                    </div>
                    <div class="col-md-6 mb-4">
                        <label class="form-label fw-medium text-secondary small">@lang('frontend::text.field.tel')<span class="text-danger">*</span></label>
                        <input type="text" class="form-control bg-light border-0 py-2" placeholder=""  wire:model="tel">
                        @error('tel')
                            <span class="text-danger d-block"> @lang('frontend::text.validation.tel_required') </span>
                        @enderror
                    </div>
                </div>
                
                <div class="mb-4">
                    <label class="form-label fw-medium text-secondary small">@lang('frontend::text.field.detail') <span class="text-danger">*</span></label>
                    <textarea class="form-control bg-light border-0" rows="4" placeholder="" wire:model="msg"></textarea>
                    @error('msg')
                        <span class="text-danger d-block"> @lang('frontend::text.validation.detail_required') </span>
                    @enderror
                </div>
                <div class="form-check mb-4">
                    <input class="form-check-input" type="checkbox" id="privacy" wire:model="accept">
                    <label class="form-check-label text-muted small pt-1" for="privacy">
                        @lang('frontend::text.field.agree_and_accept') <a class="text-decoration-none ms-1" href="{{ $page_init['policy']['url'] ?? '' }}" target="_blank">{{ $page_init['policy']['name'] ?? '' }}</a>
                    </label>
                    @error('accept')
                        <span class="text-danger d-block"> @lang('frontend::text.validation.accept_required') </span>
                    @enderror
                </div>

                <!-- reCAPTCHA PLACEHOLDER -->
                <div class="mb-4">
                    <div class="form-group" wire:ignore>
                        <div id="captcha"></div>
                        <input type="hidden" id="recaptcha_key" value="{{ $page_init['setting']['recapcha'] ?? '' }}">
                        @error('captcha')
                            <span class="text-danger d-block"> @lang('frontend::text.validation.captcha_required') </span>
                        @enderror
                    </div>
                </div>
                <button type="submit" class="btn btn-icn w-100 {{ $captcha ? '' : 'disabled' }}" id="submitButton">
                    @lang('frontend::text.btn.send_message')<i class="fas fa-paper-plane"></i>
                </button>
            </form>
        </div>
    </div>
{{-- </div> --}}

@push('scripts')
    <script>
        var widget = null;

        var handle = function(e) {
            var sitekey = document.getElementById("recaptcha_key").value;
            if (sitekey && document.getElementById('captcha')) {
                widget = grecaptcha.render('captcha', {
                    'sitekey': sitekey,
                    'theme': 'light',
                    'callback': verify
                });
            }
        }

        var verify = function(response) {
            @this.set('captcha', response);
            if (document.getElementById('submitButton')) {
                document.getElementById('submitButton').disabled = false;
            }
        }

        // Reset reCAPTCHA when Livewire updates
        document.addEventListener('livewire:navigated', function() {
            if (typeof grecaptcha !== 'undefined' && widget !== null) {
                grecaptcha.reset(widget);
                if (document.getElementById('submitButton')) {
                    document.getElementById('submitButton').disabled = true;
                }
            }
        });

        document.addEventListener('livewire:updated', function() {
            if (typeof grecaptcha !== 'undefined' && widget !== null) {
                grecaptcha.reset(widget);
                if (document.getElementById('submitButton')) {
                    document.getElementById('submitButton').disabled = true;
                }
            }
        });

        document.addEventListener('click', function(e) {
            if (e.target && e.target.classList.contains('swal2-confirm')) {
                window.location.reload();
            }
        });
    </script>
    <script src="https://www.google.com/recaptcha/api.js?onload=handle&render=explicit" async defer></script>
@endpush