@extends('front.layouts.layout')
@section('title','Contact Us')
@section('content')
    <div class="main-content bg-lighter">
        <!-- Section: inner-header -->
        <section class="inner-header divider parallax layer-overlay overlay-dark-5" style="background-color: #0a53be;">
            <div class="container pt-20 pb-20">
                <!-- Section Content -->
                <div class="section-content">
                    <div class="row">
                        <div class="col-sm-8 text-left flip xs-text-center">
                            <h2 class="title text-white">Contact Us</h2>
                        </div>
                        <div class="col-sm-4">
                            <ol class="breadcrumb text-right sm-text-center text-black mt-10">
                                <li><a href="{{route('home')}}">Home</a></li>
                                <li class="active text-gray-silver">Contact Us</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Divider: Contact -->
        <section class="divider bg-white">
            <div class="container">
                <div class="row pt-30">
                    <div class="col-md-4">
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <div class="icon-box left media con-block p-30 mb-20"> <a class="media-left pull-left" href="#"> <i class="pe-7s-map-2 text-theme-colored"></i></a>
                                    <div class="media-body"> <strong>OUR OFFICE LOCATION</strong>
                                        <p>{{ $com->address }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-12">
                                <div class="icon-box left media con-block p-30 mb-20"> <a class="media-left pull-left" href="#"> <i class="pe-7s-call text-theme-colored"></i></a>
                                    <div class="media-body"> <strong>OUR PHONE NUMBER</strong>
                                        <p class="mb-0">{{ $com->phone1 }}</p>
                                        <p>{{ $com->phone2 }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-12">
                                <div class="icon-box left media con-block p-30 mb-20"> <a class="media-left pull-left" href="#"> <i class="pe-7s-mail text-theme-colored"></i></a>
                                    <div class="media-body"> <strong>OUR CONTACT E-MAIL</strong>
                                        <p>{{ $com->email1 }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <h3 class="line-bottom mt-0 mb-20">Interested in discussing?</h3>
                        <p class="mb-20">{!! $com->contact_text !!}</p>
                        <!-- Contact Form -->
                        <form class="" action="{{ route('contact.send') }}" method="post">
                            @csrf
                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <input name="name" class="form-control" type="text" placeholder="Enter Name" required="">
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <input name="email" class="form-control required email" type="email" placeholder="Enter Email" required>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <input name="phone" class="form-control" type="text" placeholder="Enter Phone">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <input name="subject" class="form-control required" type="text" placeholder="Enter Subject" required>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <textarea name="message_text" class="form-control required" rows="5" placeholder="Enter Message" required></textarea>
                            </div>
                            <div class="form-group">
                                <button type="submit" name="send_message" class="btn btn-flat btn-mind text-uppercase mt-10 mb-sm-30 border-left-theme-color-2-4px" data-loading-text="Please wait...">Send your message</button>
                                <button type="reset" class="btn btn-flat btn-mind text-uppercase mt-10 mb-sm-30 border-left-theme-color-2-4px">Reset</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>

        <!-- Divider: Google Map -->
        <section>
            <div class="container-fluid pt-0 pb-0">
                <div class="row">
                    <iframe src="{{ $com->gmap_code }}" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                </div>
            </div>
        </section>
    </div>
@endsection