@php
    $about = App\About::find(1);
@endphp
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


@extends('layouts.frontend_layout.frontend_design')
@section('content')
    <!--Kode-our-speaker-heading End-->
    <div class="kode-blog-style-2">
        <div class="container">
            <div class="row">
                <div class="col-md-9">
                    <div class="kode-g-map">
                        {{-- <div class="map-canvas" id="map-canvas"></div> --}}
                        <iframe src="{{ $about->address_link }}" style="width:100%;height:300px;" class="padding"
                            allowfullscreen="" loading="lazy"></iframe>

                    </div>

                    <div class="kode-contact-heading">
                        <h4>stay in touch</h4>
                        <p>Fill the form to send us an email*</p>
                        <span class="border-left"></span>
                    </div>
                    <div class="kode-contact-area col-md-12">
                        <form action="{{ url('contact') }}" id="contact_form" method="post">@csrf
                            <div class="row">
                                <div class="col-lg-4">
                                    <input type="text" name="name" required placeholder="Full name *">
                                </div>
                                <div class="col-lg-4">
                                    <input type="text" name="phone" required placeholder="Phone number *">
                                </div>
                                <div class="col-lg-4">
                                    <input type="text" name="email" required placeholder="Email address">
                                </div>
                                <div class="col-lg-12">
                                    <input type="text" name="subject" required placeholder="Subject *">
                                </div>
                                <div class="col-lg-12">
                                    <textarea name="message" name="message" id="message" required placeholder="Message *"></textarea>
                                </div>
                                @if (Session::has('success'))
                                    <h5 style="color: red;">{!! session('success') !!}</h5>
                                @endif


                                <div class="col-lg-12 text-center">
                                    <button class="shutter-btn contactbutton btn btn-danger" type="submit">Send</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                @include('frontend.components.social_media_links')
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $(document).on('submit', '#contact_form', function(e) {
            e.preventDefault();
            // alert('okk');
            $('.contactbutton').html('Please wait...');

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                url: "{{ url('contact') }}",
                method: 'post',
                data: $('#contact_form').serialize(),

                success: function(response) {
                    console.log(response);
                    if (response.status == true) {
                        $('.contactbutton').html('Make A Request');

                        Swal.fire(
                            "success!",
                            response.msg,
                            "success"
                        );
                    }

                }
            });
        });
    </script>
@endsection