@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;
	}
	.btnRadius {
		border-radius: 4px !important;
	}
	.mdAvatar .modal-dialog .modal-content .modal-header{ background-color: #363B3F; }
	.dt-buttons{
		display: flex;
		justify-content: center;
		padding-bottom: 7px;
	}
	@media (max-width: 1250px){
		.div-groupinput{
			width: 200px !important;
		}
		.dataTables_filter button{
			height: 30px;
		}
	}
	@media (max-width: 1200px){
		.div-groupinput{
			width: 190px !important;
		}
		.dt-button{
			width: 28px;
			height: 28px;
		} 
		.dt-button span{
			display: flex;
			justify-content: center;
		}
		select[name="tblPaginasxCliente_length"]{
			width: auto !important;
			padding: 0 !important;
		}
		.dataTables_length label{
			font-size: 12.5px !important;
		}
	}
	@media (max-width: 1140px){
		.div-groupinput{
			width: 180px !important;
		}
		.dataTables_filter button{
			height: 30px;
		}
	}
	@media (max-width: 1080px){
		.div-groupinput{
			width: 180px !important;
		}
		.dataTables_filter button{
			height: 30px;
		
		}
		.dataTables_filter .btn-default{
			display: none !important;
		}
	}
		.oculto {
		display: none !important;
	}
	@media only screen and (max-width: 1250px) {
		.style-head-table{
			width: 40%;
		}
	}
	@media only screen and (min-width: 800px) and (max-width: 1024px) {
		.mw-col_1{
			width: 17.333% !important;
		}
		.mw-col_3{
			width: 36% !important;
		}
		.mw-col_5{
			width: 99% !important;
		}
		.paginacion-cntr{
			width: 62%;
		}
	}
	@media only screen and (min-width: 1025px) and (max-width: 1152px) {
		.col-sm-1 .dt-buttons a.dt-button {
			/* font-size: 0.63em !important; */
		}
		#tblPaginasxCliente_wrapper .row .col-sm-1{
			/* padding-right: 0px; */
		}
		.info-pag-fin{
			width: 42% !important;
		}
		.style-head-table {
			width: 32%;
		}
		.dataTables_info{
			margin-left: auto;
			margin-right: auto;
			width: 50%;
		}
		.paginacion-cntr{
			width: 62%;
		}
	}
	@media only screen and (min-width: 1153px) and (max-width: 1250px) {
		.col-sm-1 .dt-buttons a.dt-button {
			/* font-size: 0.67em !important; */
		}
		#tblPaginasxCliente_wrapper .row .col-sm-1{
			/* padding-right: 0px; */
		}
	}
	@media only screen and (min-width: 1255px) and (max-width: 1440px) {
		.col-sm-1 .dt-buttons a.dt-button {
			/* font-size: 0.83em !important; */
		}
		#tblPaginasxCliente_wrapper .row .col-sm-1{
			/* padding-right: 0px; */
		}
	}
	</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 &nbsp;&nbsp; {{ HTML::linkRoute('SysWebPAterrizajePlantillaxClienteCrear', 'Agregar', array(), array('class' => 'btn btn-primary btnAgregar btnRadius')) }}
					<div data-toggle="buttons" class="button-group pull-right">
						<a class="tooltips" data-toggle="tooltip" data-original-title="Dominios y subdominos de carga automática" onclick="ConfDySD()" href="javascript:ConfDySD()" style="color: rgba(0, 0, 0, 0.3); padding-right: 6px;">
							<i class="fa fa-share-square"> </i>
						</a>
						<a class="refresh tooltips" data-toggle="tooltip" data-original-title="Actualizar registros" onclick="Actualizar()" href="javascript:Actualizar()" style="color: rgba(0, 0, 0, 0.3)">
							<i class="fa fa-repeat"> </i>
						</a>
					</div>
				</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 style-head-table" 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') }}
{{ HTML::script('bootstrap-datetimepicker/js/moment-with-locales.js') }}
<script type="text/javascript">
	function verificarVinculosNP(){
		//VERIFICACIÓN DE LOS VÍNCULOS QUE ABREN EN UNA NUEVA PESTAÑA
		$(".LNP").off("click").click(function(e){
			e.preventDefault();
			var el = $(this);
			var date = new Date().getTime();
			var newDate = moment(date).add(45, 'm').toDate();
			newDate = moment(newDate).format("MM/DD/YYYY H:mm:ss");
			newDate = window.btoa(unescape(encodeURIComponent( newDate )));
			var url = el.attr("href")+"/"+el.attr("data-id")+"/"+el.attr("data-tipo")+"/"+newDate;
			window.open(url);
		});
	}
	function Actualizar(){
		var table = $("#tblPaginasxCliente").DataTable();
		table.ajax.reload(null, false);
	}
	function ConfDySD(){
		window.location.href = "{{ URL::route('SysWebPAterrizajeDominiosYSubDominiosCA') }}";
	}
	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){
					$.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"
					);
				}
			}],
			onhidden: function(dialogItself){
				$("body").removeClass("modal-open");
			}
		});
	}
	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"
		);
	}
		function detectarAnchoVistas() {
		var anchoPantalla = window.innerWidth;
		if(anchoPantalla <= 1250){
			$(".col-busqueda").find("button").addClass("btn-sm");
			$(".col-paginacion").find("li").addClass("btn-sm");
			$(".col-busqueda").find("input").addClass("input-sm");
		}
		else{
			$(".col-busqueda").find("button").removeClass("btn-sm");
			$(".col-paginacion").find("li").removeClass("btn-sm");
			$(".col-busqueda").find("input").removeClass("input-sm");
		}
	}
	$(window).resize(function() {
		detectarAnchoVistas();
	});
</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') }}",
	preDrawCallback: function (settings) { $.isLoading("hide"); },
	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:not(.btnRadius)").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,
				onShow: function($element){
					$(".webui-popover-backdrop").click(function(e){
						$(".btnAgregar:not(.btnRadius)").webuiPopover("hide");
					});
				}
			});
			$(".btnAgregar:not(.btnRadius)").webuiPopover("show");
		}
		if( window.matchMedia("(max-width: 1250px)").matches || window.matchMedia("(max-width: 1152px)").matches ){
			var listaPag = $("ul.pagination");
			listaPag.find(".previous").children().text("«");
			listaPag.find(".next").children().text("»");
		}
		verificarVinculosNP();
	},
	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: "<'row'<'col-sm-1 mw-col_1'B><'col-sm-3 mw-col_3'l><'col-sm-3 mw-col_3'f><'col-sm-5 mw-col_5'p>>" +
	dom: "<'row'<'col-sm-1 col-seleccionar'B><'col-sm-2 col-mostrar'l><'col-sm-4 col-busqueda'f><'col-sm-5 col-paginacion'p>>" +
		"<'row'<'col-sm-12'tr>>" +
	"<'row'<'col-sm-5 info-pag-fin'i><'col-sm-7 paginacion-cntr'p>>",
	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" ]],
	initComplete: function(){
		var input = $(".dataTables_filter input").unbind();
		$(".dataTables_filter").html('');
		var 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(); 
		});
		divInputGroup = $('<div class="input-group div-groupinput">'+
			'<div class="input-group-btn div-groupbutton">'+
			'</div>'+
		'</div>');
		$(".dataTables_filter").append(divInputGroup);
		$(".div-groupinput").prepend(input);
		$(".div-groupbutton").append($searchButton, $clearButton);
		$("body").tooltip({selector: "[data-toggle='tooltip']"});
		$("input[type=search]").attr("placeholder", "Buscar...");
		detectarAnchoVistas();
	}
}).on("processing.dt", function(e, settings, processing) {
	if (processing) {
		$.isLoading();
	}
	else{
		$.isLoading("hide");
		window.scrollTo(0, 0);
	}
}).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,
		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){
				$.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"
				);
			}
		}],
		onhidden: function(dialogItself){
				$("body").removeClass("modal-open");
		}
	});
});
$.fn.DataTable.ext.pager.numbers_length = 5;
@stop