@extends('layouts.master')
@section('title')
	@endsection
@section('content')

	<div class="row principal">
		<div class="container">
			@if (count($errors) > 0)
			<div class="error-validation" role="alert">
				<ul>
					@foreach($errors->all() as $error)
					<li>{{ $error }}</li>
					@endforeach
				</ul>
			</div>
			@endif

			
			<div class="imagen">
				@php
					if (empty($datos_empleado['photo'])) {
						$image = url('/persona.jpg');
					} else {
						$image = $datos_empleado['photo'];
					}
				@endphp

				<img src="{{ $image }}" alt="{{ $datos_empleado['nombre_completo'] }}" />
			</div>

			<h1 class="nombre">{{ $datos_empleado['nombre_completo'] }}</h1>
			<h2 class="cargo">{{ $datos_empleado['cargo_firma'] }}</h2>

			<div class="datos_contacto">
				<h3 class="cabecera">{{ $estaticos[$idioma]['contacto'] }}</h3>

				@if (!empty($datos_empleado['email']))
					<div class="informacion">
						<a href="mailto:{{ $datos_empleado['email'] }}" rel="nofollow" title="{{ $estaticos[$idioma]['title_send_email'] }} {{ $datos_empleado['email'] }}" aria-label="{{ $estaticos[$idioma]['title_send_email'] }} {{ $datos_empleado['email'] }}">
							<div class="icono"><i aria-hidden="true" class="fa-regular fa-envelope"></i><span class="visually-hidden-focusable">{{ $estaticos[$idioma]['title_send_email'] }} {{ $datos_empleado['email'] }}</span></div>
							<div class="dato">{{ $datos_empleado['email'] }}</div>
						</a>
					</div>
				@endif
				@if (!empty($datos_empleado['movil']))
					<div class="informacion">
						<a href="tel:{{ str_replace(array(' ', '-'), '', $datos_empleado['movil']) }}" rel="nofollow" title="{{ $estaticos[$idioma]['title_phone'] }} {{ $datos_empleado['movil'] }}" aria-label="{{ $estaticos[$idioma]['title_phone'] }} {{ $datos_empleado['movil'] }}">
							<div class="icono"><i aria-hidden="true" class="fa-solid fa-mobile-screen-button"></i><span class="visually-hidden-focusable">{{ $estaticos[$idioma]['title_phone'] }} {{ $datos_empleado['movil'] }}</span></div>
							<div class="dato">{{ $datos_empleado['movil'] }}</div>
						</a>
					</div>
				@endif

				@if (!empty($datos_empleado['movil_2']))
					<div class="informacion">
						<a href="tel:{{ str_replace(array(' ', '-'), '', $datos_empleado['movil_2']) }}" rel="nofollow" title="{{ $estaticos[$idioma]['title_phone'] }} {{ $datos_empleado['movil_2'] }}" aria-label="{{ $estaticos[$idioma]['title_phone'] }} {{ $datos_empleado['movil_2'] }}">
							<div class="icono"><i aria-hidden="true" class="fa-solid fa-mobile-screen-button"></i><span class="visually-hidden-focusable">{{ $estaticos[$idioma]['title_phone'] }} {{ $datos_empleado['movil_2'] }}</span></div>
							<div class="dato">{{ $datos_empleado['movil_2'] }}</div>
						</a>
					</div>
				@endif


				@if (!empty($datos_empleado['telefono_oficina']))
					<div class="informacion">
						<a href="tel:{{ str_replace(array(' ', '-'), '', $datos_empleado['telefono_oficina']) }}" rel="nofollow" title="{{ $estaticos[$idioma]['title_phone'] }} {{ $datos_empleado['telefono_oficina'] }}" aria-label="{{ $estaticos[$idioma]['title_phone'] }} {{ $datos_empleado['telefono_oficina'] }}">
							<div class="icono"><i aria-hidden="true" class="fa-solid fa-phone-flip"></i><span class="visually-hidden-focusable">{{ $estaticos[$idioma]['title_phone'] }} {{ $datos_empleado['telefono_oficina'] }}</span></div>
							<div class="dato">{{ $datos_empleado['telefono_oficina'] }}</div>
						</a>
					</div>
				@endif

				@if (!empty($datos_empleado['direccion']))
					<div class="informacion">
						
						<a href="https://www.google.com/maps/search/?api=1&query={{ $datos_empleado['direccion'] }}" target="_blank" rel="nofollow" title="{{ $estaticos[$idioma]['title_gmaps'] }} {{ $estaticos[$idioma]['title_blank'] }}" aria-label="{{ $estaticos[$idioma]['title_gmaps'] }} {{ $estaticos[$idioma]['title_blank'] }}">
							<div class="icono"><i aria-hidden="true" class="fa-solid fa-location-dot"></i><span class="visually-hidden-focusable">{{ $datos_empleado['direccion'] }}</span></div>
							<div class="dato">{!! $datos_empleado['direccion_linea_1'] . '<br>' . $datos_empleado['direccion_linea_2'] !!}</div>
						</a>


					</div>
				@endif


				

				@if (!empty($datos_empleado['linkedin']) || !empty($datos_empleado['twitter']))

					<h3 class="cabecera">{{ $estaticos[$idioma]['redes'] }}</h3>

					@if (!empty($datos_empleado['linkedin']))
					<div class="informacion">
						<a href="https://www.linkedin.com/in/{{ $datos_empleado['linkedin'] }}" target="_blank" rel="nofollow" title="Linkedin {{ $estaticos[$idioma]['title_blank'] }}" aria-label="Linkedin {{ $estaticos[$idioma]['title_blank'] }}">
							<div class="icono"><i aria-hidden="true" class="fa-brands fa-linkedin"></i><span class="visually-hidden-focusable">Linkedin</span></div>
							<div class="dato">{{ $datos_empleado['nombre_completo'] }}</div>
						</a>
					</div>
					@endif

					@if (!empty($datos_empleado['twitter']))
						<div class="informacion">
							<a href="https://twitter.com/{{ str_replace("@", "", $datos_empleado['twitter']) }}" target="_blank" rel="nofollow" title="Twitter {{ $estaticos[$idioma]['title_blank'] }}" aria-label="Twitter {{ $estaticos[$idioma]['title_blank'] }}">
								<div class="icono"><i aria-hidden="true" class="fa-brands fa-twitter"></i><span class="visually-hidden-focusable">Twitter</span></div>
								<div class="dato">{{ "@" . str_replace("@", "", $datos_empleado['twitter']) }}</div>
							</a>
						</div>
					@endif
				@endif

			</div>
		</div>
	</div>

	<div class="row acciones">
		<div class="container">
			<button class="btn_perfil btn-primary" id="btn_qr_perfil" data-toggle="modal" data-target="#qr_perfil"></button>
			<button class="btn_vcard btn-primary" id="btn_qr_vcard" data-toggle="modal" data-target="#qr_vcard"></button>

			<script type="text/javascript">
				var vcard_text = "";
			</script>
        </div>
	</div>


	<div class="modal fade" id="qr_vcard" tabindex="-1" role="dialog" aria-labelledby="Modal " aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered" role="document">
		  <div class="modal-content">
			<div class="modal-header">
			  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">&times;</span>
			  </button>
			</div>
			<div class="modal-body">
				<h5 class="modal-title" id="exampleModalLongTitle"></h5>
				<div class="qrcode" id="qrcodeVcard"></div>
			</div>
					  </div>
		</div>
	</div>

	<div class="modal fade" id="qr_perfil" tabindex="-1" role="dialog" aria-labelledby="Modal " aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered" role="document">
		  <div class="modal-content">
			<div class="modal-header">
			  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">&times;</span>
			  </button>
			</div>
			<div class="modal-body">
				<h5 class="modal-title" id="exampleModalLongTitle"></h5>
				<div class="qrcode" id="qrcode"></div>
			</div>
		  </div>
		</div>
	</div>
@endsection