@extends('layouts.web.index')

@section('content')
    @include('layouts.web.header')

    <div class="page-content">
        <!-- inner page banner -->
        <div class="dz-bnr-inr overlay-secondary-dark dz-bnr-inr-sm" style="background-image:url(images/background/bg3.jpg);">
            <div class="container">
                <div class="dz-bnr-inr-entry">
                    <h1>Contact</h1>
                    <nav aria-label="breadcrumb" class="breadcrumb-row">
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="index.html"> Home</a></li>
                            <li class="breadcrumb-item">Contact</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>

        <!-- Google Map -->
        <div class="content-inner-2 pt-0">
            <div class="map-iframe">
                <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3516.07291426053!2d76.10832231506461!3d29.6023399820515!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3911c6dcbecbc28d%3A0x2c8aeb55baf5b4b1!2sNarwana%2C%20Haryana%20126116!5e0!3m2!1sen!2sin!4v1668245600000"
                    style="border:0; width:100%; min-height:100%; margin-bottom: -8px;" allowfullscreen></iframe>
            </div>
        </div>

        <!-- Contact Section -->
        <section class="contact-wraper1" style="background-image: url(images/background/bg2.jpg);">
            <div class="container">
                <div class="row">
                    <!-- Contact Info -->
                    <div class="col-lg-5">
                        <div class="contact-info">
                            <div class="section-head text-white style-1">
                                <h3 class="title text-white">Get In Touch</h3>
                                <p>We’d love to hear from you! Contact us for any book-related queries, suggestions, or
                                    support.</p>
                            </div>
                            <ul class="no-margin">
                                <!-- Address -->
                                <li class="icon-bx-wraper text-white left m-b30">
                                    <div class="icon-md">
                                        <span class="icon-cell text-primary">
                                            <i class="fa-solid fa-location-dot fa-2x"></i>
                                        </span>
                                    </div>
                                    <div class="icon-content">
                                        <h5 class="dz-tilte text-white">Our Address</h5>
                                        <p>#362 Ward No.21,<br>
                                            Hisar Road, Narwana,<br>
                                            PO: Narwana, DIST: Jind,<br>
                                            Haryana - 126116</p>
                                    </div>
                                </li>
                                <!-- Email -->
                                <li class="icon-bx-wraper text-white left m-b30">
                                    <div class="icon-md">
                                        <span class="icon-cell text-primary">
                                            <i class="fa-solid fa-envelope fa-2x"></i>
                                        </span>
                                    </div>
                                    <div class="icon-content">
                                        <h5 class="dz-tilte text-white">Our Email</h5>
                                        <p><a href="mailto:support@bookora.cloud"
                                                class="text-white">support@bookora.cloud</a></p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!-- Contact Form -->
                    <div class="col-lg-7 m-b40">
                        <div class="contact-area1 m-r20 m-md-r0">
                            <div class="section-head style-1">
                                <h6 class="sub-title text-primary">CONTACT US</h6>
                                <h3 class="title m-b20">Send Us A Message</h3>
                            </div>
                            <form class="dz-form dzForm" method="POST" action="script/contact_smtp.php">
                                <input type="hidden" class="form-control" name="dzToDo" value="Contact">
                                <div class="dzFormMsg"></div>
                                <div class="input-group">
                                    <input required type="text" class="form-control" name="dzName"
                                        placeholder="Full Name">
                                </div>
                                <div class="input-group">
                                    <input required type="email" class="form-control" name="dzEmail"
                                        placeholder="Email Address">
                                </div>
                                <div class="input-group">
                                    <input required type="text" class="form-control" name="dzPhoneNumber"
                                        placeholder="Phone No.">
                                </div>
                                <div class="input-group">
                                    <textarea required name="dzMessage" rows="5" class="form-control" placeholder="Message"></textarea>
                                </div>
                                <div class="mb-3">
                                    <div class="g-recaptcha" data-sitekey="6LefsVUUAAAAADBPsLZzsNnETChealv6PYGzv3ZN"
                                        data-callback="verifyRecaptchaCallback"
                                        data-expired-callback="expiredRecaptchaCallback"></div>
                                    <input class="form-control d-none" style="display:none;" data-recaptcha="true" required
                                        data-error="Please complete the Captcha">
                                </div>
                                <div>
                                    <button name="submit" type="submit" value="submit"
                                        class="btn w-100 btn-primary btnhover">SUBMIT</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Newsletter -->
        <section class="py-5 newsletter-wrapper"
            style="background-image: url('images/background/bg1.jpg'); background-size: cover;">
            <div class="container">
                <div class="subscride-inner">
                    <div
                        class="row style-1 justify-content-xl-between justify-content-lg-center align-items-center text-xl-start text-center">
                        <div class="col-xl-7 col-lg-12">
                            <div class="section-head mb-0">
                                <h2 class="title text-white my-lg-3 mt-0">Subscribe to our newsletter for the latest book
                                    updates</h2>
                            </div>
                        </div>
                        <div class="col-xl-5 col-lg-6">
                            <form class="dzSubscribe style-1" action="script/mailchamp.php" method="post">
                                <div class="dzSubscribeMsg"></div>
                                <div class="form-group">
                                    <div class="input-group mb-0">
                                        <input name="dzEmail" required type="email"
                                            class="form-control bg-transparent text-white"
                                            placeholder="Your Email Address">
                                        <div class="input-group-addon">
                                            <button name="submit" value="Submit" type="submit"
                                                class="btn btn-primary btnhover">
                                                <span>SUBSCRIBE</span>
                                                <i class="fa-solid fa-paper-plane"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    @include('layouts.web.footer')
@endsection