{% extends "layout/default.html" %}
{% block body %}
	<h1>Calendrier</h1>

  <!-- Page Content -->

          
                <div id="calendar" class="col-centered">
          

    
    <!-- Modal -->
    <div class="modal fade" id="ModalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
      <div class="modal-content">
      <form class="form-horizontal" method="POST" action="{{ url_for('core.addCalendar') }}">
      
        <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">{{_("Add an event")}}</h4>
        </div>
        <div class="modal-body">
        
          <div class="form-group">
							<label for="title" class="col-sm-2 control-label">{{_("Title")}}</label>
							<div class="col-sm-10">
								<input type="text" name="title" class="form-control" id="title" placeholder="{{_("Title")}}">
							</div>
							<label for="notes" class="col-sm-2 control-label">{{_("Notes")}}</label>
							<div class="col-sm-10">
								<input type="text" name="notes" class="form-control" id="notes" placeholder="{{_("Notes")}}">
							</div>
							<label for="lieu" class="col-sm-2 control-label">{{_("Place")}}</label>
							<div class="col-sm-10">
								<input type="text" name="lieu" class="form-control" id="lieu" placeholder="{{_("Place")}}">
							</div>
          </div>
				
						 
          <div class="form-group">
          <label for="color" class="col-sm-2 control-label">{{_("Color")}}</label>
          <div class="col-sm-10">
            <select name="color" class="browser-default" id="color">
              <option value="">{{_("Choose")}}</option>
              <option style="color:#0071c5;" value="#0071c5">&#9724; {{_("Dark blue")}}</option>
              <option style="color:#40E0D0;" value="#40E0D0">&#9724; {{_("Turquoise")}}</option>
              <option style="color:#008000;" value="#008000">&#9724; {{_("Green")}}</option>             
              <option style="color:#FFD700;" value="#FFD700">&#9724; {{_("Yellow")}}</option>
              <option style="color:#FF8C00;" value="#FF8C00">&#9724; {{_("Orange")}}</option>
              <option style="color:#FF0000;" value="#FF0000">&#9724; {{_("Red")}}</option>
              <option style="color:#000;" value="#000">&#9724; {{_("Black")}}</option>
              
            </select>
          </div>
          </div>
         
          <div class="form-group">
          <label for="start" class="col-sm-2 control-label">Début</label>
          <div class="col-sm-10">
            <input type="text" name="start" class="form-control" id="start" readonly>
          </div>
          </div>
          <div class="form-group">
          <label for="end" class="col-sm-2 control-label">Fin</label>
          <div class="col-sm-10">
            <input type="text" name="end" class="form-control" id="end" readonly>
          </div>
          </div>
        
        
        </div>
        <div class="modal-footer">
          <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">{{_("Close")}}</a>
          <button type="submit" class="modal-action modal-close waves-effect waves-green btn-flat">{{_("Save")}}</button>
        </div>
      </form>
      </div>
      </div>
    </div>
    
    
    
    <!-- Modal -->
    <div class="modal fade" id="ModalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
      <div class="modal-content">
      <form class="form-horizontal" method="POST" action="{{ url_for('core.editEventTitle') }}">
        <div class="modal-header">

        <h4 class="modal-title" id="myModalLabel">{{_("Change")}}</h4>
        </div>
        <div class="modal-body">
        
          <div class="form-group">
						
						<label for="title" class="col-sm-2 control-label">{{_("Title")}}</label>
						<div class="col-sm-10">
							<input type="text" name="title" class="form-control" id="title" placeholder="{{_("Title")}}">
						</div>
						<label for="notes" class="col-sm-2 control-label">{{_("Notes")}}</label>
							<div class="col-sm-10">
								<input type="text" name="notes" class="form-control" id="notes" placeholder="{{_("Notes")}}">
							</div>
							<label for="lieu" class="col-sm-2 control-label">{{_("Place")}}</label>
							<div class="col-sm-10">
								<input type="text" name="lieu" class="form-control" id="lieu" placeholder="{{_("Place")}}">
							</div>
						
          </div>
          <div class="form-group">
          <label for="color" class="col-sm-2 control-label">{{_("Color")}}</label>
          <div class="col-sm-10"> 
           <select name="color" class="browser-default" id="color">
              <option value="">{{_("Choose")}}</option>
              <option style="color:#0071c5;" value="#0071c5">&#9724; {{_("Dark blue")}}</option>
              <option style="color:#40E0D0;" value="#40E0D0">&#9724; {{_("Turquoise")}}</option>
              <option style="color:#008000;" value="#008000">&#9724; {{_("Green")}}</option>             
              <option style="color:#FFD700;" value="#FFD700">&#9724; {{_("Yellow")}}</option>
              <option style="color:#FF8C00;" value="#FF8C00">&#9724; {{_("Orange")}}</option>
              <option style="color:#FF0000;" value="#FF0000">&#9724; {{_("Red")}}</option>
              <option style="color:#000;" value="#000">&#9724; {{_("Black")}}</option>
            </select>
            <br>
          </div>
          </div>
            <div class="form-group"> 
            <div class="col-sm-offset-2 col-sm-10">
              <div class="checkbox">
                <input type="checkbox" name="delete" id="delete" />
                 <label for="delete">{{_("Delete event")}}</label>
         
              </div>
            </div>
          </div>
          
          <input type="hidden" name="id" class="form-control" id="id">
        
        
        </div>
        <div class="modal-footer">
        <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">{{_("Close")}}</a>
          <button type="submit" class="modal-action modal-close waves-effect waves-green btn-flat">{{_("Save")}}</button>
        </div>
      </form>
      </div>
      </div>
    </div>

   
      
      <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.1/fullcalendar.min.js"></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.8.0/lang-all.js"></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.8.0/gcal.js"></script>
      
       <script>

  $(document).ready(function() {
    
    $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month agendaWeek agendaDay ,'
      },
      lang:'{{g.user.lang}}',
      editable: true,
      eventLimit: true, // allow "more" link when too many events
      selectable: true,
      selectHelper: true,
      select: function(start, end) {
        
        $('#ModalAdd #start').val(moment(start).format('YYYY-MM-DD HH:mm:ss'));
        $('#ModalAdd #end').val(moment(end).format('YYYY-MM-DD HH:mm:ss'));
        $('#ModalAdd').openModal();
      },
      eventRender: function(event, element) {
        element.bind('dblclick', function() {
								
          $('#ModalEdit #id').val(event.id);
          $('#ModalEdit #title').val(event.title);
					$('#ModalEdit #notes').val(event.notes);
					$('#ModalEdit #lieu').val(event.lieu);
          $('#ModalEdit #color').val(event.color);
          $('#ModalEdit').openModal();
        });
      },
      eventDrop: function(event, delta, revertFunc) { // si changement de position

        edit(event);

      },
      eventResize: function(event,dayDelta,minuteDelta,revertFunc) { // si changement de longueur

        edit(event);

      },
      events: [
								
      {% for event in events %}
      {% set start = split(event["start"]) %}
      {% set end = split(event["end"]) %}
      {% if start[1] == '00:00:00' %}
      {% set start = start[0] %}
      {% else %}
      {% set start = event["start"] %}
      {% endif %}
      {% if end[1] == '00:00:00' %}
      {% set end = end[0] %}
      {% else %}
      {% set end = event["end"] %}
      {% endif %}
        {
          id: '{{ event["id"] }}',
          title: '{{ event["title"] }}',
					notes: '{{ event["notes"] }}',
					lieu: '{{ event["lieu"] }}',
          start: '{{start}}',
          end: '{{end}}',
          color: '{{event["color"]}}',
        },
      {% endfor %}
																							
      ]
    });
    
    function edit(event){
      start = event.start.format('YYYY-MM-DD HH:mm:ss');
      if(event.end){
        end = event.end.format('YYYY-MM-DD HH:mm:ss');
      }else{
        end = start;
      }
      
      id =  event.id;
      idAccount = '{{currentID}}'
      
      $.ajax({
       url: '{{ url_for("core.calendar") }}',
       type: "POST",
       data: {id:id,idAccount:idAccount,start:start,end:end},
       success: function(rep) {
      
        }
      });
    }
    
  });

</script>
{% endblock %}
