{% extends "layout.html" %}
{% block title %}{{title_pre}} Calendar {% endblock %}
 {% block bread %}
    <div class="col-sm-4">
        <h2>Playlists</h2>
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="index.php">Hone</a>
            </li>
             <li class="breadcrumb-item active">
                <strong>Calendar</strong>
            </li>
        </ol>
    </div>
    
 {% endblock %}
{% block content %}
   <div class="page_content" >
        <link href='{{ path }}fullcalendar.min.css' rel='stylesheet' />
        <link href='{{ path }}fullcalendar.print.min.css' rel='stylesheet' media='print' />
        <link href="/new/templates/css//style.css" rel="stylesheet">




        <script src='{{ path }}lib/moment.min.js'></script>
        <script src="{{ constant('HTTP_JS') }}/jquery-3.1.1.min.js"></script>

        <script src='{{ path }}fullcalendar.min.js'></script>
        <script src='{{ path }}locale-all.js'></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>
    


        <div class="wrapper wrapper-content">
                <div class="row animated fadeInDown">
                    <div class="col-lg-3">
                    </div>
                    <div class="col-lg-9 ">
                        <div class="ibox" >
                                <div class="ibox-title">
                                        <h5>Manage Calendar </h5>
                                        <div class="ibox-tools">
                                            <a class="collapse-link">
                                                <i class="fa fa-chevron-up"></i>
                                            </a>
                                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                                <i class="fa fa-wrench"></i>
                                            </a>
                                        </div>
                                    </div>
                                 <div class="ibox-content"> 
                                    <div id='calendar' class="fc fc-unthemed fc-ltr"></div>
                                 </div>       
                                   
                        </div>
                        
                    </div>
                </div>
                                
    
            </div>

            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/css/tempusdominus-bootstrap-4.min.css" />
            
            
 <script>
    $(document).ready(function() {
    
        $('#calendar').fullCalendar({
              
                eventRender: function(event, element) {
                          element.append( "<span class='closeon'>X</span>" );
                          //console.log(event.start)
                          element.find(".closeon").click(function() {
                                 if( confirm("are you sure")){
                                      updateEventData(event,"delete");
                                      $('#calendar').fullCalendar('removeEvents',event._id);
                                  }
                              });
                          },
                          customButtons: {
                              datePickerButton: {
                                  themeIcon:'circle-triangle-s',
                                  click: function () {
                                      $('#datepicker').datepicker("show");
              
                                  }
                              }
                          },
                 eventDrop: function(event, delta, revertFunc) {
              
                            //  alert(event.title + " was dropped on " + event.start.format());
                                  //alert(event.start.format("YYYY/MM/DD HH:mm"));
                                  event.start = event.start.format("YYYY/MM/DD HH:mm");
                                  event.end = event.end.format("YYYY/MM/DD HH:mm");   
                                  //return;
                                  updateEventData(event,"update_dates");
              
                            },
                eventClick: function(calEvent, jsEvent, view) {
                             // alert('Event: ' + calEvent.title);
                             // alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
                              //alert('View: ' + view.name);
                             // calEvent.title = "CLICKED!";
                              $('#calendar').fullCalendar('updateEvent', calEvent);
                              $(".date_section").show();
                              // change the border color just for fun
                              $(this).css('border-color', 'red');
                              
                              $('#modalTitle').html(calEvent.title );
                             // $('#modalBody').html(calEvent.description);
                              //$('#eventUrl').attr('href',calEvent.url);
                              $("#eventId").val(calEvent.id);
                              $("#musicModal").val(calEvent.idplaylist);
                              $("#mediaModal").val(calEvent.idplaylist);
                              $("#idplaylist").val(calEvent.idplaylist);
                              $("#duration").val(calEvent.duration);
                              $("#eventTitle").val(calEvent.title);
                              $("#duration_s").hide();
              
                                start=moment(calEvent.start).format('YYYY/MM/DD HH:mm');
                                //////alert(calEvent.startDB);
                                $("#startModal input").val(start);  
                                end=moment(calEvent.end).format('YYYY/MM/DD HH:mm');
                                $("#endModal input").val(end);  
                                if(calEvent.recurrence > 0){
                                    $("#dlt_all, #updt_all").removeClass("d-none");
                                    //   $("#dlt_all").removeClass("d-none");
                                    $("#dlt_all ,#updt_all").attr("rec",calEvent.recurrence); 
                                    $('#datetimepicker').datetimepicker('format', 'LT');
                                    $(".date_section").hide();

                                    $("#dlt_all").bind( "click", function() {
                                        if( confirm("Are you sureyou want to delete all this playlists?")){
                                            updateEventData(calEvent,"delete_all");
                                            var allEvents = $('#calendar').fullCalendar('clientEvents');
                                            //console.log(allEvents);
                                            $.each( allEvents, function( index, value ){
                                                if(value.recurrence == calEvent.recurrence )
                                                    $('#calendar').fullCalendar('removeEvents',value._id);
                                            });
                                        }
                                    });
                                    $("#updt_all").bind( "click", function() {
                                        if( confirm("Are you sureyou want to update all playlists?")){
                                            updateEventData(calEvent,"update_all");
                                            var allEvents = $('#calendar').fullCalendar('clientEvents');
                                            // console.log(allEvents);
                                            $.each( allEvents, function( index, value ){
                                                if(value.recurrence == calEvent.recurrence )
                                                {
                                                    value.title = $("#eventTitle").val();
                                                    $('#calendar').fullCalendar('updateEvent', value); 
                                                }
                                            });
                                        }
                                    });
                                }
                              else{
                                   $("#updt_all").addClass("d-none");
                                   $(".date_section").show();
                              }
                              $("#btn_submit").bind( "click", function() {
                                  res = updateEventData(calEvent, "update");
                                  if(res > 0)  {
                                      calEvent.id = res;
                                      $('#calendar').fullCalendar('updateEvent', calEvent); 
              
              
                                  }
                              });
                             $('#calendarModal').modal();
                            },
                      
                      header: {
                          left: 'prev,next today',
                          center: 'title',
                          right: 'month,agendaWeek,agendaDay'
                      },
                        
                    select: function(start, end) {
                        $(".date_section").show();
              
                            var dateS = start._d;
                            var dateE = end._d;
                            console.log(dateE);
                            $("#c").val(Date.parse(dateS));
                            $("#start_val").val(Date.parse(dateS));
                            $("#end_val").val(Date.parse(dateE));
                            var month = parseInt(start._d.getMonth());
                            month++;
              
                            var fullDateStart = start._d.getFullYear()+'-'+month+'-'+ start._d.getDate()+' '+start._d.getHours()+':'+start._d.getMinutes();
                            var fullDateEnd   = '';
                           // alert(moment(start._d).local().format('YYYY/MM/DD HH:mm'));
                        //var datestart = new Date((start._d));
                          //alert(start._d.format("dd-mm-yyyy"));
                         // this.$('#dateend').val(dateend.format("dd-mm-yyyy"));
                          //this.$('#timestart').val(datestart.format("HH:MM:ss"));
                         // this.$('#timeend').val(dateend.format("HH:MM:ss"));
              
                            var title = 'New Event';// prompt('Event Title:');
                            var eventData;
                                eventData = {
                                  id: 0,
                                  idplaylist: 0,
                                  /*allDay: false,*/
                                  daily: 0,
                                  duration: 0,
                                  title: title,
                                  start: start,
                                  end: end,
                                  start_val: 0,
                                  end_val: 0,
                                };
                             
                             $('#modalTitle').html("Add New Event");
                             $("#startDateVal").val(start);
                             $("#endDateVal").val(end);
                             $("#idplaylist").val("0")
                             // $("#endModal").val();
                             
                            start=moment(start).format('YYYY/MM/DD HH:mm');
                            $("#startModal input").val(start); 
              
                            end=moment(end).format('YYYY/MM/DD HH:mm');
                            $("#endModal input").val(end);  
              
                            $("#btn_submit").bind( "click", function() {
                                if(updateEventData(eventData, "add"))
                                  $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
                            });
              
                            $('#calendarModal').modal();
                            console.log(eventData);
                            $('#calendar').fullCalendar('unselect');
              
                            $("#duration_s").show();  
              
                    },
                     /*defaultDate: '2018-03-12',*/
                    locale: 'en',
                    navLinks: true, // can click day/week names to navigate views
                    selectable: true,
                    selectHelper: true,
                    dateFormat: 'YYYY-MM-DD HH:mm:ss',
                    timeFormat: 'H:mm',
                    timezone: 'local',
                    ignoreTimezone: true,
                    editable: true,
                    eventLimit: true, // allow "more" link when too many events
                    droppable: true, // this allows things to be dropped onto the calendar
                          drop: function() {
                              // is the "remove after drop" checkbox checked?
                              if ($('#drop-remove').is(':checked')) {
                                  // if so, remove the element from the "Draggable Events" list
                                  $(this).remove();
                              }
                          },
              
                    events: [
                    {% for key,event in events %}
                          {
                              id:{{ event['id'] }},
                              title: '{{ event['title'] }}',
                              start: moment('{{ event['start'] }}'),
                              end:   moment('{{ event['end'] }}'),
                              startDB: '{{ event['start'] }}',
                              endDB:   '{{ event['end'] }}',
                              start_val: '{{ event['start_timestamp'] }}',
                              end_val:   '{{ event['end_timestamp'] }}',
                              idplaylist: '{{ event['idplaylist'] }}',
                              /*allDay: true,*/
                              daily: '{{ event['journalier'] }}',
                              duration: '{{ event['duration'] }}',
                              recurrence: '{{ event['idrecurrence'] }}',
                              color: '{{ event['color'] }}',
                      
                          },
              
                    {% endfor %}
                     /* {
                        id: 999,
                        title: 'Repeating Event',
                        start: '2018-03-09T16:00:00',
                         data: 'aaaa'
                      }*/
                     
                    ],
                   //  timeFormat: 'H(:mm)' ,
                  });
            
              
                $('#external-events .fc-event').each(function() {
              
                  // store data so the calendar knows to render an event upon drop
                  $(this).data('event', {
                    title: $.trim($(this).text()), // use the element's text as the event title
                    stick: true // maintain when user navigates (see docs on the renderEvent method)
                  });
              
                  // make the event draggable using jQuery UI
                  $(this).draggable({
                    zIndex: 999,
                    revert: true,      // will cause the event to go back to its
                    revertDuration: 0  //  original position after the drag
                  });
              
                });
                     
              
               $('#calendarModal').on('hidden.bs.modal', function () {
                  $("#btn_submit, #dlt_all , #updt_all").unbind("click");
                $(".playlist_name  , #duration").val("0");
                 $(".modal-error ,#dlt_all ").addClass("d-none");
              });
              
              
                
              $("#btn_submit1").click({id: "Hello", title: "World"}, update_event);
              
              function update_event(event){
                  alert(event.data.param1);
                  alert(event.data.param2);
              }
                
                $('#btn_submit11').click(function() {
                
                    var item = $("#calendar").fullCalendar( 'clientEvents', 111 );
                    console.log(item[0].title);
                    item[0].title = 'yeshhh!!!!';
                    console.log(item[0].title);
                      $('#calendar').fullCalendar('updateEvent',item[0]);
              
                });
              
              
                   $(".playlist_name").change(function() {
              
                     $("#eventTitle").val($(this).find(":checked").text() );
                     $("#idplaylist").val($(this).find(":checked").val() );
                     if($(this).attr("id") == "musicModal")
                      $("#mediaModal").val($("#mediaModal option:first").val());
                     else $("#musicModal").val($("#musicModal  option:first").val());
                  });
              });
              
              
              function updateEventData(eventData,action){
              
                  if(action =="update_dates"){
                        $.ajax({
                              url: "{{ path }}event.php",
                              async: false,
                              global: false,
                              data: {id: eventData.id,start: eventData.start, end: eventData.end,action: action,}, 
                              type: "POST", 
                              success: function(result){ }});
                      return;
                  }
              
                  if(action =="delete" || action =="delete_all" ){
                        $.ajax({
                              url: "{{ path }}event.php",
                              async: false,
                              global: false,
                              data: {id: eventData.id,action: action,recurrence: eventData.recurrence}, 
                              type: "POST", 
                              success: function(result){ }});
                      return;
                  }
              
                    $(".modal-error").addClass("d-none");
              
                    var startDate = new Date($('#startModal input').val());
                    var endDate = new Date($('#endModal input').val());
              
                    if($("#idplaylist").val() > 0 && $("#startModal input").val() != ""  && startDate < endDate || action == "delete"){
              
                        eventData.title =  $("#eventTitle").val();
                        eventData.music =  $("#musicModal").val();
                        eventData.media =  $("#mediaModal").val();
                        eventData.idplaylist = $("#idplaylist").val();
                        //eventData.start= moment($("#startModal input").val()).format('DD/MM/YYYY  HH:mm');
                       // eventData.end=   moment($("#endModal input"  ).val()).format('DD/MM/YYYY  HH:mm');
                        eventData.start = $("#startModal input").val();
                        eventData.end = $("#endModal input").val();
                        eventData.duration = $("#duration").val();
                        eventData.color = $("#duration option:selected").attr("color");
              
                        //console.log(event);
                        $('#calendarModal').modal('hide')
              
                          $.ajax({
                              url: "{{ path }}event.php",
                              async: false,
                              global: false,
                              data: {
              
                                  id: eventData.id,
                                  title: eventData.title,
                                  start: eventData.start,
                                  end:   eventData.end,
                                  startDB: eventData.startDB,
                                  endDB:   eventData.endDB,
                                  start_val: eventData.start_val,
                                  end_val:   eventData.end_val,
                                  idplaylist: eventData.idplaylist,
                                  daily: eventData.daily,
                                  duration: eventData.duration,
                                  action: action,
                                  recurrence :eventData.recurrence,
                              }, 
                              type: "POST", 
                              success: function(result){
                                  eventData.id = result;
                                  $("#eventId").val(result);
              
                              }});
                        return eventData.id;
              
                    }
                    else {
                      $(".modal-error").removeClass("d-none");
                    }
                    return false;
                    
                   // console.log( $event);
              
              }
              
                  
                          $(function () {
                      /*      $('.datePicker').datetimepicker({
                                  format: 'DD-MM-YYYY HH:mm',
                              });*/
              
                      $('.datepicker').datetimepicker({
                    //  format:"YYYY/MM/DD HH:mm",
                      format: 'YYYY/MM/DD HH:mm',
                     // onSelect: function (dateText, inst) {
                       //   $('#calendar').fullCalendar('gotoDate', dateText);
                    //  },
                    });
              
              
                  $('#datepickerTime').datetimepicker({
                    //  format:"YYYY/MM/DD HH:mm",
                      format: 'TL',
                     // onSelect: function (dateText, inst) {
                       //   $('#calendar').fullCalendar('gotoDate', dateText);
                    //  },
                    });
              
                          });
            </script>
            
            <!-- Modal -->
            <div class="modal fade" id="calendarModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                                    <h5 class="modal-title" id="modalTitle">Modal title</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                      <span aria-hidden="true">&times;</span>
                                    </button>
                                  </div>          
                                    <form>
                                          <input type="hidden" name="startDateVal" id="startDateVal" />
                                          <input type="hidden" name="startTimeVal" id="startTimeVal"  />
                                          <input type="hidden" name="endDateVal" id="endDateVal"  />
                                          <input type="hidden" name="endtDateVal" id="endtDateVal"  />
                                          <input type="hidden" name="id" id="eventId"  />
                                          <input type="hidden" name="eventTitle" id="eventTitle"  />
                                          <input type="hidden" name="idplaylist" id="idplaylist"  />
                                          <input type="hidden" name="start_val" id="start_val"  />
                                          <input type="hidden" name="end_val" id="end_val"  />
                                  
                            <div class="modal-body" id="modalBody" >
                                
                                  <div class="form-group">
                                     <label for="musicModal">Music</label>
                                          <select id="musicModal" class="form-control playlist_name">
                                              <option  value="0" selected>Choose Playlist </option>
                                                  {% for key,playlist in playlists[music_type] %}
                                                  <option value='{{ playlist["id"] }}' >{{ playlist['nom'] }} </option>";
                                                  {% endfor %} 
                                          </select>
                                  </div>
                                   <div class="form-group">
                                     <label for="mediaModal">Media</label>
                                      <select id="mediaModal" class="form-control playlist_name">
                                         <option value="0" selected >Choose Playlist</option>
                                         {% for key,playlist in playlists[media_type] %}
                                          <option value='{{ playlist["id"] }}' >{{ playlist['nom'] }} </option>";
                                          {% endfor %}                   
                                      </select>  
                  
                                   </div>
                                  <div class="form-group date_section">
                                       <label class="" >Start of broadcast</label>
                                          <div class="input-group date datePicker" id="startModal" data-target-input="nearest">
                                              <input type="text" class="form-control datetimepicker-input" data-target="#startModal"/>
                                              <div class="input-group-append" data-target="#startModal" data-toggle="datetimepicker">
                                                  <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                              </div>
                                          </div>
                                  </div>
                  
                                   <div class="form-group date_section">
                                      <label for="">End of broadcast</label>
                                      <div class="input-group date datePicker" id="endModal" data-target-input="nearest">
                                          <input type="text" class="form-control datetimepicker-input" data-target="#endModal"/>
                                          <div class="input-group-append" data-target="#endModal" data-toggle="datetimepicker">
                                              <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                          </div>
                                      </div>
                                  </div>
                                            
                                      <div class="form-group" id="duration_s">
                                         <label >Choose Duration</label>
                                          <select id="duration" class="form-control ">
                                             <option  value="0" color="{{ baseColor }}">No Duration</option>
                                             <option  value="1" color="{{ dailyColor }}" >Daily</option>
                                             <option  value="2"  color="{{ weeklyColor }}" >Weekly</option>
                                         </select>  
                                                          
                                       </div>
                                      <p>
                                      Attention, your playlist can not be read completely in the selected time slot
                                      All stores will be used for broadcast
                                      All the devices in the store will be used for broadcasting
                                      </p>
                                      <div class="alert alert-danger modal-error d-none" role="alert">
                                        {{ error_modal }}
                                      </div>
                  
                              </div>
                              <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="button"  id="dlt_all"  class="btn btn-danger d-none" data-dismiss="modal">Delete All</button>
                                 <button type="button"  id="updt_all"  class="btn btn-warning d-none" data-dismiss="modal">Update All</button>
                                <button type="button" id="btn_submit" class="btn btn-primary">Save changes</button>
                              </div>
                          </form>
                      </div>
                    </div>
                  </div>
                  <!-- End Modal --> 
            

       
      
    </div>


{% endblock %}