@extends('app_admin')

@section('title', 'Resident Perks | Luxury Concierge')

@section('content')
  <div class="container-fluid"
    ng-controller="PerkCtlr as vm">
    <!-- Header -->
    <div class="page-header">
      <div class="header left">
        <span class="icon icon-price_tag_finance_product_info_details"></span>
        <h1 class="header-title">Resident Perks</h1>
      </div>
      <!-- Create Button -->
      @if(!Auth::user()->hasRole('onsite_concierge'))
        <div class="sort"
          ng-show="vm.perks_loaded">
          <div class="filter-group">
            <div class="form-group">
              <button class="btn-oval-transparent btn-sm-block"
                ng-click="vm.create_perk_modal()"
                ng-show="vm.perks_loaded">Create New
              </button>
            </div>
          </div>
        </div>
      @endif
      <!-- Properties -->
      @if($properties->count() >= 2)
        <div class="sort">
          <div class="filter-group">
            <div class="form-group select"
              ng-show="vm.perks_loaded && vm.perks.length">
              <select ng-model="vm.filter_property"
                ng-init="vm.filter_property = ''">
                <option value="">Property</option>
                @foreach($properties as $property)
                  <option value="{{ $property->id }}">{{ $property->name }}</option>
                @endforeach
              </select>
            </div>
          </div>
        </div>
      @else
        <div class="sort" ng-init="vm.filter_property = '{{ $properties->first()->id }}'"></div>
      @endif
      <div class="sort" ng-show="vm.perks_loaded">
        <div class="filter-group">
          <div class="form-group select">
            <select ng-model="vm.perk_type">
              <option value="">All</option>
              <option value="resident_perks">Resident Perks</option>
              <option value="concierge_perks">Concierge Perks</option>
            </select>
          </div>
        </div>
      </div>
      <!-- Status Filter -->
      <div class="sort">
        <div class="filter-group" ng-show="vm.perks_loaded && vm.filter_property != ''">
          <div class="form-group select">
            <select ng-model="vm.filter_status"
              ng-options="status.value as status.name for status in vm.status"
              ng-init="vm.filter_status = ''">
            </select>
          </div>
        </div>
      </div>
    </div><!-- .page-header -->
    <!-- Loader -->
    <div class="loading-directories text-center"
      ng-show="!vm.perks_loaded">
      <img src="{{ asset('assets/images/loading-primary.svg') }}" alt="" width="62px">
      <em>Loading perks ...</em>
    </div>
    <!-- Sidebar -->
    <div class="row"
      ng-init="vm.get_items({{ $filter_category }})"
      ng-show="vm.perks_loaded">

      <div class="desktop-filter">
        <div class="col-sm-3">
          <div class="filters">
            <!-- Perk Categories -->
            @if($perk_categories->count())
              <div class="media category">
                <div class="media-left media-middle">
                  <span class="otmicon otmicon-list"></span>
                </div>
                <div class="media-body">
                  <a class="{{ !$filter_category ? 'bold' : '' }}"
                    href="{{ url('perks') }}">
                    <span class="uppercase category-title">All listings</span>
                  </a>
                </div>
              </div>
              <!-- Categories -->
              @foreach($perk_categories as $category)
                <div class="media category {{ $perk_categories->last()->id == $category->id ? 'last' : '' }}">
                  <div class="media-left media-middle">
                    <span class="otmicon icon-{{ $category->icon_slug }}"></span>
                  </div>
                  <div class="media-body">
                    <a class="{{ ($filter_category == $category->id || $category->is_subcategory($filter_category)) ? 'bold' : '' }}"
                      href="{{ 'perks?category='.$category->id }}">
                      <span class="uppercase category-title">{{ $category->name }}</span>
                    </a>
                  </div>
                </div>
                <!-- Subcategories -->
                <ul class="subcategory {{ ($filter_category == $category->id || $category->is_subcategory($filter_category)) ? 'show' : '' }}">
                  @foreach($category->subcategories as $subcategory)
                    @if($subcategory->perk_category_is_in_admin_properties())
                      <li>
                        <a class="{{ $filter_category == $subcategory->id ? 'underline' : '' }}"
                          href="{{ 'perks?category='.$subcategory->id }}" ><span>{{ $subcategory->name }}</span>
                        </a>
                      </li>
                    @endif
                  @endforeach
                </ul>
              @endforeach
            @endif
          </div>
        </div><!--./filters-->
      </div><!--./col-sm-2-->
      <!-- Content -->
      <div class="col-sm-9">
        <!-- Perks -->
        <div class="masonry"
          ng-show="vm.perks_loaded">
          <div class="toggle animate-repeat masonry-item card card-news shadowed"
            dir-paginate="perk in vm.perks |
            orderBy: 'name' |
            filter: vm.property_filter |
            filter: vm.perk_type_filter |
            itemsPerPage: 21 as filteredPerks">
            <div class="perk">
              <!-- Name -->
              <div class="place">
                <a href="/directories/@{{ perk.slug }}">@{{ perk.name }}</a>
              </div>
              <p>@{{ perk.admin_info[0].title }}</p>
              <!-- Controls -->
              <div class="controls">
                @if(!Auth::user()->hasRole('onsite_concierge'))
                  <!-- Edit Button -->
                  <button class="btn-small accent view half-width"
                    ng-click="vm.edit_perk_modal(perk)"
                    ng-if="perk.permission">Edit
                  </button>
                  <!-- Delete Button -->
                  <button class="btn-small accent view half-width"
                    ng-click="vm.delete_perk_modal(perk)">Delete
                  </button>
                @endif
              </div>
            </div>
          </div>
          <!-- No Filtered Perks -->
          <h5 ng-show="!filteredPerks.length && vm.perks.length">There are no resident perks.</h5>
        </div>
        <!-- Pagination -->
        <dir-pagination-controls ng-if="vm.perks_loaded"></dir-pagination-controls>
      </div>
      <!-- No Perks -->
      <div class="col-sm-12"
        ng-if="vm.perks_loaded && vm.perks.length == 0">
        <h5>{!! $empty !!}</h5>
      </div>
    </div>
    <!-- Modals -->
    @include('admin.partials.perk.create_modal')
    @include('admin.partials.perk.edit_modal')
    @include('admin.partials.perk.delete_modal')
    @include('admin.partials.upload_modal')
  </div>
@endsection

@section('script')
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
  <script type="text/javascript">
    angular.module('luxury-concierge', [
      'angularUtils.directives.dirPagination',
      'uiSwitch',
      'modal',
      'ngFileUpload',
      'perks',
      'user',
      'socket',
      'liveChat'
    ]);
  </script>
  <script type="text/javascript" src="/assets/js/ngSticky.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/dirPagination.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/perks.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">
    $(function() {
      $('.filters').affix({
        offset: {
          top: 100
        }
      })
      $('.panel').matchHeight();
    });
  </script>
@endsection