@extends('layouts.front.app')
@section('css')
	<link href="{{ asset('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css') }}" rel="stylesheet" />
@endsection
@section('content')
	<!-- Main content -->

	<section>
		<div class="container">

			<nav>
				<ol class="breadcrumb grey lighten-5 mt-3">
					<li>
						<a href="{{ route('home') }}" class="fosco-text font-weight-bold"> <i class="fa fa-home"></i> Home</a>
						<i class="fas fa-angle-double-right mx-2"></i>
					</li>
					<li>
						<a href="{{ route('accounts', ['tab' => 'profile']) }}" class="black-text font-weight-bolder">
							<i class="fas fa-user-check"></i> Minha Conta
						</a>
						<i class="fas fa-angle-double-right mx-2"></i>
					</li>
					<li class="active font-weight-bolder black-text">
						<i class="fa fa-map-marked-alt"></i> Cadastrar endere&ccedil;o @if (request()->cobranca) que irá receber o comprovante de compra @else da entrega @endif
						</li>
					</ol>
				</nav>

				<div class="card mb-4">

					<h5 class="card-header red-opera font-weight-bold white-text text-center py-4">Cadastrar endere&ccedil;o @if (request()->cobranca) que irá receber o comprovante de compra @else da entrega @endif</h5>

						<div class="card-body area-usuario cad-end p-4">

							<form action="{{ route('customer.address.store', $customer->id) }}" method="post" class="form" enctype="multipart/form-data">
								{{ csrf_field() }}

								<input type="hidden" name="status" value="1">
								<input type="hidden" name="carrinho" value="{{ $cartCount }}">
								<!-- País -->
								<div class="input-group mb-3">
									<div class="input-group-prepend">
										<span class="input-group-text" id="inputGroup-sizing-sm">País</span>
									</div>
									<select name="country_id" id="country_id" class="browser-default custom-select">
										@foreach($countries as $country)
											<option @if(30 === $country->id) selected="selected" @endif value="{{ $country->id }}">{{ $country->name }}</option>
											@endforeach
										</select>
									</div>

									{{--  Identificação  --}}
									<div class="input-group input-group-md mb-3">
										<div class="input-group-prepend">
											<span class="input-group-text" id="inputGroup-sizing-sm">
												@if (request()->cobranca)
													Cobrar de
												@else
													Entregar para
												@endif
											</span>
										</div>
										<input type="text" name="alias" id="alias" placeholder="@if (request()->cobranca) Quem irá receber o comprovante de compra @else Nome da pessoa que receberá o produto @endif" class="form-control" value="{{ old('alias') }}" required>
										</div>

										<!-- CElular -->
										<div class="input-group input-group-md mb-3">
											<div class="input-group-prepend ">
												<span class="input-group-text" id="inputGroup-sizing-sm">Celular</span>
											</div>
											<input type="text" name="phone" id="phone" placeholder="(99) 9 9999-9999" class="form-control" value="{{ old('phone') }}" aria-label="Dollar amount (with dot and two decimal places)">
										</div>

										<!-- CEP -->
										<div class="input-group input-group-md mb-3">
											<div class="input-group-prepend ">
												<span class="input-group-text" id="inputGroup-sizing-sm">CEP</span>
											</div>
											<input type="text" class="form-control"  name="zip" id="zip" placeholder="Digite o CEP ou clique na lupa ao lado para buscar" aria-label="Dollar amount (with dot and two decimal places)">
											<div class="input-group-append">
												<span class="input-group-text"><a href="http://www.buscacep.correios.com.br/sistemas/buscacep/buscaCep.cfm" target="_blank" title="Buscar o CEP direto no site dos correios" data-toggle="tooltip"><i class="fas fa-search-location"></i></a></span>
											</div>
										</div>

										<!-- Logradouro -->
										<div class="input-group input-group-md mb-3">
											<div class="input-group-prepend ">
												<span class="input-group-text" id="inputGroup-sizing-sm">Logradouro</span>
											</div>
											<input type="text" name="address_1" id="address_1" placeholder="Endereço será preenchido automaticamente pelo CEP" class="form-control text-left" value="{{ old('address_1') }}" required aria-label="Dollar amount (with dot and two decimal places)">
										</div>

										<!-- Número -->
										<div class="input-group input-group-md mb-3">
											<div class="input-group-prepend ">
												<span class="input-group-text" id="inputGroup-sizing-sm">Número</span>
											</div>
											<input type="text" name="numero" id="numero" placeholder="Número" class="form-control" value="{{ old('numero') }}" required aria-label="Dollar amount (with dot and two decimal places)">
											<div class="input-group-append">
												<span class="input-group-text">Complemento</span>
											</div>
											<input type="text" name="complemento" id="complemento" placeholder="Complemento" class="form-control" value="{{ old('complemento') }}" maxlength="20">
										</div>

										<!-- Bairro -->
										<div class="input-group input-group-md mb-3">
											<div class="input-group-prepend ">
												<span class="input-group-text" id="inputGroup-sizing-sm">Bairro</span>
											</div>
											<input type="text" name="address_2" id="address_2" placeholder="Bairro" class="form-control" value="{{ old('address_2') }}">
										</div>

										<!-- Cidade -->
										<div class="input-group input-group-md mb-3">
											<div class="input-group-prepend">
												<span class="input-group-text" id="inputGroup-sizing-sm">Cidade</span>
											</div>
											<select name="city" id="city" class="browser-default custom-select">
												<option>Aguarde...</option>
											</select>
											<input type="hidden" name="nome_municipio">
										</div>

										<!-- UF -->
										<div class="input-group input-group-md mb-3">
											<div class="input-group-prepend">
												<span class="input-group-text" id="inputGroup-sizing-sm">Estado</span>
											</div>
											<select name="state_code" id="state_code" class="browser-default custom-select">
												<option>Aguarde...</option>
											</select>

										</div>

										<!-- Sign in button -->
										<button class="btn box-green btn-block my-4 font-weight-bold" type="submit" id="cadastrarEndereco">Cadastrar endereço</button>


									</form>
									<!-- Default form login -->
								</div>
							</div>

							<!--Modal: carregando-->
							<div class="modal fade top pt-5" id="modalCarregando" tabindex="-1" role="dialog" aria-labelledby="ModalCarregando"
							aria-hidden="true" data-backdrop="false">
							<div class="modal-dialog modal-top modal-notify modal-info" role="document">
								<!--Content-->
								<div class="modal-content">
									<!--Body-->
									<div class="modal-body">
										<div class="row d-flex justify-content-center align-items-center">

											<p class="pt-3 pr-2 modal-text">
												Carregando o endereço...
												<div class="spinner-grow text-danger modal-text" role="status">
													<span class="sr-only">Carregando o endereço...</span>
												</div>
											</p>
										</div>
									</div>
								</div>
								<!--/.Content-->
							</div>
						</div>
						<!-- ./ Modal carregando -->

						<!-- Central Modal Medium Danger -->
						<div class="modal fade pt-5" id="modalAlerta" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
						aria-hidden="true">
						<div class="modal-dialog modal-notify modal-danger" role="document">
							<!--Content-->
							<div class="modal-content">
								<!--Header-->
								<div class="modal-header">
									<p class="heading lead">Atenção</p>

									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
										<span aria-hidden="true" class="white-text">&times;</span>
									</button>
								</div>

								<!--Body-->
								<div class="modal-body">
									<div class="text-center">
										<i class="fas fa-check fa-4x mb-3 animated rotateIn"></i>
										<p class="modal-text">Verifique se o CEP está preenchido corretamente</p>
										<p class="modal-text">O formato é: 99999-999</p>
										<p class="modal-text">Caso não saiba, <a href="http://www.buscacep.correios.com.br/sistemas/buscacep/buscaCep.cfm" target="_blank">busque aqui</a>  o seu endereço</p>
									</div>
								</div>

								<!--Footer-->
								<div class="modal-footer justify-content-center">
									<a type="button" class="btn btn-outline-danger waves-effect" data-dismiss="modal">Okay</a>
								</div>
							</div>
							<!--/.Content-->
						</div>
					</div>
					<!-- Central Modal Medium Danger-->
				</div>
			</section>
		@endsection
		@section('js')
			<script src="{{ asset('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js') }}"></script>
			<script type="text/javascript">
			$( ".select2" ).select2({
				theme: "mbbootstrap"
			})

			function aplicaMascara() {
				let country_id = $('#country_id option:selected').val()
				if (country_id === '30') {
					$('#phone').mask('(99) 9 9999-9999')
					$('#zip').mask('99999-999')
				} else {
					$('#phone').unmask()
					$('#zip').unmask()
				}
			}

			aplicaMascara()

			$('#country_id').on('change', function() {
				aplicaMascara()
			})

			function carregaEstados (uf = null, cep = false) {
				$.ajax({
					url: '/api/estado/',
					contentType: 'json',
					success: function (resultado) {
						let _htmlOptions
						$(resultado).each(function(i,estado){
							_htmlOptions += "<option value='"+estado.uf+"'"
							if (uf === estado.uf) {
								_htmlOptions += ' selected="selected" '
							}
							_htmlOptions += ">"+estado.nome_uf+"</option>"
						});
						$('#state_code').append(_htmlOptions)
						$('.select2').select2()
						if(!cep) {
							carregaCidades (uf)
						}
					}
				})
			}

			function carregaCidades (uf = null, cod_cidade = null) {
				$('#city').empty()
				$('#city').append('<option>Aguarde...</option>')
				$.ajax({
					url: '/api/cidade/' + uf,
					contentType: 'json',
					success: function (resultado) {
						let _htmlOptions
						_htmlOptions = 'Aguarde ... '
						$(resultado).each(function(i,cidade){
							_htmlOptions += "<option value='"+cidade.cod_municipio_completo+"'"
							if (cod_cidade === cidade.cod_municipio_completo) {
								_htmlOptions += ' selected="selected" '
								$('input[name=nome_municipio]').val(cidade.nome_municipio)
							}
							_htmlOptions += ">"+cidade.nome_municipio+"</option>"
						});
						$('#city').append(_htmlOptions)
					}
				})
			}

			$(document).ready(function () {
				carregaEstados()
				$('#cadastrarEndereco').attr('disabled', true);
				$("#zip").on('blur', function(){
					let CEP = $(this).val()
					let country_id = $('#country_id option:selected').val()
					if(CEP.length < 9) {
						$('#modalAlerta').modal( 'show' )
						$('#cadastrarEndereco').attr('disabled', true)
						$('#zip').focus()
					} else {
						{{-- /* Só irá executar executar a busca por CEP se for morador do Brasil */--}}
						if (country_id === '30'){
							$('#modalCarregando').modal('show')
							$.ajax({
								url : '/api/cep/' + CEP,
								contentType: 'json',
								success: function (res) {
									if(!res.logradouro) {
										$('#cliente_logradouro').val("-")
									}

									if(!res.bairro) {
										$('#cliente_bairro').val("-")
									}
									$('#cadastrarEndereco').removeAttr('disabled')
									$('#address_1').val(res.logradouro)
									$('#address_2').val(res.bairro)
									$('#modalCarregando').modal('hide')
									$('.bairro').removeClass('col-md-12').addClass('col-md-6')
									carregaEstados(res.uf, true)
									carregaCidades(res.uf, res.ibge)
									$('#numero').focus()
								}
							});
						} else {
							$('#cadastrarEndereco').removeAttr('disabled');
						}
						$('#estados').on('change', function(){
							let uf = $('#estados option:selected').val()
							carregaCidades(uf)
						})
					}
				})
				$('#address_1').on('blur', function(){
					$('#cadastrarEndereco').removeAttr('disabled')
				})
			})
		</script>
	@endsection