@extends($activeTemplate.'layouts.frontend')
@section('content')
@php
    $contact = getContent('contact_us.content', true);
@endphp
<section class="pt-100 pb-100">
    <div class="container">
        <div class="row gy-4 justify-content-center">
            <div class="col-lg-4 col-md-6">
                <div class="contact-item">
                    <div class="contact-item__icon">
                        <i class="las la-map-marked-alt"></i>
                    </div>
                    <div class="contact-item__content">
                        <h5 class="mb-2">@lang('Office Address')</h5>
                        <p>{{@$contact->data_values->address}}</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="contact-item">
                    <div class="contact-item__icon">
                        <i class="las la-phone-volume"></i>
                    </div>
                    <div class="contact-item__content">
                        <h5 class="mb-2">@lang('Phone Number')</h5>
                        <p><a href="tel:{{__(@$contact->data_values->mobile)}}">{{@$contact->data_values->mobile}}</a></p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="contact-item">
                    <div class="contact-item__icon">
                        <i class="las la-envelope"></i>
                    </div>
                    <div class="contact-item__content">
                        <h5 class="mb-2">@lang('Email Address')</h5>
                        <p><a href="mailto:{{__(@$contact->data_values->email)}}">{{@$contact->data_values->email}}</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row gy-4 mt-5">
            <div class="col-lg-6 pe-lg-4">
                <div class="contact-form-area">
                    <h3 class="title">@lang('Contact Us')</h3>
                    <form method="POST" class="mt-4 verify-gcaptcha">
                        @csrf
                        <div class="form-group">
                            <label>@lang('Name')</label>
                            <input type="text" name="name" class="form--control"  required>
                        </div>
                        <div class="form-group">
                            <label>@lang('Email')</label>
                            <input type="email" name="email" class="form--control" required>
                        </div>
                        <div class="form-group">
                            <label>@lang('Subject')</label>
                            <input type="text" name="subject" class="form--control" required>
                        </div>
                        <div class="form-group">
                            <label>@lang('Message')</label>
                            <textarea name="message" class="form--control"  required></textarea>
                        </div>
                        <x-captcha />
                        <button type="submit" id="recaptcha" class="btn btn--base w-100" disabled>@lang('Submit Now')</button>
                    </form>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="map-area">
                    <iframe  src ="{{$contact->data_values->location_url}}" width="100%" height="450"  allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
                    </iframe>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
@push('script')
    <script>
        "use strict";
        (function ($) {
            $('.mb-2').addClass('form-group').removeClass('mb-2');
        })(jQuery);
    </script>
@endpush