@extends('BaseSistemaWeb')

@section('CSS')
{{ HTML::style('DataTables/dataTables.bootstrap.min.css') }}
{{ HTML::style('DataTables/responsive.dataTables.min.css') }}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.css">
<!-- <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.print.min.css"> -->
<style type="text/css">
	@media (max-width: 450px) { .ModalEliminar .modal-dialog { width: auto; } }
	@media (min-width: 451px) { .ModalEliminar .modal-dialog { width: 450px; } }
	.fc button, .fc-button-group, .fc-time-grid .fc-event .fc-time span {
		display: initial !important;
	}
	/*.fc td.fc-today {
		background: #fcf8e3;
	}*/
	.leyenda-contenedor {
		display: flex;
		flex-wrap: wrap;
		align-items: normal;
		justify-content: center;
	}
	.leyenda-item{
		display: flex;
		padding: 0 20px 5px 0;
		line-height: 1;
	}
	.leyenda {
		width: 15px;
		height: 15px;
		border: 1px black;
		border-radius: 15px;
		margin-right: 5px;
	}
	.evento-llamada{
		background: #0197DA;
	}
	.evento-mensaje{
		background: #56BE22;
	}
	.evento-correo{
		background: #FF9C00;
	}
	.evento-reunion{
		background: #000479;
	}
	.evento-nota{
		background: #FFCF2A;
	}
</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">
					Calendario de actividades de seguimiento de prospectos
					<div data-toggle="buttons" class="button-group pull-right">
						<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">
				<form id="frmFiltroFechas" class="form-inline" style="padding-bottom: 15px;">
					@if( $Empleado->cargos_id == 3 || $Empleado->cargos_id == 4 )
					<div class="form-group">
						<label>Filtro por usuarios</label>
						<select name="slVendedores" class="form-control" id="slVendedores">
							<option value="0" selected>Todos los usuarios</option>
							@foreach( $Empleados as $Emp )
							<option value="{{ $Emp->id }}"> {{ $Emp->nombre_completo }} </option>
							@endforeach
						</select>
					</div>
					@endif
					<div class="form-group">
						<label>Filtro por tipo</label>
						<select name="slTipo" id="slTipo" class="form-control">
							<option value="Todos"> Todos los tipos </option>
							<option value="LL"> Llamada </option>
							<option value="MSJ"> Mensaje </option>
							<option value="CE"> Correo Electronico </option>
							<option value="R"> Reunión </option>
							<option value="N"> Nota </option>
						</select>
					</div>
					<button type="submit" class="btn btn-primary"> Filtrar </button>
					<!-- <button id="btnLimpiar" type="button" class="btn btn-default"> Limpiar </button> -->
				</form>
				<div id="calendario"></div>
			</div>
			<div class="bottom">
				<div class="leyenda-contenedor">
					<div class="leyenda-item"><div class="leyenda evento-llamada"></div>Llamada</div>
					<div class="leyenda-item"><div class="leyenda evento-mensaje"></div>Mensaje</div>
					<div class="leyenda-item"><div class="leyenda evento-correo"></div>Correo Electrónico</div>
					<div class="leyenda-item"><div class="leyenda evento-reunion"></div>Reunión</div>
					<div class="leyenda-item"><div class="leyenda evento-nota"></div>Nota</div>
				</div>
				<!-- -->
			</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('jquery-browser-plugin/jquery.browser.min.js') }}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.25/moment-timezone.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/gcal.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/locale-all.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsurl/2.2.0/url.min.js"></script>
<script type="text/javascript">
	@if( $Empleado->cargos_id == 3 || $Empleado->cargos_id == 4 )
	var dataExtraFC = {
		cargo: {{ $Empleado->cargos_id }},
		usuario: 0,
		tipo: "Todos"
	}
	@else
	var dataExtraFC = {
		cargo: {{ $Empleado->cargos_id }},
		usuario: {{ $Empleado->id }},
		tipo: "Todos"
	}
	@endif
	if( $.browser.mobile ){
		var header = {
			left: "prev,next today",
			center: "title",
			right: "agendaDay,listMonth"
		}
		var defaultView = "listMonth";
	}
	else{
		var header = {
			left: "prev,next today",
			center: "title",
			right: "month,agendaWeek,agendaDay,listMonth"
		}
		var defaultView = "basicWeek";
	}
	function Actualizar(){
		$("#calendario").fullCalendar("refetchEvents");
	}
</script>
@stop

@section('JSOr')
@if( Agent::isDesktop() )
$(".sidebar-toggle-box").trigger("click");
@endif
$("#calendario").fullCalendar({
	locale: "es",
	header: header,
	buttonText: {
		today: "ahora",
		month: "mes",
		week: "semana",
		day: "día",
		list: "lista"
	},
	defaultView: defaultView,
	themeSystem: "bootstrap3",
	weekNumbers: true,
	eventSources: [{
		url: "{{ URL::route('SysWebGClientesCalendario') }}",
		type: "POST",
		data: dataExtraFC,
		error: function(){
			alert("there was an error while fetching events!");
		},
		color: "#009ade",
		backgroundColor: "#009ade",
		borderColor: "#009ade",
		textColor: "white"
	}],
	eventClick: function(event){
		if(event.url){
			//window.open(event.url);
			var url = new Url(event.url);
			url.query["sc-per"] = 1;
			var nuevaVentana = window.open(url);
			nuevaVentana.onbeforeunload = function(){
				$("#calendario").fullCalendar("refetchEvents");
			}
			return false;
		}
	},
	eventLimit: true,
	views: {
		basic: {
			// options apply to basicWeek and basicDay views
			ventLimit: 6
		},
		agenda: {
			// options apply to agendaWeek and agendaDay views
			ventLimit: 6
		},
		week: {
			// options apply to basicWeek and agendaWeek views
			ventLimit: 6
		},
		day: {
			// options apply to basicDay and agendaDay views
			ventLimit: 6
		}
	}
});
$("#frmFiltroFechas").submit(function(e){
	e.preventDefault();
	dataExtraFC.usuario = $("#slVendedores").val();
	dataExtraFC.tipo = $("#slTipo").val();
	$("#calendario").fullCalendar("refetchEvents");
});
@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