@extends('frontend.layouts.app')
@section('title', 'सम्पर्क ')
@section('meta', 'Welcome to Om Hospital and Research Center PVt. Ltd.')
@section('content')
    <!-- BREADCRUMB
       ============================================= -->
    <div id="breadcrumb" class="division">
        <div class="container">
            <div class="row">
                <div class="col">
                    <div class=" breadcrumb-holder">
                        <h4 class="h4-sm text-white">सम्पर्क गर्नुहोस</h4>
                        <!-- Breadcrumb Nav -->
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="index.html" class="text-white">गृहपृष्ठ</a></li>
                                <li class="breadcrumb-item active text-white" aria-current="page">सम्पर्क</li>
                            </ol>
                        </nav>
                    </div>
                    <!-- Title -->
                </div>
            </div>
        </div> <!-- End row -->
    </div> <!-- End container -->
    </div> <!-- END BREADCRUMB -->
    <div class="slider-overlay"></div>

    <!-- ======= Contact Section ======= -->
    <section id="contact" class="contact my-3">
        <div class="container my-3">
            <div class="row">


                <!-- CONTACTS INFO -->
                <div class="col-lg-7">

                    <!-- Title-->
                    <h4 class="h4-md steelblue-color">
                        एउटा प्रश्न छ? हामी 24/7 आधारमा बिरामीहरूको अनुरोधहरूको समीक्षा र स्वीकार गर्छौं।</h4>

                    <!-- Text-->
                    <p class="contact-notice">हामीलाई कल गर्नुहोस् वा ईमेल पठाउनुहोस्। यदि तपाइँ हाम्रो क्लिनिकमा अपोइन्टमेन्टको लागि यात्रा गर्दै हुनुहुन्छ भने, निराश हुनबाट जोगिनको लागि तपाइँको अपोइन्टमेन्ट स्टाफसँग सही सडक ठेगाना पुष्टि गर्नुहोस्। विशेष ठेगानाहरूसँग थप मद्दतको लागि तल हेर्नुहोस्।
                    </p>

                    <div class="row">
                        <div class="col-lg-6 col-md-6 col-12 p-2">
                            <div class="contact-info bx-wrapper bg-lightgrey text-center mb-md-40">
                                <div class="contact-info-wrapper">
                                    <div class="icon mb-xl-20">
                                        <i class="fa fa-phone"
                                            style="
                                                    font-size: 30px;
                                                    color: #005154;
                                                "></i>
                                    </div>
                                    <h5 class="text-custom-black fw-600">Phone</h5>
                                    <p class="text-light-white">Start working with Genmed that can provide everything
                                    </p>
                                    <a href="#" class="fs-14">+(347)123 456 7890</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-12 p-2">
                            <div class="contact-info bx-wrapper bg-custom-white text-center mb-md-40">
                                <div class="contact-info-wrapper">
                                    <div class="icon mb-xl-20">
                                        <i class="fa fa-envelope"
                                            style="
                                                    font-size: 30px;
                                                    color: #005154;
                                                "></i>
                                    </div>
                                    <h5 class="text-custom-black fw-600">Email</h5>
                                    <p class="text-light-white">Start working with Genmed that can provide everything
                                    </p>
                                    <a href="#" class="fs-14">contact@example.com</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-12 p-2">
                            <div class="contact-info bx-wrapper bg-custom-white text-center">
                                <div class="contact-info-wrapper">
                                    <div class="icon mb-xl-20">
                                        <i class="fa fa-location-arrow"
                                            style="
                                                    font-size: 30px;
                                                    color: #005154;
                                                "></i>
                                    </div>
                                    <h5 class="text-custom-black fw-600">Location</h5>
                                    <p class="text-light-white">Start working with Genmed that can provide everything
                                    </p>
                                    <a href="#" class="fs-14">View on Google map</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> <!-- END CONTACTS INFO -->

                <!-- CONTACT FORM -->
                <div class="col-lg-5 bg-lightgrey ">
                    <div class="form-holder mb-40">
                        @if(Illuminate\Support\Facades\Session::has('success'))
                        <div class="alert alert-success p-3" id="alert-success">
                            {{Illuminate\Support\Facades\Session::get('success')}}
                        </div>
                        @endif
                        <form action="{{route('contact.send')}}" method="POST" name="contactForm" class="row">
                            @csrf
                            <!-- Contact Form Input -->
                            <div id="input-name" class="col-md-12 py-2">
                                <input type="text" name="name" class="form-control name p-3"
                                    placeholder="Enter Your Name*" required>
                            </div>

                            <div id="input-email" class="col-md-12 py-2">
                                <input type="text" name="email" class="form-control email"
                                    placeholder="Enter Your Email*" required>
                            </div>

                            <div id="input-phone" class="col-md-12 py-2">
                                <input type="tel" name="phone" class="form-control phone"
                                    placeholder="Enter Your Phone Number*" required>
                            </div>

                            <div id="input-subject" class="col-md-12 py-2">
                                <input type="text" name="subject" class="form-control subject" placeholder="Subject*"
                                    required>
                            </div>

                            <div id="input-message" class="col-md-12 input-message py-2">
                                <textarea class="form-control message" name="message" rows="6" placeholder="Your Message ..." required></textarea>
                            </div>
                            <div id="captcha" class="col-md-12 py-2 px-3">
                                {!! NoCaptcha::renderJs() !!}
                                {!! NoCaptcha::display() !!}
                                <span class="text text-danger" id="g-recaptcha_error"></span>
                            </div>
                            <!-- Contact Form Button -->
                            <div class="col-lg-12 mt-15">
                                <input type="submit" class="btn btn-primary" value="Send Your Message">
                            </div>
                        </form>
                    </div>
                </div> <!-- END CONTACT FORM -->


            </div> <!-- End row -->

        </div>
        <div class="container-fluid p-0">
            <div>
                <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3531.865944391118!2d85.34261571443473!3d27.72142503148135!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39eb1965869815e1%3A0x61a8a608eeb02b85!2z4KST4KSuIOCkueCkuOCljeCkquCkv-Ckn-CksiDgpI_gpKjgpY3gpKEg4KSw4KS_4KS44KSw4KWN4KSaIOCkuOClh-CkqOCljeCkn-CksA!5e0!3m2!1sne!2snp!4v1665653372227!5m2!1sne!2snp"
                    width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        </div>

        <!-- INFO-9
       ============================================= -->
       <section id="info-9" class="bg-blue info-section division">


        <!-- TEXT BLOCK -->
        <div class="container">
            <div class="row d-flex align-items-center">
                <div class="col-lg-6">
                    <div class="info-9-table white-color wow fadeInUp" data-wow-delay="0.3s">

                        <!-- Title -->
                        <h4 class="h4-xs">Opening Hours:</h4>

                        <!-- Text -->
                        <p>Porta semper lacus cursus and feugiat primis ultrice ligula risus auctor tempus feugiat
                            and dolor lacinia cursus turpis dolores ut aliquam a quaerat sodales sapien pretium
                        </p>

                        <!-- Table -->
                        <table class="table">
                            <tbody>
                                <tr>
                                    <td>Mon – Fri</td>
                                    <td> - </td>
                                    <td class="text-right">8:00 AM - 8:00 PM</td>
                                </tr>
                                <tr>
                                    <td>Saturday</td>
                                    <td>-</td>
                                    <td class="text-right">10:00 AM - 6:00 PM</td>
                                </tr>
                                <tr class="last-tr">
                                    <td>Sunday</td>
                                    <td>-</td>
                                    <td class="text-right">10:00 AM - 4:00 PM</td>
                                </tr>
                            </tbody>
                        </table>

                        <!-- Title -->
                        <h5 class="h5-sm">Need a personal health plan?</h5>

                        <!-- Text -->
                        <p>Porta semper lacus cursus, and feugiat primis ultrice ligula at risus auctor vehicula magna
                            luctus tempor quisque undo laoreet turpis urna augue, viverra a augue eget
                        </p>

                    </div>
                </div>
            </div> <!-- End row -->
        </div> <!-- END TEXT BLOCK -->


        <!-- INFO-9 IMAGE -->
        <div class="info-9-img bg-fixed text-center"></div>


    </section> <!-- END INFO-9 -->
    </section>
    <!-- End Contact Section -->
@endsection