@extends('layouts.perfil')

@section('content')
	<img src="/assets-web/img/fondo-tarjeta-grande.jpg" class="img-fondo-tarjeta">
    <img src="/assets-web/img/fondo-tarjeta-celular.jpg" class="img-fondo-tarjeta-celular">
	<section class="pt-4 pb-5" style="position: relative;">
		<div class="container">
			<div class="row mx-0 align-items-start justify-content-center">
				<div class="col-md-4">
					<div class="div-item-perfil div-card-negro text-center pt-5">
						<img src="/assets-web/img/logo-amstel-tarjeta.png" class="img-logo-amstel-calendario">
						<div class="div-perfil mt-5">
							<img src="/storage/{{$asesor->avatar}}">
						</div>
						<div class="div-item-datos text-center mt-2">
							<h1 class="nombre-perfil mb-0">{{$asesor->nombres}} <span>{{$asesor->apellidos}}</span></h1>
							<p class="mb-0 p-datos-perfil">{{trans('profile.Asesor financiero')}}</p>
							<p class="mb-0 p-datos-perfil">KNG Advisors</p>
						</div>
					</div>
					<div class="div-item-redes div-card-negro d-flex align-items-center justify-content-center pt-4 pb-4" style="flex-wrap: wrap;">
						<div class="text-center mx-3 mt-3 mt-xxl-0">
							<a href="tel:{{$asesor->telefono}}" class="btn btn-redes-sociales"><i class='bx bx-mobile-alt'></i></a>
							<p class="p-redes-sociales mb-0 mt-2">{{trans('profile.Celular')}}</p>
						</div>
						<div class="text-center mx-3 mt-3 mt-xxl-0">
							<a href="https://wa.me/{{$asesor->telefono}}?text=Por%20favor%20necesito%20una%20consulta%20de%20asesoría%20financiera" class="btn btn-redes-sociales" target="_blank">
								<i class='bx bxl-whatsapp'></i>
							</a>
							<p class="p-redes-sociales mb-0 mt-2">WhatsApp</p>
						</div>
						<div class="text-center mx-3 mt-3 mt-xxl-0">
							<a href="mailto:{{$asesor->email}}?subject=Consulta&body=Por favor necesito una consulta de asesoría financiera" class="btn btn-redes-sociales">
								<i class='bx bx-envelope'></i>
							</a>
							<p class="p-redes-sociales mb-0 mt-2">E-mail</p>
						</div>
						<div class="text-center mx-3 mt-3 mt-xxl-0">
							<a href="https://es.kngadvisors.co.uk/" class="btn btn-redes-sociales">
								<i class='bx bx-world'></i>
							</a>
							<p class="p-redes-sociales mb-0 mt-2">{{trans('profile.Sitio web')}}</p>
						</div>
					</div>
					<div class="div-redes-sociales d-flex align-items-center justify-content-center div-card-negro pb-5">
						@foreach ($asesor->redes_sociales as $red)
							<a href="{{$red->perfil}}" class="btn btn-redes-sociales-perfil" target="_blank">
								<i class='{{$red->red_social->icono}}'></i>
							</a>
						@endforeach
					</div>
				</div>
				<div class="col-md-6 mt-3 mt-md-0">
					<div class="div-calendario-reserva py-5 px-4">
						<h3 class="h3-subtitulo" style="color: #fff;">{{trans('profile.¿Cuando desea la cita?')}}</h3>
						<h5 class="h5-subtitulo" style="color: #fff;">{{trans('profile.Seleccione la fecha de la cita, los días disponibles estan remarcados.')}}</h5>
				
						<div class="div-calendario mt-3">
							<div id="calendario" ></div>
							<input type="hidden" id="fecha_disponible">
						</div>
					</div>
					<div class="div-escoge-hora hidden py-5 px-4">
						<h3 class="h3-subtitulo" style="color: #fff;">{{trans('profile.¿A que hora desea la cita?')}}</h3>
						<h5 class="h5-subtitulo" style="color: #fff;">{{trans('profile.Seleccione la hora de la cita')}}</h5>
						<div class="row">
							<div class="col-md-12">
								<p style="text-align: right;margin-bottom: 0;color: #fff;" class="px-2">{{trans('profile.Zona horaria')}}: <span id="timezone_text"></span></p>
							</div>
						</div>
						<div id="horarios"></div>

						<div class="row">
							<div class="col-12  mt-3">
								<button class="btn btn-azul-proceso back" data-hide=".div-escoge-hora" data-show=".div-calendario-reserva"><</button>
							</div>
						</div>
						
					</div>
					<div class="div-formulario hidden py-5 px-4">
						<h3 class="h3-subtitulo" style="color: #fff;">{{trans('profile.Datos de contacto')}}</h3>
						<h5 class="h5-subtitulo" style="color: #fff;">{{trans('profile.Por favor ingrese su información personal para que podamos contactarnos con usted previo a la cita.')}}</h5>
						<div class="div-input-group mt-3">
							<div class="row mx-0">
								<div class="col-12 col-md-6 ps-0 pe-0 pe-md-2 mb-3 ">
									<div class="input-group has-validation">
										<input class="input-form form-control" type="text" placeholder="{{trans('profile.Nombres')}}" id="nombres" aria-describedby="nombresFeedback">
										<div id="nombresFeedback" class="invalid-feedback">
											{{trans('profile.Ingresa el nombre')}}
										</div>
									</div>
								</div>
								<div class="col-12 col-md-6 ps-0 ps-md-2 pe-0 mb-3">
									<div class="input-group has-validation">
										<input class="input-form form-control" type="text" placeholder="{{trans('profile.Apellidos')}}" id="apellidos" aria-describedby="apellidosFeedback">
										<div id="apellidosFeedback" class="invalid-feedback">
											{{trans('profile.Ingresa el apellido')}}
										</div>
									</div>
								</div>
								<div class="col-12 col-md-6 ps-0 pe-0 pe-md-2 mb-3">
									<div class="input-group has-validation">
										<input class="input-form form-control" type="email" placeholder="E-mail" id="email" aria-describedby="emailFeedback">
										<div id="emailFeedback" class="invalid-feedback">
											{{trans('profile.Ingresa el E-mail')}}
										</div>
									</div>
								</div>
								<div class="col-12 col-md-6 ps-0 ps-md-2 pe-0 mb-3">
									<div class="input-group has-validation">
										<input class="input-form form-control" type="number" placeholder="{{trans('profile.Teléfono')}}" id="telefono" aria-describedby="telefonoFeedback">
										<div id="telefonoFeedback" class="invalid-feedback">
											{{trans('profile.Ingresa el teléfono')}}
										</div>
									</div>
								</div>
								<div class="col-12 text-end mt-4">
									<div class="row">
										<div class="col-md-8 ps-0" style="text-align: left;">
											<button class="btn btn-azul-proceso back" data-hide=".div-formulario" data-show=".div-escoge-hora"><</button>
										</div>
										<div class="col-md-4 pe-0">
											<button class="btn btn-informacion " id="continuar_datos_personales">{{trans('profile.Continuar')}}</button>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="div-mensaje-cita hidden py-5 px-5">
						<h3 class="h3-subtitulo" style="color: #fff;">{{trans('profile.Confirmación')}}</h3>
						<h5 class="h5-subtitulo" style="color: #fff;">{{trans('profile.Por favor revise si la información es correcta.')}} <br> {{trans('profile.Si todo esta bien haga click en "Confirmar Cita"')}}</h5>
						<div class="row mx-0">
							<div class="col-12 px-0 mt-3">
								
								<div class="row mx-0 mb-3 mb-md-0">
									<div class="col-4 col-datos-personales mb-3" style="color: #fff;">{{trans('profile.Fecha')}}</div>
									<div class="col-8 col-datos-personales mb-3" id="fecha_confirm" style="color: #fff;"></div>
								</div>
								<div class="row mx-0 mb-3 mb-md-0">
									<div class="col-4 col-datos-personales mb-3" style="color: #fff;">{{trans('profile.Hora')}}</div>
									<div class="col-8 col-datos-personales mb-3" id="hora_confirm" style="color: #fff;"></div>
								</div>
								<div class="row mx-0 mb-3 mb-md-0">
									<div class="col-4" style="color: #fff;">{{trans('profile.Nombre y Apellidos')}}</div>
									<div class="col-8 col-datos-personales mb-3" id="nombres_confirm" style="color: #fff;"></div>
								</div>
								<div class="row mx-0 mb-3 mb-md-0">
									<div class="col-4 col-datos-personales mb-3" style="color: #fff;">E-mail</div>
									<div class="col-8 col-datos-personales mb-3" id="email_confirm" style="color: #fff;"></div>
								</div>
								<div class="row mx-0 mb-3 mb-md-0">
									<div class="col-4 col-datos-personales mb-3" style="color: #fff;">{{trans('profile.Teléfono')}}</div>
									<div class="col-8 col-datos-personales mb-3" id="telefono_confirm" style="color: #fff;"></div>
								</div>
							</div>
							<div class="col-12 text-center text-md-end pe-md-5 mt-4">
								<div class="row">
									<div class="col-md-7 ps-0" style="text-align: left;">
										<button class="btn btn-azul-proceso back" data-hide=".div-mensaje-cita" data-show=".div-formulario"><</button>
									</div>
									<div class="col-md-5 pe-0">
										<button class="btn btn-informacion" id="registrar">{{trans('profile.Confirmar Cita')}}</button>
									</div>
								</div>
							
							</div>
						</div>
					</div>

					<div class="div-cita-finalizada p-5 hidden text-white">
						<h3 class="h3-subtitulo" style="color: #fff;">{{trans('profile.Cita reservada')}}</h3>
						<h5 class="h5-subtitulo" style="color: #fff;">{{trans('profile.Tu cita se registro correctamente')}}</h5>
						<div class="row mx-0">
							<div class="col-12 px-0 mt-3">
								{{trans('profile.Gracias')}} <b><span id="nombre_text"></span></b>, {{trans('profile.me conmunicaré contigo para ver los detalles de nuestra reunión.')}} <br><br>

								{{trans('profile.Acabo de enviarte un correo a')}} <b><span id="email_text"></span></b> {{trans('profile.como verificación de la cita coordinada. Por favor revisa tu bandeja de correo no deseado y marca al dominio KNG Advisors como deseado para que no pierdas nuestro hilo de comunicación.')}} <br><br>

								{{trans('profile.Atte')}}. {{$asesor->nombres}} {{$asesor->apellidos}} <br>
								@if ($asesor->cargo)
									<small>{{$asesor->cargo->nombre}}</small> <br>
								@else
									<small>{{trans('profile.Asesor financiero')}}</small> <br>
								@endif
								<b>KNG</b>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
	</section>
@endsection

@php
	$dias_asesor = $asesor->calendario_disponibilidad->pluck("id_dia");
@endphp

@section('scripts')
	<script>

		let lang = "{{$lang}}";
		let dias = ["1","2","3","4","5","6","0"]
		let dias_disponibles = @json($dias_asesor);
		let hora_seleccionada;
		let timezone = moment.tz.guess();

		dias_disponibles = dias_disponibles.map((dia) => dia == 7 ? '0' : dia.toString() )
		let dias_bloqueados = dias.filter((dia) => {
			return dias_disponibles.includes(dia) === false ? dia : false
		})

		$("#timezone_text").html(timezone)

		$('#calendario').datepicker({
			language: lang,
			format: 'yyyy-mm-dd',
			daysOfWeekHighlighted: dias_disponibles.join(","),
			daysOfWeekDisabled: dias_bloqueados.join(","),
			startDate: new Date()
		});

		$('#calendario').on('changeDate', function() {
			$('#fecha_disponible').val(
				$('#calendario').datepicker('getFormattedDate')
			);

			let fechaFormateada = moment($('#fecha_disponible').val(), 'YYYY-MM-DD').format('DD-MM-YYYY');
			$("#fecha_confirm").html(fechaFormateada)

			cargarHorarios(()=>{
				$(".div-calendario-reserva").addClass("hidden")
				$(".div-escoge-hora").removeClass("hidden")
			})
		});

		$(".back").on("click",function(){
			let hide = $(this).attr("data-hide")
			let show = $(this).attr("data-show")
			$(hide).addClass("hidden")
			$(show).removeClass("hidden")
		})

		$("#timezone").on("change",function(){
			cargarHorarios()
		})

		$(document).on("click", ".btn-hora",function(){

			$(".btn-hora").removeClass("btn-hora-selected")
			$(this).addClass("btn-hora-selected")

			hora_seleccionada = $(this).attr("data-value")
			$("#hora_confirm").html($(this).attr("data-h"))

			$(".div-escoge-hora").addClass("hidden")
			$(".div-formulario").removeClass("hidden")

		})

		$("#continuar_datos_personales").on("click",function(){

			if (!validarDatosPersonales()) {
				return
			}

			let nombres = $("#nombres").val()
			let apellidos = $("#apellidos").val()

			$("#nombres_confirm").html(`${nombres} ${apellidos}`)
			$("#email_confirm").html($("#email").val())
			$("#telefono_confirm").html($("#telefono").val())

			$(".div-formulario").addClass("hidden")
			$(".div-mensaje-cita").removeClass("hidden")

		})

		$("#registrar").on("click",function(){
			$('#loader').addClass('is-active');

			$("#registrar").html("{{trans('profile.Registrando')}}...").attr("disabled", "true")

            $.ajax({
                url: '{{route("registra.cita")}}',
                type: "POST",
                dataType: "JSON",
                data:{
					_token: "{{csrf_token()}}",
					id_asesor: "{{$asesor->id}}",
					fecha: $('#fecha_disponible').val(),
					hora: hora_seleccionada,
					nombres: $("#nombres").val(),
					apellidos: $("#apellidos").val(),
					email: $("#email").val(),
					telefono: $("#telefono").val(),
					timezone_cliente: timezone
				}
            })
            .done((res)=>{
                console.log(res);
                $('#loader').removeClass('is-active');

                if(res.status){

					$("#nombre_text").html($("#nombres").val())
					$("#email_text").html($("#email").val())

					$(".div-mensaje-cita").addClass("hidden")
					$(".div-cita-finalizada").removeClass("hidden")
                   // toastr.success('Cita Registrada');
					
					// setTimeout(() => {
					// 	window.location.href = "{{route('perfil',[$asesor->uuid])}}"
					// }, 300);

                }

            })
            .fail((fail)=>{
                console.log(fail);
                let errors = fail.responseJSON.errors

				if (errors) {
					$.each(errors,(i, item)=>{
						toastr.error(item[0]);
					})
				}

				if(fail.responseJSON.message){
					toastr.error(fail.responseJSON.message);
				}

				$("#registrar").html("Confirmar Cita").removeAttr("disabled")
            
                $('#loader').removeClass('is-active');
            })
		})

		function validarDatosPersonales(){
			let inputs = ["nombres", "apellidos", "email", "telefono"]
			let valid = true; 
			let id_asesor = "{{$asesor->id}}";
			$.each(inputs,(i,item)=>{
				
				if (item != "email" || (item == "email" && id_asesor != 34)) {
					if ($(`#${item}`).val() == "") {
						$(`#${item}`).removeClass("is-valid")
						$(`#${item}`).addClass("is-invalid")
						valid = false;
					}else{
						$(`#${item}`).removeClass("is-invalid")
						$(`#${item}`).addClass("is-valid")
					}
				}

			})

			return valid
		}
		
		function cargarHorarios(callback = false){
			$.ajax({
				url: "{{route('horarios')}}",
				type: "POST",
				dataType:"JSON",
				data:{
					_token: "{{csrf_token()}}",
					id_asesor: "{{$asesor->id}}",
					fecha_seleccionada: $('#fecha_disponible').val(),
					timezone: timezone
				}
			}).done((res)=>{

				console.log(res)

				$("#horarios").html(res.view)
				
				if (callback) {
					callback()
				}

			}).fail((res)=>{
				console.log(res)
			})
		}

	</script>
@endsection