@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')}}">
@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">
				<h3 class="widget__title">@lang('backend.events_views.list')</h3>
				<div class="widget__config" style="margin:0">
					<span id="add_event">
						<a class="save_event" data-toggle="tooltip" title="@lang('backend.events_views.new')" data-event-id="0" href="#"><i class="fa fa-plus" aria-hidden="true"></i></a> 
						<a data-toggle="tooltip" title="@lang('backend.events_views.calendar')" href="{{route('events.calendar')}}">
						<i class="fa fa-calendar-check-o" aria-hidden="true"></i></a>
					</span>
				</div>
			</header>
			<div class="widget__content">
				@include('backend.partials.deleted')
				@include('backend.partials.errors')
				<table class="table table-hover">
					<thead>
						<tr>
							<th>@lang('backend.tables.title')</th>
							<th>@lang('backend.tables.actions')</th>
							<th>@lang('backend.tables.status')</th>
						</tr>
					</thead>
					<tbody>
					@foreach($events as $event)
						<tr data-id="{{ $event->id }}"
                            data-title="{{$event->title}}"
                            data-des="{{$event->description}}"
                            data-sdate="{{$event->start_date}}"
                            data-edate="{{$event->end_date}}"
                            data-color="{{$event->color}}"
                            data-route="{{route('events.destroy', $event->id)}}"
                            data-rundo="{{route('events.undelete', $event->id)}}">
							<td>{{ $event->title }}</td>
							<td>
                                <a class="save_event" data-toggle="tooltip" title="@lang('backend.buttons.view_edit')" href="#"><i class="fa fa-pencil-square-o"></i></a>
								<a data-toggle="tooltip" title="@lang('backend.buttons.delete')" href="" class='delete_record'><i class="fa fa-trash-o"></i></a>
							</td>
							<td>
								<input type="checkbox" id="s6-{{$event->id}}" class="sw" {{($event->active)?'checked':''}} data-route="{{route('events.save_status', $event->id)}}">
								<label class="switch2 switch--green" for="s6-{{$event->id}}"></label>
							</td>
						</tr>
					@endforeach
					</tbody>
				</table>
				{!! $events->links() !!}
			</div>
		</article><!-- /widget -->
	</div>
</div>
@endsection

@section('scripts')
<script src="{{asset('assets/fullcalendar-2.9.1/lib/moment.min.js')}}"></script>
<script src="{{asset('assets/back/js/bootstrap-datetimepicker.min.js')}}"></script>
<script>
	$(document).ready(function(){
		$(function () {
		    $('#start_date').datetimepicker({
		    	minDate: new Date(),
		    	format: 'YYYY/MM/DD HH:mm:ss',
		    	icons: {
                    time: "fa fa-clock-o",
		            date: 'fa fa-calendar',
		            up: 'fa fa-arrow-up',
		            down: 'fa fa-arrow-down',
		            previous: 'fa fa-chevron-left',
		            next: 'fa fa-chevron-right'
                }
		    });

		    $('#end_date').datetimepicker({
		    	minDate: new Date(),
		    	format: 'YYYY/MM/DD HH:mm:ss',
		    	icons: {
		    		time: "fa fa-clock-o",
		            date: 'fa fa-calendar',
		            up: 'fa fa-arrow-up',
		            down: 'fa fa-arrow-down',
		            previous: 'fa fa-chevron-left',
		            next: 'fa fa-chevron-right'
		    	}
		    });
		});
	});
</script>
@endsection