{{-- <div> --}}
<div class="p-5 w-full  lg:w-1/2">
    <div class="form-wrapper line-form bg-white p-6 rounded-xl shadow-lg">
        <form wire:submit.prevent="save">
            <div class="row">
                <div class="col-lg-12">
                    <div class="row mb-3 mx-0">
                        <label>@lang('frontend::lang.contact.name')</label>
                        <input class="form-style font-weight-semibold px-1 py-3" id="name" name="name" type="text" placeholder="* @lang('frontend::lang.contact.name')" wire:model="name" />
                        @error('name')
                            <span class="text-red-500 text-sm !flex-row c !justify-start">@lang('frontend::lang.contact.name_placeholder')</span>
                        @enderror
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="row mx-0 mb-3">
                        <label>@lang('frontend::lang.contact.email')</label><input class="form-style font-weight-semibold px-1 py-3" name="email" type="email" placeholder="* @lang('frontend::lang.contact.email')" i wire:model="email" />
                        @error('email')
                            <span class="text-red-500 text-sm !flex-row c !justify-start">@lang('frontend::lang.contact.email_placeholder')</span>
                        @enderror
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="row mb-3 mx-0">
                        <label>@lang('frontend::lang.contact.tel')</label>
                        <input class="form-style font-weight-semibold px-1 py-3" id="tel" name="tel" type="text" placeholder="* @lang('frontend::lang.contact.tel')" wire:model="tel" />
                        @error('tel')
                            <span class="text-red-500 text-sm !flex-row c !justify-start">@lang('frontend::lang.contact.tel_placeholder')</span>
                        @enderror
                    </div>
                </div>
                <div class="col-12">
                    <div class="row mx-0 mb-3">
                        <div class="form-group -mx-2 col">
                            <label>@lang('frontend::lang.contact.subject')</label>
                            <input class="form-style font-weight-semibold px-1 py-3" type="text" placeholder="* @lang('frontend::lang.contact.subject')" wire:model="subject" />
                            @error('subject')
                                <span class="text-red-500 text-sm !flex-row c !justify-starts">
                                    @lang('frontend::lang.contact.subject_placeholder') </span>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="row mx-0 mb-3">
                        <label>@lang('frontend::lang.contact.msg')</label>
                        <textarea class="form-style form-style font-weight-semibold text-color-light px-1" id="message" name="message" rows="4" placeholder="* @lang('frontend::lang.contact.msg')" wire:model="msg"></textarea>
                        @error('msg')
                            <span class="text-red-500 text-sm !flex-row c !justify-start">@lang('frontend::lang.contact.message_placeholder')</span>
                        @enderror
                    </div>
                </div>
                <div class="col-12 pt-6 flex form-wrapper">
                    <div class="w-full flex mb-6 form-style basic-check-radio border-none">
                        <label class="static space-x-1 leading-6 ml-2" for="policy">
                            @lang('frontend::lang.contact.privacy_policy')
                            <a href="{{ $page_init['policy']['url'] ?? '' }}"><u>{!! $page_init['policy']['name'] ?? '' !!}</u></a>
                        </label>
                        <input class="bg-transparent mt-[6px]" id="policy" type="checkbox" wire:model="accept">
                    </div>
                </div>
                @error('accept')
                    <div class="col-12">
                        <div class="row mx-0 mb-3">
                            <span class="text-red-500 text-sm !flex-row c !justify-start">@lang('frontend::lang.contact.accept_placeholder')</span>
                        </div>
                    </div>
                @enderror
                <div class="w-full">
                    <div class="w-full" id="captcha" wire:ignore>
                    </div>
                    <input id="recaptcha" name="recaptcha" type="hidden" value="{{ $page_init['setting']['recapcha'] ?? '' }}">
                </div>
                <div class="item-center col-12 flex form-wrapper ">
                    <div class="p-6 w-full flex justify-center lg:w-full">
                        <button class="butn-loadm butn-w-2h  {{ $captcha ? '' : 'disabled' }}" type="submit">@lang('frontend::lang.contact.submit_message')</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
{{-- </div> --}}


<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<x-livewire-alert::scripts />
<script src="https://www.google.com/recaptcha/api.js?onload=handle&render=explicit" async defer></script>
<script>
    var handle = function(e) {
        widget = grecaptcha.render('captcha', {
            'sitekey': document.getElementById("recaptcha").value,
            'theme': 'light', // you could switch between dark and light mode.
            'callback': verify
        });
    }
    var verify = function(response) {
        @this.set('captcha', response)
    }

    document.addEventListener('click', function(e) {
        if (e.target && e.target.classList.contains('swal2-confirm')) {
            window.location.reload();
            if (typeof widget !== 'undefined') {
                grecaptcha.reset(widget);
            }
        }
    });
</script>