@extends('BaseSistemaWeb')

@section('CSS')
{{ HTML::style('bootstrap-select/css/bootstrap-select.min.css') }}
{{ HTML::style('ajax-bootstrap-select/css/ajax-bootstrap-select.css') }}
{{ HTML::style('DataTables/dataTables.bootstrap.min.css') }}
{{ HTML::style('DataTables/responsive.dataTables.min.css') }}
<style type="text/css">
	.dropdown-menu {
		width: 100%;
	}
</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">
		@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 variaciones creadas (Pruebas A/B) </h3> </div>
			<div class="porlets-content">
				<div class="table-responsive">
					<table class="table table-hover" id="tblVariaciones">
						<thead>
							<tr>
								<th class="col-md-4 all"> Nombre </th>
								<th class="col-md-3 min-tablet-l"> Página 1 </th>
								<th class="col-md-3 min-tablet-l"> Página 2 </th>
								{{--<th class="col-md-4 min-tablet-l"> Enlace </th>--}}
								<th class="col-md-2 min-tablet-l"> Acciones </th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
			<div class="bottom"> </div>
		</div>
	</div>
</div><!--/row end-->

<div class="row">
	<div class="col-md-12">
		<div class="block-web">
			<div class="header"> <h3 class="content-header"> Crear nueva variación (Prueba A/B) </h3> </div>
			<div class="porlets-content">
				{{ Form::open(array('route' => 'SysWebPAterrizajeVariacionGuardar', 'method' => 'post', 'class' => 'form-horizontal row-border', 'id' => 'frmAgregar', 'files' => true)) }}
				<span class="text-danger" id="errplantillasxclientes_id"> {{ $errors->first('plantillasxclientes_id') }} </span>
				<div class="row">
					<div class="col-md-3">
						<div class="form-group">
							<label> Nombre de variación </label>
							<input type="text" class="form-control" name="nombre">
							<span class="text-danger" id="errnombre"> {{ $errors->first('nombre') }} </span>
						</div>
					</div>
					<div class="col-md-3 col-md-offset-1">
						<div class="form-group">
							<label> Página 1 </label>
							<select id="pagina_1" class="selectpicker with-ajax form-control" data-live-search="true" name="pagina_1"></select>
							<span class="text-danger" id="errpagina_1"> {{ $errors->first('pagina_1') }} </span>
						</div>
					</div>
					<div class="col-md-3 col-md-offset-1">
						<div class="form-group">
							<label> Página 2 </label>
							<select id="pagina_2" class="selectpicker with-ajax form-control" data-live-search="true" name="pagina_2" data-width="100%"></select>
							<span class="text-danger" id="errpagina_2"> {{ $errors->first('pagina_2') }} </span>
						</div>
					</div>
					<div class="col-md-12 text-center" style="padding-bottom: 10px;">
						<span class="text-danger" id="errpaginas"> {{ Session::get('paginas') }} {{ $errors->first('paginas') }} </span>
					</div>
				</div>
				<div class="bottom">
					{{ Form::button('Crear', array('class' => 'btn btn-primary', 'id' => 'btnAgregar', 'type' => 'submit')) }}
				</div>
				{{ Form::close() }}
			</div>
		</div>
	</div>
</div>
@stop

@section('JS')
{{ HTML::script('bootstrap-select/js/bootstrap-select.min.js') }}
{{ HTML::script('ajax-bootstrap-select/js/ajax-bootstrap-select.min.js') }}
{{ HTML::script('ajax-bootstrap-select/js/locale/ajax-bootstrap-select.es-ES.min.js') }}
{{ HTML::script('ZeroClipBoard/ZeroClipboard.js') }}
{{ HTML::script('ClipboardJS/clipboard.min.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">
	ZeroClipboard.config( { swfPath: "{{ asset('ZeroClipBoard/ZeroClipboard.swf') }}" } );
	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('SysWebPAterrizajeVariacionEliminar') }}",
						{idV: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 = $("#tblVariaciones").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')
$("#frmAgregar").submit(function(e){
	$.isLoading({ text: "Cargando..." }); NProgress.start();
	$('[id^="err"]').html("");
	$("#btnAgregar").html('<i class="fa fa-spinner fa-spin"></i> Cargando').prop("disabled", true);
	e.preventDefault();
	$("#btnAgregar").prop("disabled", true);
	$.post(
		"{{ URL::route('SysWebPAterrizajeVariacionGuardar', array()) }}",
		$("#frmAgregar").serialize(),
		function(data){
			$.isLoading("hide"); NProgress.done();
			$("#btnAgregar").html("Crear").prop("disabled", false);
			if(data.success){
				new PNotify({ title: "Realizado", text: data.mensaje, type: "success" });
				var table = $("#tblVariaciones").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"

	);
});
var options = {
	ajax : {
		url: "{{ URL::route("SysWebPAterrizajeVariacionSelect") }}",
		type: "POST",
		dataType: "json",
		data: {
			q: "{{{q}}}"
		}
	},
	locale: {
		emptyTitle: "Seleccione una página, buscando su nombre"
	},
	log: 3,
	preprocessData: function (data) {
		var i, l = data.length, array = [];
		if (l) {
			for (i = 0; i < l; i++) {
				array.push($.extend(true, data[i], {
					text: data[i].nombre,
					value: data[i].id,
					data: {
						subtext: data[i].nombre
					}
				}));
			}
		}
		return array;
	}
};
$("#pagina_1").selectpicker().filter(".with-ajax").ajaxSelectPicker(options);
$("#pagina_1").trigger("change");
$("#pagina_2").selectpicker().filter(".with-ajax").ajaxSelectPicker(options);
$("#pagina_2").trigger("change");
$("#tblVariaciones").DataTable({
	"processing": true,
	"serverSide": true,
	"ajax": "{{ URL::route('SysWebPAterrizajeVariacion') }}",
	columns: [
		{data: "nombre", name: "nombre"},
		{data: "nombreP1", name: "pxc1.nombre"},
		{data: "nombreP2", name: "pxc2.nombre"},
		/*{data: "enlace", name: "enlace", "searchable": false, "orderable": false},*/
		{data: "acciones", name: "acciones", "searchable": false, "orderable": false, "class": "text-center"}
	],
	"language": {
		"url": "{{ asset('DataTables/Spanish.json') }}"
	},
	"fnDrawCallback": function( oSettings ) {
		$(".tooltips").tooltip();
		var clipboard = new Clipboard(".btnCopiar");
		clipboard.on("success", function(e) {
			$("#"+e.trigger.id).tooltip({trigger: "manual", title: "Copiado!"});
			$("#"+e.trigger.id).tooltip("show");
			$("#"+e.trigger.id).html('<i class="fa fa-check"></i>');
			setTimeout(function(){ $("#"+e.trigger.id).html('<i class="fa fa-copy"></i>'); $("#"+e.trigger.id).tooltip("destroy"); }, 1000);
		});
		clipboard.on("error", function(e) {
			var msj = "";
			if(/iPhone|iPad/i.test(navigator.userAgent)) {
				msj = "El navegador web no soporta la función de copiado, debes hacerlo manualmente";
			}
			else if (/Mac/i.test(navigator.userAgent)) {
				msj = "Presiona ⌘-C para copiar";
			}
			else {
				msj = "Presiona Ctrl-C para copiar";
			}
			$("#"+e.trigger.id).tooltip({trigger: "manual", title: msj});
			$("#"+e.trigger.id).tooltip("show");
			setTimeout(function(){ $("#"+e.trigger.id).tooltip("destroy"); }, 5000);
		});
	},
	autoWidth: false,
	responsive: true
});
@stop