@extends('app_admin')

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

@section('content')
  <div class="container-fluid">
    <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="articleFilter">
                @foreach($properties as $property)
                  <option value="{{ $property->id }}">{{ $property->name }}</option>
                @endforeach
              </select>
            </div>
          </div>
        @endif
        <div class="clearfix"></div>
        <!-- Article -->
        <div class="panel news-inside-layout">
          <!-- Title -->
          <div class="panel-heading text-center">
            <span class="article-date">{{ date('M d', strtotime($article->created_at)) }}</span>
            <h1 class="title">{{ $article->title }}</h1>
          </div><!--./panel-heading -->
          <!-- Title Image -->
          <div class="text-center header-image">
            <img src="{{ $article->get_title_image() }}" alt="">
          </div>
          <!-- Content -->
          <div class="panel-content">
            <!-- Description -->
            <div id="article">
              @foreach($article->admin_info as $article_info)
                <div class="{{ (count($properties) >= 2 ? 'hidden': '').' '.$article_info->property_id }}">
                  {!! $article_info->content.'<br/>'.$article_info->concierge_info !!}
                  <!-- Video -->
                  @if($article_info->video)
                    <div class="embed-responsive embed-responsive-16by9">
                      <iframe class="embed-responsive-item"
                        src="https://www.youtube.com/embed/{{ youtube($article_info->video) }}"
                        frameborder="0"
                        allowfullscreen>
                      </iframe>
                    </div>
                  @endif
                </div>
              @endforeach
            </div>
            <!-- Images -->
            @if($article->images->count() >= 2)
              <div class="article-images">
                <div class="row">
                  @foreach($article->images as $key => $image)
                    @if($key == 0)
                      <div class="col-sm-6">
                        <a class="fancybox-thumb" rel="group" href="{{ asset('assets/images/articles/'.$image->hyperlink) }}">
                          <img src="{{ asset('assets/images/articles/'.$image->hyperlink) }}" alt=""/>
                        </a>
                      </div>
                    @elseif($key == 1)
                      <div class="col-sm-6 fancybox-extra">
                        <a class="fancybox-thumb" rel="group" href="{{ asset('assets/images/articles/'.$image->hyperlink) }}">
                          <img src="{{ asset('assets/images/articles/'.$image->hyperlink) }}" alt=""/>
                          @if($article->images->count() > 2)
                            <div class="fancybox-extra-overlay"></div>
                            <div class="fancybox-extra-counter"><span>{{ '+ '.($article->images->count() - 2) }}</span></div>
                          @endif
                        </a>
                      </div>
                    @else
                      <div class="hidden">
                        <a class="fancybox-thumb" rel="group" href="{{ asset('assets/images/articles/'.$image->hyperlink) }}">
                          <img src="{{ asset('assets/images/articles/'.$image->hyperlink) }}" alt=""/>
                        </a>
                      </div>
                    @endif
                  @endforeach
                </div> <!--.row -->
              </div><!--.article-images -->
            @endif

          </div><!--.panel-content -->

        </div><!--.panel -->

      </div>
    </div>
  </div>
@endsection

@section('script')
  <script type="text/javascript" src='/assets/js/jquery.fancybox.pack.js'></script>
  <script type="text/javascript" src='/assets/js/jquery.fancybox-thumbs.js'></script>
  <script type="text/javascript" src='/assets/js/masonry.js'></script>
  <script type="text/javascript" src='/assets/js/app.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='/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='/assets/js/angular-ui-switch.min.js'></script>
  <script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/textAngular/1.5.0/textAngular-rangy.min.js'></script>
  <script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/textAngular/1.5.0/textAngular-sanitize.min.js'></script>
  <script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/textAngular/1.5.0/textAngular.min.js'></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/modal.js') }}"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/articles.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/user.js') }}"></script>
  <script type="text/javascript">
    var fancyOptions = {
      prevEffect: 'none',
      nextEffect: 'none',
      helpers: {
        title: {
          type: 'inside'
        },
        buttons: {},
        overlay: {
          css: {
            'background' : 'rgba(28, 27, 35, 0.95)'
          }
        },
        thumbs	: {
          width	: 50,
          height	: 50
        }
      }
    };

    $(document).ready(function() {
      $('.panel a').each(function(key, anchor) {
        $(this).attr('target', '_blank');
      });
      @if(!strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'iphone') && strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'safari'))
        $('.fancybox-thumb').fancybox(fancyOptions);
      @endif
    });
  </script>
  @if(count($properties) >= 2)
    <script type="text/javascript">
      function loadInfo() {
        var articleFilter = $('#articleFilter').val();
        $('#article > div').each(function() {
          if($(this).hasClass(articleFilter)) {
            $(this).removeClass('hidden');
          } else {
            $(this).addClass('hidden');
          }
        });
      }
      loadInfo();
      $('#articleFilter').change(function() {
        loadInfo();
      });
    </script>
  @endif
@endsection