@extends('app_admin')

@section('title', 'Calendar | Luxury Concierge')

@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(!Auth::user()->hasRole('onsite_concierge'))
        <div class="sort" ng-controller="modalCtlr"
          ng-show="vm.events_loaded">
          <div class="filter-group">
            <div class="form-group">
              <button class="btn-oval-transparent btn-sm-block"
                ng-click="modal_event_open()">Create New
              </button>
            </div>
          </div>
        </div>
      @endif
      @if($properties->count() >= 2)
        <div class="sort"
          ng-show="vm.events.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.events.length">
        <div class="filter-group">
          <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="sort"
        ng-show="vm.events.length">
        <div class="search-field">
          <input type="search"
            placeholder="Search events ..."
            ng-model="vm.search_input"/>
        </div>
      </div>
    </div>
    <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_property |
          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">
        <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"
            ng-controller="modalCtlr">
            <ul class="panel-list perks">
              <li class="toggle-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_property |
                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>
                    <div class="controls">
                      <a class="btn-small accent view half-width center"
                        href="/events/@{{ event.slug }}/@{{ event.date_slug }}">View
                      </a>
                      @if(!Auth::user()->hasRole('onsite_concierge'))
                        <button class="btn-small accent view half-width center"
                          ng-click="event.repeat == 'y' ? modal_event_open(event.origin) : modal_event_open(event)">Edit
                        </button>
                      @endif
                    </div>
                  </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.event.length == 0">{!! $empty !!}</div>

          </div><!--./panel-content -->
        </div><!--./panel -->
      </div><!--./col-sm-8-->
    </div><!--./row-->

    @include('admin.partials.event_modal')
    @include('admin.partials.upload_modal')
    @include('admin.partials.delete_modal')
  </div>
@endsection

@section('script')
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyDYRfHyCyq5g1fTsZYMKrpbNG2sbVCpi9s"></script>
  <script type="text/javascript">
    angular.module('luxury-concierge', [
      'angularUtils.directives.dirPagination',
      'vsGoogleAutocomplete',
      'flexcalendar',
      'ngAnimate',
      'ui.dateTimeInput',
      'ui.bootstrap.datetimepicker',
      'modal',
      'ngFileUpload',
      'events',
      'user',
      'socket',
      'liveChat',
      'uiSwitch'
    ]);
  </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="/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/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>
@endsection