@extends('eventmie::layouts.app')

@section('title')
    @lang('eventmie-pro::em.contact')
@endsection
@section('meta_title') @lang('eventmie-pro::em.contact') @endsection
@section('meta_description', setting('site.site_name') ? setting('site.site_name') : config('app.name'))
@section('meta_url', url()->current())

@section('content')

    <main>
        <!--News-->
        <section>
            <div class="pb-lg-12 pb-7">
                <div class="container">

                    <div class="row justify-content-center mt-8">
                        <div class="col-lg-8 col-md-12 col-12">
                            <div>
                                @if (\Session::has('msg'))
                                    <div class="alert alert-success">
                                        {{ \Session::get('msg') }}
                                    </div>
                                @endif
                                <!-- form -->
                                <form class="row needs-validation" novalidate="" method="POST"
                                    action="{{ route('eventmie.store_contact') }}">
                                    @csrf
                                    @honeypot
                                    <!-- first name -->
                                    <div class="mb-3 col-md-6">
                                        <label for="fname" class="form-label">@lang('eventmie-pro::em.name') <span
                                                class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="name"
                                            placeholder="@lang('eventmie-pro::em.name')" required="">
                                        <div class="invalid-feedback">
                                            @if ($errors->has('name'))
                                                <div class="alert alert-danger">{{ $errors->first('name') }}</div>
                                            @endif
                                        </div>
                                    </div>

                                    <!-- email -->
                                    <div class="mb-3 col-md-6">
                                        <label for="lname" class="form-label">@lang('eventmie-pro::em.email') <span
                                                class="text-danger">*</span></label>
                                        <input type="email" name="email" class="form-control" id="lname"
                                            placeholder="@lang('eventmie-pro::em.email')" required="">
                                        <div class="invalid-feedback">
                                            @if ($errors->has('email'))
                                                <div class="alert alert-danger">{{ $errors->first('email') }}</div>
                                            @endif
                                        </div>
                                    </div>

                                    <!-- title -->
                                    <div class="mb-3 col-md-12">
                                        <label for="title" class="form-label">@lang('eventmie-pro::em.title') <span
                                                class="text-danger">*</span></label>
                                        <input type="text" name="title" class="form-control"
                                            placeholder="@lang('eventmie-pro::em.title')" required="">
                                        <div class="invalid-feedback">
                                            @if ($errors->has('title'))
                                                <div class="alert alert-danger">{{ $errors->first('title') }}</div>
                                            @endif
                                        </div>
                                    </div>
                                    <!-- message -->
                                    <div class="mb-3 col-md-12">
                                        <label for="message" class="form-label">Message</label>
                                        <textarea class="form-control " rows="3" name="message" placeholder="@lang('eventmie-pro::em.message')" id="message"
                                            required=""></textarea>
                                        @if ($errors->has('message'))
                                            <div class="alert alert-danger">{{ $errors->first('message') }}</div>
                                        @endif
                                    </div>

                                    <!-- reCAPTCHA -->
                                    @if (!empty(setting('recaptcha.site_key')) || !empty(setting('recaptcha.api_site_key')))
                                        <div class="col-12 p-2">
                                            <div class="g-recaptcha" data-sitekey="{{ setting('recaptcha.site_key') ?: setting('recaptcha.api_site_key') }}" data-callback="onContactRecaptchaCallback"></div>

                                            @error('g-recaptcha-response')
                                                <span class="text-danger d-block mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    @endif

                                    <!-- button -->
                                    <div class="col-md-12">
                                        <button class="btn btn-primary" type="submit" value="contact-form" id="contact-submit">
                                            <span><i class="fas fa-paper-plane"></i></span> @lang('eventmie-pro::em.send_message')</button>

                                    </div>
                                </form>
                            </div>
                            <div>

                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-12">
                <div class="innerpage-section g-map-wrapper">
                    <div class="lgxmapcanvas map-canvas-default">
                        <div id="contact_map" style="height: 500px;"></div>
                    </div>
                </div>
            </div>
        </section>

    </main>



@endsection

@section('javascript')
    <script src="https://maps.googleapis.com/maps/api/js?key={{ setting('apps.google_map_key') }}&callback=initMap&v=weekly&libraries=marker&loading=async" defer></script>
    <script>
        function initMap() {
            const myLatLng = {
                lat: {{ setting('contact.google_map_lat') }},
                lng: {{ setting('contact.google_map_long') }}
            };
            const map = new google.maps.Map(document.getElementById("contact_map"), {
                zoom: 18,
                center: myLatLng,
                mapId: {!!  json_encode(setting('apps.google_map_key')) !!},
            });

            new google.maps.marker.AdvancedMarkerElement({
                position: myLatLng,
                map,
                title: {!! setting('site.site_name') ? json_encode(setting('site.site_name')) : json_encode(config('app.name')) !!},
            });
        }
        window.initMap = initMap;

        // Ensure reCAPTCHA script is loaded
        @if (!empty(setting('recaptcha.site_key')) || !empty(setting('recaptcha.api_site_key')))
        if (typeof grecaptcha === 'undefined') {
            var script = document.createElement('script');
            script.src = 'https://www.google.com/recaptcha/api.js?render=explicit';
            script.async = true;
            script.defer = true;
            document.head.appendChild(script);
        }

        // Client-side validation for reCAPTCHA
        document.addEventListener('DOMContentLoaded', function() {
            var form = document.querySelector('form[action="{{ route("eventmie.store_contact") }}"]');
            var submitButton = document.getElementById('contact-submit');
            
            if (form && submitButton) {
                form.addEventListener('submit', function(e) {
                    var recaptchaResponse = form.querySelector('[name="g-recaptcha-response"]');
                    
                    if (!recaptchaResponse || !recaptchaResponse.value) {
                        e.preventDefault();
                        alert('Please complete the reCAPTCHA verification.');
                        return false;
                    }
                });
            }
        });

        // Callback function for reCAPTCHA
        function onContactRecaptchaCallback(token) {
            // reCAPTCHA completed successfully
            console.log('reCAPTCHA verified');
        }
        @endif
    </script>
@stop