@extends('layouts.front_master')
@section('content')

<!-- ======= Contact Section ======= -->
<section id="contact" class="contact">
    <div class="container" data-aos="fade-up" style="margin-top: 100px;">

        <div class="section-title">
            <h2>Contact</h2>
            <p>Use the following details to communicate with us..</p>
        </div>

        <div class="row" data-aos="fade-up" data-aos-delay="100">

            @foreach ($details as $item)
            <div class="col-lg-6">
                <div class="info-box mb-4">
                    <i class="bx bx-map"></i>
                    <h3>Our Address</h3>
                    <p>{{$item->address}}</p>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="info-box  mb-4">
                    <i class="bx bx-envelope"></i>
                    <h3>Email Us</h3>
                    <p>{{$item->email}}</p>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="info-box  mb-4">
                    <i class="bx bx-phone-call"></i>
                    <h3>Call Us</h3>
                    <p>{{$item->phone1}}</p>
                    <p>{{$item->phone2}}</p>
                </div>
            </div>
            @endforeach
        
        </div>

        <div class="row" data-aos="fade-up" data-aos-delay="100">

            <div class="col-lg-6 ">
                <iframe class="mb-4 mb-lg-0"
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3961.9209048659295!2d39.2487849500751!3d-6.7794807950756!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x185c4c1649085f97%3A0x41de7c164ebe2d1f!2sTPHA%20Building!5e0!3m2!1ssw!2stz!4v1602013425750!5m2!1ssw!2stz"
                    frameborder="0" style="border:0; width: 100%; height: 384px;" allowfullscreen></iframe>
            </div>

            <div class="col-lg-6">
                <form  id="commentsForm" role="form" class="php-email-form">
                    @csrf

                    <div class="text-center text-info">
                        <h6>PLEASE LEAVE A COMMENT</h6><hr>
                    </div>
                    <div class="form-row">
                        <div class="col form-group">
                            <input type="text" name="name" class="form-control" id="name" placeholder="Your Name"
                                data-rule="minlen:3" data-msg="Please enter your full name" />
                            <div class="validate"></div>
                        </div>
                        <div class="col form-group">
                            <input type="email" class="form-control" name="email" id="email"
                                placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
                            <div class="validate"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject"
                            data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
                        <div class="validate"></div>
                    </div>
                    <div class="form-group">
                        <textarea class="form-control" name="message" rows="3" data-rule="required"
                            data-msg="Please write something for us" placeholder="Message"></textarea>
                        <div class="validate"></div>
                    </div>
                    <div class="mb-3">
                        <div class="loading">Loading</div>
                        <div class="error-message"></div>
                        <div class="sent-message">Your message has been sent. Thank you!</div>
                    </div>
                    <div class="text-center"><button type="submit">Send Message <i
                                class="icofont-paper-plane"></i></button></div>
                </form>
            </div>

        </div>

    </div>
</section>

<script>
    $("document").ready(function(){
        $('#commentsForm').on('submit',function(event){
            event.preventDefault();

            var data_url = "{{route('comments.store')}}";

            $.ajax({
                url: data_url,
                method: "POST",
                dataType: "JSON",
                data: $(this).serialize(),
                success:function(data){
                    if(data.success){
                        
                        var result = data.success;

                            Swal.fire({
                                icon: "success",
                                text: result,
                                timer: 3500,
                                showConfirmButton: false,
                                showCancelButton: false,
                                title: "Notification",
                            })

                        $('#commentsForm')[0].reset();      
                    }

                        if(data.errors){
                            var result = data.errors;

                            Swal.fire({
                            icon: "info",
                            text: result,
                            timer: 5500,
                            showConfirmButton: false,
                            showCancelButton: false,
                            title: "Notification!",
                        })
                    }
                }
            })
        })
    })
</script>
    
@endsection