@extends('app_client')

@section('title', 'Calendar | '.$property->name)

@section('content')
  <div class="container-fluid"
    ng-controller="EventCtlr 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-wineglass_goblet_glass_drink_toast_party_clink"></span>
        <h1 class="header-title">Events</h1>
      </div>
      @if($events->count())
        <div class="row" ng-show="vm.events.length">
          <div class="filter-group">
            <div class="col-xs-12 col-sm-3">
              <div class="form-group select">
                <select ng-model="vm.category"
                  ng-options="category.id as category.name for category in vm.categories">
                </select>
              </div>
            </div>
          </div>
          <div class="col-xs-12 col-sm-3">
            <div class="search-field">
              <input type="search"
                placeholder="Search events ..."
                ng-model="vm.search_input"/>
            </div>
          </div>
        </div>
      @endif
      <div class="clearfix"></div>
    </div>

    @if($events->count())
      <div class="loading-events text-center"
        ng-show="!vm.events_loaded">
        <img src="{{ asset('assets/images/loading-primary.svg') }}" alt="" width="62px">
        <em>Loading events ...</em>
      </div>
      <div class="row"
        ng-show="vm.events_loaded && vm.events.length">
        <div class="col-sm-12 col-md-8 flex-cal">
          <div ng-repeat="event in vm.events |
          filter: vm.filter_category |
          filter: { title: vm.search_input } as filtered_calendar"></div>
          <flex-calendar id="flexcalendar"
            options="vm.options"
            events="filtered_calendar">
          </flex-calendar>
        </div>
        <div class="col-sm-12 col-md-4 mt-m--s mt-f--m mt-f--l event-widg">
          <button class="btn btn-ticket view-events"
            type="button"
            name="button"
            ng-click="vm.reset()">View all events
          </button>
          <div class="panel">
            <div class="panel-heading">
              <span class="panel-icon icon-wineglass_goblet_glass_drink_toast_party_clink"></span>
              <h3 class="panel-title">@{{ vm.selected_date ? (vm.selected_date | date:'dd MMM') + ' Events' : 'Upcoming events' }}</h3>
            </div><!--./panel-heading -->
            <div class="panel-content">
              <ul class="panel-list events"
                ng-show="vm.events.length">
                <li class="fade-in"
                  ng-class="animation"
                  dir-paginate="event in filtered_events = (vm.events |
                  filter: { start_date: vm.selected_date } |
                  filter: vm.filter_dates |
                  filter: vm.filter_category |
                  filter: { title: vm.search_input }) |
                  itemsPerPage: 5">
                  <div class="media">
                    <div class="media-left media-middle">
                      <div class="calendar-date">
                        <h3 class="day">@{{ event.day }}</h3>
                        <span class="month">@{{ event.month }}</span>
                      </div>
                    </div>
                    <div class="media-body">
                      <a href="/events/@{{ event.slug }}/@{{ event.date_slug }}">@{{ event.title }}</a>
                      <span class="place"><span class="place-type">@{{ event.location }} </span></span>
                      <a href="/events/@{{ event.slug }}/@{{ event.date_slug }}" class="btn-small accent view text-sm-center btn-sm-block">View</a>
                    </div>
                  </div>
                </li>
              </ul>
              <dir-pagination-controls></dir-pagination-controls>
              <div ng-show="vm.events.length && !filtered_events.length"><p>There are no Events.</p></div>
              <div ng-if="vm.events_loaded && vm.events.length == 0">{!! $empty !!}</div>
            </div><!--./panel-content -->
          </div><!--./panel -->
        </div>
      </div>
    @else
      <!-- No Events -->
      <div class="row">
        <div class="col-sm-12">
          <h5>{!! $empty !!}</h5>
        </div>
      </div>
    @endif
  </div>
@endsection

@section('script')
  <script type="text/javascript">
    angular.module('luxury-concierge', [
      'angularUtils.directives.dirPagination',
      'flexcalendar',
      'ngAnimate',
      'ui.dateTimeInput',
      'ui.bootstrap.datetimepicker',
      'ngFileUpload',
      'modal',
      'events',
      'user',
      'socket',
      'liveChat'
    ]);
  </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="/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/dirPagination.js"></script>
  <script type="text/javascript" src="/assets/js/flex-calendar.min.js"></script>
  <script type="text/javascript" src="/assets/js/angular-translate.min.js"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/events.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>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/modal.js') }}"></script>
@endsection