@extends('BaseSistemaWeb')

@section('CSS')
{{ HTML::style('DataTables/dataTables.bootstrap.min.css') }}
{{ HTML::style('DataTables/responsive.dataTables.min.css') }}
<style type="text/css">
	@media (max-width: 450px) { .ModalEliminar .modal-dialog { width: auto; } }
	@media (min-width: 451px) { .ModalEliminar .modal-dialog { width: 450px; } }
	.img-producto { width: 80px; height: 80px; margin: 0px auto; display: block; object-fit: contain;}
	.btnRadius { border-radius: 4px !important; }
	.mdAvatar .modal-dialog .modal-content .modal-header{ background-color: #363B3F; }
	.ModalClonar  .modal-footer{
		margin-top: 0px;
	}
</style>
@stop

@section('Contenido')
<div class="row">
	<div class="col-md-12">
		<h2><i class="fa fa-users"></i> Gestión de prospectos </h2>
	</div><!--/col-md-12-->
</div><!--/row-->

<div class="row">
	<div class="col-md-12">
		@if (Session::has('message'))
		<div class="alert alert-info">{{ Session::get('message') }}</div>
		@endif
	</div>
</div>

<div class="row">
	<div class="col-md-12">
		<div class="block-web">
			<div class="header"> <h3 class="content-header"> Listado de productos o servicios de la empresa   &nbsp;&nbsp; <a href="{{ URL::route('SysWebGClientesProductosAgregar') }}" class="btn btn-primary btnRadius"> Agregar </a></h3> </div>
			<div class="porlets-content">
				<div class="table-responsive">
					<table class="table table-striped table-bordered table-hover" id="tblEmpleados">
						<thead>
							<tr>
								<th class="all" style="width: 8%;"> Imagen </th>
								<th class="all"> Nombre del producto/servicio </th>
								<!--<th class=""> Precio </th>-->
								<th class="all" style="width: 20%;"> Relacionados </th>
								<th style="width: 20%;" class="min-tablet-l text-center"> Acciones </th>
							</tr>
						</thead>
						</table>
				</div>
			</div>
			<div class="bottom">
				<a href="{{ URL::route('SysWebGClientesProductosAgregar') }}" class="btn btn-primary"> Agregar </a>
			</div>
		</div>
	</div>
</div><!--/row end-->
@stop

@section('JS')
{{ HTML::script('DataTables/jquery.dataTables.min.js') }}
{{ HTML::script('DataTables/dataTables.bootstrap.min.js') }}
{{ HTML::script('DataTables/dataTables.responsive.min.js') }}
<script type="text/javascript">
	function Eliminar(id){
		var id = id;
		var mensaje = "<div class='row'> \
							<div class='col-xs-12'> \
								<form id='frmEliminar'> \
									<h2> ¿Seguro que desea eliminar? </h2> \
									<input type='hidden' name='idP' value='"+id+"'> \
								</form> \
							</div> \
						</div>";
		BootstrapDialog.show({
			title: "Eliminar registro",
			type: BootstrapDialog.TYPE_DANGER,
			message: mensaje,
			draggable: true,
			closeByBackdrop: false,
			cssClass: "ModalEliminar mdAvatar",
			onshown: function(dialogItself){
				$("body").addClass("modal-open");
			},
			buttons: [{
				id: "btnEliminar",
				label: "Eliminar",
				cssClass: "btn-danger btn-block btn-lg",
				action: function(dialogItself){
					NProgress.start();
					$("#btnEliminar").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Eliminando');
					$.post(
						"{{ URL::route('SysWebGClientesProductosEliminar') }}",
						{idP: id},
						function(data){
							NProgress.done();
							$("#btnAgregar").html("Guardar").prop("disabled", false);
							if(data.success){
								dialogItself.close();
								var table = $("#tblEmpleados").DataTable();
								table.ajax.reload(null, false);
								new PNotify({ title: "Realizado", text: data.mensaje, type: "success" });
							}
							else{
								if(data.mensaje != ''){ new PNotify({ title: "Error", text: data.mensaje, type: "error" }); }
								$.each(data.errMensajes, function(key, value){ if(value != ''){ $("#err"+key).html(value); } else{ $("#err"+key).html(""); } });
							}
						},
						"json"
					);
				}
			}],
			onhidden: function(dialogItself){
				$("body").removeClass("modal-open");
			}
		});
	}
	function AdministrarInventario(id){
		var id = id;
		var producto = $(".inventarioP"+id);
		var ruta = "{{ URL::route('SysWebGClientesProductosEditarInventario', array('idP')) }}";
		ruta = ruta.replace("idP", id);
		var conPrecioC = (producto.attr("data-tipo")!='P')?"disabled":"";
		var conPeso = (producto.attr("data-tipo")!='P')?"disabled":"";
		var conInventario = (parseInt(producto.attr("data-cantidad-ilimitada"))==1)?"disabled":"";
		var mensaje = "<div class='row'> \
			<div class='col-xs-12'> \
				<table class='table table-bordered' id='idTblAdministrarInventario'> \
					<thead> <tr> <th> Precio </th> <th> Precio comparativo </th> <th> Peso envío (g) </th> <th> Inventario </th> </tr> </thead> \
					<tbody> \
						<tr> \
							<td> \
								<input type='number' class='form-control nmPrecio' value='"+producto.attr("data-precio")+"' min='' max='' step='' data-id=''> \
							</td> \
							<td> \
								<input type='number' class='form-control nmPrecioTachado' value='"+producto.attr("data-precio-tachado")+"' min='' max='' step='' data-id='' "+conPrecioC+"> \
							</td> \
							<td> \
								<input type='number' class='form-control nmPeso' value='"+producto.attr("data-peso")+"' min='' max='' step='' data-id='' "+conPeso+"> \
							</td> \
							<td> \
								<input type='number' class='form-control nmInventario' value='"+producto.attr("data-inventario")+"' min='' max='' step='' data-id='' "+conInventario+"> \
							</td> \
						</tr> \
					</tbody> \
				</table> \
			</div> \
		</div>";
		BootstrapDialog.show({
			title: "Administración de inventario",
			type: BootstrapDialog.TYPE_INFO,
			message: mensaje,
			draggable: true,
			cssClass: "ModalEliminar2",
			buttons: [{
				id: "btnActualizar",
				label: "Editar",
				cssClass: "btn-info",
				action: function(dialogItself){
					$.isLoading({ text: "Cargando..." }); NProgress.start();
					$("#btnEliminar").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Eliminando');
					$.post(
						ruta,
						{idP: id, precio: $(".nmPrecio").val(), precioTachado: $(".nmPrecioTachado").val(), peso: $(".nmPeso").val(), inventario: $(".nmInventario").val()},
						function(data){
							$.isLoading("hide"); NProgress.done();
							$("#btnAgregar").html("Guardar").prop("disabled", false);
							if(data.success){
								dialogItself.close();
								var table = $("#tblEmpleados").DataTable();
								table.ajax.reload(null, false);
								new PNotify({ title: "Realizado", text: data.mensaje, type: "success" });
							}
							else{
								if(data.mensaje != ''){ new PNotify({ title: "Error", text: data.mensaje, type: "error" }); }
								$.each(data.errMensajes, function(key, value){ if(value != ''){ $("#err"+key).html(value); } else{ $("#err"+key).html(""); } });
							}
						},
						"json"
					);
				}
			}]
		});
	}
	function CambiarEstadoProducto(id, estado){
		var id = id;
		var strEstado = ( estado == 1 )?"activar":"desactivar";
		var mensaje = '<div class="row"> \
			<div class="col-xs-12"> \
				<form id="frmCambiarEstado"> \
					<h2> ¿Seguro que deseas '+strEstado+' el producto? </h2> \
					<input type="hidden" name="idP" value="'+id+'"> \
					<input type="hidden" name="estado" value="'+estado+'"> \
				</form> \
			</div> \
		</div>';
		BootstrapDialog.show({
			title: "Cambiar estado del producto",
			type: BootstrapDialog.TYPE_PRIMARY,
			message: mensaje,
			draggable: true,
			closeByBackdrop: false,
			cssClass: "ModalEliminar mdAvatar",
			buttons: [{
				id: "btnCambiarEstado",
				label: "Cambiar",
				cssClass: "btn-primary btn-lg btn-block",
				action: function(dialogItself){
					NProgress.start();
					$("#btnCambiarEstado").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Cambiando estado...');
					$.post(
						"{{ URL::route('SysWebGClientesProductosCambiarEstado') }}",
						$("#frmCambiarEstado").serialize(),
						function(data){
							NProgress.done();
							$("#btnCambiarEstado").html("Cambiar").prop("disabled", false);
							if(data.success){
								dialogItself.close();
								var table = $("#tblEmpleados").DataTable();
								table.ajax.reload(null, false);
								new PNotify({ title: "Realizado", text: data.mensaje, type: "success" });
							}
							else{
								if(data.mensaje != ''){ new PNotify({ title: "Error", text: data.mensaje, type: "error" }); }
								$.each(data.errMensajes, function(key, value){ if(value != ''){ $("#err"+key).html(value); } else{ $("#err"+key).html(""); } });
							}
						},
						"json"
					);
				}
			}],
			onshown: function(){
				$("body").addClass("modal-open");
			},
			onhidden: function(){
				$("body").removeClass("modal-open");
			}
		});
	}
	function Clonar(tipo,id){
		var id = id;
		var archivos = "";
		var cnt = "";
		var clase = "hide";
		var ocultar = "";
		if(tipo == "PD"){
			//clase = "hide";
			archivos = '<div class="form-group">\
				<label for="">\
					<input name="archivo" type="checkbox" value="1" class="index" checked> \
					<span class="custom-checkbox" style="margin-left: -25px;"></span> Clonar con archivo</a>\
				</label>\
			</div>';
		}
		if(tipo == "CD"){
			//clase = "hide";
			cnt = '<div class="form-group">\
				<label for="">\
					<input name="contenido" type="checkbox" value="1" class="index" checked> \
					<span class="custom-checkbox" style="margin-left: -25px;"></span> Clonar con estructura, seciones y contenido</a>\
				</label>\
			</div>';
		}
		else if(tipo == "S"){
			//clase = "hide"
		}
		var mensaje = '<div class="row"> \
			<div class="col-xs-12"> \
				<form id="frmClonar"> \
					<div class="form-group">\
						<label for="">\
							Nombre a asignar al clon\
						</label>\
						<input name="nombreps" type="text" value="" class="form-control"> \
						<span class="text-danger" id="errnombreps"></span>\
					</div>\
					<div class="form-group">\
						<label for="">\
							Selecciona la información que deseas clonar para tu producto o servicio\
						</label>\
					</div>\
					<div class="checkbox">\
						<div class="form-group '+clase+'">\
							<label for="">\
								<input name="variaciones" type="checkbox" value="1" class="index" checked> \
								<span class="custom-checkbox" style="margin-left: -25px;"></span> Clonar con variaciones</a>\
							</label>\
						</div>\
						<div class="form-group '+clase+'">\
							<label for="">\
								<input name="atributo" type="checkbox" value="1" class="index" checked> \
								<span class="custom-checkbox" style="margin-left: -25px;"></span> Clonar con atributos</a>\
							</label>\
						</div>\
						<div class="form-group dvInt">\
							<label for="">\
								<input name="inventario" type="checkbox" value="1" class="index" checked> \
								<span class="custom-checkbox" style="margin-left: -25px;"></span> Clonar con inventario</a>\
							</label>\
						</div>\
						<div class="form-group">\
							<label for="">\
								<input name="relacionado" type="checkbox" value="1" class="index" checked> \
								<span class="custom-checkbox" style="margin-left: -25px;"></span> Clonar con productos relacionados</a>\
							</label>\
						</div>\
						'+archivos+'\
						'+cnt+'\
					</div>\
				</form> \
			</div> \
		</div>';
		BootstrapDialog.show({
			title: "Clonar registro",
			type: BootstrapDialog.TYPE_PRIMARY,
			message: mensaje,
			draggable: true,
			closeByBackdrop: false,
			cssClass: "ModalClonar mdAvatar",
			onshow: function(dialogItself){
				//console.log($(".clon_"+id).closest("td").find('[data-inventario]').length);
				if($(".clon_"+id).closest("td").find(".fa-list-ol").length > 0){
					dialogItself.getModalBody().find(".hide").removeClass("hide");
				}
				if(parseInt($(".clon_"+id).attr("data-cnt"))){
					dialogItself.getModalBody().find(".dvInt").hide();
				}
			},
			onshown: function(dialogItself){
				$("body").addClass("modal-open");
				dialogItself.getModalBody().find(".hide").find('.index').val(0);
				dialogItself.getModalBody().find(".index").each(function(){
					$(this).off("click").on("click", function(){
						if($(this).is(":checked")){
							$(this).val(1);
						}
						else{
							$(this).val(0);
						}
					});
				});

			},
			buttons: [{
				id: "btnClonar",
				label: "Clonar",
				cssClass: "btn-success btn-block btn-lg",
				action: function(dialogItself){
					var conte = (parseInt($('[name="contenido"]').val()) == 1)?$('[name="contenido"]').val():0;
					var archivo = (parseInt($('[name="archivo"]').val()) == 1)?$('[name="archivo"]').val():0;
					var inventario = (parseInt($('[name="inventario"]').val()) == 1)?$('[name="inventario"]').val():0;
					if($('[name="nombreps"]').val() != ""){
						NProgress.start();
						$("#btnClonar").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Clonando');
						$("#errnombreps").text("");
						$.post(
							"{{ URL::route('SysWebGClientesProductosClonar') }}",
							{idP: id, variaciones: $('[name="variaciones"]').val(), atributo: $('[name="atributo"]').val(), contenido: conte, archivo: archivo, nombre: $('[name="nombreps"]').val(), relacionado: $('[name="relacionado"]').val(), inventario: inventario},
							function(data){
								NProgress.done();
								$("#btnAgregar").html("Guardar").prop("disabled", false);
								if(data.success){
									dialogItself.close();
									var table = $("#tblEmpleados").DataTable();
									table.ajax.reload(null, false);
									new PNotify({ title: "Realizado", text: data.mensaje, type: "success" });
								}
								else{
									if(data.mensaje != ''){ new PNotify({ title: "Error", text: data.mensaje, type: "error" }); }
									$.each(data.errMensajes, function(key, value){ if(value != ''){ $("#err"+key).html(value); } else{ $("#err"+key).html(""); } });
								}
							},
							"json"
						);
					}
					else{
						$("#errnombreps").text("Este campo es obligatorio");
					}
				}
			}],
			onhidden: function(dialogItself){
				$("body").removeClass("modal-open");
			}
		});
	}
</script>
@stop

@section('JSOr')
$("a[data-toggle=\"tab\"]").on("shown.bs.tab", function (e) { $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust(); });
$("#tblEmpleados").DataTable({
	"processing": true,
	"serverSide": true,
	"ajax": "{{ URL::route('SysWebGClientesProductos') }}",
	preDrawCallback: function (settings) { $.isLoading("hide"); },
	columns: [
		{data: "imagen", name: "imagen", "searchable": false,
			"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
				var ruta = (oData.imagen != null && oData.imagen != "")?oData.imagen:"https://s3-us-west-2.amazonaws.com/biblioteca-img-clientes/6290-jvAfLW4t1htHrjtE6EfTzNDbWhWShK.png";
				if(oData.imagen != null && oData.imagen != ""){
					var image = new Image();
					image.src = oData.imagen;
					$(nTd).html('<img src="'+oData.imagen+'" class="img-producto" alt="">');
					image.onerror = function() {
						var ruta = 'https://s3-us-west-2.amazonaws.com/biblioteca-img-clientes/6290-jvAfLW4t1htHrjtE6EfTzNDbWhWShK.png';
						$(nTd).html('<img src="'+ruta+'" class="img-producto" alt="">');
					}
				}
				else{
					$(nTd).html('<img src="https://s3-us-west-2.amazonaws.com/biblioteca-img-clientes/6290-jvAfLW4t1htHrjtE6EfTzNDbWhWShK.png" class="img-producto" alt="">');
				}
			}
		},
		{data: "nombre", name: "nombre"},
		/*{data: "precio", name: "precio"},*/
		{data: "relacionados", name: "relacionados", "searchable": false, "orderable": false, "class": "text-center"},
		{data: "acciones", name: "acciones", "searchable": false, "orderable": false, "class": "text-center"}
	],
	"language": {
		"url": "{{ asset('DataTables/Spanish.json') }}"
	},
	//dom: "<'row'<'col-sm-3'l><'col-sm-3'f><'col-sm-6'p>>" +
	//	"<'row'<'col-sm-12'tr>>" +
	//"<'row'<'col-sm-5'i><'col-sm-7'p>>",
	"fnDrawCallback": function( oSettings ) {
		$(".tooltips").tooltip();
	},
	autoWidth: false,
	responsive: true,
	//initComplete: function(){
	//	var input = $(".dataTables_filter input").unbind(),
	//	self = this.api(),
	//	$searchButton = $('<button class="btn btn-primary tooltips" style="margin-left: 5px;" data-toggle="tooltip" data-original-title="Buscar">').html('<i class="fa fa-search"></i>').click(function(){
	//		self.search(input.val().trim()).draw();
	//	}),
	//	$clearButton = $('<button class="btn btn-default tooltips" style="margin-left: 5px;" data-toggle="tooltip" data-original-title="Limpiar">').html('<i class="fa fa-paint-brush"></i>').click(function(){
	//		input.val('');
	//		$searchButton.click(); 
	//	});
	//	$(".dataTables_filter").append($searchButton, $clearButton);
	//	$("body").tooltip({selector: "[data-toggle='tooltip']"});
	//}
}).on("processing.dt", function(e, settings, processing) {
	if (processing) {
		$.isLoading();
	}
	else{
		$.isLoading("hide");
		window.scrollTo(0, 0);
	}
});
@if(Session::has('EliminarMensajeS'))
new PNotify({ title: "Realizado", text: "{{ Session::get('EliminarMensajeS') }}", type: "success" });
@endif
@if(Session::has('EliminarMensajeE'))
new PNotify({ title: "Realizado", text: "{{ Session::get('EliminarMensajeE') }}", type: "error" });
@endif
@stop