@extends('app')

@section('head')
	<link rel="stylesheet" type="text/css" href="/css/events/index.css">
@stop

@section('content')

	<ol class="breadcrumb">
	  <li><a href="#" class="back-btn"> <span class="glyphicon glyphicon-arrow-left"></span> Regresar</a></li>
	  <li><a href="/">Inicio</a></li>
	  <li class="active">Eventos</li>
	</ol>

	@if (Auth::user()->is_regional)
		<div class="text-right">
		  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#create-modal">
		  	Crear nuevo evento
		  </button>
		</div>

		<div id="msg-container" style="display:none">
		  <br>
	      <div class="alert alert-success alert-dismissable">
	      	<span id="message"></span>
	        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
	          <span aria-hidden="true">&times;</span>
	        </button>
	      </div>
		</div>
	@endif

	<div class="calendar">
	    <nav class="calendar-nav navbar navbar-default">
	        <div class="container text-center">
	            <ul class="navbar-nav nav navbar-left pull-left">
	                <li>
	                	<a id="previousMonth">
		                	<span class="glyphicon glyphicon-chevron-left"></span> Anterior
	                	</a>
	                </li>
	            </ul>
	            <ul class="navbar-nav nav">
	                <li><a id="currentMonth"></a></li>
	            </ul>
	            <ul class="navbar-nav nav navbar-right pull-right">
	                <li>
	                	<a id="nextMonth">Siguiente
	                		<span class="glyphicon glyphicon-chevron-right"></span>
	                	</a>
                	</li>
	            </ul>
	        </div>
	        <div class="container calendar-days">
	    		<span class="col-xs-1 col-xs-calendar-day">Do</span>
	    		<span class="col-xs-1 col-xs-calendar-day">Lu</span>
	    		<span class="col-xs-1 col-xs-calendar-day">Ma</span>
	    		<span class="col-xs-1 col-xs-calendar-day">Mi</span>
	    		<span class="col-xs-1 col-xs-calendar-day">Ju</span>
	    		<span class="col-xs-1 col-xs-calendar-day">Vi</span>
	    		<span class="col-xs-1 col-xs-calendar-day">Sa</span>
	        </div>
	    </nav>
	</div>

	<div id="templates" class="hide">
		<!-- Template de un día en el calendario -->
		<div id="calendar-day" class="calendar-day col-xs-1 col-xs-calendar">
		    <div class="panel panel-default panel-calendar">
		        <div class="panel-body">
		        	<span class="day"></span>
		        </div>
		        <div class="panel-footer">
		        	<span class="hide has-event-span" style="color:red">&#x25cf;</span>
		        </div>
		    </div>
		</div>
		<!-- END Template de un día en el calendario -->

		<!-- Template de un evento para un día en el calendario -->
		<button id="event" type="button" class="list-group-item">
			<p><strong><span class="type">Tipo de Evento</span></strong></p>
			<p><strong><span class="executive">Ejecutivo</span></strong></p>
		</button>
		<!-- END Template de un evento para un día en el calendario -->
	</div>

	@include('events.partials.create_modal')
	@include('events.partials.visit_modal')
	@include('events.partials.business_com_modal')
	@include('events.partials.professional_com_modal')

@endsection

@section('script')
	<script type="text/javascript" src="/js/events/index.js"></script>
@endsection