{%extends "confreg/confadmin_base.html" %}
{%block title%}Create schedule{%endblock%}
{%block extrahead%}
<style media="print">
#pgHeaderContainer, #pgSideWrap { display:none; }
div.schedwrap {
   font-size: 69%;
}
</style>
<style>
div.schedwrap {
   border: 1px solid black;
   position: relative;
}
div.sessblock {
   border: 1px solid gray;
   overflow-y: scroll;
}
div.sessionslot {
   position: absolute;
}
div.sesspending {
   opacity: 0.3;
}
div.roomheader {
   font-weight: bold;
   font-size: 1.2em;
   top: 0px;
   text-align: center;
   position: absolute;
}
div.sessblock a {
   text-decoration: none;
   color: black;
}
div.actualsession {
   z-index: 10;
}
div.sesscontentwrap {
   position: relative;
   min-height: 100%;
}
div.sesscontentwrap div.sessspeaker {
   font-style: italic;
}
div.sesscontentwrap div.sessrecording {
   font-style: italic;
}
div#availablewrapper {
   border: 1px solid;
   display: flex;
   flex-direction: column;
   position: fixed;
   top: 8%;
   left: 70%;
   height: 88%;
   width: 300px;
   background-color: white;
}
div#availablewrapper h3 {
   position: relative;
   text-align: center;
}
div#availablewrapper div#availablesesswrap {
   position: relative;
   overflow-y: scroll;
}
div#availablewrapper div.sessblock {
   width: 250px;
   height: 75px;
}
#assignMenu {
  position: absolute;
  display:none;
  z-index: 10000;
}

{%for track in tracks%}
div.track{{track.id}} {
   background-color: {{track.color}};
   color: {{track.fgcolor}};
}
{%endfor%}
</style>

<script type="text/javascript">
var sessions = {
{%for s in sessions %}
   {{s.id}}: {
      'title': '{{s.title|escapejs}}',
      'track': {{s.track_id|default:"null"}},
      'ispending': {{s.ispending|yesno:"true,false"}},
      'speakers': '{{s.speaker_list|escapejs}}',
      'numvotes': '{{s.numvotes}}',
{%if conference.callforpapersrecording%}      'recordingconsent': {{s.recordingconsent | lower}},{%endif%}
   },
{%endfor%}
};

var alltrackclasses = '{%for t in tracks%}track{{t.id}} {%endfor%}';

$( init );
/* Yes, this is very full of ugly hacks */

function assignSessionToSlot(session, slot) {
   var sessdata = sessions[session.data('sessionid')];

   slot.data('sessionid', session.data('sessionid'));
   session.data('slotid', slot.data('slotid'));

   var wrap = slot.children('div.sesscontentwrap');
   wrap.removeClass(alltrackclasses);
   wrap.addClass('track'+sessdata.track);
   wrap.data('sessionid', session.data('sessionid'));

   wrap.children('div.sesstitle').text(sessdata['title']);
   wrap.children('div.sessspeaker').text(sessdata['speakers']);
{%if conference.callforpapersrecording%}
   wrap.children('div.sessrecording').text('Recording: ' + (sessdata['recordingconsent'] ? 'Yes':'No'));
{%endif%}
   wrap.children('div.sessvotes').text('Votes: ' + sessdata['numvotes']);

   wrap.attr('title', sessdata['title'] + ' -- ' + sessdata['speakers']);

   session.hide();
}

function unassignSessionInSlot(slot) {
   var wrap = slot.children('div.sesscontentwrap');
   wrap.children('div').empty();
   wrap.removeClass(alltrackclasses);

   var session = $('#sess' + slot.data('sessionid'));
   slot.data('sessionid', null);

   session.show();
}

function init() {
  var assignMenu = $('#assignMenu');

  $('.actualsession, .sesscontentwrap').contextmenu(function(e) {
      assignMenu.data('sourceid', $(this).data('sessionid'));

      /* Loop over all slots and show/hide the available ones */
      $('div#assignMenu a[data-slotid]').each(function(i, e) {
         var o = $(e);
         var slot = $('#slot' + o.data('slotid'));
         if (slot.data('sessionid')) {
            o.parent().hide();
         }
         else {
            o.parent().show();
         }
      });

      assignMenu.css({
        display:"block",
        left: e.pageX,
        top: e.pageY
      });
      return(false);
  });
  assignMenu.on("click", "a", function() {
     assignMenu.hide();
     $('.assignSubMenu').hide();
  });
  $('body').click(function () {
     assignMenu.hide();
     $('.assignSubMenu').hide();
  });

  $('#assign_unassign').click(function(e) {
     var session = $('#sess' + assignMenu.data('sourceid'));

     /* Unassign the currently selected session, if it's scheduled */
     if (session.data('slotid')) {
        oldslot = $('#slot' + session.data('slotid'));

        unassignSessionInSlot(oldslot);

        session.data('slotid', null);
      }
      else
         alert('This session is not assigned to a slot');
  });

  $('#assign_viewsession').click(function(e) {
     var session = parseInt(assignMenu.data('sourceid'));
     window.open('/events/admin/{{conference.urlname}}/sessions/' + session + '/', '_blank');
  });

  $('.assignMenuTimeslot').click(function(e) {
     var slotid = $(this).data('slotid');
     var slot = $('#slot' + slotid);
     var session = $('#sess' + assignMenu.data('sourceid'));

     if (slot.data('sessionid')) {
        alert('A session is already assigned to this slot. Unassign that one first.');
     }
     else {
        // Are we moving away from existing slot? If so, mark it as open!
        if (session.data('slotid')) {
           oldslot = $('#slot' + session.data('slotid'));
           unassignSessionInSlot(oldslot);
           // Session value overwritten in next step
        }

        assignSessionToSlot(session, slot);
     }

     assignMenu.hide();
     $('.assignSubMenu').hide();
  });

/* Fix for multiple submenus */
  $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
     $(this).parent().siblings('.dropdown-submenu').each(function(i, o) {
        $(o).find('ul.dropdown-menu').hide();
     });
  });
/* End of fix for submenus */

  $('#loaderDiv')
     .hide()
     .ajaxStart(function() { $(this).show(); })
     .ajaxStop(function() { $(this).hide(); })
  ;

  // Load the current state
  $.get('.?get=1', function(data) {
     $.each(data, function(k, v) {
        slot = $('#' + k);
        session = $('#' + v);

        assignSessionToSlot(session, slot);
     });
  });
}

function saveDraft() {
   if (!confirm("Are you sure you want to save the draft? (This overwrites all changes, but doesn't publish anything)")) {
      return;
   }
   // Build a representation of all scheduled slots
   sched = {
      'csrfmiddlewaretoken': '{{csrf_token}}',
   }
   $('.sessionslot').each(function(i, el) {
      sessionid = $(el).data('sessionid');
      if (sessionid) {
         sched[$(el).attr('id')] = 'sess' + sessionid;
      }
   });
   $.post('.', sched, function(data) {
      alert('Saved.');
   }).error(function(data) {
      alert('Failed!\n' + data);
   });
}
</script>
{%endblock%}

{%block layoutblock%}
<h1>Create Conference Schedule - {{conference}}</h1>
<p style="width: {{day.schedule_width}}px;">
<b>NOTE! THIS IS FOR CREATING A TENTATIVE SCHEDULE ONLY!</b>
You also have to manually verify that the length of the talk matches
the talk slot, if your schedule supports multiple different lengths.
</p>

<div id="loaderDiv" style="background-color: gray; position:absolute; z-index:9999; top:0; left:0; width:100%; height:100%; opacity: .5;text-align:center;">
  <font size="30">Please wait, talking to Mr Server...</font>
</div>

<div id="availablewrapper">
  <h3>Available sessions</h3> 
  <div id="availablesesswrap">
  {%for s in sessions %}
   <div id="sess{{s.id}}" data-sessionid="{{s.id}}" class="sessblock actualsession track{{s.track_id}}{%if s.ispending%} sesspending{%endif%}">{{s.title}}<br/><i>{{s.speaker_list}}</i>
{%if conference.callforpapersrecording%}<br/>Recording: {{s.recordingconsent | yesno:"Yes,No"}}{%endif%}
{%if not s.ispending %}<br/>Votes: {{s.numvotes|default:"0"}}{%endif%}
</div>
  {%endfor%}
  </div>
</div>

{%for day in days%}
<h2>{{day.day|date:"l, F d"}}</h2>
<div class="schedwrap" style="height: {{day.schedule_height}}px; width: {{day.schedule_width}}px;">
{%for room in day.rooms%}
  <div class="sessblock roomheader" style="left: {{room.leftpos}}px; width: {{room.widthpos}}px; height: {{room.heightpos}}px;" title="{{room.name}}{%if room.capacity and room.capacity > 0%} ({{room.capacity}}){%endif%}{%if room.comment%} - {{room.comment}}{%endif%}">
    {{room.name}}{%if room.capacity and room.capacity > 0%} ({{room.capacity}}){%endif%}
 </div>
{%endfor%}
{%for session in day.sessions%}
  <div id="slot{{session.id}}" data-slotid="{{session.id}}" class="sessblock sessionslot" style="top: {{session.toppos}}px; left: {{session.leftpos}}px; width: {{session.widthpos}}px; height: {{session.heightpos}}px;">
  {{session.timeslot}}
  <div class="sesscontentwrap"><div class="sesstitle"></div><div class="sessspeaker"></div>{%if conference.callforpapersrecording%}<div class="sessrecording"></div>{%endif%}<div class="sessvotes"></div></div>
</div>
{%endfor%}
</div>

{%endfor%}
<button onClick="saveDraft()" class="btn btn-default">Save draft</button>
<p>
When you are ready to publish, click <a href="publish/" class="btn btn-default btn-xs">here</a>. (you must
save using the standard save button first, of course)
</p>

<a class="btn btn-default btn-block" href="/events/admin/{{conference.urlname}}/">Back to dashboard</a>

<div id="assignMenu" class="dropdown clearfix">
  <ul class="dropdown-menu" role="menu" style="display:block;position:static;margin-bottom:5px;">
    <li class="dropdown-header">Assign session</li>
    <li><a href="#" id="assign_unassign">Unassign</a></li>
    <li><a href="#" id="assign_viewsession">View session details</a></li>
    <div class="dropdown-divider"></div>
    <li role="separator" class="divider"></li>
{%for day in days %}
    <li class="dropdown-submenu">
    <a href="#" data-toggle="dropdown">{{day.day|date:"l, F d"}} <span class="glyphicon glyphicon-chevron-right"></span></a>
      <ul class="dropdown-menu assignSubMenu">
{%for room in day.rooms %}
        <li class="dropdown-submenu">
          <a href="#" data-toggle="dropdown">{{room.name}} <span class="glyphicon glyphicon-chevron-right"></span></a>
	  <ul class="dropdown-menu assignSubMenu">
{%for session in day.sessions %}
{%if session.room_id == room.id %}
            <li><a href="#" class="assignMenuTimeslot" data-slotid="{{session.id}}">{{session.timeslot}}</a></li>
{%endif%}
{%endfor%}
	  </ul>
	</li>
{%endfor%}
      </ul>
    </li>
{%endfor%}
  </ul>
</div>
{%endblock%}