@extends('layouts.layoutCommon')
@section('title', 'Contact | NuRoofs - Roofing Services')
@push('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/module-css/banner.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/module-css/counter.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/module-css/page-header.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/module-css/contact.css') }}">
@endpush

@section('content')

    <x-pageHeader title="Contact" subtitle="Contact" />

    <!-- Start Contact Page -->
    <section class="contact-page">
        <div class="container">
            <div class="row">
                <!--Start Contact Page Contact Info-->
                <div class="col-xl-6">
                    <div class="contact-page__contact-info">
                        <div class="title-box">
                            <h2>Contact Information</h2>
                        </div>

                        <div class="contact-page__contact-info-box">
                            <div class="row">
                                <div class="col-xl-6 col-lg-6 col-md-6">
                                    <div class="contact-page__contact-info-single">
                                        <div class="icon-box">
                                            <span class="icon-phone"></span>
                                        </div>

                                        <div class="content-box">
                                            <h3>Phone Number :</h3>
                                            <p><a href="tel:1234567890"> 517 845 74589</a></p>
                                            <p><a href="tel:1234567890"> 517 845 74589</a></p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-xl-6 col-lg-6 col-md-6">
                                    <div class="contact-page__contact-info-single">
                                        <div class="icon-box">
                                            <span class="icon-email"></span>
                                        </div>

                                        <div class="content-box">
                                            <h3>Email Address</h3>
                                            <p><a href="mailto:alex@nuroofs.com">alex@nuroofs.com</a></p>
                                            <p><a href="mailto:help@nuroofs.com">help@nuroofs.com</a></p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-xl-6 col-lg-6 col-md-6">
                                    <div class="contact-page__contact-info-single">
                                        <div class="icon-box">
                                            <span class="icon-gps"></span>
                                        </div>

                                        <div class="content-box">
                                            <h3>Our Address</h3>
                                            <p>2118 Thorn ridge Cir. <br> Syracuse Connecticut</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-xl-6 col-lg-6 col-md-6">
                                    <div class="contact-page__contact-info-single">
                                        <div class="icon-box">
                                            <span class="fa fa-regular fa-clock"></span>
                                        </div>

                                        <div class="content-box">
                                            <h3>Working Time</h3>
                                            <p>Sunday to Friday : <br>
                                                10 Am 05PM</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="contact-page__contact-info-bottom">
                            <div class="text-box">
                                <h2>Follow The Social Media:</h2>
                                <p>It is a long established fact that a reader will be distracted readable.
                                </p>
                            </div>

                            <div class="social-links">
                                <ul>
                                    <li><a href="#"><span class="icon-facebook-app-symbol"></span></a></li>
                                    <li><a href="#"><span class="icon-twitter-1"></span></a></li>
                                    <li><a href="#"><span class="icon-instagram"></span></a></li>
                                    <li><a href="#"><span class="icon-linkedin"></span></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!--End Contact Page Contact Info-->

                <!--Start Contact Page Form-->
                <div class="col-xl-6">
                    <div class="contact-page__form">
                        <div class="title-box">
                            <h2>Get In Touch</h2>
                        </div>
                        <form class="contact-form-validated contact-page__form-box" action="assets/inc/sendemail.php"
                            method="post" novalidate="novalidate">
                            <div class="row">
                                <div class="col-xl-6 col-lg-6 col-md-6">
                                    <div class="input-box">
                                        <input type="text" name="name" placeholder="Name" required="">
                                        <div class="icon"><span class="fa fa-user"></span></div>
                                    </div>
                                </div>
                                <div class="col-xl-6 col-lg-6 col-md-6">
                                    <div class="input-box">
                                        <input type="email" name="email" placeholder="Email" required="">
                                        <div class="icon"><span class="icon-email"></span></div>
                                    </div>
                                </div>
                                <div class="col-xl-6 col-lg-6 col-md-6">
                                    <div class="input-box">
                                        <input type="text" name="Phone" placeholder="Phone" required="">
                                        <div class="icon"><span class="icon-phone"></span></div>
                                    </div>
                                </div>
                                <div class="col-xl-6 col-lg-6 col-md-6">
                                    <div class="input-box">
                                        <div class="select-box">
                                            <select class="selectmenu wide">
                                                <option selected="selected">Subject</option>
                                                <option>Subject 01</option>
                                                <option>Subject 02</option>
                                                <option>Subject 03</option>
                                                <option>Subject 04</option>
                                                <option>Subject 05</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-xl-12">
                                    <div class="input-box">
                                        <textarea name="message" placeholder="Message"></textarea>
                                        <div class="icon style2"><span class="fa fa-pencil"></span></div>
                                    </div>
                                </div>

                                <div class="col-xl-12">
                                    <div class="contact-page__form-btn">
                                        <button type="submit" class="thm-btn">
                                            Submit Now <span class="icon-next1"></span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div class="result"></div>
                    </div>
                </div>
                <!--End Contact Page Form-->
            </div>
        </div>
    </section>
    <!-- End Contact Page -->

    <!--Start Google Map One-->
    <section class="google-map-one">
        <iframe
            src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d6209.242755903148!2d-77.04363602434464!3d38.90977276948481!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1394992895496"
            class="google-map-one__map">
        </iframe>
    </section>
    <!--End Google Map One-->

    <x-footer_style_one />
@endsection