@extends('site.zbase::layout')
@section('content')
<div class="conteudo">
	<div class="topo-cont">
		<h2 class=" tit-pagina font-5">Endereços</h2>
	</div>
	<div class="inner-conteudo">
		<div class="wrapper-perfil">
			<div class="tb-perfil-ext">
				@include('site.zbase::partials.menuConta')
				<div class="tb-perfil">
					<p class="txt-perfil font-3">Mantenha seus dados sempre atualizados, <span class="font-5">{{ $usuario->nome }}.</span></p>
					{!! Form::model($endereco, ['route'=>['enderecos.salvar', $endereco->id], 'class'=>'form-perfil']) !!}
						<div class="coluna-1">
							<div class="grupo">
								<div class="cell">
									<label for="ident" class="label-perfil font-3">Tipo:</label>
									{!! Form::text('tipo', null, ['maxlength'=>'255', 'required', 'id'=>'ident', 'class'=>'input-perfil font-3', 'placeholder'=>'Ex: residencial, comercial, comercial2...']) !!}
								</div>
							</div>
							<div class="grupo">
								<div class="cell">
									<label for="end" class="label-perfil font-3">Endereço:</label>
									{!! Form::text('logradouro', null, ['maxlength'=>'255', 'required', 'id'=>'end', 'class'=>'input-perfil font-3']) !!}
								</div>
							</div>
							<div class="grupo">
								<div class="cell">
									<label for="num" class="label-perfil font-3">Nº:</label>
									{!! Form::text('numero', null, ['maxlength'=>'5', 'required', 'id'=>'num', 'class'=>'input-perfil font-3']) !!}
								</div>
							</div>
							<div class="grupo">
								<div class="cell">
									<label for="cep" class="label-perfil font-3">CEP:</label>
									{!! Form::text('cep', null, ['maxlength'=>'9', 'required', 'id'=>'cep', 'class'=>'input-perfil font-3']) !!}
								</div>
							</div>
						</div>
						<div class="coluna-2">
							<div class="grupo">
								<div class="cell">
									<label for="complemento" class="label-perfil font-3">Complemento:</label>
									{!! Form::text('complemento', null, ['maxlength'=>'45', 'id'=>'complemento', 'class'=>'input-perfil font-3']) !!}
								</div>
							</div>
							<div class="grupo">
								<div class="cell">
									<label for="referencia" class="label-perfil font-3">Bairro:</label>
									{!! Form::text('bairro', null, ['maxlength'=>'255', 'required', 'id'=>'referencia', 'class'=>'input-perfil font-3']) !!}
								</div>
							</div>
							<div class="grupo">
								<div class="cell">
									<label for="cidade" class="label-perfil font-3">Cidade:</label>
									{!! Form::text('cidade', null, ['maxlength'=>'255', 'required', 'id'=>'cidade', 'class'=>'input-perfil font-3']) !!}
								</div>
							</div>
							<div class="grupo">
								<div class="cell">
									<label for="estado" class="label-perfil font-3">Estado:</label>
									<div class="wrapper-select">
										<div class="select-1">
											{!! Form::select('estado', StringHelper::$estadosSelect, null, ['id'=>'estado', 'class'=>'font-3 sel-desk']) !!}
										</div>
										<div class="select-2">
											<span class="font-4">{{ head(StringHelper::$estadosSelect) }}</span>
											{!! Form::select('estado', StringHelper::$estadosSelect, null, ['class'=>'font-3 sel-mob']) !!}
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="coluna-3">
							{!! Form::submit('Salvar', ['class'=>'envia-perfil font-5']) !!}
						</div>
					{!! Form::close() !!}
				</div>
			</div>
		</div>
	</div>
</div>
@endsection
@section('scripts')
<script type="text/javascript">
	function changeSelect () {
		var select = $('.sel-desk')[0].selectize;

		if ($(window).width() > 1024) {
			$('.sel-mob').prop('disabled', true);
			select.enable();
		} else {
			$('.sel-mob').prop('disabled', false);
			select.disable();
		}
	}

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

		$('input[name="numero"]').mask('9?9999', {placeholder:''});
		$('input[name="cep"]').mask('99999-999', {placeholder:''});

		$('.sel-mob').change(function () {
			var este = $(this);
			este.parent().find('span').html(este.find('option[value="'+este.val()+'"]').html());
		});

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