{% extends 'supporttools/base.html' %}

{% load staticfiles %}
{% load compress %}
{% load i18n %}

{% block content %}
<!-- page header -->
<div role="main" class="container-fluid">
<h2>Service Order Scheduler</h2>

	<!--  EVENT Search Block -->
	<div id="panel2" class="tab-pane event-search" role="tabpanel" aria-labelledby="tab2">
		<form role="form" class="form-inline event-search">
			
			<div class="form-group inputs-row">
				<label for="startdate" class="sr-only">Start date</label>
				<input id="startdate" type="date" class="form-control input-date" placeholder="mm/dd/yy" onfocus="this.placeholder = ''" onblur="this.placeholder = 'mm/dd/yy'" value="{{todays_date}}" min="{{todays_date}}" required>
			</div>
			<div class="form-group inputs-row">
				<label for="enddate" class="sr-only">End date</label>
				<input id="enddate" type="date" class="form-control input-date" placeholder="mm/dd/yy" onfocus="this.placeholder = ''" onblur="this.placeholder = 'mm/dd/yy'" value="{{thirty_date}}" min="{{todays_date}}" required>
			</div>
			<button type="submit" class="btn btn-primary">Search </button>
		</form>
		
        <div class="result-display-container event-search-result"></div>
	</div> <!-- .tab-pane. Form container-->

{% verbatim %}
<script id="event-search-result-template" type="text/x-handlebars-template">
  <div class="serviceorder-header"><!-- Rslt Header -->
	<h3><span class="sr-only"> Scheduling from</span> {{ search_startdate }} to {{ search_enddate }}</h3>
  </div>	<!-- .Rslt Header -->

  <div class="result-list-container">
  	<div class="result-header">
		<div class="pull-right clearfix batchswitch">
          {{> schedule-button}}
        </div>
  	</div>

    {{> reservation-list}}

  </div>
</script>
{% endverbatim %}


{% verbatim %}
<script id="event-search-result-empty-template" type="text/x-handlebars-template">
  <div class="serviceorder-header"><!-- Rslt Header -->
	<h3>No service orders from {{ search_startdate }} to {{ search_enddate }}</h3>
  </div>	<!-- .Rslt Header -->
</script>
{% endverbatim %}


{% verbatim %}
<script id="reservation-list-partial" type="text/x-handlebars-template">

  <ol class="list-group result-list-chunk">
    {{#each schedule}}
      <li class="list-group-item clearfix">
        <span class="result-row-date" title="date">{{ month_num }}/{{ day }}</span>
        <span class="result-row-day" title="day">{{ weekday }}</span> 
        <span class="result-row-time" title="time">{{ start_time }} - {{ end_time }}</span>
        <span class="result-row-room" title="room">{{ room }}</span>
        <span class="result-row-event" title="event name">{{ name }}</span>
        <!--Button Code-->
        <span class="pull-right result-row-switchbtn">
        {{> schedule-button}}
        </span>
        <!--End button-->
      </li>
    {{/each}}
  </ol>
</script>
{% endverbatim %}


{% verbatim %}
<script id="schedule-button-partial" type="text/x-handlebars-template">

<div class="schedule-button-cluster {{#if disabled}}disabled{{/if}}">
    <!-- loading status -->
        <span class="loading"><i class="fa fa-spinner fa-spin"></i></span>
    <!-- end status icons -->


    <!-- container for scheduler button, toggle, and resulting modal -->
    <div class="btn-group  {{#if shift_id}}scheduled{{else}}unscheduled{{/if}}" {{#if shift_name}}data-shift-name="{{ shift_name }}"{{/if}}>

        <!-- scheduler button -->
        <button class="btn has-spinner" {{disabled}}>
            <span class="text scheduled option-help" id="text" data-toggle="tooltip" title="Cancel this scheduled shift"><i class="glyphicon glyphicon-ok"></i> Scheduled</span>
            <span class="text unscheduled option-help" id="text" data-toggle="tooltip" title="Schedule this session">Schedule</span>
            <span class="text schedule-all option-help" id="text" data-toggle="tooltip" title="Schedule all sessions">Schedule All</span>
        </button>
        <!-- end scheduler button -->

    </div>
    <!-- end container for scheduler button, toggle, and resulting modal -->
</div>

</script>
{% endverbatim %}

</div> <!-- .container-fluid -->
<hr>

{% verbatim %}
<script id="ajax-waiting" type="text/x-handlebars-template">
  <div class="waiting">
    <i class="fa fa-spinner fa-4 fa-spin"></i>
  </div>
</script>
{% endverbatim %}

{% verbatim %}
<script id="ajax-state-waiting" type="text/x-handlebars-template">
  <span class="state-waiting">
    <i class="fa fa-spinner fa-spin"></i>
  </span>
</script>
{% endverbatim %}

{% verbatim %}
<script id="ajax-state-successful" type="text/x-handlebars-template">
  <span class="state-successful">
    <i class="fa fa-check" title="update successful"></i>
  </span>
</script>
{% endverbatim %}

{% verbatim %}
<script id="ajax-fail-tmpl" type="text/x-handlebars-template">
<div class="modal fade" id="failure-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <!-- Failure modal -->
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h3 class="modal-title" id="myModalLabel">{{ failure_title }}</h3>
      </div>
      <div class="modal-body">
		<p>{{{ failure_message }}}</p>
		<div style="display: none;">
          {{ full_failure_message }}
		</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
</script>
{% endverbatim %}

<script type="text/javascript">
window.scheduler = {
  csrftoken: '{{ csrf_token }}',
  app_url: "{% url 'ems_wheniwork' %}",
};
</script>

{% endblock content %}

{% block extra_css %}
{% compress css %}
<link rel="stylesheet" type="text/less" href="{% static "ems_wheniwork/css/mobile.less" %}"/>
{% endcompress %}
{% if not request.is_mobile and not request.is_tablet %}
{% compress css %}
<link rel="stylesheet" type="text/less" href="{% static "ems_wheniwork/css/desktop.less" %}"/>
{% endcompress %}
{% endif %}
{% endblock extra_css %}

{% block extra_js %}
{% compress js %}
<script src="{% static "vendor/js/moment.min.js" %}"></script>
<script src="{% static "ems_wheniwork/js/main.js" %}"></script>
{% endcompress %}
{% endblock extra_js %}
