@extends('layouts.main')
@section('seo')
    <meta name="description" content="">
    <title>{{   __('app.contact_us') . " - " . config('app.name', 'Laravel') }}</title>
@endsection

@section('extraCss')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
@endsection
@section('content')

<div class="page-content pt-30">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h2 class="mb-10">{{ __('app.contact_us') }}</h2>
                <p class="text-muted mb-30 font-sm">{{ __('app.contact_intro') }}</p>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-12 col-lg-12 m-auto">
                <section class="mb-50">
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-lg-8 col-xl-8">
                            <div class="contact-from-area padding-20-row-col">
                                <form class="contact-form-style mt-30" id="contact-form" action="{{ route('sent') }}" method="post">
                                    @csrf
                                    <div class="row">
                                        <div class="col-lg-6 col-md-6">
                                            <div class="input-style mb-20">
                                                <input name="name" placeholder="{{ __('app.first_name') }} *" type="text" value="{{ old('name') }}" />
                                                @if ($errors->has('name'))
                                                <span class="text-danger">{{ $errors->first('name') }}</span>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-md-6">
                                            <div class="input-style mb-20">
                                                <input name="email" placeholder="{{ __('app.your_email') }} *" type="text" value="{{ old('email') }}" />
                                                @if ($errors->has('email'))
                                                <span class="text-danger">{{ $errors->first('email') }}</span>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-md-6">
                                            <div class="input-style mb-20">
                                                <input name="telephone" placeholder="{{ __('app.your_phone') }}" type="text" value="{{ old('telephone') }}" />
                                                @if ($errors->has('phone'))
                                                <span class="text-danger">{{ $errors->first('phone') }}</span>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-md-6">
                                            <div class="input-style mb-20">
                                                <input name="subject" placeholder="{{ __('app.subject') }} *" type="text" value="{{ old('subject') }}" />
                                                @if ($errors->has('subject'))
                                                <span class="text-danger">{{ $errors->first('subject') }}</span>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-lg-12 col-md-12">
                                            <div class="textarea-style mb-30">
                                                <textarea name="message" placeholder="{{ __('app.message') }} *">{{ old('message') }}</textarea>
                                                @if ($errors->has('message'))
                                                <span class="text-danger">{{ $errors->first('message') }}</span>
                                                @endif
                                                @if ($errors->has('g-recaptcha-response'))
                                                <span class="text-danger">{{ $errors->first('g-recaptcha-response') }}</span>
                                                @endif
                                            </div>
                                            <button class="submit submit-auto-width" type="submit">{{ __('app.send_message') }}</button>
                                        </div>
                                    </div>
                                </form>
                                <p class="form-message"></p>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-lg-4 col-xl-4 contact-info-map-area">
                            <div class="contact-info-area">
                                <h4 class="mb-15">{{ config('shop.company_name') }}</h4>
                                {{ config('shop.company_address') }}<br />
                                <span title="{{ __('app.phone') }}">{{ __('app.phone') }}:</span> {{ config('shop.company_phone') }}<br />
                                <span title="{{ __('app.fax') }}">{{ __('app.fax') }}:</span> {{ config('shop.company_fax') }}<br />
                                <span title="{{ __('app.email') }}">{{ __('app.email') }}:</span> {{ config('shop.company_email') }}<br />
                            </div>
                            <div class="contact-map-area">
                                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2849.523361903191!2d26.084450677501593!3d44.42242560233959!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b1ff7970168807%3A0xdf6dab6980b65e1c!2sEditura%20Academiei%20Rom%C3%A2ne!5e0!3m2!1sen!2sro!4v1724958772427!5m2!1sen!2sro" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>
<!-- End of Main -->
@endsection
@section('extraJs')
<script src="/assets/js/plugins/leaflet.js"></script>
<script src="https://www.google.com/recaptcha/api.js?render={{ env('GOOGLE_RECAPTCHA_KEY') }}"></script>
<script type="text/javascript">
    $('#contact-form').submit(function(event) {
        event.preventDefault();

        grecaptcha.ready(function() {
            grecaptcha.execute("{{ env('GOOGLE_RECAPTCHA_KEY') }}", {
                action: 'subscribe_newsletter'
            }).then(function(token) {
                $('#contact-form').prepend('<input type="hidden" name="g-recaptcha-response" value="' + token + '">');
                $('#contact-form').unbind('submit').submit();
            });;
        });
    });
</script>
@endsection