@extends('layouts.app')

@section('styles')
<style>
    .spinner {
        display: none; /* Masque le spinner par défaut */
    }
</style>
@endsection


@section('content')
<!-- Start Bradcaump area -->
<div class="ht__bradcaump__area" style="background: rgba(0, 0, 0, 0) url({{ asset('assets/images/bg/2.jpg') }}) no-repeat scroll center center / cover ;">
    <div class="ht__bradcaump__wrap">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="bradcaump__inner text-center">
                        <h2 class="bradcaump-title">{{ __('contact.contact_us') }}</h2>
                        <nav class="bradcaump-inner">
                            <a class="breadcrumb-item" href="{{ url('/') }}">{{ __('contact.home') }}</a>
                            <span class="brd-separetor">/</span>
                            <span class="breadcrumb-item active">{{ __('contact.contact_us') }}</span>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Bradcaump area -->

<!-- Start Contact Area -->
<section class="htc__contact__area ptb--120 bg__white">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
                <div class="htc__contact__container">
                    <div class="htc__contact__address">
                        <h2 class="contact__title">{{ __('contact.contact_info') }}</h2>

                        <div class="contact__address__inner">
                            <!-- Start Single Adress -->
                            <div class="single__contact__address">
                                <div class="contact__icon">
                                    <span class="ti-location-pin"></span>
                                </div>
                                <div class="contact__details">
                                    <p>{{ __('contact.location') }} <br> {{ config('vgd.address') }}</p>
                                </div>
                            </div>
                            <!-- End Single Adress -->
                        </div>
                        <div class="contact__address__inner">
                            <!-- Start Single Adress -->
                            <div class="single__contact__address">
                                <div class="contact__icon">
                                    <span class="ti-mobile"></span>
                                </div>
                                <div class="contact__details">
                                    <p>{{ __('contact.phone') }} <br><a href="tel:{{ config('vgd.phone_href') }}">{{ config('vgd.phone') }}</a></p>
                                </div>
                            </div>
                            <!-- End Single Adress -->
                            <!-- Start Single Adress -->
                            <!-- <div class="single__contact__address">
                                <div class="contact__icon">
                                    <span class="ti-email"></span>
                                </div>
                                <div class="contact__details">
                                    <p>{{ __('contact.mail') }}<br>
                                        <x-site.obfuscated-email :fallback="url()->current().'#contact-form'" />
                                    </p>
                                </div>
                            </div> -->
                            <!-- End Single Adress -->
                        </div>
                    </div>
                    <div class="contact-form-wrap">
                        <div class="contact-title">
                            <h2 class="contact__title">{{ __('contact.get_in_touch') }}</h2>
                        </div>
                        <!-- form messages -->
                        @if(session('success'))
                        <div class="alert alert-success">{{ session('success') }}</div>
                        @endif

                        @if(session('error'))
                        <div class="alert alert-danger">{{ session('error') }}</div>
                        @endif

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

                        <form id="contact-form" action="{{ route('contact.submit') }}" method="post" novalidate>
                            @csrf
                            <input type="hidden" name="recaptcha_token" id="recaptcha_token">
                            <div class="single-contact-form">
                                <div class="contact-box name">
                                    <input type="text" name="firstname" placeholder="{{ __('contact.your_firstname') }}" value="{{ old('firstname') }}" required>
                                    <input type="text" name="lastname" placeholder="{{ __('contact.your_lastname') }}" value="{{ old('lastname') }}" required>
                                    
                                </div>
                            </div>
                            <div class="single-contact-form">
                                <div class="contact-box subject">
                                    <input type="email" name="email" placeholder="{{ __('contact.your_email') }}" value="{{ old('email') }}" required>
                                </div>
                            </div>
                            <!-- <div class="single-contact-form">
                                <div class="contact-box subject">
                                    <input type="text" name="subject" placeholder="{{ __('contact.subject') }}" required>
                                </div>
                            </div> -->
                            <div class="single-contact-form">
                                <div class="contact-box message">
                                    <textarea name="message" placeholder="{{ __('contact.message') }}" required>{{ old('message') }}</textarea>
                                </div>
                            </div>
                            <div class="contact-btn">
                                <button type="submit" id="submitButton" class="fv-btn"><span class="btn-text">{{ __('contact.send') }}</span> 
                                    <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                                    <!-- <span class="spinner-border spinner-border-sm spinner" role="status" aria-hidden="true"></span> -->
                                </button>
                            </div>
                        </form>
                    </div>
                    <div class="form-output">
                        <p class="form-messege"></p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 smt-30 xmt-30">
                <div class="map-contacts">
                    <div id="googleMap">
                        <iframe src="{{ config('vgd.map_embed') }}" style="border:0;width:100%;height:100%;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End Contact Area -->
@endsection

@section('scripts')
<script src="https://www.google.com/recaptcha/api.js?render={{ config('services.recaptcha.site_key') }}"></script>
<script>
document.getElementById('contact-form').addEventListener('submit', function(e) {
    e.preventDefault();

    var form = this;
    var btn = document.getElementById('submitButton');
    var spinner = btn.querySelector('.spinner-border');
    var btnText = btn.querySelector('.btn-text');
    var siteKey = @json(config('services.recaptcha.site_key'));

    if (btn.disabled) {
        return;
    }

    spinner.classList.remove('d-none');
    btnText.textContent = '{{ __('contact.sending') }}';
    btn.disabled = true;

    var resetButton = function() {
        spinner.classList.add('d-none');
        btnText.textContent = '{{ __('contact.send') }}';
        btn.disabled = false;
    };

    if (typeof grecaptcha === 'undefined') {
        resetButton();
        alert(@json(__('contact.recaptcha_failed')));
        return;
    }

    grecaptcha.ready(function() {
        grecaptcha.execute(siteKey, { action: 'contact' })
            .then(function(token) {
                document.getElementById('recaptcha_token').value = token;
                form.submit();
            })
            .catch(function() {
                resetButton();
                alert(@json(__('contact.recaptcha_failed')));
            });
    });
});
</script>
@endsection