@extends('app_admin')

@section('title', 'Daily Planner | Luxury Concierge')

@section('content')
  <div class="container-fluid"
    ng-controller="TaskCtlr as vm"
    ng-init="vm.get_items()">

    <div class="page-header">
      <div class="header left mr-m--s mr-m--m">
        <span class="icon icon-calendar_date_schedule_event_month_year_3"></span>
        <h1 class="header-title">Daily Planner</h1>
      </div>
      @if(!Auth::user()->hasRole('onsite_concierge'))
        <div class="sort"
          ng-show="vm.tasks_loaded">
          <div class="filter-group">
            <div class="form-group">
              <button class="btn-oval-transparent btn-sm-block"
                ng-click="vm.create_task_modal()">Create New
              </button>
            </div>
          </div>
        </div>
      @endif
      @if($properties->count() >= 2)
        <div class="sort"
          ng-show="vm.tasks.length">
          <div class="filter-group">
            <div class="form-group select">
              <select ng-model="vm.property">
                <option value="">Property</option>
                @foreach($properties as $property)
                  <option value="{{ $property->id }}">{{ $property->name }}</option>
                @endforeach
              </select>
            </div>
          </div>
        </div>
      @endif
      <div class="sort"
        ng-show="vm.tasks.length">
        <div class="search-field">
          <input type="search"
            placeholder="Search tasks ..."
            ng-model="vm.search_input"/>
        </div>
      </div>
    </div>
    <div class="loading-events text-center" ng-show="!vm.tasks_loaded">
      <img src="{{ asset('assets/images/loading-primary.svg') }}" alt="" width="62px">
      <em>Loading tasks ...</em>
    </div>
    <div class="row"
      ng-show="vm.tasks_loaded">
      <div class="col-sm-12 col-md-8 flex-cal">
        <div ng-repeat="event in vm.tasks |
          filter: vm.filter_dates |
          filter: vm.filter_property |
          filter: { title: vm.search_input } as filtered_calendar">
        </div>
        <planner id="flexcalendar"
          options="vm.options"
          events="filtered_calendar"
          active="vm.active_date"
          property="vm.property">
        </planner>
      </div>
      <div class="col-sm-12 col-md-4 mt-m--s mt-f--m mt-f--l">
        <button class="btn btn-ticket view-events"
          type="button"
          name="button"
          ng-click="vm.reset()"> View All Tasks
        </button>
        <div class="panel">
          <div class="panel-heading">
            <span class="panel-icon icon-calendar_date_schedule_event_month_year_3"></span>
            <h3 class="panel-title">@{{ vm.selected_date ? (vm.selected_date | date:'dd MMM') + ' Tasks' : 'Upcoming Tasks' }}</h3>
          </div><!--./panel-heading -->
          <div class="panel-content widget-planner"
            ng-controller="modalCtlr">
            <ul class="panel-list perks">
              <li class="toggle-in"
                ng-class="animation"
                dir-paginate="task in filtered_tasks = (vm.tasks |
                filter: (vm.selected_date ? vm.filter_selected_date : '') |
                filter: vm.filter_dates |
                filter: vm.filter_property |
                filter: { title: vm.search_input } |
                filter: (vm.selected_date ? '' : vm.future_tasks) |
                orderBy: 'start_date') |
                itemsPerPage: 5">
                <div class="media">
                  <div>
                    <h5  class="widget-planner-title">@{{ task.title }}</h5>
                    <div class="widget-planner-description">@{{ task.description }}</div>
                    <span class="month widget-planner-time">
                      <div ng-if="vm.dateIsToday(task.start_date)" class="widget-planner-time">Starts at @{{ task.start_date_time }}</div>
                      <div ng-if="vm.dateIsToday(task.end_date)" class="widget-planner-time">Ends at @{{ task.end_date_time }}</div>
                      
                    </span>
                    <br><br>
                  </div>

                  <div class="media-body">
                    <div class="controls">
                      <!-- Delete Button -->
                      <button class="btn-small accent view half-width center"
                        ng-click="vm.edit_task_modal(task)">Edit
                      </button>
                      <!-- Delete Button -->
                      <button class="btn-small accent view half-width center"
                        ng-click="vm.delete_task_modal(task)">Delete
                      </button>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
            <dir-pagination-controls></dir-pagination-controls>
            <div ng-show="vm.tasks.length && !(filtered_tasks | filter: (vm.selected_date ? '' : vm.future_tasks)).length"><p>There are no Tasks.</p></div>
            <div ng-if="vm.tasks_loaded && vm.tasks.length == 0">{!! $empty !!}</div>
          </div><!--./panel-content -->
        </div><!--./panel -->
      </div><!--./col-sm-8-->
    </div><!--./row-->

    @include('admin.partials.task.create_modal')
    @include('admin.partials.task.edit_modal')
    @include('admin.partials.task.delete_modal')
  </div>
@endsection

@section('script')
  <script type="text/javascript">
    angular.module('luxury-concierge', [
      'angularUtils.directives.dirPagination',
      'planner',
      'ngAnimate',
      'ui.dateTimeInput',
      'ui.bootstrap.datetimepicker',
      'modal',
      'ngFileUpload',
      'tasks',
      'user',
      'socket',
      'liveChat',
      'uiSwitch'
    ]);
  </script>
  <script type="text/javascript" src="/assets/js/dirPagination.js"></script>
  <script type="text/javascript" src="/assets/js/planner.min.js"></script>
  <script type="text/javascript" src="/assets/js/angular-translate.min.js"></script>
  <script type="text/javascript" src="/assets/js/moment.min.js"></script>
  <script type="text/javascript" src="/assets/js/angular-moment.min.js"></script>
  <script type="text/javascript" src="/assets/js/dateTimeInput.js"></script>
  <script type="text/javascript" src="/assets/js/datetimepicker.js"></script>
  <script type="text/javascript" src="/assets/js/datetimepicker.templates.js"></script>
  <script type="text/javascript" src="/assets/js/ng-file-upload-shim.min.js"></script>
  <script type="text/javascript" src="/assets/js/ng-file-upload.min.js"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/modal.js') }}"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/tasks.js') }}"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/user.js') }}"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/socket.js') }}"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/liveChat.js') }}"></script>
@endsection