@extends('layouts.template')

@section('top')
<link rel="stylesheet" type="text/css" href="{{ asset('dist/jqtransformplugin/jqtransform.css') }}">
<style type="text/css">
	.tablesaw-advance{
		display: none !important;
	}
	<style>
  .interval-cursor-overlay {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: none;
    z-index: 3000;
  }
  
  .interval-cursor-overlay.is-moving {
    cursor: move;
    display: block;
  }
  
  .interval-cursor-overlay.is-resizing {
    cursor: row-resize;
    display: block;
  }

  .noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .server-info {
    display: none;
  }

  .clearfix:after {
    content: ' ';
    display: block;
    clear: both;
  }
  
  .all-container {
    opacity: 1;
    padding: 0 0 40px 20px;
    transition: opacity 0.2s linear;
  }
  
  .all-container.is-hidden {
    opacity: 0;
  }

  .calendar-container {
  	width: 100%;
    float: left;
  }
  
  .calendar-controls {
  	width: 100%;
    margin: 20px 0 10px;
    position: relative;
    font-weight: bold;
  }
  
  .calendar-controls input {
    font-weight: bold;
  }
  
  .calendar-prev-month,
  .calendar-next-month {
    position: absolute;
    top: 50%;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    cursor: pointer;
    background-size: 14px 24px;
    opacity: 0.5;
  }
  
  .calendar-prev-month:hover,
  .calendar-next-month:hover {
    opacity: 0.8;
  }
  
  .calendar-prev-month {
    left: 8px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E") 0% 50% no-repeat;
  }
  
  .calendar-next-month {
    right: 8px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E") 100% 50% no-repeat;
  }
  
  .calendar-select-date {
    width: 180px;
    margin: 0 auto;
  }
  
  .calendar-select-year {
    background: #fcfcfc;
    border: 1px solid #d1d1d1;
    padding: 5px 5px 6px;
    width: 80px;
    margin-left: 12px;
  }

  .calendar {
  	width: 100%;
    border-collapse: collapse;
    height: 400px;
  }
  
  .calendar tbody {
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
  }
  
  .calendar th {
    text-align: left;
    padding: 8px 8px 4px;
    font-size: 11px;
    height: 20px;
  }
  
  .calendar td {
    color: #ccc;
    width: 60px;
    padding: 8px;
    background: #fff;
    border: 1px solid #ddd;
    cursor: default;
    transition: background-color 0.2s linear;
    position: relative;
  }
  
  .calendar td.is-current {
    color: #000;
    cursor: pointer;
  }
  
  .calendar td.is-current:hover {
    background: #f2f2f2;
  }
  
  .calendar td.is-selected:after {
    content: ' ';
    display: block;
    position: absolute;
    left: -1px;
    top: -1px;
    right: -1px;
    bottom: -1px;
    pointer-events: none;
    background: rgba(51, 153, 255, 0.2);
    border: 3px solid rgba(46, 133, 220, 0.8);
    border-radius: 1px;
  }
  
  .calendar td.has-intervals {
    background: #7caf7c;
  }
  
  .calendar td.has-intervals:hover {
    background: #6d9e6d;
  }
  
  .calendar-info-and-actions {
    padding-top: 12px;
  }
  
  .calendar-info {
    float: left;
    font-size: 11px;
  }
  
  .calendar-color-rect {
    display: inline-block;
    width: 50px;
    height: 12px;
    border-radius: 2px;
    vertical-align: middle;
  }
    
  .calendar-color-rect-filled {
    background: #7caf7c;
  }
  
  .calendar-color-rect-selected {
    background: #adcbea;
  }
  
  .calendar-actions {
    float: right;
    text-align: right;
    font-size: 11px;
    font-weight: bold;
  }
  
  .calendar-actions a:hover {
    text-decoration: underline;
  }
  
  .timetable-container {
    width: 100%;
    float: left;
    padding-left: 40px;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.2s linear;
  }
  
  .timetable-container.is-active {
    pointer-events: auto;
    opacity: 1;
  }
  
  .timetable-controls {
    height: 88px;
  }
  
  .timetable-alert {
    height: 65px;
    box-sizing: border-box;
    padding: 19px 8px 0;
    font-size: 11px;
    line-height: 1.5;
    color: #f00;
  }
  
  .timetable-actions {
    padding: 0 8px;
    font-size: 11px;
    font-weight: bold;
  }
  
  .timetable-actions a:hover {
    text-decoration: underline;
  }
  
  .timetable-wrapper {
    height: 469px;
    overflow-y: auto;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
    position: relative;
  }
  
  .timetable {
    border-collapse: collapse;
    width: 100%;
  }
  
  .timetable td {
    color: #000;
    padding: 8px;
    background: #fff;
    border: 1px solid #ddd;
    height: 30px;
  }
  
  .timetable tr:first-child td {
    border-top: none;
  }
  
  .timetable tr:last-child td {
    border-bottom: none;
  }
  
  .timetable-time {
    width: 40px;
  }
  
  .timetable-intervals {
    position: absolute;
    top: 0;
    height: 1127px;
    left: 57px;
    right: 0;
    cursor: crosshair;
    opacity: 0;
    transition: opacity 0.2s linear;
  }
  
  .timetable-intervals.is-visible {
    opacity: 1;
  }
  
  .timetable-interval {
    background: rgba(0, 102, 0, 0.5);
    position: absolute;
    overflow: hidden;
    left: 0;
    right: 0;
    cursor: move;
    min-height: 1px;
  }
  
  .timetable-interval-time {
    pointer-events: none;
    font-size: 11px;
    color: #396339;
    position: absolute;
    left: 6px;
    top: 2px;
    display: none;
  }
  
  .timetable-interval:hover .timetable-interval-time,
  .timetable-interval.is-editing .timetable-interval-time {
    display: block;
  }
  
  .timetable-interval-top-border,
  .timetable-interval-bottom-border {
    content: ' ';
    display: block;
    left: 0;
    right: 0;
    height: 4px;
    cursor: row-resize;
    position: absolute;
    background: #5f905f;
    opacity: 0;
  }
  
  .timetable-interval-top-border:hover,
  .timetable-interval-bottom-border:hover,
  .timetable-interval-top-border.is-highlight,
  .timetable-interval-bottom-border.is-highlight {
    opacity: 1;
  }
  
  .timetable-interval-top-border {
    top: 0;
  }
  
  .timetable-interval-bottom-border {
    bottom: 0;
  }
  
  .autofill-dialog {
    display: none;
  }
  
  .autofill-dialog-content {
    text-align: left;
    font-size: 11px;
  }
  
  .autofill-dialog-content input {
    background: #fcfcfc;
    border: 1px solid #d1d1d1;
    padding: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    margin-right: 4px;
  }
  
  .autofill-dialog-buttons {
    text-align: center;
    padding: 20px 0 0;
  }
  
  .autofill-dialog-units {
    color: #999;
  }
  
  .interval-dialog {
    display: none;
  }
  
  .interval-dialog-buttons {
    text-align: right;
    padding: 20px 0 0;
  }
  
  .interval-dialog-button-delete {
    float: left;
  }
  
  .interval-dialog-units {
    color: #999;
  }
  
  #popup_overlay {
    background: #000 !important;
    opacity: 0.4 !important;
  }
  .col-md-6{
  	float: left;
  }
</style>
</style>
@endsection

@section('content')
<div id="app">
	<div class="card">
	    <div class="card-header">{{ trans('pages.contractors.calendar_header') }}</div>

	    <div class="card-body">
	        <div class="table-wrap m-t-20">
	        	<div class="all-container clearfix is-hidden">
				  <div class="col-md-6">
					  <div class="calendar-container">
					    <div class="calendar-controls">
					      <div class="calendar-prev-month" v-on:click="prevMonth"></div>
					      <div class="calendar-next-month" v-on:click="nextMonth"></div>
					    
					      <div class="calendar-select-date clearfix">
					        <select class="calendar-select-month">
					          <option value="1">Январь</option>
					          <option value="2">Февраль</option>
					          <option value="3">Март</option>
					          <option value="4">Апрель</option>
					          <option value="5">Май</option>
					          <option value="6">Июнь</option>
					          <option value="7">Июль</option>
					          <option value="8">Август</option>
					          <option value="9">Сентябрь</option>
					          <option value="10">Октябрь</option>
					          <option value="11">Ноябрь</option>
					          <option value="12">Декабрь</option>
					        </select>
					        
					        <input type="number" class="calendar-select-year" v-model="year">
					      </div>
					    </div>

					    <table class="calendar noselect">
					      <thead>
					        <tr>
					          <th>пн</th>
					          <th>вт</th>
					          <th>ср</th>
					          <th>чт</th>
					          <th>пт</th>
					          <th>сб</th>
					          <th>вс</th>
					        </tr>
					      </thead>
					      <tbody>
					        <tr v-for="week in calendar">
					          <td v-for="day in week" v-bind:class="{ 'is-current': day.isCurrent, 'is-selected': isSelected(day), 'has-intervals': day.intervals.length }" v-on:click="selectDay(day, $event)">
					            @{{ day.number }}
					          </td>
					        </tr>
					      </tbody>
					    </table>
					    
					    <div class="calendar-info-and-actions clearfix">
					      <div class="calendar-info">
					        <div class="calendar-color-rect calendar-color-rect-filled"></div> — заполненный день<br>
					        <div class="calendar-color-rect calendar-color-rect-selected"></div> — выбранный день
					      </div>
					      
					      <div class="calendar-actions">
					        <a href="#" v-on:click.prevent="selectAllDays">Выбрать все дни</a><br>
					        <a href="#" v-on:click.prevent="selectAllEmptyDays">Выбрать только свободные дни</a><br>
					        <a href="#" v-on:click.prevent="unselectAllDays">Отменить выбор</a>
					      </div>
					    </div>
					  </div>	
				  </div>
				  
				  
				  <div class="col-md-6">
					  <div class="timetable-container" v-bind:class="{ 'is-active': selected.length }">
					    <div class="timetable-controls">
					      <div class="timetable-alert">
					        <span v-if="unmatchedDaysSelected">
					          Вы выбрали несколько дней с различающимися интервалами. Их содержимое будет перезаписано.
					        </span>
					      </div>

					      <div class="timetable-actions">
					        <a href="#" v-on:click.prevent="autofillClicked">Автозаполнение</a><br>
					      </div>
					    </div>
					    
					    <div class="timetable-wrapper noselect">
					      <table class="timetable">
					        <tbody>
					          <tr v-for="time in timetable">
					            <td class="timetable-time">@{{ time }}:00</td>
					            <td></td>
					          </tr>
					        </tbody>
					      </table>
					      
					      <div class="timetable-intervals"
					        v-bind:class="{ 'is-visible': selected.length }"
					        v-on:mousedown="intervalContainerMouseDown($event)">
					        
					        <div class="timetable-interval"
					          v-for="interval in timetableModel"
					          v-bind:style="calcIntervalPosition(interval)"
					          v-on:mousedown.stop="intervalMouseDown($event, interval)"
					          v-on:click="intervalClicked($event, interval)">
					          
					          <div class="timetable-interval-time">@{{ interval.start_time.format('HH:mm') }} &ndash; @{{ interval.end_time.format('HH:mm') }}</div>

					          <div class="timetable-interval-border timetable-interval-top-border"></div>
					          <div class="timetable-interval-border timetable-interval-bottom-border"></div>
					        </div>
					      </div>
					    </div>
					  </div>	
				  </div>
				  
				  
				  <div class="autofill-dialog">
				    <div class="col-xs-12">
					    <form>
					    	<div class="autofill-dialog-period">
						    	<div class="form-group autofill-dialog-period-start">
			                        <label for="dropdownStart">Начало периода</label>
			                        <input type="time" value="00:00" class="form-control" id="dropdownStart" required>
			                    </div>	
			                    <div class="form-group autofill-dialog-period-end">
			                        <label for="dropdownEnd">Конец периода</label>
			                        <input type="time" value="23:59" class="form-control" id="dropdownEnd" required>
			                    </div>	
					    	</div>
					      	<div class="autofill-dialog-slots">
					      		<div class="form-group autofill-dialog-slots-duration">
			                        <label for="utofillDialogSlotsDuration">Длительность временного слота</label>
			                        <input type="number" value="60" class="form-control" id="utofillDialogSlotsDuration" placeholder="Минут">
			                    </div>
			                    <div class="form-group autofill-dialog-slots-pause">
			                        <label for="utofillDialogSlotsPause">Пауза между слотами</label>
			                        <input type="number" value="15" class="form-control" id="utofillDialogSlotsPause" placeholder="Минут">
			                    </div>	
				      		</div>
				      		<div class="autofill-dialog-cars">
				      			<div class="form-group autofill-dialog-slots-duration">
			                        <label for="utofillDialogSlotsCars">Максимальное количество машин внутри интервала</label>
			                        <input type="number" value="5" class="form-control" id="utofillDialogSlotsCars" placeholder="Машин">
			                    </div>
			      			</div>
					      
						    <div class="autofill-dialog-buttons">
						        <button onclick="vue.performAutoClick()" id="modal-ok" type="button" class="btn btn-primary btn-xs autofill-dialog-button-ok">Заполнить</button>
						        <button onclick="vue.modalCancel()" type="button" class="btn btn-primary btn-xs autofill-dialog-button-cancel">Отмена</button>
						    </div>
					    </form>	
				    </div>
				  </div>
				  
				  <div class="interval-dialog">
				    <div class="col-xs-12">
					    <form>
					    	<div class="interval-dialog-period">
						    	<div class="form-group interval-dialog-period-start">
			                        <label for="periodStart">Начало интервала</label>
			                        <input type="time" class="form-control" id="periodStart" required>
			                    </div>	
			                    <div class="form-group interval-dialog-period-end">
			                        <label for="dropdownDash">Конец интервала</label>
			                        <input type="time" class="form-control" id="dropdownDash" required>
			                    </div>	
					    	</div>
					    	<div class="interval-dialog-cars">
				      			<div class="form-group autofill-dialog-slots-duration">
			                        <label for="dropdownCars">Максимальное количество машин внутри интервала</label>
			                        <input type="number" class="form-control" id="dropdownCars" placeholder="Машин">
			                    </div>
			      			</div>
			      			<div class="interval-dialog-buttons">
						        <button onclick="vue.intervalClick()" type="button" class="btn btn-primary btn-xs autofill-dialog-button-ok">Удалить</button>
						        <button onclick="vue.modalCancel()" type="button" class="btn btn-primary btn-xs autofill-dialog-button-cancel">Отмена</button>
					      </div>
				    	</form>
				    </div>
				  </div>
				</div>
	        </div>
	    </div>
	</div>
</div>


<!-- Modal forms-->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalForms" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5>@{{ title }}</h5>
            </div>
            <div class="modal-body">
                <div v-html="description"></div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('footer')
<script type="text/javascript" src="{{ asset('dist/jqtransformplugin/jquery.jqtransform.js') }}"></script>
<script type="text/javascript" src="{{ asset('dist/js/jquery.alerts.js') }}"></script>
<script>
//один из примеров реализации jQuery.browser
jQuery.browser = {};
(function () {
    jQuery.browser.msie = false;
    jQuery.browser.version = 0;
    if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
        jQuery.browser.msie = true;
        jQuery.browser.version = RegExp.$1;
    }
})();
  moment.locale('ru');

  var Modal = new Vue({
  	el: "#modal",
  	data: function(){
  		return {
  			title: "",
  			description: ""
  		}
  	},
  	methods: {
  		open(title,description){
  			this.title = title;
  			this.description = description;
  			$('#modal').modal('show');
  		}
  	}
  });

  var vue = new Vue({
    el: '.all-container',
    
    data: {
      month: moment().month() + 1,
      year: moment().year(),
      calendar: [],
      selected: [],
      timetableModel: [],
      unmatchedDaysSelected: false,
      interval: null
    },
    
    computed: {
      timetable: function () {
        var result = [];
        
        for (var i = 0; i < 24; i++) {
          result.push(('0' + i).slice(-2));
        }
        
        return result;
      }
    },
    
    watch: {
      month: function () {
        var select = $('.calendar-select-month');
        var option = select.find('option[value=' + this.month + ']');
        var index = select.find('option').index(option);

        this._preventDateChangeEvent = true;
        select.prev('ul').find('li').eq(index).find('a').click();
        this._preventDateChangeEvent = false;
        
        this.dateChanged();
      },
      
      year: function () {
        this.dateChanged();
      },
      
      selected: function () {
        var self = this;

        self.timetableModel = [];
        
        if (!self.selected.length) return;
        
        if (self.selected.length > 1) {
          var timeStrings = [];

          self.selected.forEach(function (day) {
            day.intervals.sort(function (a, b) {
              var diff = a.start_time.diff(b.start_time, 'minutes');
              if (diff == 0) {
                diff = a.end_time.diff(b.end_time, 'minutes');
              }
              
              return diff;
            });
            
            var intervalsStr = [];
            day.intervals.forEach(function (interval) {
              intervalsStr.push(
                interval.start_time.format('HH:mm') + '-' + 
                interval.end_time.format('HH:mm') + '-' + 
                interval.car_count
              );
            });
            
            timeStrings.push(intervalsStr.join(','));
          });
          
          var allSame = true;
          for (var i = 1; i < timeStrings.length; i++) {
            if (timeStrings[i] != timeStrings[0]) {
              allSame = false;
              break;
            }
          }

          self.unmatchedDaysSelected = !allSame;
          
          if (!allSame) return;
        } else {
          self.unmatchedDaysSelected = false;
        }

        self.selected.forEach(function (day, i) {
          day.intervals.forEach(function (interval, j) {
            if (i == 0) {
              var timetableInterval = $.extend({}, interval);
              timetableInterval.linkedIntervals = [interval];
              self.timetableModel.push(timetableInterval);
            } else {
              self.timetableModel[j].linkedIntervals.push(interval);
            }
          });
        });
      }
    },
    
    mounted: function () {
      var self = this;
      
      $('<div class="interval-cursor-overlay noselect"></div>').appendTo('body');
      
      $('.calendar-select-month').val(self.month);
      
      $('.calendar-controls').jqTransform();
      
      $('.calendar-controls .jqTransformSelectWrapper ul li a').click(function () {
        if (!self._preventDateChangeEvent) {
          self.month = $('.calendar-select-month').val();
        }
      });
      
      setTimeout(function () {
        $('.all-container').removeClass('is-hidden');
      }, 100);
      
      $(document).mousemove(function (e) {
        if (!self._interval) return;

        var moveCount = self.pixelsToMinutes(e.pageY - self._intervalClickY);
        moveCount = Math.round(moveCount / 15) * 15;

        if (moveCount !== 0) {
          if (self._intervalSaveStartTime && self._intervalSaveEndTime) {
            $('.interval-cursor-overlay').addClass('is-moving');
          } else {
            $('.interval-cursor-overlay').addClass('is-resizing');
          }
        }

        if (self._intervalSaveStartTime) {
          self._interval.start_time = self._intervalSaveStartTime.clone().add(moveCount, 'minutes');
        }

        if (self._intervalSaveEndTime) {
          self._interval.end_time = self._intervalSaveEndTime.clone().add(moveCount, 'minutes');
        }

        if (self._interval.start_time.diff(self._interval.end_time) > 0) {
          var time = self._interval.start_time;
          self._interval.start_time = self._interval.end_time;
          self._interval.end_time = time;
          
          var time = self._intervalSaveStartTime;
          self._intervalSaveStartTime = self._intervalSaveEndTime;
          self._intervalSaveEndTime = time;
          
          $('.timetable-interval-border.is-highlight')
            .removeClass('is-highlight')
            .siblings('.timetable-interval-border')
            .addClass('is-highlight');
        }
        
        if (self._intervalSaveStartTime) {
          var dayStart = self._intervalSaveStartTime.clone().startOf('day');
          var diff = dayStart.diff(self._interval.start_time, 'minutes');
          if (diff > 0) {
            self._interval.start_time = dayStart.clone();
            if (self._intervalSaveEndTime) {
              self._interval.end_time = self._interval.end_time.clone().add(diff, 'minutes');
            }
          }
        }
        
        if (self._intervalSaveEndTime) {
          var dayEnd = self._intervalSaveEndTime.clone().startOf('day').add(24 * 60 - 1, 'minutes');
          var diff = self._interval.end_time.diff(dayEnd, 'minutes');
          if (diff > 0) {
            self._interval.end_time = dayEnd.clone();
            if (self._intervalSaveStartTime) {
              self._interval.start_time = self._interval.start_time.clone().subtract(diff, 'minutes');
            }
          }
        }
      });
      
      $(document).mouseup(function (e) {
        if (self._interval) {
          if (self._interval.end_time.diff(self._interval.start_time, 'minutes') < 2) {
            var index = self.timetableModel.indexOf(self._interval);
            if (index !== -1) {
              self.timetableModel.splice(index, 1);
            }
            self.deleteLinkedIntervals(self._interval);
          } else {
            self.updateLinkedIntervals(self._interval);
          }
          
          self._interval = null;
          self._intervalSaveStartTime = null;
          self._intervalSaveEndTime = null;
          
          $('.timetable-interval').removeClass('is-editing');
          $('.timetable-interval-border').removeClass('is-highlight');
          $('.interval-cursor-overlay').removeClass('is-resizing is-moving');
        }
      });
      
      self.dateChanged();
    },
    
    methods: {
      prevMonth: function () {
        var date = moment([this.year, this.month - 1]).subtract(1, 'month');
        this.month = date.month() + 1;
        this.year = date.year();
      },
      
      nextMonth: function () {
        var date = moment([this.year, this.month - 1]).add(1, 'month');
        this.month = date.month() + 1;
        this.year = date.year();
      },
      
      selectDay: function (day, e) {
        if (!day.isCurrent) return;
        
        var index = this.selected.indexOf(day);
        if (index == -1) {
          this.selected.push(day);
        } else {
          this.selected.splice(index, 1);
        }
      },
      
      isSelected: function (day) {
        return this.selected.indexOf(day) >= 0;
      },
      
      autofillClicked: function () {
        var self = this;
        Modal.open('Автозаполнение временных интервалов',$('.autofill-dialog').html());
        
      },
      performAutoClick(){
      	this.performAutofill(
	        moment($('#modal .autofill-dialog-period-start input').val(), 'HH:mm'),
	        moment($('#modal .autofill-dialog-period-end input').val(), 'HH:mm'),
	        $('#modal .autofill-dialog-slots-duration input').val(),
	        $('#modal .autofill-dialog-slots-pause input').val(),
	        $('#modal .autofill-dialog-cars input').val()
	      );
	      $('#modal').modal('hide');
	      return false;
	 },
      modalCancel(){
      	$('#modal').modal('hide');
      return false;
      },
      performAutofill: function (start, end, intervalDuration, pause, car_count) {
        this.timetableModel = [];
        this.unmatchedDaysSelected = false;

        var days = [];
        var newIntervals = [];

        this.selected.forEach(function (day) {
          day.intervals = [];
          days.push(day.number);
        });

        var intervalStart = start;
        var intervalEnd = intervalStart.clone().add(intervalDuration, 'minutes');
        var intervals = [];

        while (end.diff(intervalEnd, 'minutes') >= 0) {
          var interval = {
            start_time: intervalStart.clone(),
            end_time: intervalEnd.clone(),
            car_count: car_count,
            linkedIntervals: []
          };

          this.timetableModel.push(interval);
          
          this.selected.forEach(function (day) {
            var linkedInterval = {
              start_time: interval.start_time.clone(),
              end_time: interval.end_time.clone(),
              car_count: interval.car_count
            };
            day.intervals.push(linkedInterval);
            interval.linkedIntervals.push(linkedInterval);
            newIntervals.push(linkedInterval);
          });

          intervals.push({
            start_time: interval.start_time.format('HH:mm'),
            end_time: interval.end_time.format('HH:mm'),
            car_count: interval.car_count
          });

          intervalStart = intervalEnd.clone().add(pause, 'minutes');
          intervalEnd = intervalStart.clone().add(intervalDuration, 'minutes');
        }
        
        $.post(
          '{{ route("api.contractors.calendar.batchcreateintervals") }}', 
          {
          	_token: "{{ csrf_token() }}",
            year: this.year,
            month: this.month,
            days: days,
            intervals: intervals
          }
        ).done(function (ids) {
          newIntervals.forEach(function (newInterval, i) {
            newInterval.id = ids[i];
          });
        });
      },

      intervalMouseDown: function (e, interval) {
        this._intervalClickY = e.pageY;
        this._interval = interval;

        var el = $(e.target);
        
        if (el.hasClass('timetable-interval')) {
          el.addClass('is-editing');
        }

        if (el.hasClass('timetable-interval') || el.hasClass('timetable-interval-top-border')) {
          this._intervalSaveStartTime = interval.start_time.clone();
        }

        if (el.hasClass('timetable-interval') || el.hasClass('timetable-interval-bottom-border')) {
          this._intervalSaveEndTime = interval.end_time.clone();
        }

        if (el.hasClass('timetable-interval-top-border') || el.hasClass('timetable-interval-bottom-border')) {
          el.addClass('is-highlight');
          el.parents('.timetable-interval').addClass('is-editing');
        }
      },
      
      intervalContainerMouseDown: function (e) {
        this._intervalClickY = e.pageY;
        
        var minutes = Math.round(this.pixelsToMinutes(e.offsetY) / 15) * 15;
        var time = moment().startOf('day').add(minutes, 'minutes');
        
        this._interval = {
          start_time: time.clone(),
          end_time: time.clone(),
          car_count: 1,
          linkedIntervals: []
        };
        
        this.timetableModel.push(this._interval);
        
        this._intervalSaveEndTime = this._interval.end_time.clone();
      },
      
      intervalClicked: function (e, interval) {
      	Modal.open('Параметры временного интервала',$('.interval-dialog').html());
        var self = this;
        $('#modal .interval-dialog-period-start input')
          .val(interval.start_time.format('HH:mm'))
          .on('input', function () {
            var time = moment($(this).val(), 'HH:mm');
            interval.start_time = interval.start_time.clone().set({
              hour: time.get('hour'),
              minute: time.get('minute')
            });
            self.updateLinkedIntervals(interval);
          });
          
        $('#modal .interval-dialog-period-end input')
          .val(interval.end_time.format('HH:mm'))
          .on('input', function () {
            var time = moment($(this).val(), 'HH:mm');
            interval.end_time = interval.end_time.clone().set({
              hour: time.get('hour'),
              minute: time.get('minute')
            });
            self.updateLinkedIntervals(interval);
          });
          
        $('#modal .interval-dialog-cars input')
          .val(interval.car_count)
          .on('input', function () {
            interval.car_count = parseInt($(this).val());
            self.updateLinkedIntervals(interval);
          });
        this.interval = interval;
        

        

        
      },
      intervalClick(){
      	var index = this.timetableModel.indexOf(this.interval);
          if (index !== -1) {
            this.timetableModel.splice(index, 1);
          }
          this.deleteLinkedIntervals(this.interval);
          $('#modal').modal('hide');
          return false;
      },
      calcIntervalPosition: function (interval) {
        return {
          top: this.minutesToPixels(interval.start_time.diff(interval.start_time.clone().startOf('day'), 'minutes')) + 'px',
          height: this.minutesToPixels(interval.end_time.diff(interval.start_time, 'minutes')) + 'px'
        };
      },
      
      minutesToPixels: function (minutes) {
        return minutes * 47 / 60;
      },
      
      pixelsToMinutes: function (pixels) {
        return pixels * 60 / 47;
      },
      
      selectAllDays: function () {
        var self = this;
        
        self.selected = [];
        
        self.calendar.forEach(function (week) {
          week.forEach(function (day) {
            if (day.isCurrent) {
              self.selected.push(day);
            }
          });
        });
      },
      
      selectAllEmptyDays: function () {
        var self = this;
        
        self.selected = [];
        
        self.calendar.forEach(function (week) {
          week.forEach(function (day) {
            if (day.isCurrent && !day.intervals.length) {
              self.selected.push(day);
            }
          });
        });
      },
      
      unselectAllDays: function () {
        this.selected = [];
      },
      
      calculateCalendar: function (month, year) {
        var result = [];

        var date = moment([year, month - 1]);
        var day = moment(date).startOf('month').startOf('week');
        var lastDay = moment(date).endOf('month').endOf('week');
        var lastWeek = day.week();
        var week = [];

        do {
          if (day.week() != lastWeek) {
            result.push(week);
            week = [];
          }

          week.push({
            number: day.date(),
            isCurrent: day.month() == month - 1,
            intervals: []
          });

          lastWeek = day.week();
          day.add(1, 'day');
        } while (
          day.isSameOrBefore(lastDay, 'day')
        );
        
        result.push(week);

        return result;
      },

      deleteLinkedIntervals: function (interval) {
        if (interval.linkedIntervals && interval.linkedIntervals.length) {
          var ids = [];

          this.selected.forEach(function (day) {
            interval.linkedIntervals.forEach(function (linkedInterval) {
              if (linkedInterval.id) {
                ids.push(linkedInterval.id);
              }

              var index = day.intervals.indexOf(linkedInterval);
              if (index !== -1) {
                day.intervals.splice(index, 1);
              }
            });
          });

          $.post('{{ route("api.contractors.calendar.deleteintervals") }}', { _token: "{{ csrf_token() }}",ids: ids });
        }
      },

      updateLinkedIntervals: function (interval) {
        var self = this;

        if (interval.linkedIntervals && interval.linkedIntervals.length) {
          var ids = [];

          interval.linkedIntervals.forEach(function (linkedInterval) {
            linkedInterval.start_time.set({
              hour: interval.start_time.hour(),
              minute: interval.start_time.minute()
            });
            
            linkedInterval.end_time.set({
              hour: interval.end_time.hour(),
              minute: interval.end_time.minute()
            });
            
            linkedInterval.car_count = interval.car_count;

            if (linkedInterval.id) {
              ids.push(linkedInterval.id);
            }
          });

          $.post(
            '{{ route("api.contractors.calendar.updateinterval") }}',
            {
        	  _token: "{{ csrf_token() }}",
              ids: ids,
              start_time: interval.start_time.format('HH:mm'),
              end_time: interval.end_time.format('HH:mm'),
              car_count: interval.car_count
            }
          );
        } else {
          var clear = false;
          
          if (
            self.unmatchedDaysSelected && 
            self.timetableModel.length == 1 && 
            self.timetableModel[0] == interval
          ) {
            self.unmatchedDaysSelected = false;

            self.selected.forEach(function (day) {
              day.intervals = [];
            });
            
            clear = true;
          }
          
          var days = [];
          var newIntervals = [];

          interval.linkedIntervals = [];
          self.selected.forEach(function (day) {
            var linkedInterval = {
              start_time: interval.start_time.clone(),
              end_time: interval.end_time.clone(),
              car_count: interval.car_count
            };
            day.intervals.push(linkedInterval);
            interval.linkedIntervals.push(linkedInterval);
            days.push(day.number);
            newIntervals.push(linkedInterval);
          });
          
          $.post(
            '{{ route("api.contractors.calendar.createinterval") }}', 
            {
              _token: "{{ csrf_token() }}",
              year: self.year,
              month: self.month,
              days: days,
              start_time: interval.start_time.format('HH:mm'),
              end_time: interval.end_time.format('HH:mm'),
              car_count: interval.car_count,
              clear: clear ? 1 : 0
            }
          ).done(function (ids) {
            newIntervals.forEach(function (newInterval, i) {
              newInterval.id = ids[i];
            });
          });
        }
      },

      dateChanged: function () {
        var self = this;
        
        self.selected = [];
        self.calendar = self.calculateCalendar(self.month, self.year);
        
        if (self._getIntervalsXhr) {
          self._getIntervalsXhr.abort();
        }
        
        self._getIntervalsXhr = $.get(
          '{{ route("api.contractors.calendar.getintervals") }}', 
          { 
            month: self.month, 
            year: self.year 
          }
        ).done(function (intervals) {
          self._getIntervalsXhr = false;

          intervals.forEach(function (interval) {
            var startTime = moment(interval.start_time, 'YYYY-MM-DD HH:mm:ss');

            self.calendar.forEach(function (week) {
              week.forEach(function (day) {
                if (day.isCurrent && day.number == startTime.date()) {
                  interval.start_time = startTime;
                  interval.end_time = moment(interval.end_time, 'YYYY-MM-DD HH:mm:ss');
                  day.intervals.push(interval);
                }
              });
            });
          });
        });
      }
    }
  });
</script>
@endsection