<!DOCTYPE html>
<html>
<head>
  <title>Onyx | Calendrier</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.1/fullcalendar.min.css">

   <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
      <link href="{{ url_for('static', filename='css/mail.css') }}" rel="stylesheet" type="text/css" />
</head>
<body>


<style type="text/css">
  
  body
{
  background-color: #EEEEEE;
}

</style>
  <!-- Page Content -->
    <div class="container">
                <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('addCalendar') }}">
      
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Ajouter un evenement</h4>
        </div>
        <div class="modal-body">
        
          <div class="form-group">
          <label for="title" class="col-sm-2 control-label">Titre</label>
          <div class="col-sm-10">
            <input type="text" name="title" class="form-control" id="title" placeholder="Titre">
          </div>
          </div>
          <div class="form-group">
          <label for="color" class="col-sm-2 control-label">Couleur</label>
          <div class="col-sm-10">
            <select name="color" class="form-control" id="color">
              <option value="">Choisir</option>
              <option style="color:#0071c5;" value="#0071c5">&#9724; Bleu Sombre</option>
              <option style="color:#40E0D0;" value="#40E0D0">&#9724; Turquoise</option>
              <option style="color:#008000;" value="#008000">&#9724; Vert</option>             
              <option style="color:#FFD700;" value="#FFD700">&#9724; Jaune</option>
              <option style="color:#FF8C00;" value="#FF8C00">&#9724; Orange</option>
              <option style="color:#FF0000;" value="#FF0000">&#9724; Rouge</option>
              <option style="color:#000;" value="#000">&#9724; Noir</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">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
        <button type="submit" class="btn btn-primary">Sauvegarder</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('editEventTitle') }}">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modifier</h4>
        </div>
        <div class="modal-body">
        
          <div class="form-group">
          <label for="title" class="col-sm-2 control-label">Titre</label>
          <div class="col-sm-10">
            <input type="text" name="title" class="form-control" id="title" placeholder="Titre">
          </div>
          </div>
          <div class="form-group">
          <label for="color" class="col-sm-2 control-label">Couleur</label>
          <div class="col-sm-10">
             <select name="color" class="form-control" id="color">
              <option value="">Choisir</option>
              <option style="color:#0071c5;" value="#0071c5">&#9724; Bleu Sombre</option>
              <option style="color:#40E0D0;" value="#40E0D0">&#9724; Turquoise</option>
              <option style="color:#008000;" value="#008000">&#9724; Vert</option>             
              <option style="color:#FFD700;" value="#FFD700">&#9724; Jaune</option>
              <option style="color:#FF8C00;" value="#FF8C00">&#9724; Orange</option>
              <option style="color:#FF0000;" value="#FF0000">&#9724; Rouge</option>
              <option style="color:#000;" value="#000">&#9724; Noir</option>
              
            </select>
          </div>
          </div>
            <div class="form-group"> 
            <div class="col-sm-offset-2 col-sm-10">
              <div class="checkbox">
              <label class="text-danger"><input type="checkbox"  name="delete"> Supprimer l'evenement</label>
              </div>
            </div>
          </div>
          
          <input type="hidden" name="id" class="form-control" id="id">
        
        
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
        <button type="submit" class="btn btn-primary">Sauvegarder</button>
        </div>
      </form>
      </div>
      </div>
    </div>

    </div>


<script src="{{ url_for('static', filename='js/jquery-2.2.3.min.js') }}"></script>  
<script src="{{ url_for('static', filename='js/bootstrap.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:'fr',
      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').modal('show');
      },
      eventRender: function(event, element) {
        element.bind('dblclick', function() {
          $('#ModalEdit #id').val(event.id);
          $('#ModalEdit #title').val(event.title);
          $('#ModalEdit #color').val(event.color);
          $('#ModalEdit').modal('show');
        });
      },
      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"]}}',
          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 = '{{currentUser}}'
      
      $.ajax({
       url: '{{ url_for("setCalendar") }}',
       type: "POST",
       data: {id:id,idAccount:idAccount,start:start,end:end},
       success: function(rep) {
      
        }
      });
    }
    
  });

</script>
</body>
</html>