@extends('app_client')

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

@section('content')
  <div class="container-fluid"
    ng-controller="PerkCtlr as vm"
    ng-init="vm.get_perks({{ $filter_category }})">
    <!-- Header -->
    <div class="page-header"
      ng-controller="modalCtlr">
      <div class="header left">
        <span class="icon icon-price_tag_finance_product_info_details"></span>
        <h1 class="header-title">
          @if($property->slug == 'lcn')
            {{ 'Concierge Perks' }}
          @elseif($property->slug == 'loulavie' || $property->slug == 'ficlub' || $property->slug == 'lifestyle')
            {{ 'Member Perks' }}
          @else
            {{ 'Resident Perks' }}
          @endif
        </h1>
      </div>
      <div class="clear"></div>
    </div>
    @if($perks->count())
      <div class="row">
        <div class="mobile-filter">
          <div class="{{ $filter_category ? 'col-xs-6' : 'col-xs-12' }}">
            <div class="form-group select">
              <!-- Categories -->
              <label>Category</label>
              <select class="form-control" onchange="location = this.value;">
                <option value="{{ url('perks') }}">All</option>
                @foreach($perk_categories as $category)
                  @if($main_category)
                    @if($main_category->parent_id == 0)
                      <option value="{{ url('perks?category='.$category->id) }}" {{ $category->id == $main_category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                    @else
                      <option value="{{ url('perks?category='.$category->id) }}" {{ $category->id == $filter_category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                    @endif
                  @else
                    <option value="{{ url('perks?category='.$category->id) }}">{{ $category->name }}</option>
                  @endif
                @endforeach
              </select>
            </div>
          </div>
          <!-- Subcategories -->
          @if($main_category)
            <div class="col-xs-6"
              ng-show="{{ $filter_category }}">
              <div class="form-group select">
                <label>Sub-category</label>
                <select class="form-control" onchange="location = this.value;">
                  <option value="{{ url('perks?category='.$main_category->id) }}">All</option>
                  @foreach($main_category->subcategories->filter(function($item) use ($property) {
                    return $item->perk_category_is_in_property($property); }) as $subcategory)
                    <option value="{{ url('perks?category='.$subcategory->id) }}" {{ $subcategory->id == $filter_category ? 'selected' : '' }}>{{ $subcategory->name }}</option>
                  @endforeach
                </select>
              </div>
            </div>
          @endif
          <div class="clear"></div>
        </div>
        <div class="desktop-filter"
          ng-init="get_filter()">
          <div class="col-sm-3 col-md-3 dirnavigation">
            <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"
                    href="{{ url('perks') }}">
                    <a href="{{ url('perks') }}"
                      class="{{ !$filter_category ? 'bold' : '' }}">
                      <span class="uppercase category-title">All listings</span>
                    </a>
                  </div>
                </div>
                <!-- Categories -->
                @foreach($perk_categories as $category)
                  <div id="{{ $category->id }}"
                    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="{{ url('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->filter(function($item) use ($property) {
                      return $item->perk_category_is_in_property($property); }) as $subcategory)
                      <li>
                        <a class="{{ $filter_category == $subcategory->id ? 'underline' : '' }}"
                          href="{{ url('perks?category='.$subcategory->id) }}">
                          <span>{{ $subcategory->name }}</span>
                        </a>
                      </li>
                    @endforeach
                  </ul>
                @endforeach
              @endif
            </div><!--./filters-->
          </div><!--./col-sm-2-->
        </div><!--./desktop-filter -->
        <!-- Content -->
        <div class="col-sm-9 col-md-9">
          <!-- 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>
          <div class="masonry" ng-show="vm.perks_loaded && vm.perks.length">
            <div class="toggle animate-repeat masonry-item card card-news shadowed"
              dir-paginate="perk in vm.perks | orderBy: sortBy:reverseSort | itemsPerPage: 21">
              <div class="perk"
                ng-controller="modalCtlr">
                <!-- Directory Name -->
                <div class="place">
                  <span>@{{ perk.parent.directory ? perk.parent.directory.name : perk.parent.custom_directory }}</span>
                </div>
                <!-- Title -->
                <p>@{{ perk.title }}</p>
                <!-- Controls -->
                <div class="controls"
                  ng-controller="DirectoryCtlr">
                  <!-- View Button -->
                  <a class="btn-small accent view"
                    ng-class="{ 'half-width': perk.request, 'btn-sm-block': !perk.request }"
                    href="/directories/@{{ perk.parent.directory ? perk.parent.directory.slug : perk.parent.custom_directory_slug }}">View
                  </a>
                  <!-- Request Button -->
                  <button class="btn-small green request half-width"
                    ng-click="modal_perk_request_open(perk)"
                    ng-if="perk.request">{{ $property->id == 6 ? 'Service Request' : 'Request​' }}
                  </button>
                </div>
              </div><!-- ./masonry item perk -->
            </div><!-- ./animate repeat -->
          </div><!-- ./masonry -->
          <!-- No Filtered Perks -->
          <h5 ng-if="vm.perks_loaded && vm.perks.length == 0">There are no resident perks.</h5>
        </div><!-- ./col-sm-10 -->
        <!-- Pagination -->
        <dir-pagination-controls ng-if="vm.perks_loaded"></dir-pagination-controls>
      </div><!-- ./row -->
    @else
      <!-- No Perks -->
      <div class="row">
        <div class="col-sm-12">
          <h5>{!! $empty !!}</h5>
        </div>
      </div>
    @endif
  </div>
  <!-- Modal -->
  @include('client.partials.modal.perk')
@endsection

@section('script')
  <script type="text/javascript">
    angular.module('luxury-concierge', [
      'angularUtils.directives.dirPagination',
      'ui.dateTimeInput',
      'ngFileUpload',
      'modal',
      'perks',
      'directories',
      'user',
      'socket',
      'liveChat'
    ]);
  </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/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/directories.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