@extends('app_client')

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

@section('content')
  <div class="container-fluid"
    ng-controller="RecommendationCtlr as vm"
    ng-init="vm.get_recommendation({{ $recommendation->id }})">
    <div class="row">
      <div class="col-md-8 col-sm-12 col-md-offset-2 col-sm-offset-0">
        <!-- Header -->
        <div class="page-header">
          <div class="back-navigation no-mg">
            <a href="javascript:history.go(-1)" class="btn-back">Back</a>
          </div>
        </div>
        <!-- Recommendation -->
        <div class="panel news-inside-layout">
          <div class="panel-heading text-center">
            <!-- Title -->
            <h1 class="title">{{ $recommendation->title }}</h1>
            <!-- Subtitle -->
            <span class="recommendation-subtitle">{{ $recommendation->child->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->child->description !!}
            @if($recommendation->child->hyperlink || $recommendation->child->request)
              <hr>
              <div class="controls text-center">
                <!-- Hyperlink -->
                @if($recommendation->child->hyperlink)
                  <a class="btn btn-request accent {{ $recommendation->child->request ? 'half-width':'btn-sm-block' }}"
                    href="{{ url($recommendation->child->hyperlink) }}"
                    target="_blank">Visit site
                  </a>
                @endif
                <!-- Request Button -->
                @if($recommendation->child->request)
                  <button class="btn btn-request half-width"
                    ng-controller="modalCtlr"
                    ng-click="modal_recommendation_request_open(vm.recommendation)"
                    ng-show="vm.recommendation">{{ $property->id == 6 ? 'Service Request' : 'Request​' }}
                  </button>
                @endif
              </div>
            @endif
          </div><!-- .panel-content -->
        </div><!-- .panel -->

      </div><!-- .col-md-8 -->
    </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',
      'modal',
      'user',
      'recommendations',
      'socket',
      'liveChat'
    ]);
  </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="/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="{{ elixir('assets/js/controllers/modal.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">
    $(document).ready(function() {
      $('.panel a').each(function(key, anchor) {
        $(this).attr('target', '_blank');
      });
    });
  </script>
@endsection