@extends('loja.default', ['title' => 'Cadastro'])

@section('css')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style type="text/css">
	.select2-container--default .select2-selection--single {
		height: 48px !important;
		border: 2px solid #e5e7eb !important;
		border-radius: 12px !important;
		padding: 8px 16px !important;
	}
	
	.select2-container--default .select2-selection--single .select2-selection__rendered {
		line-height: 30px !important;
		color: #374151 !important;
		font-weight: 500 !important;
	}
	
	.select2-container--default .select2-selection--single .select2-selection__arrow {
		height: 46px !important;
		right: 8px !important;
	}
	
	.select2-dropdown {
		border: 2px solid #e5e7eb !important;
		border-radius: 12px !important;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
	}
	
	.select2-container--default .select2-results__option--highlighted[aria-selected] {
		background-color: #8b5cf6 !important;
	}
	
	.select2-container--default .select2-search--dropdown .select2-search__field {
		border: 2px solid #e5e7eb !important;
		border-radius: 8px !important;
		padding: 8px 12px !important;
	}
</style>
@endsection

@section('content')
<div class="container mx-auto px-4 py-8">
	
	<!-- Breadcrumb -->
	<div class="flex items-center gap-2 text-sm mb-8">
		<a href="{{ route('loja.index', ['link='.$config->loja_id]) }}" class="text-gray-600 hover:text-indigo-600 transition">
			<i class="fas fa-home"></i> Início
		</a>
		<i class="fas fa-chevron-right text-gray-400 text-xs"></i>
		<span class="text-gray-900 font-semibold">Cadastro</span>
	</div>
	
	<form method="post" action="{{ route('loja.cadastro-store') }}">
		@csrf
		<input type="hidden" name="link" value="{{ $config->loja_id }}">
		<input type="hidden" id="empresa_id" value="{{ $config->empresa_id }}">
		
		<div class="grid grid-cols-1 @if($carrinho != []) lg:grid-cols-3 @endif gap-8">
			
			<!-- Form Section -->
			<div class="@if($carrinho != []) lg:col-span-2 @endif">
				<div class="bg-white rounded-2xl shadow-lg border-2 border-gray-100 p-8">
					
					<div class="mb-8">
						<h1 class="text-3xl font-black text-gray-900 mb-2">Criar Conta</h1>
						<p class="text-gray-600">Preencha seus dados para continuar</p>
					</div>
					
					<!-- Personal Info -->
					<div class="space-y-6">
						<div>
							<label class="block text-sm font-bold text-gray-700 mb-2">Nome Completo</label>
							<input required class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none transition font-medium" type="text" value="{{ old('nome')}}" name="nome" placeholder="Digite seu nome completo">
							@if($errors->has('nome'))
							<p class="text-red-500 text-sm mt-2">{{ $errors->first('nome') }}</p>
							@endif
						</div>
						
						<div>
							<label class="block text-sm font-bold text-gray-700 mb-2">E-mail</label>
							<input required class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none transition font-medium" type="email" id="email" name="email" placeholder="seu@email.com" value="{{ old('email')}}">
							@if($errors->has('email'))
							<p class="text-red-500 text-sm mt-2">{{ $errors->first('email') }}</p>
							@endif
						</div>
						
						<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
							<div>
								<label class="block text-sm font-bold text-gray-700 mb-2">Senha</label>
								<input required class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none transition font-medium" type="password" name="senha" placeholder="••••••••" value="{{ old('senha')}}">
								@if($errors->has('senha'))
								<p class="text-red-500 text-sm mt-2">{{ $errors->first('senha') }}</p>
								@endif
							</div>
							
							<div>
								<label class="block text-sm font-bold text-gray-700 mb-2">Confirmar Senha</label>
								<input required class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none transition font-medium" type="password" name="repita_senha" placeholder="••••••••" value="{{ old('repita_senha')}}">
							</div>
						</div>
					</div>
					
					<!-- Address Info -->
					<div class="mt-8 pt-8 border-t-2 border-gray-100">
						<h2 class="text-xl font-black text-gray-900 mb-6">Endereço de Entrega</h2>
						
						<div class="space-y-6">
							<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
								<div>
									<label class="block text-sm font-bold text-gray-700 mb-2">CEP</label>
									<input required class="cep w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none transition font-medium" data-mask="00000-000" type="text" name="cep" placeholder="00000-000" value="{{ $carrinho ? $carrinho->cep : ''}}">
								</div>
								
								<div class="md:col-span-2">
									<label class="block text-sm font-bold text-gray-700 mb-2">Rua</label>
									<input required class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none transition font-medium" type="text" name="rua" id="rua" placeholder="Nome da rua" value="{{ old('rua')}}">
								</div>
							</div>
							
							<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
								<div>
									<label class="block text-sm font-bold text-gray-700 mb-2">Número</label>
									<input required class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none transition font-medium" type="text" name="numero" id="numero" placeholder="123" value="{{ old('numero')}}">
								</div>
								
								<div class="md:col-span-2">
									<label class="block text-sm font-bold text-gray-700 mb-2">Cidade</label>
									<select required class="w-full" id="inp-cidade_id" name="cidade_id"></select>
									<input type="hidden" value="{{ old('cidade_id') }}" id="cidade_old_id">
								</div>
							</div>
							
							<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
								<div>
									<label class="block text-sm font-bold text-gray-700 mb-2">Bairro</label>
									<input required class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none transition font-medium" type="text" name="bairro" id="bairro" placeholder="Nome do bairro" value="{{ old('bairro')}}">
								</div>
								
								<div>
									<label class="block text-sm font-bold text-gray-700 mb-2">Celular</label>
									<input required data-mask="00 00000-0000" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none transition font-medium" type="tel" name="telefone" placeholder="00 00000-0000" value="{{ old('telefone') }}">
								</div>
							</div>
							
							<div>
								<label class="block text-sm font-bold text-gray-700 mb-2">Complemento (Opcional)</label>
								<input class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none transition font-medium" type="text" name="referencia" placeholder="Apto, bloco, etc." id="complemento" value="{{ old('referencia')}}">
							</div>
						</div>
					</div>
					
					<!-- Terms -->
					<div class="mt-8 pt-8 border-t-2 border-gray-100">
						<label class="flex items-start gap-3 cursor-pointer group">
							<input type="checkbox" id="termos" value="1" name="termos" class="w-5 h-5 mt-1 text-purple-600 border-2 border-gray-300 rounded focus:ring-purple-500">
							<span class="text-gray-700 text-sm">
								Eu li e aceito os 
								<a href="#!" data-toggle="modal" data-target="#modal-termos-condicoes" class="text-purple-600 font-bold hover:text-purple-700 transition">termos e condições</a>
							</span>
						</label>
						@if($errors->has('termos'))
						<p class="text-red-500 text-sm mt-2">{{ $errors->first('termos') }}</p>
						@endif
					</div>
					
					<!-- Submit Button (for no cart) -->
					@if($carrinho == [])
					<button type="submit" class="w-full mt-8 px-8 py-4 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white font-bold rounded-xl transition shadow-lg hover:shadow-xl flex items-center justify-center gap-2">
						<i class="fas fa-user-plus"></i>
						<span>Criar Minha Conta</span>
					</button>
					
					<p class="text-center text-gray-600 text-sm mt-4">
						Já tem uma conta? 
						<a href="{{ route('loja.login', ['link='.$config->loja_id])}}" class="text-purple-600 font-bold hover:text-purple-700 transition">Fazer Login</a>
					</p>
					@endif
				</div>
			</div>
			
			<!-- Order Summary (if cart exists) -->
			@if($carrinho != [])
			<div class="lg:col-span-1">
				<div class="bg-white rounded-2xl shadow-lg border-2 border-gray-100 p-6 sticky top-24">
					<h2 class="text-2xl font-black text-gray-900 mb-6">Resumo do Pedido</h2>
					
					<!-- Items -->
					<div class="space-y-3 mb-6 max-h-64 overflow-y-auto">
						@foreach($carrinho->itens as $i)
						<div class="flex justify-between items-start p-3 bg-gray-50 rounded-xl">
							<div class="flex-1">
								<p class="font-bold text-sm text-gray-900">{{ $i->produto->nome }}</p>
								<p class="text-xs text-gray-600 mt-1">{{ number_format($i->quantidade, 0) }}x R$ {{ number_format($i->valor_unitario, 2, ',', '.') }}</p>
							</div>
							<p class="font-black text-purple-600">R$ {{ number_format($i->sub_total, 2, ',', '.') }}</p>
						</div>
						@endforeach
					</div>
					
					<!-- Totals -->
					<div class="space-y-3 pt-4 border-t-2 border-gray-100">
						<div class="flex justify-between items-center text-gray-700">
							<span class="font-semibold">Entrega:</span>
							<span class="font-bold">R$ {{ number_format($carrinho->valor_frete, 2, ',', '.') }}</span>
						</div>
						
						<div class="flex justify-between items-center pt-3 border-t border-gray-200">
							<span class="text-lg font-bold text-gray-900">Total:</span>
							<span class="text-2xl font-black text-purple-600">R$ {{ number_format($carrinho->valor_total, 2, ',', '.') }}</span>
						</div>
					</div>
					
					<!-- Submit Button -->
					<button type="submit" class="w-full mt-6 px-6 py-4 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white font-bold rounded-xl transition shadow-lg hover:shadow-xl flex items-center justify-center gap-2">
						<i class="fas fa-user-plus"></i>
						<span>Criar Conta e Continuar</span>
					</button>
					
					<p class="text-center text-gray-600 text-xs mt-4">
						Já tem conta? 
						<a href="{{ route('loja.login', ['link='.$config->loja_id])}}" class="text-purple-600 font-bold hover:text-purple-700 transition">Login</a>
					</p>
				</div>
			</div>
			@endif
			
		</div>
	</form>
</div>

<!-- Terms Modal -->
<div class="modal fade" id="modal-termos-condicoes" tabindex="-1" role="dialog">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content rounded-2xl border-0 shadow-2xl">
			<div class="modal-header bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-t-2xl">
				<h5 class="modal-title font-bold text-xl">Termos e Condições</h5>
				<button type="button" class="close text-white" data-dismiss="modal">
					<span>&times;</span>
				</button>
			</div>
			<div class="modal-body p-6">
				{!! $config->termos_condicoes !!}
			</div>
			<div class="modal-footer border-0">
				<button type="button" class="px-6 py-2 bg-gray-200 hover:bg-gray-300 text-gray-900 font-bold rounded-xl transition" data-dismiss="modal">Fechar</button>
			</div>
		</div>
	</div>
</div>

@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>

<script type="text/javascript">
$(function(){
	let cidade_old_id = $('#cidade_old_id').val()
	if(cidade_old_id){
		findCidadeId(cidade_old_id)
	}
	
	$("#inp-cidade_id").select2({
		minimumInputLength: 2,
		language: "pt-BR",
		placeholder: "Digite para buscar a cidade",
		ajax: {
			cache: true,
			url: path_url + "api/buscaCidades",
			dataType: "json",
			data: function (params) {
				return {
					pesquisa: params.term,
				};
			},
			processResults: function (response) {
				var results = [];
				$.each(response, function (i, v) {
					results.push({
						id: v.id,
						text: v.info,
						value: v.id
					});
				});
				return {
					results: results,
				};
			},
		},
	});

	setTimeout(() => {
		let cep = $(".cep").val().replace(/[^0-9]/g,'')
		if(cep.length > 7){
			buscaCep()
		}
	}, 10)
});

$(document).on("blur", "#email", function () {
	let email = $(this).val()
	let empresa_id = $('#empresa_id').val()
	if(email){
		$.get(path_url + "api/ecommerce/valida-email", {
			email: email,
			empresa_id: empresa_id
		})
		.done((res) => {
			console.log(res)
		})
		.fail((err) => {
			console.log(err)
			if(err.status == 402){
				Swal.fire({
					icon: 'error',
					title: 'E-mail já cadastrado',
					text: 'Este e-mail já está cadastrado no sistema'
				});
				$('#email').val('')
			}
		})
	}
})

$(document).on("blur", ".cep", function () {
	buscaCep()
})

function buscaCep(){
	let cep = $(".cep").val().replace(/[^0-9]/g,'')
	if(cep.length == 8){
		showLoading();
		$.get('https://viacep.com.br/ws/'+cep+'/json')
		.done((res) => {
			console.log(res)
			findCidade(res.ibge)
			$('#rua').val(res.logradouro)
			$('#bairro').val(res.bairro)
			$('#complemento').val(res.complemento)
			hideLoading();
		})
		.fail((err) => {
			console.log(err)
			hideLoading();
		})
	}else{
		Swal.fire({
			icon: 'error',
			title: 'CEP inválido',
			text: 'Por favor, informe o CEP corretamente'
		});
	}
}

function findCidade(codigo_ibge){
	$('#inp-cidade_id').html('')
	$.get(path_url + "api/cidadePorCodigoIbge/" + codigo_ibge)
	.done((res) => {
		var newOption = new Option(res.info, res.id, false, false);
		$('#inp-cidade_id').append(newOption).trigger('change');
	})
	.fail((err) => {
		console.log(err)
	})
}

function findCidadeId(id){
	$('#inp-cidade_id').html('')
	$.get(path_url + "api/cidadePorId/" + id)
	.done((res) => {
		var newOption = new Option(res.info, res.id, false, false);
		$('#inp-cidade_id').append(newOption).trigger('change');
	})
	.fail((err) => {
		console.log(err)
	})
}
</script>
@endsection