@extends('layouts.front.app')

@section('content')
<!-- Main content -->

<section>
	<nav>
		<div class="container">
			<ol class="breadcrumb grey lighten-4">
				<li>
					<a href="{{ route('home') }}" class="font-weight-bold fosco-text"> <i class="fa fa-home"></i> Home</a>
					<i class="fas fa-angle-double-right mx-2"></i>
				</li>
				<li class="active font-weight-bolder black-text ">Fale conosco </li>
			</ol>
		</div>
	</nav>
</section>

<section>
	<!-- /.Menu Superior -->
	<div class="container dark-grey-text">
		
		<div class="card p-5">
			@include('layouts.errors-and-messages')
			
			<h2 class="font-weight-bold font-abeezee fosco-text text-center my-4">Fale conosco</h2>
			
			<p class="text-center w-responsive mx-auto mb-5">Você tem alguma pergunta? Por favor, não hesite em nos contatar diretamente. Nossa equipe irá responder para você dentro de algumas de horas para ajudá-lo.</p>
			
			<div class="row">
				
				<!--Grid column-->
				<div class="col-md-8 ml-2 mb-md-0 mb-5">
					<form id="contact-form" name="contact-form" action="{{ route('envie.contato') }}" method="POST">
						{{ csrf_field() }}
						<input type="hidden" name="_method" value="post">
						<!--Grid row-->
						<div class="row">
							
							<!--Grid column-->
							<div class="col-md-6">
								<div class="md-form mb-0">
									<input type="text" id="name" name="name" class="form-control" value="{!! (auth()->check()) ? auth()->user()->name : '' !!}">
									<input type="hidden" name="id_customer" value="{!! (auth()->check()) ? auth()->user()->id : '' !!}">
									<label for="name" class="">Seu nome</label>
								</div>
							</div>
							<!--Grid column-->
							
							<!--Grid column-->
							<div class="col-md-6">
								<div class="md-form mb-0">
									<input type="text" id="email" name="email" class="form-control" value="{!! (auth()->check()) ? auth()->user()->email : '' !!}" require>
									<label for="email" class="">Seu email <span class="text-danger">*</span></label>
								</div>
							</div>
							<!--Grid column-->
							
						</div>
						<!--Grid row-->
						
						<!--Grid row-->
						<div class="row">
							<div class="col-md-12">
								<div class="md-form mb-0">
									<input type="text" id="subject" name="subject" class="form-control">
									<label for="subject" class="">Assunto</label>
								</div>
							</div>
						</div>
						<!--Grid row-->
						
						<!--Grid row-->
						<div class="row">
							
							<!--Grid column-->
							<div class="col-md-12">
								
								<div class="md-form">
									<textarea type="text" id="message" name="message" rows="2" class="form-control md-textarea" require></textarea>
									<label for="message">Sua mensagem <span class="text-danger">*</span></label>
								</div>
								
							</div>
						</div>
						<!--Grid row-->
						<div class="row">
							<div class="col-md-12">
								<p>{!! captcha_img('flat') !!}</p>
								<div class="md-form mb-0">
									<input type="text" id="captcha" name="captcha" class="form-control" require>
									<label for="captcha" class="">Informe o conteúdo da imagem acima</label>
								</div>
							</div>
						</div>
					</form>
					
					<div class="text-center text-md-right">
						<a class="btn box-green" onclick="document.getElementById('contact-form').submit();">Enviar</a>
					</div>
					<div class="status"></div>
				</div>
				<!--Grid column-->
				
				<!--Grid column-->
				<div class="col-md-3 text-center">
					<ul class="list-unstyled mb-0">
						<li><a href="https://goo.gl/maps/z3Cbh923mw9tKe3fA" class="fosco-text" target="_blank"><i class="fas fa-map-marker-alt fa-2x"></i>
							<p>Rua João Januário Ayroso, 233 <br> Jaraguá do Sul - SC, 89253-100</p></a>
						</li>
						
						<li><i class="fas fa-phone mt-4 fa-2x"></i>
							<p>+55 47 3372-2400</p>
						</li>
						
						<li><i class="fas fa-envelope mt-4 fa-2x"></i>
							<p><a href="mailto:contato@speedpneus.com" class="fosco-text">contato@speedpneus.com</a></p>
						</li>
					</ul>
				</div>
				<!--Grid column-->
				
			</div>
		</div>
	</div>
	
</section>
<!--Section: Contact v.2-->
@endsection