@extends('layouts.app')


@section('content')
    <style>
        .contact-main-banner {
            background-image: url({{!empty($contact) ? (!empty($data->image) ? asset('images/cms/'.$data->image) : '') : ''}});
            height: 100%;
            padding: 110px 0 110px !important;
        }
    </style>

    <!-- main banner section -->
    <section class="main-banner contact-main-banner inner-banner">
        <div class="container">
            <div class="row align-items-center justify-content-center no-gutters">
                <div class="col-md-12 banner-text">
                    <h2 class="heading42">{{!empty($contact) ? ($data->head1 ?? '') : '' }} <br><span>{{!empty($contact) ? ($data->head2 ?? '') : '' }}</span></h2>
                </div>
            </div>
        </div>
    </section>

    <section class="contact-pg-form sec-pad">
        <div class="container">
            <div class="row form-area justify-content-between">
                <div class="col-lg-5 col-md-6">
                    <div class="contact-detail-wrapper">
                        <h2 class="heading42">Contact Details</h2>
                        <ul class="digital-cta">
                            <li>
                                <a href="javascript:;" class="chat">
                                    <img src="{{asset('images/chat-icon.png')}}" alt="">
                                    <div class="cont-cta-detail">
                                        <strong>Chat</strong><span>Connect with one of our support agents</span>
                                    </div>
                                </a>
                            </li>
                            @if($gs->email)
                            <li>
                                <a href="mailto: {{($gs->email ?? '')}}">
                                    <i class="fas fa-envelope-open-text"></i>
                                    <div class="cont-cta-detail">
                                        <strong>Email:</strong><span>{{($gs->email ?? '')}}</span>
                                    </div>
                                </a>
                            </li>
                            @endif
                            @if($gs->phone)
                            <li>
                                <a href="tel:{{($gs->phone ?? '')}}">
                                    <i class="fas fa-phone"></i>
                                    <div class="cont-cta-detail">
                                        <strong>Tel:</strong><span>{{($gs->phone ?? '')}}</span>
                                    </div>
                                </a>
                            </li>
                            @endif

                        </ul>
                        <ul class="social-icons">
                            @if($gs->facebook)
                            <li>
                                <a href="{{$gs->facebook == '' ? 'javascript:;' : $gs->facebook}}" target="_blank">
                                    <i class="fab fa-facebook-f"></i>
                                </a>
                            </li>
                        @endif
<!--                            <li>
                                <a href="{{$gs->twitter == '' ? 'javascript:;' : $gs->twitter}}" target="_blank">
                                    <i class="fab fa-twitter"></i>
                                </a>
                            </li>-->
                             @if($gs->insta)
                            <li>
                                <a href="{{$gs->insta == '' ? 'javascript:;' : $gs->insta}}" target="_blank">
                                    <i class="fab fa-instagram"></i>
                                </a>
                            </li>
                            @endif
<!--                            <li>
                                <a href="{{$gs->pinterest == '' ? 'javascript:;' : $gs->pinterest}}" target="_blank">
                                    <i class="fab fa-pinterest-p"></i>
                                </a>
                            </li>
                            <li>
                                <a href="{{$gs->youtube == '' ? 'javascript:;' : $gs->youtube}}" target="_blank">
                                    <i class="fab fa-youtube"></i>
                                </a>
                            </li>-->
                        </ul>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="form-wrapper" data-form-type="signup_form">
                        <h2 class="heading42">{{!empty($contact) ? ($data->title ?? '') : '' }}</h2>
                        <p class="sec-para">{{!empty($contact) ? ($data->content ?? '') : '' }}</p>
                        <form class="main-footer-form leadForm" id="regForm" method="post" enctype="multipart/form-data" action="{{route('contactForm')}}">
                        @csrf                            <!--hidden required values-->
                            <input type="hidden" id="formType" name="formType">
                            <input type="hidden" id="referer" name="referer">
                            <div class="row">
                                <div class="col-md-6 contact-form">
                                    <input type="text" class="form-control" placeholder="Enter Your Name" name="name" data-validation="required">
                                </div>
                                <div class="col-md-6 contact-form">
                                    <input type="text" class="form-control" placeholder="Enter Your Email Address" name="email" data-validation="required">
                                </div>
                                <div class="col-md-6 contact-form">
                                    <input type="text" class="form-control" placeholder="Enter Your Phone Number" maxlength="10" name="phone" data-validation="required">
                                </div>
                                <div class="col-md-6 contact-form">
                                    <input type="text" class="form-control" placeholder="Enter Your Services" name="services" data-validation="required">
                                </div>
                                <div class="col-md-12 contact-form">
                                    <textarea name="message" id="msg" placeholder="Enter your Project Brief"></textarea>
                                </div>
                                <div class="form-btn">
                                    <div id="formResult"></div>
                                    <div class="clearfix"></div>
                                    <button class="default-btn-2 btn-10" type="submit" id="signupBtn">Let's Start <i class="fas fa-angle-right"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section></div>


@endsection