@extends('BaseSistemaWeb')

@section('CSS')
{{ HTML::style('DataTables/dataTables.bootstrap.min.css') }}
{{ HTML::style('DataTables/responsive.dataTables.min.css') }}
{{ HTML::style('bootstrap-daterangepicker/daterangepicker.css') }}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
{{ HTML::style('Prettify/prettify.min.css') }}
@stop

@section('Contenido')
<div class="row">
	<div class="col-md-12">
		<h2> <i class="fa fa-users"></i> Afiliados </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"> Historial de cobros </h3>
			</div>
			<div class="porlets-content">
				<form id="frmFiltroFechas" class="form-inline" style="padding-bottom: 15px;">
					<div class="form-group">
												<label for="FiltroFechas" style="padding-top: 10px;"> Solicitudes de: </label>
						<input id="FiltroFechas" type="text" name="filtrofechas" value="{{ $semanaPasada }} - {{ $ahora }}" readonly>
					</div>
					<button type="submit" class="btn btn-primary"> Filtrar </button>
					<button id="btnLimpiar" type="button" class="btn btn-default"> Limpiar </button>
				</form>
				<div class="table-responsive">
					<table class="table table-striped table-bordered table-hover display" id="tblComisiones" width="100%" cellspacing="0">
						<thead>
							<tr>
								<th class="all"> Fecha de solicitud </th>
								<th class="min-tablet-l"> Total </th>
								<th class="min-tablet-l"> Método de pago </th>
								<th class="min-tablet-l"> Cuenta a pagar </th>
								<th class="min-tablet-l"> Comentario </th>
								<th class="min-tablet-l"> Estado </th>
								<th class="all"> Afiliado </th>
								<th class="all"> Fecha pagado </th>
								<th class="all"> Acciones </th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
@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('bootstrap-daterangepicker/moment.min.js') }}
{{ HTML::script('bootstrap-daterangepicker/daterangepicker.js') }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
{{ HTML::script('SysWeb/SumeClientes/Fechas.js') }}
{{ HTML::script('bootstrap-daterangepicker/moment.min.js') }}
{{ HTML::script('Prettify/prettify.min.js') }}
{{ HTML::script('Prettify/run_prettify.min.js') }}
{{ HTML::script('ClipboardJS/clipboard.min.js') }}
<script type="text/javascript">
	function Actualizar(){
		var table = $("#tblComisiones").DataTable();
		table.ajax.reload(null, false);
	}
	function CambioVista(value){
		var value = value;
		var table = $("#tblComisiones").DataTable();
		if(value == 1){
			table.columns(".numeros").visible(true, false);
			table.columns(".porcentajes").visible(false, false);
		}
		else if(value == 2){
			table.columns(".porcentajes").visible(true, false);
			table.columns(".numeros").visible(false, false);
		}
	}
	function LiberarPago(id){
		var id = id;
		var mensaje = '<form action="#" id="frmPagoComision"> \
		<div class="form-group"> \
			<label> ¿La transacción del monto fue exitosa? </label> \
			<input type="hidden" value="'+id+'" name="idSC"> \
	</form>';
	BootstrapDialog.show({
		cssClass: "mdAvatar",
		title: "Liberar pago de comisión",
		message: mensaje,
		draggable: true,
		type: BootstrapDialog.TYPE_SUCCESS,
		buttons: [{
			id: "btnLiberarPago",
			label: "Si, Liberar pago",
			cssClass: "btn-success btn-lg btn-block",
			action: function(dialogItself){
				$("#btnLiberarPago").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Procesando...');
				$.isLoading({ text: "Cargando..." }); NProgress.start();
				$.post(
					"{{ URL::route('SysWebAfilSolicitudesComisionLiberar', array()) }}",
					$("#frmPagoComision").serialize(),
					function(data){
						$.isLoading("hide"); NProgress.done();
						$("#btnLiberarPago").prop("disabled", false).html("Si, Liberar pago");
						if(data.success){
							new PNotify({ title: "Realizado", text: data.mensaje, type: "success" });
							dialogItself.close();
							setTimeout( function(){ Actualizar(); }, 3000 );
						}
						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')
$("#FiltroFechas").daterangepicker({
	"ranges": {
		"Hoy": [moment(), moment()],
		"Ayer": [moment().subtract(1, "days"), moment().subtract(1, "days")],
		"Últimos 7 días": [moment().subtract(6, "days"), moment()],
		"Últimos 30 días": [moment().subtract(29, "days"), moment()],
		"Este mes": [moment().startOf("month"), moment().endOf("month")],
		"Último mes": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
	},
	"alwaysShowCalendars": true,
	locale: {
		format: 'DD/MM/YYYY'
	},
	autoUpdateInput: false,
	"startDate": moment(),
	"endDate": moment()
}, function(start, end, label){
	console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
});
$("#FiltroFechas").on("apply.daterangepicker", function(ev, picker){
	$(this).val(picker.startDate.format("DD/MM/YYYY") + " - " + picker.endDate.format("DD/MM/YYYY"));
});
$("#FiltroFechas").on("cancel.daterangepicker", function(ev, picker){
	$(this).val("");
});
$("#frmFiltroFechas").submit(function(e){
	e.preventDefault();
	var table = $("#tblComisiones").DataTable();
	table.ajax.reload(null, false);
});
$("#btnLimpiar").click(function(e){
	e.preventDefault();
	$("#FiltroFechas").val("{{ $semanaPasada }} - {{ $ahora }}");
	var table = $("#tblComisiones").DataTable();
	table.ajax.reload(null, false);
});
$("#tblComisiones").DataTable({
	"processing": true,
	"serverSide": true,
	"ajax": {
		url: "{{ URL::route('SysWebAfilSolicitudesComision', array()) }}",
		data: function(d){
			d.filtrofechas = $("#FiltroFechas").val();
		}
	},
	columns: [
		{data: "fecha", name: "fecha", "searchable": false, "orderable": false},
		{data: "monto", name: "monto", "searchable": false, "orderable": false},
		{data: "metodo", name: "metodo", "searchable": false, "orderable": false},
		{data: "cuenta", name: "cuenta", "orderable": false},
		{data: "comentario", name: "comentario", "searchable": false, "orderable": false},
		{data: "estado", name: "estado", "searchable": false, "orderable": false, "class": "text-center"},
		{data: "afiliado", name: "afiliado", "orderable": false},
		{data: "fecha_pagado", name: "fecha_pagado", "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();
	},
	"paging":   false,
	"ordering": false,
	"info":     false,
	"searching": true
});
@stop