@extends('frontend.master')
@section('content')

<!-- <div class="header-box">
	<h1 class="text-center">Contact Us</h1>
</div> -->
<div class="content">
	<div class='container'>
		<form id='contactGeo'>
			<div class="row" id="contact">
				<div class='col-sm-4'>
					<div class="form-group">
						<h2>{{ __('messages.contact_infor') }}</h2>
						<p><small>{{ __('messages.some_information_that_you_want_to_know') }}</small></p>
					</div>
					<div class="form-group">
						<div class='float-left'>
							<a class='specialink' href="tel:{{$siteConfig['phone']}}"><i class="fas fa-phone-volume fa-lg fa-rotate-315"></i></a>
						</div>
						<div class='float-left contact-sub-title'>
							<div>{{ __('messages.phone_number') }}</div>
							<div><a class='specialink' href="tel:{{$siteConfig['phone']}}">{{$siteConfig['phone']}}</a></div>
						</div>
						<div class='clearfix'></div>
					</div>
					<div class="form-group">
						<div class='float-left'>
							<i class="fas fa-map-marker-alt fa-lg"></i>
						</div>
						<div class='float-left contact-sub-title'>
							<div>{{ __('messages.address') }}</div>
							<div></div>
						</div>
						<div class='clearfix'></div>
					</div>
					<div class="form-group">
						<div class='float-left'>
							<a class='specialink' href="mailto:{{$siteConfig['email']}}"><i class="fas fa-envelope fa-lg"></i></a>
						</div>
						<div class='float-left contact-sub-title'>
							<div>Email</div>
							<div><a class='specialink' href="mailto:{{$siteConfig['email']}}">{{$siteConfig['email']}}</a></div>
						</div>
						<div class='clearfix'></div>
					</div>
				</div>
				<div class='col-sm-8'>
					<div class="form-group">
						<h2>{{ __('messages.leave_your_message') }}</h2>
						<p><small>{{ __('messages.feel_free_to_contact_with') }}</small></p>
					</div>
					<div>
						<div class='row'>
							<div class='col-sm-6'>
								<div class="form-group">
									<input placeholder="{{ __('messages.full_name') }}*" type="text" class="form-control name">
									<p class="alert-name alert-errors"></p>
								</div>
							</div>
							<div class='col-sm-6'>
								<div class="form-group">
									<input placeholder="Email*" type="text" class="form-control email">
									<p class="alert-email alert-errors"></p>
								</div>
							</div>
						</div>
						<div class="form-group">
							<input placeholder="{{ __('messages.subject') }}*" type="text" class="form-control subject">
							<p class="alert-subject alert-errors"></p>
						</div>
						<div class="form-group">
							<div class="textarea-contact">
								<textarea placeholder="{{ __('messages.message') }}*" class="form-control" id="content" rows="10"></textarea>
								<p class="alert-content alert-errors"></p>
							</div>
						</div>
						<div>
							<input type="reset" style="display:none" class="reset">
							<p class="alert-contact" style="color: #00b8ff;text-align: center;"></p>
							<button type="button" class="btn btn-primary" id="sendContact">{{ __('messages.send') }}</button>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>
<style>
	.specialink:hover{
		text-decoration: none;
	}
	.specialink{
		color:#4f4f4f;
	}
</style>
<script>
	$( document ).ready(function() {
		function clear(){
			$('.name').val('');
			$('.email').val('');
			$('.subject').val('');
			$('#content').val('');
		}
		$('#sendContact').click(function(){
			$('.alert-errors').html('');
			var name = $('.name').val();
			var email = $('.email').val();
			var subject = $('.subject').val();
			var content = $('#content').val();
			var data = {
				name : name,
				email : email,
				subject : subject,
				content : content
			};
			$.ajaxSetup({
				headers:
					{
						'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
					}
			});
			$.ajax({
				method: "POST",
				url: '{{ $url_link }}/contact-ajax',
				data: data,
				dataType: 'json',
				beforeSend: function(r, a){
					$(".ajax_waiting").addClass("loading");
				},
				complete: function(r, a){
					$(".ajax_waiting").removeClass("loading");
				},
				success: function (response) {
				if(response.status == 200){
					clear();
					Swal.fire({
						type: 'success',
						text: '{{ __('messages.sent_contact_success') }}.',
						confirmButtonText: "{{ __('messages.confirm_text_ok') }}",
					})
				}
				},
				error: function (data) {
					$.each(data.responseJSON.errors, function( index, value ) {
						$('.alert-' + index).html(value);
					});
				}
			});
		})
	})
</script>
@endsection