{% extends 'App/_include/_layout.main.html.twig' %}
{% block page_content %}
	{% block body %}
		<div class="grid-x">
        	<div class="calendar-container cell" id="calendar-container" style="width: 94vw !important; padding-top : 5vh; padding-bottom : 2vh; padding-left : 2vw;"></div>
		</div>

		{# Modal Add Event #}
		<div class="reveal" id="modalAddEvent" data-reveal>
			<div class="reveal-title">{{ 'event.title.add'|trans }}
			</div>
			<div class="reveal-body">
				{{ form_start(formAddEvent, {'attr': {'id': 'formAddEvent'}}) }}
					<div class="grid-x grid-padding-x">
						<div class="cell small-6 text-right">{{ form_label(formAddEvent.title) }}</div>
						<div class="cell small-6">{{ form_widget(formAddEvent.title) }}</div>
						<div class="cell small-6 text-right">{{ form_label(formAddEvent.start) }}</div>
						<div class="cell small-6">{{ form_widget(formAddEvent.start) }}</div>
						<div class="cell small-6 text-right">{{ form_label(formAddEvent.end) }}</div>
						<div class="cell small-6">{{ form_widget(formAddEvent.end) }}</div>
						<div class="cell small-6 text-right">{{ form_label(formAddEvent.startRecur) }}</div>
						<div class="cell small-6">{{ form_widget(formAddEvent.startRecur) }}</div>
						<div class="cell small-6 text-right">{{ form_label(formAddEvent.endRecur) }}</div>
						<div class="cell small-6">{{ form_widget(formAddEvent.endRecur) }}</div>
						<div class="cell small-6 text-right">{{ form_label(formAddEvent.color) }}</div>
						<div class="cell small-6">{{ form_widget(formAddEvent.color) }}</div>
						<div class="cell small-6 text-right">{{ form_label(formAddEvent.display) }}</div>
						<div class="cell small-6">{{ form_widget(formAddEvent.display) }}</div>
						<div class="cell small-6 text-right">{{ form_label(formAddEvent.daysOfWeek) }}</div>
						<div class="cell small-6">{{ form_widget(formAddEvent.daysOfWeek) }}</div>
					</div>
				{{ form_end(formAddEvent) }}
			</div>
			<div class="reveal-footer">
				<button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
				<button class="button small save" id="btn_submit_add_event">{{ 'save'|trans }}</button>
			</div>
			<button class="close-button"  data-close aria-label="Close modal" type="button">
				<span aria-hidden="true">&times;</span>
			</button>
		</div>



	    {# Modal Edition #}

		<div class="reveal" id="modalEditEvent" data-reveal>
			<div class="reveal-title">{{ 'event.title.edit'|trans }}</div>
			<div class="reveal-body" id="modalEditEventBody">
			</div>
			<div class="reveal-footer">
				<button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
				<button class="button small update" id="btn_submit_edit_event">{{ 'edit'|trans }}</button>
				<button class="button small delete btn_submit_delete_event" id="btn_submit_delete_event">{{ 'delete'|trans }}</button>
			</div>
			<button class="close-button"  data-close aria-label="Close modal" type="button">
				<span aria-hidden="true">&times;</span>
			</button>
		</div>

		{# Modal confirm delete #}
		<div class="reveal red" id="modalConfirmDeleteEvent" data-reveal>
			<div class="reveal-title">{{ 'event.title.disable.confirm'|trans }}</div>
			<div class="reveal-body" id="modalConfirmDeleteEventBody"></div>
			<button class="close-button" data-close aria-label="Close modal" type="button">
				<span aria-hidden="true">&times;</span>
			</button>
		</div>

		<link href='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.11.0/main.css' rel='stylesheet'>
		<link href='https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.css' rel='stylesheet'>
		<link href='https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.1/css/all.css' rel='stylesheet'>

	{% endblock %}
{% endblock %}

{% block javascript_footer %}
	{{ parent() }}
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.11.0/main.js'></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
	<script>
    $(document).ready(function(){
        var calendarEl = document.getElementById('calendar-container');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                headerToolbar: {
    				start: 'myCustomButton',
					center: 'title',
					end: 'today prev,next'
                },
				customButtons: {
    				myCustomButton: {
      					text: "Ajouter un ou des jour(s) non ouvré(s)",
      					click: function() {
							$('#modalAddEvent').foundation('open');
					    }
    				}
  				},
				buttonText:{
					today: "Aujourd'hui"
				},
                editable: true,
                timeZone : 'locale',
                initialView: 'dayGridMonth',
                locale : 'frLocale',
                firstDay : 1,
				nextDayThreshold: '00:00:00',
				progressiveEventRendering: true,
				themeSystem: 'bootstrap4',
                contentHeight: "auto",
                weekends : true,
                selectable : true,
				schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
                showNonCurrentDates : false,
				eventDrop: function(info) {
					event_id = info.event.id;
					let url = "{{ url('app_calendar_event_ajax_edit', {'event': '__00__'}) }}";
					url = url.replace('__00__', event_id);
					$.ajax({
						url:url,
						method:'GET',
						success: function (html) {
							let modal = $('#modalEditEvent'),
								modalbody = $('#modalEditEventBody');
							$(modalbody).html(html);
							$(modal).foundation('open');
							let formEditEvent = $('#formEditEvent');
							$('#edit_event_start').attr("value", function(i, origValue) {
								return info.event.startStr;
							});
							$('#edit_event_end').attr("value", function(i, origValue) {
								return info.event.endStr || info.event.startStr;
							});
							let form_parsley_edit_event = $(formEditEvent).parsley(parsley_options);
							let btn_submit_edit_event =  $('#btn_submit_edit_event');
							$(btn_submit_edit_event).click(function(){
								form_parsley_edit_event.validate();
								form_parsley_edit_event.whenValid().then(function () {
									$(btn_submit_edit_event).html(btn_spin);
									$(formEditEvent).submit();
								});
							});
						}
					});
				},
				eventResize: function(info) {
					event_id = info.event.id;
					let url = "{{ url('app_calendar_event_ajax_edit', {'event': '__00__'}) }}";
					url = url.replace('__00__', event_id);
					$.ajax({
						url:url,
						method:'GET',
						success: function (html) {
							let modal = $('#modalEditEvent'),
								modalbody = $('#modalEditEventBody');
							$(modalbody).html(html);
							$(modal).foundation('open');
							let formEditEvent = $('#formEditEvent');
							let form_parsley_edit_event = $(formEditEvent).parsley(parsley_options);
							let btn_submit_edit_event =  $('#btn_submit_edit_event');
							$('#edit_event_end').attr("value", function(i, origValue) {
								return info.event.endStr;
							});
							$(btn_submit_edit_event).click(function(){
								form_parsley_edit_event.validate();
								form_parsley_edit_event.whenValid().then(function () {
									$(btn_submit_edit_event).html(btn_spin);
									$(formEditEvent).submit();
								});
							});
						}
					});
				},
                events : {{ events|json_encode(constant('JSON_PRETTY_PRINT'))|raw }},
			    loading: function (isLoading, view) {
					if (isLoading) {
						console.log("Loading");
					}
					else {
						console.log("Loading finished");
					}
       			},
				select: function(date, jsEvent, view) {
        			$('#modalAddEvent').foundation('open');
					$('#add_event_title').attr("value", function(i, origValue) {
						return "Jour non ouvré";
					});
					$('#add_event_start').attr("value", function(i, origValue) {
						return date.startStr;
					});
					$('#add_event_end').attr("value", function(i, origValue) {
						return date.endStr;
					});
				},
				dateClick: function(date, jsEvent, view) {
        			$('#modalAddEvent').foundation('open');
					$('#add_event_title').attr("value", function(i, origValue) {
						return "Jour non ouvré";
					});
					$('#add_event_start').attr("value", function(i, origValue) {
						return date.dateStr;
					});
					$('#add_event_end').attr("value", function(i, origValue) {
						return date.dateStr;
					});
				},
                eventClick:  function(info) {
					event_id = info.event.id;
					let url = "{{ url('app_calendar_event_ajax_edit', {'event': '__00__'}) }}";
					url = url.replace('__00__',event_id);
					$('#modalEditEvent').on( 'click', '.btn_submit_delete_event', function (e){
						let url = "{{ url('app_calendar_event_ajax_delete', {'event': '__00__'}) }}";
						url = url.replace('__00__',event_id);
						window.location = url;
					});
					$.ajax({
						url:url,
						method:'GET',
						success: function (html) {
							let modal = $('#modalEditEvent'),
								modalbody = $('#modalEditEventBody');
							$(modalbody).html(html);
							$(modal).foundation('open');
							let formEditEvent = $('#formEditEvent');
							let form_parsley_edit_event = $(formEditEvent).parsley(parsley_options);
							let btn_submit_edit_event =  $('#btn_submit_edit_event');
							$(btn_submit_edit_event).click(function(){
								form_parsley_edit_event.validate();
								form_parsley_edit_event.whenValid().then(function () {
									$(btn_submit_edit_event).html(btn_spin);
									$(formEditEvent).submit();
								});
							});
						}
					});
				},
                eventOverlap: true,
            });
        calendar.render();


        // Add Event
        let formAddEvent = $('#formAddEvent');
        let form_parsley_add_event = $(formAddEvent).parsley(parsley_options);
        $(btn_submit_add_event).click(function(){
			form_parsley_add_event.validate();
            form_parsley_add_event.whenValid().then(function () {
                $(btn_submit_add_event).html(btn_spin);
                $(formAddEvent).submit();
            });
        });
        $('#modalAddEvent').on('open.zf.reveal', function () {
            $('#add_event_code').focus();
        });
        $('#modalAddEvent').on('closed.zf.reveal', function () {
            $(formAddEvent).trigger("reset");
        });
    });
	</script>
{% endblock %}