@extends('themes.'.config('smartekcms.themes.frontend').'.app', [
    'title' => trans('front.contact.contact_us'),
    'meta_description'=>Illuminate\Support\Str::limit(strip_tags(htmlspecialchars_decode($contact->text)),156),
    'meta_keywords'=>Illuminate\Support\Str::limit(strip_tags(htmlspecialchars_decode($contact->title)),40),
    'model_type' => 'contact',
])

@section('head')
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "{{ trans('front.general.home') }}",
        "item": "{{ route('home') }}"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "{{ trans('front.contact.contact_us') }}",
        "item": "{{ route('contact', ['contact' => trans('route.frontend.contact') ]) }}"
      }]
    }
    </script>

    @if($contact->gmapx && $contact->gmapy)
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
        <style>
            #map{
                width: 100%;
                height: 50vh;
            }
        </style>
    @endif
@endsection

@section('content')

    <!-- ====== Banner Start ====== -->
    <section class="st-page-banner banner-2">
        <!--v2 banner-->
        <div class="card bg-transparent">
            <div class="container" style="z-index: 1;">
                <div class="st-banner-content">
                    <h1 class="text-center">{{ trans('front.contact.contact') }}</h1>
                </div>
                <ul class="st-breadcrumb">
                    <li><a href="{{ route('home') }}">{{ trans('front.general.home') }}</a></li>
                    <li class="active"><a href="{{ route('contact', ['contact' => trans('route.frontend.contact') ]) }}">{{ trans('front.contact.contact_us') }}</a></li>
                </ul>
            </div>
        </div>
    </section>
    <!-- ====== Banner End ====== -->

    <!-- ====== Contact Start ====== -->
    <section id="contact" class="ud-contact">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-xl-8 col-lg-7">
                    <div class="ud-contact-content-wrapper">
                        <div class="ud-contact-title">
                            <span>{{ trans('front.contact.contact_us') }}</span>
                            <h2>{{ $contact->title }}</h2>
                            <p class="mt-3">
                                {!! $contact->text !!}
                            </p>
                        </div>
                        <div class="ud-contact-info-wrapper">
                            <div class="ud-single-info">
                                <div class="ud-info-icon">
                                    <i class="lni lni-map-marker"></i>
                                </div>
                                <div class="ud-info-meta">
                                    <h3 style="font-size: 18px;">{{ trans('front.smartblue.contact.our_address') }}</h3>
                                    <p>{{ $contact->address }}</p>
                                </div>
                            </div>
                            <div class="ud-single-info">
                                <div class="ud-info-icon" style="display: inline-grid;">
                                    <i class="lni lni-envelope"></i>
                                    <i class="lni lni-phone"></i>
                                </div>
                                <div class="ud-info-meta">
                                    <h3 style="font-size: 18px;">{{ trans('front.smartblue.contact.how_can_we_help') }}</h3>
                                    <p>{{ $contact->email }}</p>
                                    <p>{{ $contact->phone }}</p>
                                </div>
                            </div>
                            <div class="ud-single-info d-none">
                                <div class="ud-info-icon">
                                    <i class="lni lni-phone"></i>
                                </div>
                                <div class="ud-info-meta">
                                    <h3 style="font-size: 18px;">{{ trans('front.smartblue.contact.how_can_we_help') }}</h3>
                                    <p>{{ $contact->phone }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-5">
                    <div class="ud-contact-form-wrapper wow fadeInUp" data-wow-delay=".2s">
                        <h3 class="ud-contact-form-title">{{ trans('front.smartblue.contact.send_us_message') }}</h3>

                        <form class="ud-contact-form" action="{{ route('contactFormPost') }}" method="post" id="ContactForm">
                            @csrf
                            <div class="ud-form-group">
                                <label for="email" class="d-none">{{ trans('front.contact.email_address') }}*</label>
                                <input id="email" type="email" name="email" placeholder="{{ trans('front.contact.email_address') }}*"/>
                            </div>
                            <div class="ud-form-group">
                                <label for="subject" class="d-none">{{ trans('front.contact.subject') }}*</label>
                                <input id="subject" type="text" name="subject" placeholder="{{ trans('front.contact.subject') }}*"/>
                            </div>
                            <div class="ud-form-group">
                                <label for="message" class="d-none">{{ trans('front.contact.your_message') }}*</label>
                                <textarea id="message" name="message" rows="3" placeholder="{{ trans('front.contact.your_message') }}*"></textarea>
                            </div>
                            <div class="ud-form-group mb-0">
                                <button type="submit" class="ud-main-btn">{{ trans('front.contact.submit_now') }}</button>
                            </div>

                        </form>

                    </div>

                </div>
            </div>
        </div>
    </section>
    <!-- ====== Contact End ====== -->

    @if($contact->gmapx && $contact->gmapy)
        <!--================Map Area =================-->
        <div id="map"></div>
        <!--================End Map Area =================-->
    @endif

@endsection

@section('js')
    @if($contact->gmapx && $contact->gmapy)
        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
        <script>
            let mapOptions = {
                center:[ {{ $contact->gmapx }}, {{ $contact->gmapy }} ],
                zoom:10
            }

            let map = new L.map('map' , mapOptions);

            let layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
            map.addLayer(layer);

            let marker = new L.Marker([ {{ $contact->gmapx }}, {{ $contact->gmapy }} ]);
            marker.addTo(map);
        </script>

        {{--    <script src="https://maps.googleapis.com/maps/api/js?key={{ $contact->gmapstoken ?? '' }}"></script>--}}
    @endif


    <!--====== Contact Form Start ======-->
    <script type="text/javascript">
        $(document).ready(function(){
            (function($) {
                "use strict";
                $(function() {
                    //validate ContactForm form
                    $('#ContactForm').validate({
                        rules: {
                            subject: {
                                required: true,
                                minlength: 4
                            },
                            email: {
                                required: true,
                                email: true
                            },
                            message: {
                                required: true,
                                minlength: 20
                            }
                        },
                        messages: {
                            subject: {
                                required: "{{ trans('front.contact.subject_required') }}",
                                minlength: "{{ trans('front.contact.subject_minlength') }}"
                            },
                            email: {
                                required: "{{ trans('front.contact.email_required') }}"
                            },
                            message: {
                                required: "{{ trans('front.contact.message_required') }}",
                                minlength: "{{ trans('front.contact.message-minlength') }}"
                            }
                        },
                        submitHandler: function(form) {
                            $(form).ajaxSubmit({
                                type:"POST",
                                data: $(form).serialize(),
                                url:"/contact",
                                success: function() {
                                    $('#ContactForm :input').attr('disabled', 'disabled');
                                    $('#ContactForm').fadeTo( "slow", 1, function() {
                                        $(this).find(':input').attr('disabled', 'disabled');
                                        $(this).find('label').css('cursor','default');
                                        $('#success').fadeIn()
                                        $('.modal').modal('hide');
                                        $('#success').modal('show');
                                    })
                                },
                                error: function() {
                                    $('#ContactForm').fadeTo( "slow", 1, function() {
                                        $('#error').fadeIn()
                                        $('.modal').modal('hide');
                                        $('#error').modal('show');
                                    })
                                }
                            })
                        }
                    });
                })
            })(jQuery)
        })
    </script>
    <!--====== Contact Form End ======-->
	
	@parent
@endsection