@include('header')
@include('navigator_menu_principal')
<style>
	.serv_rojo {
		border-color: #f50202;
		border-style: solid;
	}
</style>

<input type="hidden" class="servicio_actual_flia" id="servicio_actual_flia">
<input type="hidden" id="servicio_flia_name" value="">


<div class="containerbig">

	<div class="row">
		<div class="col-md-8 h3">Familias de {{$cli->nombre_cliente}}</div>
	</div>
	<div class="row">
		<div class="col-md-1 h4">
			Servicio:
		</div>
		<div class="col-md-7">
			@foreach($servicios as $servicio)
				<div class="col-md-3 serv_{{$servicio->producto}} serv_0">
					<label><input type="radio" name="serv_cont[]" class="serv_cont_cli"
							value="{{$servicio->producto}}">&nbsp;&nbsp;{{$servicio->nombre_producto}}</label>
					<input type="hidden" id="servicio_flia_name_{{$servicio->producto}}"
						value="{{$servicio->nombre_producto}}">
				</div>
			@endforeach
		</div>

		<div class="col-md-4 text-right">
			<button type="button" class="btn btn-fidelitas btn-primary cont_botones hidden accion_new">Crear nueva
				familia</button>
			<button type="button" class="btn btn-fidelitas btn-primary"
				onclick="location.href='/led/led-clientes?prod={{$prod}}'">Volver a clientes</button>
		</div>
	</div>

	@foreach($servicios as $servicio)
		<div id="cont_{{$servicio->producto}}" class="hidden cont_0">
			@if ($servicio->producto == "00") <span style="color:red;">Para poder realizar acciones debe seleccionar el
			servicio correspondiente</span> @endif

			<table class="table table-striped table-condensed table-hover tablaFamilias" width="100%">
				<thead>
					<tr>
						@if($servicio->producto == "00")
							<th class="text-left">Servicio</th>
						@else
							<th class="hidden"></th>
						@endif
						<th class="text-left">Familia</th>
						<th>País</th>
						<th>Contrapartes</th>
						<th>Set de documentos</th>
						<th>Modo login</th>
						<th>Visible</th>
						<th>Prod.</th>
						<th>Creado</th>
						<th>Modificado</th>
						@if($servicio->producto !== "00")
							<th>Acción</th>
						@else
							<th class="hidden"></th>
						@endif
					</tr>
				</thead>
				<tbody>
					{{--@if(sizeof($fams) == 0)
					<tr>
						<td colspan="9" class="text-center">No se encuentran familias asociadas al cliente</td>
					</tr>
					@endif--}}
					@foreach($fams[$servicio->producto] as $family)
						<tr>
							@if($servicio->producto == "00")
								<td class="text-left">{{$family->servicio_contratado_name}}</td>
							@else
								<td class="hidden"></td>
							@endif
							<td class="text-left">{{$family->nombre_familia}}</td>
							<td class="text-center">{{$family->country_name}}</td>
							<td class="text-center">{{$family->total_contrapartes}}</td>
							<td>{{$family->nombre_set}}</td>
							<td class="text-center">@if($family->modalidad_login == 'L') Link @else Tax-ID @endif</td>
							<td class="text-center">@if($family->visible > 0) SI @else NO @endif</td>
							<td class="text-center">@if($family->uso_familia != 'I') LED @else IV @endif</td>
							<td class="text-center">{{$family->created_by_user}} ({{$family->created}})</td>
							<td class="text-center">@if(null != $family->modified) {{$family->modified_by_user}}
							({{$family->modified}}) @endif</td>
							@if($servicio->producto == "00")
								<td class="hidden"></td>
							@else
								<td class="text-center" nowrap="nowrap">
									<button type="button" class="btn btn-fidelitas btn-primary accion"
										data-servicio="{{$servicio->producto}}" data-familia="{{$family->familia}}"
										data-prod="{{$prod}}" data-accion="edit" data-toggle="modal"
										data-target="#modalFamiliaEdit">Editar</button>
									<button type="button" class="btn btn-fidelitas btn-primary accion"
										data-servicio="{{$servicio->producto}}" data-familia="{{$family->familia}}"
										data-prod="{{$prod}}" data-accion="subfam" data-toggle="modal"
										data-target="#modalFamiliaEdit">Subfamilias</button>
									{{-- <button type="button" class="btn btn-fidelitas btn-primary accion"
										data-servicio="{{$servicio->producto}}" data-familia="{{$family->familia}}"
										data-accion="delete" data-toggle="modal" data-target="#modalFamiliaEdit">Borrar</button>
									--}}
									<button type="button" class="btn btn-fidelitas btn-primary famprod"
										data-servicio="{{$servicio->producto}}" data-familia="{{$family->familia}}"
										data-prod="{{$prod}}" data-accion="productos">Productos</button>
								</td>
							@endif
						</tr>
					@endforeach
				</tbody>
				<tfoot></tfoot>
			</table>
			<br />
			<br />
			@if($servicio->producto == 47 || $servicio->producto == "00")
				<div class="row">
					<div class="col-md-8 h3">Subfamilias</div>
					<div class="col-md-4 text-right">
						<button type="button" class="btn btn-fidelitas btn-primary cont_botones" data-toggle="modal"
							data-servicio="{{$servicio->producto}}" data-target="#modalSubfamilia" id="add-subfamilia">Crear
							nueva subfamilia</button>
					</div>
				</div>
				@if ($servicio->producto == "00")
					<div class="row">
						<div class="col-md-12" style="color:red;">Para poder realizar acciones debe seleccionar el servicio
							correspondiente</div>
					</div>
				@endif
				<table class="table table-striped table-condensed table-hover tablaSubFamilias" width="100%">
					<thead>
						<tr>
							@if($servicio->producto == "00")
								<th class="text-left">Servicio</th>
							@else
								<th class="hidden"></th>
							@endif
							<th class="text-left">Subfamilia</th>
							<th>País</th>
							<th>Contrapartes</th>
							<th>Set de documentos</th>
							<th>Familias asociadas</th>
							<th>Visible</th>
							@if($servicio->producto == "00")
								<td class="hidden"></td>
							@else
								<th>Acción</th>
							@endif
						</tr>
					</thead>
					<tbody>
						@foreach ($subfamilias as $k => $data)
							<tr>
								@if($servicio->producto == "00")
									<td class="text-left">{{$family->servicio_contratado_name}}</td>
								@else
									<td class="hidden"></td>
								@endif
								<td class="text-left">{{$data['nombre_familia']}}</td>
								<td align="center">{{$data['country_name']}}</td>
								<td align="center">{{$data['total_contrapartes']}}</td>
								<td align="center">{{$data['nombre_set']}}</td>
								<td>
									@if (!empty($data['familias_asociadas']))
										<ul>
											@foreach($data['familias_asociadas'] as $parent)
												<li>{{$parent}}</li>
											@endforeach
										</ul>
									@endif
								</td>
								<td align="center">@if ($data['visible'] == 1) SI @else NO @endif</td>
								@if($servicio->producto == "00")
									<td class="hidden"></td>
								@else
									<td align="center">
										<button type="button" class="btn btn-fidelitas btn-primary subfamedit"
											data-servicio="{{$servicio->producto}}" data-subfamilia="{{$data['familia']}}"
											data-toggle="modal" data-target="#modalSubfamilia">Editar</button>
										@if ($prod == 47)<button type="button" class="btn btn-fidelitas btn-primary famprod"
											data-servicio="{{$servicio->producto}}"
										data-familia="{{$data['familia']}}">Productos</button>@endif
									</td>
								@endif
							</tr>
						@endforeach
					</tbody>
					<tfoot></tfoot>
				</table>
			@endif
		</div>
	@endforeach


</div>


<div id="modalFamilia" class="modal fade">
	<div class="modal-dialog" style="width:750px">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h3 class="modal-title" id="fam_title">Familia</h3>
			</div>
			<div class="modal-body" id="fam_data">
				<form class="form" id="frmFamilia" action="/led/led-familias-new" method="post">
					<!-- <input type="hidden" name="d_token" value="{{csrf_token()}}"> -->
					{{csrf_field()}}
					<input type="hidden" class="servicio_actual_flia" name="servicio_actual_flia">
					<input type="hidden" name="cliente" value="{{$cli->cliente}}">
					<input type="hidden" name="producto_fidelitas" value="{{$prod}}">

					<div class="row">
						<div class="col-md-12 form-group">
							<label for="nombre_cliente">Cliente</label>
							<input name="nombre_cliente" maxlength="" id="nombre_cliente" class="form-control"
								readonly="readonly" value="{{$cli->nombre_cliente}}">
						</div>
					</div>
					<div class="row hidden tipos">
						<div class="col-md-6 form-group">
							<label><input type="radio" name="tipo_nuevo" class="tipo_nuevo" value="0">&nbsp;&nbsp;Tipo
								de Contratista existente</label>
							<label><input type="radio" name="tipo_nuevo" class="tipo_nuevo" value="1">&nbsp;&nbsp;Tipo
								de Contratista nuevo</label>
						</div>
						<div class="col-md-6">
							<select name="tipo_contratista" id="tipo_contratista"
								class="form-control tipos_viejos hidden">
								<option value="">Seleccione tipo de contratista...</option>
								@foreach($tipos_contratista as $k => $tipo)
									<option value="{{$tipo->tipo_contratista}}">{{$tipo->nombre_tipo_contratista}}</option>
								@endforeach
							</select>
							<label class="tipos_nuevos hidden"><br>Se dará de alta un nuevo Tipo de contratista</label>
						</div>
					</div>

					<div class="row">
						<div class="col-md-12 form-group">
							<label for="nombre_familia">Nombre de la familia</label>
							<input type="text" name="nombre_familia" style="text-transform:uppercase;" maxlength="100"
								id="nombre_familia" required="yes" class="form-control">
						</div>
					</div>
					<div class="row">
						<div class="col-md-6">
							<label for="pais">Pais</label>
							<select name="country_code" class="form-control" id="pais">
								@foreach($country as $pais)
									<option value="{{$pais->country_code}}" @if($pais->country_code == 'AR') selected @endif>
										{{$pais->country_name}}</option>
								@endforeach
							</select>
						</div>

						<div class="col-md-4 form-group" style="margin-top: 24px">
							<label><input type="Checkbox" name="visible" value="1" checked="yes" class="">
								Activo</label>
						</div>
					</div>

					<div class="row">
						<div class="col-md-12">
							<label for="set_doc">Set de documentos</label>
							<select name="set_doc" id="set_doc" class="form-control">
								<option value=""> --- No asignado --- </option>
								@foreach($setdoc as $k => $set)
									<option value="{{$set->set_doc}}">{{$set->nombre_set}}</option>
								@endforeach
							</select>
						</div>
					</div>

					<div class="row">
						<div class="col-md-4">
							<label for="modalidad_login">Modo Login</label>
							<select name="modalidad_login" id="modalidad_login" class="form-control">
								<option value="T">Ingreso Tax ID+Clave</option>
								<option value="L">Link (similar Facón)</option>
							</select>
						</div>
						<div class="col-md-4 form-group">
							{{--
							<label for="uso_familia">Producto asociado</label>
							<select name="uso_familia" id="uso_familia" class="form-control">
								<option value="P">LED</option>
								@if (!empty($inquirovitae))<option value="I">Inquiro Vitae</option>@endif
							</select>
							--}}
						</div>
					</div>

					<br>

					<div class="row">
						<div class="col-md-12 text-center">
							<button type="submit" class="btn btn-default btn-fidelitas" style="width:105px"><i
									class="fa fa-check"></i> Aceptar</button>
							<button type="button" class="btn btn-default btn-fidelitas" style="width:105px"
								data-dismiss="modal"><i class="fa fa-times"></i> Cancelar</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>


<div id="modalFamiliaEdit" class="modal fade">
	<div class="modal-dialog" style="width:750px">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h3 class="modal-title" id="familia_title">Familia</h3>
			</div>
			<div class="modal-body" id="familia_edit"></div>
		</div>
	</div>
</div>




<div id="modalSubfamilia" class="modal fade">
	<div class="modal-dialog" style="width:750px">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h3 class="modal-title" id="subfamilia_title"></h3>
			</div>
			<div class="modal-body" id="subfamilia_body"></div>
		</div>
	</div>
</div>



<form id="frmFamProd" method="post" action="/led/led-familia-productos" name="frmFamProd">
	{{csrf_field()}}
	<input type="hidden" name="cliente" value="{{$cli->cliente}}">
	<input type="hidden" name="familia" value="" id="_familia">
	<input type="hidden" name="producto_fidelitas" value="" id="_producto_fidelitas">
</form>

<script type="text/javascript">

	$(document).ready(function () {

		/* Segun el servicio selecionado, muestra el div de las contrapartes de ese servicio */
		//$(document).on('change', '.serv_cont_cli', function(e) {
		$('.serv_cont_cli').on('change', function (e) {
			e.preventDefault();
			var serv = ($(this).val());
			$('.servicio_actual_flia').val(serv);
			$('.cont_0').addClass('hidden');
			$('#cont_' + serv).removeClass('hidden');
			$('.serv_0').removeClass("serv_rojo");
			$('.serv_' + serv).addClass("serv_rojo");
			$('.cont_botones').removeClass('hidden');
			if (serv == "00") {
				$('.cont_botones').addClass('hidden');
			}
			//$('.serv_cont_cli').prop('disabled', true);
		});

		$('.tipo_nuevo').on('change', function (e) {
			e.preventDefault();
			$("#tipo_contratista")[0].selectedIndex = 0;
			$('#nombre_familia').val('');
			var nuevo = ($(this).val());
			if (nuevo == 0) {
				$('.tipos_viejos').removeClass('hidden');
				$('.tipos_nuevos').addClass('hidden');
				$('#tipo_contratista').prop('required', true);
			}
			else {
				$('.tipos_viejos').addClass('hidden');
				$('.tipos_nuevos').removeClass('hidden');
				$('#tipo_contratista').prop('required', false);
			}
		});

		$('#tipo_contratista').on('change', function (e) {
			var combo = document.getElementById("tipo_contratista");
			var selected = combo.options[combo.selectedIndex].text;
			if (combo.selectedIndex !== 0) {
				selected = selected.toUpperCase()
				$('#nombre_familia').val(selected);
			}
			else {
				$('#nombre_familia').val('');
			}
		});

		$('.tablaFamilias').DataTable({

			"pagingType": "full_numbers",
			"dom": "if<t>lp",
			"ordering": true,
			"columns": [null, null, null, null, null, null, null, null, null, null, { "orderable": false }],
			"searching": true,
			"order": [[1, "asc"]],
			"info": true,
			"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Todos"]],
			"pageLength": 10,
			"language": {
				"lengthMenu": "Mostrar _MENU_ registros por página",
				"zeroRecords": "No se encontraron resultados",
				//"info": "Mostrando página _PAGE_ de _PAGES_",
				//"info": "Total de Registros: _MAX_", 
				"info": "Mostrando  _START_  de  _END_ - <b>Total:</b> _TOTAL_ registros",
				"infoEmpty": "No hay registros disponibles",
				"infoFiltered": "(filtered from _MAX_ total records)",
				"sSearch": "Buscar",
				"oPaginate": {
					"sFirst": "Primera",
					"sPrevious": "Anterior",
					"sNext": "Siguiente",
					"sLast": "Última"
				},
			}


		});


		$('.tablaSubFamilias').DataTable({

			"pagingType": "full_numbers",
			"dom": "if<t>lp",
			"ordering": true,
			"columns": [null, null, null, null, null, null, null, { "orderable": false }],
			"searching": true,
			"order": [[0, "asc"]],
			"info": true,
			"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Todos"]],
			"pageLength": 10,
			"language": {
				"lengthMenu": "Mostrar _MENU_ registros por página",
				"zeroRecords": "No se encontraron resultados",
				//"info": "Mostrando página _PAGE_ de _PAGES_",
				//"info": "Total de Registros: _MAX_", 
				"info": "Mostrando  _START_  de  _END_ - <b>Total:</b> _TOTAL_ registros",
				"infoEmpty": "No hay registros disponibles",
				"infoFiltered": "(filtered from _MAX_ total records)",
				"sSearch": "Buscar",
				"oPaginate": {
					"sFirst": "Primera",
					"sPrevious": "Anterior",
					"sNext": "Siguiente",
					"sLast": "Última"
				},
			}


		});


		$(document).on('click', '.accion', function () {
			var fam = $(this).data('familia');
			var prod = $(this).data('prod');
			var acc = $(this).data('accion');
			var servicio = $(this).data('servicio');
			$('#servicio_flia_name').val($('#servicio_flia_name_' + servicio).val());

			$.ajax({
				beforeSend: function () {
					$('#familia_title').html('Editar Familia ' + '<span style="color:red;">' + $("#servicio_flia_name").val() + '</span>');
					$('#familia_edit').html('');
				},
				method: 'post',
				url: '/led/led-familias-' + acc,
				data: { '_token': '{{csrf_token()}}', 'familia': fam, 'producto_fidelitas': prod, 'servicio': servicio },
				success: function (frmdata) {
					$('#familia_edit').html(frmdata);
				}

			});


		});

		$(document).on('click', '.accion_new', function () {
			var servicio = $('#servicio_actual_flia').val();
			$('#servicio_flia_name').val($('#servicio_flia_name_' + servicio).val());
			//console.log( $("#servicio_flia_name").val());
			$('#fam_title').html('Nueva Familia ' + '<span style="color:red;">' + $("#servicio_flia_name").val() + '</span>');

			$("#frmFamilia select")[0].selectedIndex = 0;
			$('#frmFamilia input[type="checkbox"]').attr('checked', true); // Activo lo dejo tildado
			$('#frmFamilia input[type="radio"]').attr('checked', false);
			$("#frmFamilia input[type=text]").each(function () { this.value = '' });

			$(".tipos").addClass("hidden");
			$('.tipo_nuevo').prop('required', false);
			$('#tipo_contratista').prop('required', false);
			$('.tipos_nuevos').addClass('hidden');
			$('.tipos_viejos').addClass('hidden');

			if (servicio == 73) {
				$(".tipos").removeClass("hidden");
				$('.tipo_nuevo').prop('required', true);
			}
			alert("Cuando se da de alta una nueva familia, en Visibilidad Usuarios, NINGÚN USUARIO estará habilitado para verla. \r\nDeberás dar permisos a los usuarios que puedan hacerlo.")
			$("#modalFamilia").modal('show');
		});


		$(document).on('click', '.famprod', function (e) {
			e.preventDefault();
			var fam = $(this).data('familia');
			var prod = $(this).data('prod');
			$('#_familia').val(fam);
			$('#_producto_fidelitas').val(prod);
			$('#frmFamProd').submit();
		});


		//


		$('#add-subfamilia').on('click', function () {
			$.ajax({
				method: 'post',
				url: '/led/led-subfamilia-add',
				data: { '_token': '{{csrf_token()}}', 'cliente': document.forms['frmFamProd'].cliente.value },
				beforeSend: function () {
					$('#subfamilia_title').html('Crear nueva subfamilia');
					$('#subfamilia_body').html('');
				},
				success: function (data) {
					$('#subfamilia_body').html(data);
				},

			});

		});

		$(document).on('click', '.subfamedit', function () {
			sf = $(this).data('subfamilia');
			$.ajax({
				method: 'post',
				url: '/led/led-subfamilia-edit',
				data: { '_token': '{{csrf_token()}}', 'cliente': document.forms['frmFamProd'].cliente.value, 'familia': sf },
				beforeSend: function () {
					$('#subfamilia_title').html('Editar subfamilia');
					$('#subfamilia_body').html('');
				},
				success: function (data) {
					$('#subfamilia_body').html(data);
				},
			});
		});

		$(document).on('click', '.subfamprod', function () {
			sf = $(this).data('subfamilia');

		});


	});

</script>

<style>
	.form-group {
		margin-bottom: 5px
	}
</style>
@include('footer')