@extends('app_client')

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

@section('content')
  <div class="container-fluid" ng-controller="RecommendationCtlr as vm">
    <!-- Header -->
    <div class="page-header">
      <div class="header left word-wrap">
        <span class="icon icon-hotel_service_employee_manager_concierge"></span>
        <h1 class="header-title">Recommendations</h1>
      </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>
      <!-- Clear -->
      <div class="clearfix"></div>
    </div>
    <!-- Content -->
    <div class="row">
      <div class="col-sm-12">
        @if($recommendations->count())
          <!-- 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="masonry" ng-init="vm.get_items()">
            <!-- Recommendation -->
            <div class="masonry-item recommendation card-news"
              style="background-image:url(@{{ recommendation.parent.image }})"
              dir-paginate="recommendation in vm.recommendations |
              orderBy: 'parent.title' |
              filter: vm.search_input |
              itemsPerPage: 21">
              <div class="recommendation-info">
                <!-- Title -->
                <h4>@{{ recommendation.parent.title }}</h4>
                <!-- Subtitle -->
                <h2>@{{ recommendation.subtitle }}</h2>
                <!-- Description -->
                <p ng-bind-html="recommendation.description | limitHtml: 120"></p>
              </div>
              <div class="recommendation-info controls recommendations"
                ng-controller="modalCtlr">
                <!-- More Info -->
                <a class="btn btn-sm accent more-info half-width"
                  href="recommendations/@{{ recommendation.parent.slug }}">More info
                </a>
                <!-- Request Button -->
                <button class="btn btn-sm more-info half-width no-open"
                  ng-controller="modalCtlr"
                  ng-click="modal_recommendation_request_open(recommendation.parent)"
                  ng-if="recommendation.request">{{ $property->id == 6 ? 'Service Request' : 'Request​' }}
                </button>
              </div>
              <!-- Overlay -->
              <div class="overlay"></div>
            </div>
          </div><!-- .masonry -->
          <!-- Pagination -->
          <div ng-show="vm.recommendations.length">
            <dir-pagination-controls></dir-pagination-controls>
          </div>
        @else
          <!-- No Recommendations -->
          <h5>{!! $empty !!}</h5>
        @endif
      </div><!--./col-sm-12-->
    </div><!--./row -->
  </div><!--./container fluid -->
  <!-- MODAL -->
  @include('client.partials.modal.recommendation')
@endsection

@section('script')
  <script type="text/javascript">
    angular.module('luxury-concierge', [
      'ui.dateTimeInput',
      'ui.bootstrap.datetimepicker',
      'ngFileUpload',
      'angularUtils.directives.dirPagination',
      'modal',
      'recommendations',
      '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/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