@extends('frontend.layout.app')
@section('content')
    <!--Start breadcrumb area paroller-->
    <section class="breadcrumb-area">
        <div class="breadcrumb-area-bg" style="background-image: url(frontend/images/breadcrumb/breadcrumb-1.jpg);"></div>
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="inner-content text-center">
                        <div class="title">
                            <h2>Contact Us</h2>
                        </div>
                        <div class="breadcrumb-menu">
                            <ul>
                                <li><a href="{{ route('front.index') }}">Home</a></li>
                                <li><i class="fa fa-angle-right" aria-hidden="true"></i></li>
                                <li class="active">Contact Us</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--End breadcrumb area-->

    <!--Start Main Contact Form Area-->
    <section class="main-contact-form-area">
        <div class="container">
            <div class="sec-title text-center">
                <div class="sub-title">
                    <h5>Enquire With Us</h5>
                </div>
                <h2>We’re love to assist with<br> your enquiry!</h2>
                <div class="decor">
                    <img src="{{ asset('frontend/images/shape/decor.png') }}" alt="">
                </div>
            </div>
            <div class="row">

                <div class="col-xl-6">
                    <div class="our-service-box">
                        <div class="row">

                            <div class="col-xl-6 col-lg-6 col-md-6">
                                <div class="single-service">
                                    <div class="img-holder">
                                        <img src="{{ asset('frontend/images/resources/family-service.jpg') }}"
                                            alt="">
                                    </div>
                                    <div class="text-holder">
                                        <div class="title">
                                            <h3>For Family</h3>
                                            <div class="decor">
                                                <img src="{{ asset('frontend/images/shape/decor.png') }}" alt="">
                                            </div>
                                        </div>
                                        <p>Make your family members healthier with Aguapure bottled water.</p>
                                        <div class="btns-box">
                                            <a class="btn-two" href="#"><span class="icon-right-arrow"></span>Read
                                                More</a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-6 col-lg-6 col-md-6">
                                <div class="single-service">
                                    <div class="img-holder">
                                        <img src="{{ asset('frontend/images/resources/office-service.jpg') }}"
                                            alt="">
                                    </div>
                                    <div class="text-holder">
                                        <div class="title">
                                            <h3>For Office</h3>
                                            <div class="decor">
                                                <img src="{{ asset('frontend/images/shape/decor.png') }}" alt="">
                                            </div>
                                        </div>
                                        <p>Idea denouncing praising pain was born will give you complete account.</p>
                                        <div class="btns-box">
                                            <a class="btn-two" href="#"><span class="icon-right-arrow"></span>Read
                                                More</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-6">
                    <div class="contact-style1_form">
                        <div class="top-title">
                            <h3>Send Your Message</h3>
                        </div>
                        <div class="contact-form">
                            <form id="contact-form" name="contact_form" class="default-form2"
                                action="{{ route('front.contactStore') }}" method="POST">
                                @csrf
                                <div class="row">
                                    <div class="col-xl-12">
                                        <div class="input-box">
                                            <input type="text" name="name" value="" placeholder="Full Name :"
                                                required="">
                                            @error('name')
                                                <small class="text-danger">{{ $message }}</small>
                                            @enderror
                                            <div class="icon">
                                                <i class="fa fa-user" aria-hidden="true"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-12">
                                        <div class="input-box">
                                            <input type="email" name="email" value="" placeholder="Email :"
                                                required="">
                                            @error('email')
                                                <small class="text-danger">{{ $message }}</small>
                                            @enderror
                                            <div class="icon">
                                                <i class="fa fa-envelope" aria-hidden="true"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xl-12">
                                        <div class="input-box">
                                            <input type="text" name="phone" value="" placeholder="Phone :">
                                            <div class="icon">
                                                @error('phone')
                                                    <small class="text-danger">{{ $message }}</small>
                                                @enderror
                                                <i class="fa fa-phone" aria-hidden="true"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-12">
                                        <div class="input-box">
                                            <input type="text" name="subject" value="" placeholder="Subject :">
                                            @error('subject')
                                                <small class="text-danger">{{ $message }}</small>
                                            @enderror
                                            <div class="icon">
                                                <i class="fa fa-file" aria-hidden="true"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xl-12">
                                        <div class="input-box two">
                                            <textarea name="message" placeholder="Enter your message..." required=""></textarea>
                                            <div class="icon">
                                                @error('message')
                                                    <small class="text-danger">{{ $message }}</small>
                                                @enderror
                                                <i class="fa fa-text-width" aria-hidden="true"></i>
                                            </div>
                                        </div>
                                        <div class="button-box">
                                            <button class="btn-one" type="submit" data-loading-text="Please wait...">
                                                <span class="round"></span>
                                                <span class="txt">Send Message</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--End Main Contact Form Area-->

    <!--Start Google map area-->
    <section class="google-map-area">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="contact-page-map-outer">
                        <!--Map Canvas-->
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3506.2233913121413!2d77.4051603706222!3d28.50292593193056!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390ce626851f7009%3A0x621185133cfd1ad1!2sGeeksforGeeks!5e0!3m2!1sen!2sin!4v1585040658255!5m2!1sen!2sin"
                            width="1200" height="400" frameborder="0" style="border:0;" allowfullscreen=""
                            aria-hidden="false" tabindex="0">
                        </iframe>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Start Google map area-->
@endsection