@extends('app_admin')

@section('title', $recommendation->title.' | Luxury Concierge')

@section('content')
  <div class="container-fluid" ng-controller="RecommendationCtlr">
    <div class="row">
      <div class="col-sm-8 col-sm-offset-2">
        <!-- Header -->
        <div class="page-header clearfix">
          <div class="back-navigation no-mg left">
            <a href="javascript:history.go(-1)" class="btn-back">Back</a>
          </div>
        </div>
        <!-- Filter -->
        @if(count($properties) >= 2)
          <div class="filter-group">
            <div class="form-group select">
              <select id="recommendationFilter">
                @foreach($properties as $property)
                  <option value="{{ $property->id }}">{{ $property->name }}</option>
                @endforeach
              </select>
            </div>
          </div>
        @endif
        <!-- Recommendation -->
        <div class="panel news-inside-layout">
          <div id="recommendation">
            @foreach($recommendation->admin_info as $recommendation_info)
              <div class="{{ (count($properties) >= 2 ? 'hidden' : '').' '.$recommendation_info->venue_id }}">
                <div class="panel-heading text-center">
                  <!-- Title -->
                  <h1 class="title">{{ $recommendation->title }}</h1>
                  <!-- Subtitle -->
                  <span class="recommendation-subtitle">{{ $recommendation_info->subtitle }}</span>
                </div><!--./panel-heading -->
                <!-- Image -->
                <div class="text-center header-image">
                  <img src="/assets/images/recommendations/{{ $recommendation->image }}" alt="">
                </div>
                <!-- Content -->
                <div class="panel-content">
                  <!-- Description -->
                  {!! $recommendation_info->description !!}
                  <!-- Hyperlink -->
                  @if($recommendation_info->hyperlink)
                    <hr>
                    <div class="controls text-center">
                      <a href="{{ url($recommendation_info->hyperlink) }}" target="_blank" class="btn btn-request">Visit site</a>
                    </div>
                  @endif
                </div><!-- .panel-content -->
              </div>
            @endforeach
          </div><!-- #recommendation -->
        </div><!-- .panel -->

      </div><!-- .col-sm-8 col-sm-offset-2 -->
    </div><!-- .row -->
  </div><!-- .container-fluid -->
@endsection

@section('script')
<script type="text/javascript">
  angular.module('luxury-concierge', [
    'ngFileUpload',
    'user',
    'recommendations',
    'socket',
    'liveChat',
    'modal'
  ]);
</script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('.panel a').each(function(key, anchor) {
        $(this).attr("target", "_blank");
      });
    });
  </script>
  @if(count($properties) >= 2)
    <script type="text/javascript">
      function loadInfo() {
        var recommendationFilter = $('#recommendationFilter').val();
        $('#recommendation > div').each(function() {
          if($(this).hasClass(recommendationFilter)) {
            $(this).removeClass('hidden');
          } else {
            $(this).addClass('hidden');
          }
        });
      }
      loadInfo();
      $('#recommendationFilter').change(function() {
        loadInfo();
      });
    </script>
  @endif
  <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/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