@extends("app")
@section('head_title', getcong('contact_us_title').' | '.getcong('site_name') )
@section('head_url', Request::url())
@section('canonical_url', config('app.url').'contact-us')
@section('head_image', config('app.url').'public/assets/logo' . '.png' . '.webp')
@section("content")
{!! NoCaptcha::renderJs() !!}
<style>
span.help-block{color: red;}
@media only screen and (max-width: 768px){
.pt-87 {
    padding-top: 47px;
}
}
.fs-40{font-size: 40px;}
#valid-msg {
	  color: #00c900;font-size: 12px;
	}
	#error-msg {
	 font-size: 12px;
    color: #950505;
	}
</style>
<div class="section1-about mpt-0 mpb-0 mpr-5 mpl-0 " style="background-image: url({{ URL::asset('public/assets/yellowgradient.webp') }});">
    <div class="container pl-0 pr-0">
	<div class="row">
		<div class="col-12 col-xl-6 col-md-6 col-xxl-6 col-sm-12 col-xs-12 p-0">
			<h1 class="pf" id="headertextabout1">Connect with Us</h1>
			<p id="error_msg">Do you want to chat? We'd love to hear from you! Get in touch with our Customer Team for any help or just to say hello.</p>
		</div>
	</div>
	</div>
</div>
<div class="container pl-0 pr-0">
<div class="section-contact mpr-5 mpl-5" style="background:unset">
	<div class="row">
		<div class="col-12 col-xl-6 col-md-6 col-xxl-6 col-sm-12 col-xs-12 first left pl-0 mpr-0">
		    @if(Session::has('flash_message_contact'))
				<button style="display:none" id="on_success_btn" data-bs-toggle="modal" data-bs-target="#on_success">On Success</button>
				<div class="modal fade" id="on_success" tabindex="-1" aria-labelledby="on_success" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">&times;</button>
								<div class="modal-title">Contact Form</div>
							</div>
							<div class="modal-body">
								<div class="row p-0">
									<div class="col-12 pl-0 pr-0 text-left pt-15 pb-15">
										<img alt="Email" src="{{url('/public/assets/email-btn.webp')}}" />
										<h4>Thanks for contacting us</h4>
										<p>Our team will contact you in less than 24 hours</p>
										<div class="text-left">
											<button type="button" class="btn bg-black text-white btn-continue" data-bs-dismiss="modal" aria-label="Close">Continue Browsing</button>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
            @endif
			@if ($errors->any())
				<div class="alert alert-danger">
					<ul>
						@foreach ($errors->all() as $error)
							<li>{{ $error }}</li>
						@endforeach
					</ul>
				</div>
			@endif
            {!! Form::open(array('url' => 'contact-us','class'=>'','id'=>'contactform','role'=>'form')) !!}
    		    <div class="row">
        			<div class="col-12 col-xl-6 col-md-12 col-xxl-6 col-sm-12 col-xs-12 p-0">
                      <label class="form-label">First Name <span style="color: red;">*</span></label>
                      <input name="f_name" id="f_name" type="text" class="form-control" value="{{ old('f_name') }}" required />
                    </div>
                    <div class="col-12 col-xl-6 col-md-12 col-xxl-6 col-sm-12 col-xs-12 pr-0 mp-0 mpt-15">
                      <label class="form-label">Last Name <span style="color: red;">*</span></label>
                      <input name="l_name" id="l_name" type="text" class="form-control" value="{{ old('l_name') }}" required />
                    </div>
                </div>
				<div class="row">
					<div class="col-12 col-xl-6 col-md-12 col-xxl-6 col-sm-12 col-xs-12 pt-15 pr-0 pl-0 mpt-15">
						<label class="form-label">Email address <span style="color: red;">*</span></label>
						<input type="email" class="form-control" name="email" value="{{ old('email') }}" required />
					</div>
					<div class="col-12 col-xl-6 col-md-12 col-xxl-6 col-sm-12 col-xs-12 pt-15 pr-0 mp-0 mpt-15">
						<label class="form-label">Phone <span style="color: red;">*</span></label>
						<input type="text" class="form-control" name="phone" id="phone_contact" placeholder="Phone" value="{{ old('phone') }}" required>
						<span id="valid-msg" class="hide"></span>
						<span id="error-msg" class="hide"></span>
					</div>
				</div>
                <div class="col-12 pt-15">
                    <label class="form-label">Your Message <span style="color: red;">*</span></label>
                  <textarea class="form-control" name="your_message" required>{{ old('your_message') }}</textarea>
                </div>
                <div class="col-12 pt-15">
                    <div class="row">
                        <div class="col-12 col-sm-6 col-md-12 col-lg-6 col-xl-6 col-xxl-6 p-0 {{ $errors->has('g-recaptcha-response') ? ' has-error' : '' }} mp-15">
                            {!! app('captcha')->display() !!}
                            @if ($errors->has('g-recaptcha-response'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('g-recaptcha-response') }}</strong>
                                </span>
                            @endif
                        </div>
                        <div class="col-12 col-sm-6 col-md-12 col-lg-6 col-xl-6 col-xxl-6 p-0 mp-15">
                            <button type="submit" class="btn black-btn pull-right mw-full mmt-15">Send Message</button>
                        </div>
                    </div>
                </div>
            {!! Form::close() !!}
		</div>
		<div class="col-12 col-xl-6 col-md-6 col-xxl-6 col-sm-12 col-xs-12 first right mpr-0 mpl-0">
			<p> <img  alt ="Line" src="{{url('/public/assets/line.webp')}}"></p>
			<h2 class="pf text-start fs-40">Get In Touch</h2>
			<p class="pt-15"><i class="fa fa-map-marker" aria-hidden="true"></i>&nbsp;