@extends('layouts.master')
@section('page')
    <title>Contact Us | {{setting('site.title')}}</title>
@endsection
@section('content')
<div class="container-fluid px-0">
    @if (session()->has('success'))
    <div class="alert alert-success">
        {{ session()->get('success') }}
    </div>
    @endif
    @if(count($errors) > 0)
    <div class="alert alert-danger">
        <ul>
        @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
        @endforeach
        </ul>
    </div>
    @endif
</div>
    <div class="cm-page-header overlay-dark bg-cover" style="background-image: url({{asset('assets/images/tech-support/contactus.jpg')}});">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="block text-white text-center">
                        <h2 class="h1">Contact Us</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section class="section page-content pt-80 pb-80">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h3 class="text-dark text-center mb-40">Have a question? Need help? Get in touch with us.</h3>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card border-0 product-item shadow-sm mb-30 text-center">
                        <i class="fa fa-volume-control-phone contact-icon"></i>
                        <div class="card-body">
                            <h4 style="font-size: 18px;" class="text-dark font-w-600 mt-10 mb-10">Get in touch with us.</h4>
                            <div class=" align-items-center justify-content-between mt-5">
                                @if(setting('site.phone'))
                                <a href="tel: {{setting('site.phone')}}">
                                <h5 class=" font-secondery" style="color: #117abc">
                                   P: {{setting('site.phone')}}</h5></a>
                                @endif
                                <br>
                                @if(setting('site.mobile'))
                                <a href="tel: {{setting('site.mobile')}}">
                                    <h5 class=" font-secondery" style="color: #117abc">
                                       M: {{setting('site.mobile')}}</h5>
                                </a>
                                @endif
                                @if(setting('site.email'))
                                <a href="tel: {{setting('site.email')}}">
                                    <h5 class=" font-secondery" style="color: #117abc">
                                        Email Us:<br>
                                       {{setting('site.email')}}</h5>
                                </a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card mobile border-0 product-item shadow-sm mb-30 text-center">
                        <i class="fa fa-map-marker contact-icon"></i>
                        <div class="card-body">
                            <a href="https://www.google.com/maps/place/Tech+Support/@33.8919473,35.566596,17z/data=!3m1!4b1!4m5!3m4!1s0x151f17acdc9974b5:0xcc465314471ccf87!8m2!3d33.8919429!4d35.5687847" target="_blank" rel="noopener">
                                <h5 class="text-dark font-w-600 mt-10 mb-10">Locate Us</h5>
                            </a>
                            <div class=" align-items-center justify-content-between mt-5">
                                @if(setting('site.title'))
                                <h5 class=" text-dark font-secondery">{{setting('site.title')}}</h5>
                                @endif
                                @if(setting('site.po_box'))
                                <h5 class=" text-dark font-secondery">{{setting('site.po_box')}}</h5>
                                @endif
                                <br>
                                @if(setting('site.location'))
                                <h5 class=" text-dark font-secondery">{{setting('site.location')}}</h5>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card mobile border-0 product-item shadow-sm mb-30 text-center">
                        <i class="fas fa-comments contact-icon"></i>
                        <div class="card-body">
                            <a href="{{route('faq')}}">
                                <h5 class="text-dark font-w-600 mt-10 mb-10">Frequently Asked Questions</h5>
                            </a>
                            <div class=" align-items-center justify-content-between mt-5">
                                <h5 class=" text-dark font-secondery">If you have any question</h5>
                                <h5 class=" text-dark font-secondery">related to hardware or software</h5>
                                <br>
                                <h5 class=" text-dark font-secondery"><a href="{{route('faq')}}" style="color:#117abc ">FAQs</a>  section.</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

                <div class="col-md-12">
                    <h3 class="text-dark text-center">Please don’t hesitate to get in touch with any questions or enquiries.</h3>
                </div>
                <div class="row">
                    <div class="col-lg-8 col-12 mx-auto">
                        <div class="contact-form">
                            <form method="POST" action="{{route('send-contact')}}">
                                @csrf
                                 <div class="row learts-mb-n30">
                                    <div class="col-md-12 col-12 learts-mb-30" style="margin-bottom: 30px; margin-top: 30px;">
                                        <input class=" @error('fullname') is-invalid @enderror" id="fullname"  type="name" placeholder="Full Name *" name="fullname"
                                            required="" value="{{old('fullname')}}">
                                        @error('fullname')
                                            <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 col-12 learts-mb-30 mb-3">
                                        <input type="text" value="{{old('email')}}" name="email" required=""
                                         class="@error('email') is-invalid @enderror" placeholder="Email Address*" id="user_email">
                                        @error('email')
                                        <span class="invalid-feedback" role="alert">
                                          <strong>{{ $message }}</strong>
                                        </span>
                                      @enderror
                                    </div>
                                    <div class="col-md-6 col-12 learts-mb-30 ">
                                        <input type="name" placeholder="Phone Number *" id="phonenumber"
                                        name="phonenumber" required="" value="{{old('phonenumber')}}" 
                                        class="@error('phonenumber') is-invalid @enderror">
                                        @error('phonenumber')
                                            <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                    <div class="col-md-12 col-12 learts-mb-30" style="margin-bottom: 30px; margin-top: 30px;">
                                        <input class="@error('companyname') is-invalid @enderror" id="companyname"
                                            required="" value="{{old('companyname')}}" 
                                            type="name" placeholder="Compay Name" name="companyname">
                                            @error('companyname')
                                            <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                    <div class="col-12 learts-mb-30">
                                        <textarea rows="4" required  class=" @error('message') is-invalid @enderror" id="message"
                                        placeholder="Your Message" name="message">{{old('message')}}</textarea>
                                        @error('message')
                                            <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                        @if (env('NOCAPTCHA_SITEKEY'))
                                            <div class="col-md-12 mt-3">
                                                <div class="g-recaptcha " data-callback="recaptcha_callback" data-sitekey="{{env('NOCAPTCHA_SITEKEY')}}">
                                                    @if ($errors->has('g-recaptcha-response'))
                                                    <span class="help-block">
                                                        <strong>{{ $errors->first('g-recaptcha-response') }}</strong>
                                                    </span>
                                                @endif
                                                </div>
                                            </div>
                                        @endif

                                    <div class="col-12 text-center learts-mb-30 mt-50">
                                        <button id="submit" disabled  class="btn btn-default" style="border-radius: 500px" type="submit">Submit</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
    </section>
@endsection()
@push('styles')
    <style>
        .btn-default{background-color:#d33733; color:white; border:1px solid lightgrey;}
        .btn-default:hover{color: white;box-shadow:0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22)}
        input:not([type="checkbox"]):not([type="radio"]), textarea{font-size:16px;font-weight:400;display:block;width:100%;padding:10px 0;color:#333333;border:2px solid transparent;border-bottom-color:#EDEDED;background-color:transparent;}
    </style>
@endpush()

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
{!! NoCaptcha::renderJs() !!}
<script type="text/javascript">
   function recaptcha_callback(){
        document.getElementById("submit").disabled = false;
    }
</script>   
@endpush