@extends('layouts.backend')

@section('title')
	@lang('backend.events_views.page_name')
@endsection

@section('styles')
<link rel="stylesheet" href="{{asset('assets/back/css/bootstrap-datetimepicker.min.css')}}">
<link rel="stylesheet" href="{{asset('assets/fullcalendar-2.9.1/fullcalendar.min.css')}}">
<link rel="stylesheet" href="{{asset('assets/fullcalendar-2.9.1/fullcalendar.print.css')}}" media="print">
<link rel="stylesheet" href="{{asset('assets/fullcalendar-2.9.1/lib/cupertino/jquery-ui.min.css')}}">
@endsection

@section('modals')
    @include('backend.partials.modals')
@endsection

@section('content')
<header class="main-header clearfix">
	<h1 class="main-header__title">
		<i class="fa fa-calendar"></i>
		@lang('backend.events_views.page_name')
	</h1>
</header>
<div class="row">
	<div class="col-md-12">
		<article class="widget">
			<header class="widget__header">
				<div class="left_button">
					<a data-toggle="tooltip" title="@lang('backend.events_views.list')" 
						href="{{route('events.events')}}">
					<i class="fa fa-mail-reply" aria-hidden="true"></i></a>
				</div>
			</header><br>
			<div class="widget__content">
				<div id="calendar"></div>
			</div>
		</article><!-- /widget -->
	</div>
</div>
@endsection

@section('scripts')
<script src="{{asset('assets/fullcalendar-2.9.1/lib/jquery-ui.custom.min.js')}}"></script>
<script src="{{asset('assets/fullcalendar-2.9.1/lib/moment.min.js')}}"></script>
<script src="{{asset('assets/fullcalendar-2.9.1/fullcalendar.js')}}"></script>
<script src="{{asset('assets/fullcalendar-2.9.1/lang-all.js')}}"></script>
<script>
    $(document).ready(function() {
    	var base = window.location.protocol + "//" + window.location.host + "/";
        $('#calendar').fullCalendar({
        	editable: false,
            eventLimit: true,
        	eventClick: function(event, jsEvent, view) {
        		jsEvent.preventDefault();
        		$("#modal-event .modal-title").html(event.title);
        		$("#modal-event #start").html(moment(event.start).format("DD/MM/YYYY h:mm:ss a"));
        		$("#modal-event #end").html(moment(event.end).format("DD/MM/YYYY h:mm:ss a"));
        		$("#modal-event #description").html(event.description);
                $("#modal-event").modal("show");
            },
            header: {
                left: 'prev,next today myCustomButton',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            events:{
            	// ruta para obtener los eventos en json
                url: base + 'gmeza/public/calendar/calendar-events'
            }
        });
    });
</script>
@endsection