@extends('site.zbase::layout')
@section('content')
<div class="conteudo">
	<div class="topo-cont"> <!-- em algumas páginas parece que o lucas usou isso aqui como breadcrumb...como eu tava em dúvida preferi não colocar e deixei somente como um título -->
		<h2 class="tit-pagina font-5">Fale conosco</h2>
	</div>
	<section class="inner-conteudo">
		<div class="contato">
			<div class="inner-contato">
				<div class="col-1">
                    {!! Form::open(['route'=>'envios.contato', 'class'=>'form-contato']) !!}
						<div class="wrapper-input tam-1 m-right">
							<label for="nome" class="label-input font-2">Nome</label>
                            {!! Form::text('nome', null, ['maxlength'=>'255', 'required', 'id'=>'nome', 'class'=>'input-contato font-3']) !!}
						</div>
						<div class="wrapper-input tam-1">
							<label for="email" class="label-input font-2">E-mail</label>
                            {!! Form::email('email', null, ['maxlength'=>'255', 'required', 'id'=>'email', 'class'=>'input-contato font-3']) !!}
						</div>
						<div class="wrapper-input tam-1 m-right">
							<label for="fone" class="label-input font-2">Telefone</label>
                            {!! Form::text('telefone', null, ['maxlength'=>'15', 'required', 'id'=>'fone', 'class'=>'input-contato font-3 telefone']) !!}
						</div>
						<div class="wrapper-input tam-1">
							<label for="cidade" class="label-input font-2">Assunto</label>
							<div class="wrapper-select">
								<span class="select-mobile font-3">{{ head($assuntos) }}</span>
								{!! Form::select('assunto', $assuntos, null, ['id'=>'assunto', 'class'=>'font-3 js-select']) !!}
							</div>
						</div>
						<div class="wrapper-input tam-4">
							<label for="msg" class="label-input font-2">Mensagem</label>
                            {!! Form::textarea('mensagem', null, ['required', 'id'=>'msg', 'class'=>'msg-contato font-1']) !!}
						</div>
                        {!! Form::submit('Enviar mensagem', ['class'=>'envia-contato font-5']) !!}
                    {!! Form::close() !!}
				</div>
				<div class="col-2">
					<h2 class="tit-contato2 font-5">Dados de contato</h2>
					<p class="txt-contato2 font-2">Veja abaixo nossas informações de contato</p>
					<div class="info-contato">
						<div class="icone-contato pin"></div>
						<p class="txt-infocontato font-3">{{ $configuracao->logradouro.', '.$configuracao->numero.($configuracao->complemento?', '.$configuracao->complemento:'').' - '.$configuracao->bairro.' / '.$configuracao->cidade.', '.$configuracao->estado }}</p>
					</div>
					<div class="info-contato">
						<div class="icone-contato fone"></div>
						<p class="txt-infocontato font-3">{{ $configuracao->telefone }}</p>
					</div>
					<div class="info-contato">
						<div class="icone-contato mail"></div>
						<p class="txt-infocontato font-3"><a href="mailto:{{ $configuracao->email }}">{{ $configuracao->email }}</a></p>
					</div>
				</div>
			</div>
		</div>
	</section>
</div>
@endsection
@section('scripts')
<script type="text/javascript">
	function toggleSelect() {
		var select = $('.js-select');

		if ($(window).width() > 1024 - scrollbarWidth() && !select.hasClass('selectized')) {
			select.selectize();
		} else if ($(window).width() <= 1024 && select.hasClass('selectized')) {
			var selectized = select[0].selectize;
			selectized.destroy();
		}
	}

	$(document).ready(function () {
		toggleSelect();

		$('.js-select').change(function () {
			var self = $(this);
			var text = self.find('option[value="'+self.val()+'"]').text();
			self.parent().find('span').text(text);
		});

		$('.telefone').mask('(99) 9999-9999?9', {
			placeholder: ''
		});

		$(window).resize(function () {
			toggleSelect();
		});
	});
</script>
@endsection