@extends('app_admin')

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

@section('content')
  <div class="container-fluid"
    ng-controller="RecommendationCtlr as vm">
    <!-- Header -->
    <div class="page-header">
      <!-- Title -->
      <div class="header left mr-m--s mr-f--m">
        <span class="icon icon-hotel_service_employee_manager_concierge"></span>
        <h1 class="header-title">Recommendations</h1>
      </div>
      <!-- Create Button -->
      @if(!Auth::user()->hasRole('onsite_concierge'))
        <div class="sort"
          ng-show="vm.recommendations_loaded">
          <div class="filter-group">
            <div class="form-group">
              <button class="btn-oval-transparent btn-sm-block"
                ng-click="vm.create_recommendation_modal()">Create New
              </button>
            </div>
          </div>
        </div>
      @endif
      <!-- Property Filter -->
      @if($properties->count() >= 2)
        <div class="sort">
          <div class="filter-group" ng-show="vm.recommendations_loaded && vm.recommendations.length">
            <div class="form-group select">
              <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
      <!-- Status Filter -->
      <div class="sort">
        <div class="filter-group" ng-show="vm.recommendations_loaded && vm.recommendations.length && 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>
      <!-- Search Filter -->
      <div class="sort"
        ng-show="vm.recommendations.length">
        <div class="search-field">
          <input type="search"
            placeholder="Search recommendations ..."
            ng-model="vm.search_input"/>
        </div>
      </div>
    </div><!-- .page-header -->
    <!-- Content -->
    <div class="row">
      <!-- Loader -->
      <div class="loading-directories text-center" ng-show="!vm.recommendations_loaded">
        <img src="{{ asset('assets/images/loading-primary.svg') }}" alt="" width="62px">
        <em>Loading recommendations ...</em>
      </div>
      <!-- Recommendations -->
      <div class="col-sm-12">
        <div class="masonry" ng-init="vm.get_items()">
          <!-- Recommendation -->
          <div class="masonry-item recommendation card-news"
            style="background-image:url(@{{ '/' + recommendation.image }})"
            dir-paginate="recommendation in vm.recommendations |
            orderBy: 'title' |
            filter: vm.property_filter |
            filter: { title: vm.search_input } |
            itemsPerPage: 21 as filterRecommendations">
            <div class="recommendation-info">
              <!-- Title -->
              <a class="col-accent"
                href="/recommendations/@{{ recommendation.slug }}"
                ng-bind-html="recommendation.title">
              </a>
              <!-- Description -->
              <p ng-bind-html="recommendation.admin_info[0].description | limitHtml: 120"></p>
            </div>
            <div class="controls recommendation-info">
              <!-- Edit Button -->
              @if(!Auth::user()->hasRole('onsite_concierge'))
                <button class="btn btn-small accent"
                  ng-click="vm.edit_recommendation_modal(recommendation)">Edit
                </button>
                <button class="btn btn-small accent"
                  ng-click="vm.delete_recommendation_modal(recommendation)">Delete
                </button>
              @endif
            </div>
            <!-- Overlay -->
            <div class="overlay"></div>
          </div>
        </div>
        <!-- Pagination -->
        <dir-pagination-controls></dir-pagination-controls>
        <!-- No Recommendations On Filter -->
        <h5 ng-show="!filterRecommendations.length && vm.recommendations.length">There are no recommendations.</h5>
      </div>
      <!-- No Recommendations -->
      <div class="col-sm-12"><h5 ng-show="vm.recommendations_loaded && vm.recommendations.length == 0">{!! $empty !!}</h5></div>
    </div><!-- .row -->
    <!-- Modals -->
    @include('admin.partials.recommendation.create_modal')
    @include('admin.partials.recommendation.edit_modal')
    @include('admin.partials.recommendation.delete_modal')
  </div>
@endsection

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