@extends('app_client')

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

@section('content')
  <div class="content">
    <!-- Hero Image -->
    <div class="hero" style="background-image: url({{ asset('assets/images/venues/hero/'.$property->hero_image) }})">
      <div class="hero-title {{ $property->slug == 'loulavie' ? 'loulavie' : '' }}">
        <div class="text-wrapper">
          <h2 class="wow animated fadeInUp"
            data-wow-delay="600ms"
            data-wow-duration="800ms">
              THE ULTIMATE LIFESTYLE EXPERIENCE
              <div class="small light" style="color:white">by Luxury Concierge Network</div>
          </h2>
        </div>
      </div>
    </div>
    <!-- Content -->
    <div class="container-fluid">
      <div class="desktop-content">
        <div class="row">
          <!-- Concierge Recommendations -->
          <div class="col-sm-6 col-md-6 col-xs-12">
            <div class="panel news-dash news-dash-{{ $property->slug }}">
              <div class="panel-heading word-wrap">
                <span class="panel-icon icon-hotel_service_employee_manager_concierge"></span>
                <h3 class="panel-title">Concierge Recommendations</h3>
              </div><!--./panel-heading -->
              <div class="panel-content">
                @if($concierge_recommendations->count())
                <ul class="panel-list recommendations">
                  @foreach($concierge_recommendations as $recommendation_info)
                    <li>
                      <div class="recommendation" style="background-image:url({{ asset('assets/images/recommendations/'.$recommendation_info->parent->image) }})">
                        <div class="recommendation-info">
                          <h4>{{ $recommendation_info->parent->title }}</h4>
                          <h2>{{ strlen($recommendation_info->subtitle) < 100 ? $recommendation_info->subtitle : substr($recommendation_info->subtitle, 0, 100).' ...' }}</h2>
                          <a class="btn btn-small more-info" href="{{ url('/recommendations/'.$recommendation_info->parent->slug) }}">More info</a>
                        </div>
                        <div class="overlay"></div>
                      </div>
                    </li>
                  @endforeach
                </ul>
                <div class="more center">
                  <a href="{{ url('recommendations') }}" class="btn-oval-transparent small  view-all">Read All</a>
                </div>
                @else
                  {!! $empty !!}
                @endif
              </div><!--./panel-content -->
            </div><!--./panel -->
          </div><!--./col-sm-6 -->
          <!-- Resident Perks -->
          <div class="col-sm-12 col-md-6">
            <div class="panel news-dash news-dash-{{ $property->slug }}">
              <div class="panel-heading">
                <span class="panel-icon icon-wineglass_goblet_glass_drink_toast_party_clink"></span>
                <h3 class="panel-title">Upcoming Events</h3>
              </div><!--./panel-heading -->
              <div class="panel-content">
                @if($events->count())
                  <ul class="panel-list perks">
                    @foreach($events as $event)
                    <a class="nohover" href="{{ url('events/'.$event->slug.'/'.$event->date_slug) }}">
                      <li class="hoverable" style="background-image:url({{ $event->images()->first() ? asset('assets/images/events/'.$event->images()->first()->hyperlink) : '' }})">
                        <div class="event-text">
                          <div class="calendar-date">
                            <h3 class="day">{{ date('d', strtotime($event->start_date)) }}</h3>
                            <span class="month uppercase">{{ date('M', strtotime($event->start_date)) }}</span>
                          </div>
                          {{ $event->title }}
                          <span class="place"><span class="place-type">{{ $event->location }}</span></span>
                        </div>
                        <div class="overlay"></div>
                      </li>
                    </a>
                    @endforeach
                  </ul>
                  <div class="more center">
                    <a href="{{ url('calendar') }}" class="btn-oval-transparent small view-all">Read All</a>
                  </div>
                @else
                  {!! $empty !!}
                @endif
              </div><!--./panel-content -->
            </div><!--./panel -->
          </div><!--./col-sm-4 -->

        </div><!--./row -->
        <div class="dashboard-news">
          <div class="row">
            <!-- Lifestyle News -->
            <div class="col-sm-12 col-md-6">
              <div class="panel panel-{{ $property->slug }}">
                <div class="section-header">
                  <span class="section-icon icon-label_folder_phone_book_contacts_documents_3"></span>
                  <h2>Lifestyle News</h2>
                  @if($lifestyle_news->count())
                    <a href="{{ url('news/lifestyle') }}" class="btn-oval-transparent action">View All</a>
                  @endif
                </div>
                <div class="row">
                  @if($lifestyle_news->count())
                                        @foreach($lifestyle_news as $articleInfo)
                  {{-- {{dd($articleInfo->parent)}} --}}

                      @if($i == 0)
                        <div class="col-sm-8">
                          <div class="news-item">
                            <div class="news-item-image"
                              style="background-image: url({{ $articleInfo->parent->images()->first() ? asset('assets/images/articles/'.$articleInfo->parent->images()->first()->hyperlink) : ''}});
                              background-size: cover;
                              background-repeat: no-repeat">
                            </div>
                            <a href="{{ url('news/lifestyle/'.$articleInfo->parent->slug) }}" class="news-title">{{ $articleInfo->parent->title }}</a>
                            <p>{{ read_more(strip_tags($articleInfo->content), 100) }}</p>
                            <a href="{{ url('news/lifestyle/'.$articleInfo->parent->slug) }}" style="font-size:12px;"><button class="btn-small accent view">Read more</button></a>
                          </div>
                        </div><!--./col-sm-8 -->
                      @else
                        <div class="col-sm-4">
                            <div class="news-item-small">
                              <div class="news-item-image"
                                style="background-image: url({{ $articleInfo->parent->images()->first() ? asset('assets/images/articles/'.$articleInfo->parent->images()->first()->hyperlink) : ''}});
                                background-size: cover;
                                background-repeat: no-repeat">
                              </div>
                              <a href="{{ url('news/lifestyle/'.$articleInfo->parent->slug) }}">{{ $articleInfo->parent->title }}</a>
                              <a href="{{ url('news/lifestyle/'.$articleInfo->parent->slug) }}" style="width: auto; font-size:12px;"><button class="btn-small accent view">Read more</button></a>
                            </div>
                        </div><!--./col-sm-4 -->
                      @endif
                                          @endforeach
                  @else
                    <div class="col-sm-8">
                      {!! $empty !!}
                    </div>
                  @endif
                </div><!--./row -->
              </div><!--./panel -->
            </div><!--./col-sm-6 -->
            <!-- Lifestyle News -->
            <div class="col-sm-12 col-md-6">
              <div class="panel panel-{{ $property->slug }}">
                <div class="section-header">
                  <span class="section-icon icon-label_folder_phone_book_contacts_documents_3"></span>
                  <h2>Directories</h2>
                  @if($directories->count())
                    <a href="{{ url('directories') }}" class="btn-oval-transparent action">View All</a>
                  @endif
                </div>
                <div class="row">
                  @if($directories->count())
                                        @foreach($directories as $directory)
                      @if($i == 0)
                        <div class="col-sm-8">
                          <div class="news-item">
                            <div class="news-item-image"
                              style="background-image: url({{ $directory->images()->first() ? asset('assets/images/directories/'.$directory->images()->first()->hyperlink) : ''}});
                              background-size: cover;
                              background-repeat: no-repeat">
                            </div>
                            <a href="{{ url('directories/'.$directory->slug) }}" class="news-title">{{ $directory->name }}</a>
                            <p>{{ read_more(strip_tags($directory->description), 100) }}</p>
                            <a href="{{ url('directories/'.$directory->slug) }}" style="font-size:12px;"><button class="btn-small accent view">Read more</button></a>
                          </div>
                        </div><!--./col-sm-8 -->
                      @else
                        <div class="col-sm-4">
                            <div class="news-item-small">
                              <div class="news-item-image"
                                style="background-image: url({{ $directory->images()->first() ? asset('assets/images/directories/'.$directory->images()->first()->hyperlink) : ''}});
                                background-size: cover;
                                background-repeat: no-repeat">
                              </div>
                              <a href="{{ url('directories/'.$directory->slug) }}">{{ $directory->name }}</a>
                              <a href="{{ url('directories/'.$directory->slug) }}" style="width: auto; font-size:12px;"><button class="btn-small accent view">Read more</button></a>
                            </div>
                        </div><!--./col-sm-4 -->
                      @endif
                                          @endforeach
                  @else
                    <div class="col-sm-8">
                      {!! $empty !!}
                    </div>
                  @endif
                </div><!--./row -->
              </div><!--./panel -->
            </div><!--./col-sm-6 -->

          </div><!--./row -->
        </div><!--./dashboard-news -->
      </div><!--./desktop-top-content -->
      <div class="row">
        <div class="mobile-content word-wrap">
          <div class="equality">
            <div class="equality-item equality-item-{{ $property->slug }} card shadowed">
              <a href="{{ url('/recommendations') }}">
                <div class="mobile-content-location">
                  <div class="content-icon">
                    <i class="icon-hotel_service_employee_manager_concierge"></i>
                  </div>
                  <h5>Concierge Recommendations</h5>
                </div>
              </a>
            </div>
            <div class="equality-item equality-item-{{ $property->slug }} card shadowed">
              <a href="{{ url('perks') }}">
                <div class="mobile-content-location">
                  <div class="content-icon">
                    <i class="icon-price_tag_finance_product_info_details"></i>
                  </div>
                  <h5>
                    @if($property->slug == 'lcn')
                      {{ 'Concierge Perks' }}
                    @elseif($property->slug == 'loulavie' || $property->slug == 'lifestyle')
                      {{ 'Member Perks' }}
                    @else
                      {{ 'Resident Perks' }}
                    @endif
                  </h5>
                </div>
              </a>
            </div>
            <div class="equality-item equality-item-{{ $property->slug }} card shadowed">
              <a href="{{ url('/directories') }}">
                <div class="mobile-content-location">
                  <div class="content-icon">
                    <i class="icon-label_folder_phone_book_contacts_documents_3"></i>
                  </div>
                  <h5>Directories</h5>
                </div>
              </a>
            </div>
            <div class="equality-item equality-item-{{ $property->slug }} card shadowed">
              <a href="{{ url('/calendar') }}">
                <div class="mobile-content-location">
                  <div class="content-icon">
                    <i class="icon-wineglass_goblet_glass_drink_toast_party_clink"></i>
                  </div>
                  <h5>Events</h5>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div><!--./mobile-content -->
    </div><!--./container-fluid -->
  </div>
  <!-- Modal -->
  @include('client.partials.modal.perk')
@endsection

@section('script')
  <script type="text/javascript" src="/assets/js/match-height.js"></script>
  <script type="text/javascript">
    angular.module('luxury-concierge', [
      'ui.dateTimeInput',
      'ui.bootstrap.datetimepicker',
      'ngFileUpload',
      'modal',
      '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/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/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>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/modal.js') }}"></script>
  <script type="text/javascript">
    $(function() {
       $('.panel').matchHeight();
    });
  </script>
@endsection