@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/contact-us-styles.css') }}" type="text/css" />
@endpush

@extends('layouts.app')

@section('title', 'Contact Us | The Modern Hospital')

@section('content')

  {{-- Smooth wrapper (kept from your structure) --}}
  <div id="smooth-wrapper">
    <div id="smooth-content">

      {{-- Contact Us --}}
        <div class="main-page-header">
            <h1>The Modern Hospital</h1>
            <p>TMH Hospital / Contact Us</p>
        </div>

        <!-- Text Block -->
        <div class="hospital-guide-wrapper">
            <div class="container">
                <div class="row about-section">
                    <div class="col">
                        <div class="divider-header">
                            <h2>Contact Us</h2>
                            <div class="divider"></div>
                        </div>
                    </div>
                </div>
                <div class="row contact-us-section">
                    <div class="col-lg-5">
                        <img src="{{ asset('assets/images/resource/contact-us/contact-bg.jpg') }}" alt="">
                    </div>
                    <div class="col-lg-7 mt-md-5 mt-0">
                        <form class="doctor-filter_form">

                            <div class="form-group">
                                <input type="text" class="form-control" id="name" required />
                                <label for="name">Name</label>
                            </div>
                            <div class="form-group">
                                <input type="email" class="form-control" id="email" required />
                                <label for="email">Email</label>
                            </div>
                            <div class="form-group full-width">
                                <textarea name="message" id="message" rows="8"></textarea>
                                <label for="message">Comments/Message</label>
                            </div>

                            <div class="form_actions">
                                <button type="submit">
                                    Send Now
                                </button>

                                <a href="#!">
                                    <i class="fab fa-whatsapp" aria-hidden="true"></i>
                                    Click here for more details
                                </a>
                            </div>
                        </form>
                    </div>

                </div>
                <div class="row contact-cards my-5">
                    <div class="col-lg-4 contact-card-item mb-lg-0 mb-4">
                        <div class="contact-card">
                            <div class="c_card_header">
                                <h3>Lets Connect</h3>
                                <img src="{{ asset('assets/images/resource/contact-us/email_icon.png') }}" alt="">
                            </div>
                            <div class="c_card_body">
                                <h4>Email Address</h4>
                                <p><a
                                        href="mailto:info@themodernhospital.com">info@themodernhospital.com</a>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 contact-card-item mb-lg-0 mb-4">
                        <div class="contact-card">
                            <div class="c_card_header">
                                <h3>Availability</h3>
                                <img src="{{ asset('assets/images/resource/contact-us/phone_icon.png') }}" alt="">
                            </div>
                            <div class="c_card_body">
                                <h4>Opening Hours</h4>
                                <p>Mon - Sun: 24 Hours</p>
                                <p>
                                    <a href="tel:021348355035">021-34835503-5</a>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 contact-card-item mb-lg-0 mb-4">
                        <div class="contact-card">
                            <div class="c_card_header">
                                <h3>Locate Now</h3>
                                <img src="{{ asset('assets/images/resource/contact-us/place_icon.png') }}" alt="">
                            </div>
                            <div class="c_card_body">
                                <h4>Office Address</h4>
                                <p>
                                    University Road, Gulshan-e-Iqbal, Block-7, Opposite Safari Park, Karachi
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row contact-form">
                    <form class="doctor-filter_form contact-form">
                        <div class="form-group">
                            <select class="form-control" id="city" required>
                                <!-- <option value="" disabled selected>Please select</option> -->
                                <option value="please select">Please select</option>
                                <option value="1">option 1</option>
                                <option value="2">option 2</option>
                            </select>
                            <label for="city">Search City</label>
                        </div>
                        <div class="form-group">
                            <select class="form-control" id="type" required>
                                <!-- <option value="" disabled selected>Please select</option> -->
                                <option value="please select">Please select</option>
                                <option value="1">option 1</option>
                                <option value="2">option 2</option>
                            </select>
                            <label for="type">Service Center Type</label>
                        </div>

                    </form>

                    <div class="mapouter">
                        <div class="gmap_canvas"><iframe class="gmap_iframe" frameborder="0" scrolling="no"
                                marginheight="0" marginwidth="0"
                                src="https://maps.google.com/maps?width=600&amp;height=400&amp;hl=en&amp;q=the modern hospital&amp;t=p&amp;z=12&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"></iframe><a
                                href="https://embed-googlemap.com">google map embed html</a></div>
                        <style>
                            .mapouter {
                                position: relative;
                                text-align: right;
                                width: 100%;
                                height: 600px;
                            }

                            .gmap_canvas {
                                overflow: hidden;
                                background: none !important;
                                width: 100%;
                                height: 600px;
                                border-radius: 17px;
                            }

                            .gmap_iframe {
                                width: 100% !important;
                                height: 600px !important;
                            }
                        </style>
                    </div>
                </div>

            </div>
        </div>


      @endsection