@extends('BaseSistemaWeb')

@section('CSS')
{{ HTML::style('DataTables/dataTables.bootstrap.min.css') }}
{{ HTML::style('DataTables/responsive.dataTables.min.css') }}
{{ HTML::style('DataTables/select.dataTables.min.css') }}
{{ HTML::style('DataTables/buttons.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; } }
</style>
<style type="text/css" class="init">
	table.dataTable.stripe tbody > tr.odd.selected, table.dataTable.stripe tbody > tr.odd > .selected, table.dataTable.display tbody > tr.odd.selected, table.dataTable.display tbody > tr.odd > .selected {
		background-color: #E9E9E9;
	}
	table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected {
		background-color: #E9E9E9;
	}
	table.dataTable.display tbody > tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody > tr.odd.selected > .sorting_1 {
		background-color: #E9E9E9;
	}
	table.dataTable.order-column tbody > tr.selected > .sorting_1, table.dataTable.order-column tbody > tr.selected > .sorting_2, table.dataTable.order-column tbody > tr.selected > .sorting_3, table.dataTable.order-column tbody > tr > .selected, table.dataTable.display tbody > tr.selected > .sorting_1, table.dataTable.display tbody > tr.selected > .sorting_2, table.dataTable.display tbody > tr.selected > .sorting_3, table.dataTable.display tbody > tr > .selected {
		background-color: #E9E9E9;
	}
	table.dataTable.display tbody > tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody > tr.even.selected > .sorting_1 {
		background-color: #E9E9E9;
	}
	table.dataTable.display tbody > tr.selected:hover, table.dataTable.display tbody > tr > .selected:hover {
		background-color: #E9E9E9;
	}
	table.dataTable.display tbody > tr.selected:hover > .sorting_1, table.dataTable.order-column.hover tbody > tr.selected:hover > .sorting_1 {
		background-color: #E9E9E9;
	}
	.table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
		background-color: #E9E9E9;
	}
		.oculto {
		display: none !important;
	}
	</style>
@stop


@section('Contenido')
<div class="row">
	<div class="col-md-12">
		<h2><i class="icon-sc-landingpageicon"></i> Páginas de captura </h2>
	</div><!--/col-md-12-->
</div><!--/row-->

<div class="row">
	<div class="col-md-12">
		<div class="block-web">
			<div class="header"> <h3 class="content-header"> Listado de páginas de captura creadas </h3> </div>
			<div class="porlets-content">
				<div class="table-responsive">
					<table class="table table-striped-old table-bordered table-hover display" id="tblPaginasxCliente" cellspacing="0" width="100%">
						<thead>
							<tr>
								<th></th>
								<th class="all" data-priority="1"> Nombre </th>
								<th class="min-tablet-l" data-priority="2" style="width: 35%;"> Acciones </th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
			<div class="bottom">
				{{ HTML::linkRoute('SysWebPAterrizajePlantillaxClienteCrear', 'Agregar', array(), array('class' => 'btn btn-primary btnAgregar')) }}
				<button type="button" style="display: none;" class="btn btn-danger" id="btnEliminarSeleccionados"> Eliminar seleccionados </button>
							</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') }}
{{ HTML::script('DataTables/dataTables.select.min.js') }}
{{ HTML::script('DataTables/dataTables.buttons.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,
			cssClass: "ModalEliminar",
			buttons: [{
				id: "btnEliminar",
				label: "Eliminar",
				cssClass: "btn-danger",
				action: function(dialogItself){
					$.isLoading({ text: "Cargando..." }); NProgress.start();
					$.isLoading("hide"); NProgress.done();
					$("#btnEliminar").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Eliminando');
					$.post(
						"{{ URL::route('SysWebPAterrizajePlantillaxClienteBorrar') }}",
						{idP:id},
						function(data){
							$("#btnEnviar").prop("disabled", false).html("Eliminar");
							if(data.success){
								new PNotify({ title: "Felicidades!", text: data.mensaje, type: "success" });
								dialogItself.close();
								var table = $("#tblPaginasxCliente").DataTable();
								table.ajax.reload(null, false);
							}
							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 Clonar(id){
		var id = id;
		$.isLoading({ text: "Cargando..." }); NProgress.start();
		var ruta = "{{ URL::route('SysWebPAterrizajePlantillaxClienteClonar', array('')) }}";
		ruta = ruta+'/'+id;
		$("#btnEliminar").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Eliminando');
		$.post(
			ruta,
			{idP:id},
			function(data){
				$.isLoading("hide"); NProgress.done();
				$("#btnEnviar").prop("disabled", false).html("Eliminar");
				if(data.success){
					new PNotify({ title: "Felicidades!", text: data.mensaje, type: "success" });
					var table = $("#tblPaginasxCliente").DataTable();
					table.ajax.reload(null, false);
				}
				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 Descargar(id){
		var id = id;
		var ruta = "{{ URL::route('SysWebPAterrizajePlantillaxClienteDescargar', array('')) }}";
		ruta = ruta+'/'+id;
		//$("#btnEliminar").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Eliminando');
		$.get(
			ruta,
			/*{idP:id},*/
			function(data){
				//$("#btnEnviar").prop("disabled", false).html("Eliminar");
				if(data.success){
					/*new PNotify({ title: "Felicidades!", text: data.mensaje, type: "success" });*/
					//var table = $("#tblPaginasxCliente").DataTable();
					//table.ajax.reload(null, false);
				}
				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"
		);
	}
	</script>
@stop

@section('JSOr')
@if (Session::has('message'))
new PNotify({ title: "¡Felicidades!", text: "{{ Session::get('message') }}", type: "success" });
@endif
var tabla = $("#tblPaginasxCliente").DataTable({
	"processing": true,
	"serverSide": true,
	"ajax": "{{ URL::route('SysWebPAterrizajePlantillaxCliente') }}",
	columns: [
		{data: null, defaultContent: "", "searchable": false, "orderable": false},
		{data: "nombre", name: "nombre"},
		{data: "acciones", name: "acciones", "searchable": false, "orderable": false, "class": "text-center", 
		"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
			$(nTd).find(".btn-danger").css("margin-bottom", "3px");
		}
	}
	],
	"language": {
		"url": "{{ asset('DataTables/Spanish.json') }}",
		select: {
			rows: {
				_: "Tienes seleccionada %d filas",
				0: "De clic sobre la fila para seleccionarla",
				1: "Solo tiene 1 fila seleccionada"
			}
		}
	},
	"fnDrawCallback": function( oSettings ) {
		$(".tooltips").tooltip();
		$(".table-responsive").find("[title]").tooltip();
		if(oSettings._iRecordsTotal == 0){
			$(".btnAgregar").webuiPopover({
				trigger: "manual",
				title: "Instrucciones de Plataforma Sume Clientes",
				content: '<div class="alert alert-info" role="alert"> \
					<p style="font-size: 16;">Aún no tienes ningúna página creada, empieza a crear tus páginas haciendo clic en el botón de agregar</p> \
				<div>',
				closeable: true,
				backdrop: true,
				style: "",
				width: 500,
				multi: true
			});
			$(".btnAgregar").webuiPopover("show");
		}
	},
	autoWidth: false,
	responsive: {
		"details": {
			"type": "column",
			"target": 0
		}
	},
	columnDefs: [{
		"data": null,
		"defaultContent": "",
		"className": "control",
		"orderable": false,
		"width": "9%",
		"targets": 0
	}],
	select: {
		style: "multi",
		selector: "td:not(.control)"
	},
	dom: "Blfrtip",
	buttons: [
		{
			text: "<i class='fa fa-check-square-o' data-toggle='tooltip' data-original-title='Seleccionar todos los elementos'> </i>",
			action: function(){
				tabla.rows().select();
			},
			titleAttr: "Seleccionar todos los elementos"
		},
		{
			text: "<i class='fa fa-square-o' data-toggle='tooltip' data-original-title='Deseleccionar'> </i>",
			action: function(){
				tabla.rows().deselect();
			},
			titleAttr: "Deseleccionar todos los elementos seleccionados"
		}
	],
	order: [[ 1, "asc" ]]
}).on("select", function (e, dt, type, indexes){
	var seleccionados = tabla.rows({ selected: true }).count();
	if( seleccionados > 0 ){
		$("#btnEliminarSeleccionados").show();
	}
	else{
		$("#btnEliminarSeleccionados").hide();
	}
}).on("deselect", function(e, dt, type, indexes){
	var seleccionados = tabla.rows({ selected: true }).count();
	if( seleccionados > 0 ){
		$("#btnEliminarSeleccionados").show();
	}
	else{
		$("#btnEliminarSeleccionados").hide();
	}
});
$("#btnEliminarSeleccionados").click(function(e){
	var mensaje = "<div class='row'> \
						<div class='col-xs-12'> \
							<form id='frmEliminar'> \
								<h2> ¿Seguro que desea eliminar los registros seleccionados? </h2> \
							</form> \
						</div> \
					</div>";
	BootstrapDialog.show({
		title: "Eliminar registro",
		type: BootstrapDialog.TYPE_DANGER,
		message: mensaje,
		draggable: true,
		cssClass: "ModalEliminar",
		buttons: [{
			id: "btnEliminar",
			label: "Eliminar",
			cssClass: "btn-danger",
			action: function(dialogItself){
				$.isLoading({ text: "Cargando..." }); NProgress.start();
				var ids = new Array();
				$("#tblPaginasxCliente").find(".selected").each(function(e){ ids.push($(this).find(".hdnid").val()); });
				$("#btnEliminarSeleccionados").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Eliminando...');
				$("#btnEliminar").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Eliminando...');
				$.post(
					"{{ URL::route('SysWebPAterrizajePlantillaxClienteBorrar') }}",
					{idP:ids},
					function(data){
						$.isLoading("hide"); NProgress.done();
						$("#btnEliminarSeleccionados").prop("disabled", false).html("Eliminar seleccionados").hide();
						$("#btnEliminar").prop("disabled", false).html("Eliminar");
						if(data.success){
							new PNotify({ title: "Felicidades!", text: data.mensaje, type: "success" });
							dialogItself.close();
							var table = $("#tblPaginasxCliente").DataTable();
							table.ajax.reload(null, false);
						}
						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"
				);
			}
		}]
	});
});
@stop