@extends('layouts.app')
@section('htmlheader_title')
	{{ __('adminlte::message.clientcontacto') }}
@endsection
@section('contentheader_title')
<span style="background-image: linear-gradient(40deg, rgb(255, 216, 111), rgb(252, 98, 98)); padding-right:30vw; position:relative; overflow:hidden;">
    {{ __('adminlte::message.clientcontacto') }}
  <div style="background-color:#ecf0f5; position:absolute; height:145%; width:40vw; transform:rotate(30deg); right:-20vw; top:-45%;"></div>
</span>
@endsection	
@section('main-content')
<div class="container-fluid spark-screen">
	<div class="row">
		<div class="col-md-6">
			<div class="box box-primary">
				<div class="box-body box-profile">
					<div class="col-md-12 col-xs-12">
						@component('layouts.partials.modal')
							@slot('slug')
								{{$Cliente->ID_Cli}}
							@endslot
							@slot('textModal')
								el transportador <b>{{$Cliente->CliShortname}}</b>
							@endslot
						@endcomponent
						@if($Cliente->CliDelete == 0)
							@if(in_array(Auth::user()->UsRol, Permisos::Jefes) || in_array(Auth::user()->UsRol2, Permisos::Jefes))
							<a href="/contactos/{{$Cliente->CliSlug}}/edit" class="btn btn-warning pull-right"><i class="fas fa-edit"></i><b> {{ __('adminlte::message.edit') }}</b></a>
							<a method='get' href='#' data-toggle='modal' data-target='#myModal{{$Cliente->ID_Cli}}' class='btn btn-danger pull-left'><i class="fas fa-trash-alt"></i><b> {{ __('adminlte::message.delete') }}</b></a>
							<form action='/contactos/{{$Cliente->CliSlug}}' method='POST'  class="col-12 pull-right">
								@method('DELETE')
								@csrf
								<input type="submit" id="Eliminar{{$Cliente->ID_Cli}}" style="display: none;">
							</form>
							@endif
						@else
							@if(in_array(Auth::user()->UsRol, Permisos::PROGRAMADOR) || in_array(Auth::user()->UsRol2, Permisos::PROGRAMADOR))
								<form action='/contactos/{{$Cliente->CliSlug}}' method='POST' class="pull-left">
									@method('DELETE')
									@csrf
									<button type="submit" class='btn btn-success btn-block'>
										<i class="fas fa-plus-square"></i><b> {{ __('adminlte::message.add') }}</b>
									</button>
								</form>
							@endif
						@endif
					</div>
					<h3 class="profile-username text-center">{{$Cliente->CliShortname}}</h3>
					<li class="list-group-item">
						<b>{{ __('adminlte::message.clientcategoría') }}</b> <a class="pull-right">{{$Cliente->CliCategoria}}</a>
					</li>
					<li class="list-group-item">
						<b>{{ __('adminlte::message.clirazonsoc') }}</b> <a class="pull-right">{{$Cliente->CliName}}</a>
					</li>
					<li class="list-group-item">
						<b>{{ __('adminlte::message.clientnombrecorto') }}</b> <a class="pull-right">{{$Cliente->CliShortname}}</a>
					</li>
					<li class="list-group-item">
						<b>{{ __('adminlte::message.clientNIT') }}</b> <a class="pull-right">{{$Cliente->CliNit}}</a>
					</li>
				</div>
			   
				<div class="box-body box-profile">
					<h3 class="profile-username text-center">{{ __('adminlte::message.sclientsede') }}</h3>
					<li class="list-group-item">
						<b>{{ __('adminlte::message.sclientnamesede') }}</b> <a class="pull-right">{{$Sede->SedeName}}</a>
					</li>
					<li class="list-group-item">
						<b>{{ __('adminlte::message.address') }}</b>
						<a title="{{ __('adminlte::message.copy') }}" onclick="copiarAlPortapapeles('{{ __('adminlte::message.adddress') }}')"><i class="far fa-copy"></i></a>
						<a href="#" class="pull-right textpopover" id="{{ __('adminlte::message.adddress') }}" title="{{ __('adminlte::message.address') }}" data-toggle="popover" data-trigger="focus" data-html="true" data-placement="bottom" data-content="<p class='textolargo'>{{$Sede->SedeAddress}} ({{$Municipio->MunName}} - {{$Departamento->DepartName}})</p>">{{$Sede->SedeAddress}} ({{$Municipio->MunName}} - {{$Departamento->DepartName}})</a>
					</li>
					<li class="list-group-item">
						<b>{{ __('adminlte::message.phone') }}</b> <a class="pull-right">{{$Sede->SedePhone1}} - {{$Sede->SedeExt1}}</a>
					</li>
					<li class="list-group-item">
						<b>{{ __('adminlte::message.phone') }} 2</b> <a class="pull-right">{{$Sede->SedePhone2}} - {{$Sede->SedeExt2}}</a>
					</li>
					<li class="list-group-item">
						<b>{{ __('adminlte::message.email') }}</b>
						<a title="{{ __('adminlte::message.copy') }}" onclick="copiarAlPortapapeles('{{ __('adminlte::message.emailaddress') }}')"><i class="far fa-copy"></i></a>
						<a href="#" class="pull-right textpopover" id="{{ __('adminlte::message.emailaddress') }}" title="{{ __('adminlte::message.emailaddress') }}" data-toggle="popover" data-trigger="focus" data-html="true" data-placement="bottom" data-content="<p class='textolargo'>{{$Sede->SedeEmail}}</p>">{{$Sede->SedeEmail}}</a>
					</li>
					<li class="list-group-item">
						<b>{{ __('adminlte::message.mobile') }}</b> <a class="pull-right">{{$Sede->SedeCelular}}</a>
					</li>
				</div>
			</div>
		</div>
		@if(in_array(Auth::user()->UsRol, Permisos::Jefes) || in_array(Auth::user()->UsRol2, Permisos::Jefes))
		{{-- Modal para Crear un Vehiculo --}}
		<form role="form" action="/contacto-vehiculo-create/{{$Sede->SedeSlug}}" method="POST" enctype="multipart/form-data" data-toggle="validator">
			@csrf
			<div class="modal modal-default fade in create" id="create" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog" 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 style="font-size: 5em; color: green; text-align: center; margin: auto;">
								<i class="fas fa-plus-circle"></i>
								<span style="font-size: 0.3em; color: black;"><p>{{ __('adminlte::message.vehiculocreate') }}</p></span>
							</div> 
						</div>
						@if ($errors->any() && !old('validate'))
							<div class="alert alert-danger" role="alert">
								<ul>
									@foreach ($errors->all() as $error)
										<p>{{$error}}</p>
									@endforeach
								</ul>
							</div>
						@endif
						<div class="modal-header">
							<div class="form-group col-md-12">
								<label for="VehicPlaca" data-placement="auto" data-trigger="hover" data-html="true" data-toggle="popover" title="<b>{{ __('adminlte::message.vehicplaca') }}</b>" data-content="Placa de un vehiculo del Tranportador.">
									<i style="font-size: 1.8rem; color: Dodgerblue;" class="fas fa-info-circle fa-2x fa-spin"></i>
									{{ __('adminlte::message.vehicplaca') }}
								</label>
								<small class="help-block with-errors">*</small>
								<input type="text" name="CreateVehicPlaca" class="form-control placa" id="VehicPlaca" data-minlength="7" maxlength="7" placeholder="{{ __('adminlte::message.placaplaceholder') }}" value="{{old('CreateVehicPlaca')}}" required>
							</div>
							<div class="col-md-12 form-group">
								<label for="VehicTipo" data-placement="auto" data-trigger="hover" data-html="true" data-toggle="popover" title="<b>{{ __('adminlte::message.vehictipo') }}</b>" data-content="{{ __('adminlte::message.contacvehictipomessage') }}">
									<i style="font-size: 1.8rem; color: Dodgerblue;" class="fas fa-info-circle fa-2x fa-spin"></i>
									{{ __('adminlte::message.vehictipo') }}
								</label>
								<small class="help-block with-errors">*</small>
								<input type="text" name="CreateVehicTipo" class="form-control" id="VehicTipo" maxlength="64" value="{{old('CreateVehicTipo')}}" required>
							</div>
							<div class="col-md-12 form-group">
								<label for="VehicCapacidad" data-placement="auto" data-trigger="hover" data-html="true" data-toggle="popover" title="<b>{{ __('adminlte::message.vehiccapacidad') }}</b>" data-content="{{ __('adminlte::message.contacvehiccapacidadmessage') }}">
									<i style="font-size: 1.8rem; color: Dodgerblue;" class="fas fa-info-circle fa-2x fa-spin"></i>
									{{ __('adminlte::message.vehiccapacidad') }}
								</label>
								<small class="help-block with-errors">*</small>
								<input type="text" name="CreateVehicCapacidad" class="form-control numberKg" id="VehicCapacidad" value="{{old('CreateVehicCapacidad')}}" required>
							</div>
						</div>
						<div class="modal-footer">
							<button type="submit" class="btn btn-success pull-right">{{ __('adminlte::message.add') }}</button>
						</div>
					</div>
				</div>
			</div>
		</form>
		{{-- final del modal --}}
		@endif
		<div class="col-md-6">
			<div class="nav-tabs-custom">
				<ul class="nav nav-tabs">
					<li class="active box-info"><a href="#vehiculo" data-toggle="tab">{{ __('adminlte::message.vehiculos') }}</a></li>
				</ul>
				<div class="tab-content">
					<div class="active tab-pane" id="vehiculo">
						<div class="text-center">
							{{-- BOTON DE CREAR VEHICULO --}}
							@if($Cliente->CliDelete == 0 && (in_array(Auth::user()->UsRol, Permisos::Jefes) || in_array(Auth::user()->UsRol2, Permisos::Jefes)))
								<a method='get' href='#' data-toggle='modal' data-target='#create'  id="createvehiculo" class="btn btn-success text-center"><i class="fas fa-plus-circle"></i><b> {{ __('adminlte::message.addvehiculo') }}</b></a>
							@endif
						</div>
						<div style='overflow-y:auto; max-height:463px;'>
							@foreach ($Vehiculos as $Vehiculo)
								<div class="box-body box-profile">
									{{-- BOTONES DE ELIMINAR Y EDITAR --}}
									@if ($Vehiculo->VehicDelete === 0 && (in_array(Auth::user()->UsRol, Permisos::Jefes) || in_array(Auth::user()->UsRol2, Permisos::Jefes)))
										<a method='get' href='#' data-toggle='modal' data-target='#edit{{$Vehiculo->ID_Vehic}}'  id="editvehiculo" onclick="editvehiculo(`{{$Vehiculo->ID_Vehic}}`, `{{$Vehiculo->VehicPlaca}}`, `{{$Vehiculo->VehicTipo}}`, `{{$Vehiculo->VehicCapacidad}}`)" title="Editar" class="btn btn-warning pull-right"><i class="fas fa-edit"></i></a>
										<a method='get' href='#' data-toggle='modal' data-target='#contactosdelete'  id="deletevehiculo" onclick="deletevehiculo(`{{$Vehiculo->ID_Vehic}}`, `{{$Vehiculo->VehicPlaca}}`)" title="Eliminar" class="btn btn-danger pull-left"><i class="fas fa-trash-alt"></i></a>
										<div id="editvehiculocontacto"></div>
										<div id="deletevehiculocontacto"></div>
									@else
										@if ($Cliente->CliDelete === 0 && (in_array(Auth::user()->UsRol, Permisos::PROGRAMADOR) || in_array(Auth::user()->UsRol2, Permisos::PROGRAMADOR)))
											<form action='/contacto-vehiculo-delete/{{$Vehiculo->ID_Vehic}}' method='POST' class="pull-left">
												@method('DELETE')
												@csrf
												<button type="submit" class='btn btn-success' title="Añadir">
													<i class="fas fa-plus-square"></i>
												</button>
											</form>
										@endif
									@endif
									<h3 class="profile-username text-center">{{$Vehiculo->VehicPlaca}}</h3>
									<li class="list-group-item">
										<b>{{ __('adminlte::message.vehicplaca') }}</b> <a class="pull-right">{{$Vehiculo->VehicPlaca}}</a>
									</li>
									<li class="list-group-item">
										<b>{{ __('adminlte::message.vehictipo') }}</b> <a class="pull-right">{{$Vehiculo->VehicTipo}}</a>
									</li>
									<li class="list-group-item">
										<b>{{ __('adminlte::message.vehiccapacidad') }}</b> <a class="pull-right">{{$Vehiculo->VehicCapacidad}}</a>
									</li>
								</div>
							@endforeach
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

@endsection
@section('NewScript')
@if(in_array(Auth::user()->UsRol, Permisos::Jefes) || in_array(Auth::user()->UsRol2, Permisos::Jefes))
	<script>
		function editvehiculo(id, placa, tipo, capacidad){
			$('#editvehiculocontacto').empty();
			$('#editvehiculocontacto').append(`
			<form role="form" action="/contacto-vehiculo-edit/`+id+`" method="POST" enctype="multipart/form-data" data-toggle="validator" id="formedit">
				@csrf
				@method('PUT')
				<div class="modal modal-default fade in edit`+id+`" id="edit`+id+`" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
					<div class="modal-dialog" 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 style="font-size: 5em; color: orange; text-align: center; margin: auto;">
									<i class="fas fa-edit"></i>
									<span style="font-size: 0.3em; color: black;"><p>{{ __('adminlte::message.vehiculoedit') }}</p></span>
								</div>
							</div>
							<div id="errors"></div>
							<div class="modal-header">
								<div class="form-group col-md-12">
									<label for="VehicPlaca" data-placement="auto" data-trigger="hover" data-html="true" data-toggle="popover" title="<b>{{ __('adminlte::message.vehicplaca') }}</b>" data-content="Placa de un vehiculo del Tranportador.">
										<i style="font-size: 1.8rem; color: Dodgerblue;" class="fas fa-info-circle fa-2x fa-spin"></i>
										{{ __('adminlte::message.vehicplaca') }}
									</label>
									<small class="help-block with-errors">*</small>
									<input type="text" name="VehicPlaca" class="form-control placa" id="VehicPlaca" data-minlength="7" maxlength="7" placeholder="{{ __('adminlte::message.placaplaceholder') }}" value="`+placa+`" required>
								</div>
								<div class="col-md-12 form-group">
									<label for="VehicTipo" data-placement="auto" data-trigger="hover" data-html="true" data-toggle="popover" title="<b>{{ __('adminlte::message.vehictipo') }}</b>" data-content="{{ __('adminlte::message.contacvehictipomessage') }}">
										<i style="font-size: 1.8rem; color: Dodgerblue;" class="fas fa-info-circle fa-2x fa-spin"></i>
										{{ __('adminlte::message.vehictipo') }}
									</label>
									<small class="help-block with-errors">*</small>
									<input type="text" name="VehicTipo" class="form-control" id="VehicTipo" maxlength="64" value="`+tipo+`" required>
								</div>
								<div class="col-md-12 form-group">
									<label for="VehicCapacidad" data-placement="auto" data-trigger="hover" data-html="true" data-toggle="popover" title="<b>{{ __('adminlte::message.vehiccapacidad') }}</b>" data-content="{{ __('adminlte::message.contacvehiccapacidadmessage') }}">
										<i style="font-size: 1.8rem; color: Dodgerblue;" class="fas fa-info-circle fa-2x fa-spin"></i>
										{{ __('adminlte::message.vehiccapacidad') }}
									</label>
									<small class="help-block with-errors">*</small>
									<input type="text" name="VehicCapacidad" class="form-control numberKg" id="VehicCapacidad" value="`+capacidad+`" required>
								</div>
							</div>
							<input type="text" name="validate" hidden value="`+id+`">
							<div class="modal-footer">
								<button type="submit" class="btn btn-warning pull-right">{{ __('adminlte::message.update') }}</button>
							</div>
						</div>
					</div>
				</div>
			</form>
			`);
			numeroKg();
			popover();
			$('#formedit').validator('update');
		}
		function deletevehiculo(id, placa){
			$('#deletevehiculocontacto').empty();
			$('#deletevehiculocontacto').append(`
			<form action='/contacto-vehiculo-delete/`+id+`' method='POST' class="col-12 pull-right">
				@method('DELETE')
				@csrf
				<div class="modal modal-default fade in" id="contactosdelete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-body">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
								<div style="font-size: 5em; color: red; text-align: center; margin: auto;">
									<i class="fas fa-exclamation-triangle"></i>
									<span style="font-size: 0.3em; color: black;">
										<p>{{ __('adminlte::message.deletevehiculo') }} <b><i>`+placa+`</i></b> {{ __('adminlte::message.?') }} </p>
									</span>
								</div> 
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-success pull-left" data-dismiss="modal">{{ __('adminlte::message.modalexit') }}</button>
								<label for="delete" class='btn btn-danger'>{{ __('adminlte::message.modaldelete') }}</label>
							</div>
						</div>
					</div>
				</div>
				<input type="submit" id="delete" style="display: none;">
			</form>
			`);
		}
		function errorNull(){
			$('#errors').empty();
			$('#errors').append(`
				@if ($errors->any() && old('validate'))
					<div class="alert alert-danger" role="alert">
						<ul>
							@foreach ($errors->all() as $error)
								<p>{{$error}}</p>
							@endforeach
						</ul>
					</div>
				@endif
			`);
		}
	</script>
	@if ($errors->any() && old('validate'))
		<script>
			$(document).ready(function() {
				editvehiculo(`{{old('validate')}}`, `{{old('VehicPlaca')}}`, `{{old('VehicTipo')}}`, `{{old('VehicCapacidad')}}`);
				errorNull();
				$(".edit{{old('validate')}}").modal("show");
			});
		</script>
	@else
		@if($errors->any())
			<script>
				$(document).ready(function() {
					$(".create").modal("show");
				});
			</script>
		@endif
	@endif
@endif
@endsection