@extends('app_client')

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

@section('content')
  <div class="container-fluid" ng-controller="ArticleCtlr as vm" ng-init="vm.get_article({{ $category->id }}, {{ $article->parent->id }})">
    <div class="row">
      <!-- Header -->
      <div class="col-md-8 col-sm-12 col-md-offset-2 col-sm-offset-0">
        <div class="page-header clearfix">
          <div class="back-navigation no-mg">
            <a href="javascript:history.go(-1)" class="btn-back">Back</a>
          </div>
        </div>
        <!-- Article -->
        <div class="panel news-inside-layout">
          <!-- Title -->
          <div class="panel-heading text-center">
            @if($property->id != 7)
              <span class="article-date">{{ date('M d', strtotime($article->parent->created_at)) }}</span>
            @endif
            <h1 class="title">{{ $article->parent->title }}</h1>
          </div>
          <!-- Title Image -->
          <div class="text-center header-image">
            <img src="{{ $article->parent->get_title_image() }}" alt="">
          </div>
          <!-- Content -->
          <div class="panel-content">
            <!-- Description -->
            {!! $article->content !!}
            <!-- Video -->
            @if($article->video)
              <div class="embed-responsive embed-responsive-16by9">
                <iframe width="100%"
                  height="360"
                  class="embed-responsive-item"
                  src="https://www.youtube.com/embed/{{ youtube($article->info->video) }}"
                  frameborder="0"
                  allowfullscreen>
                </iframe>
              </div>
            @endif
            <!-- Images -->
            @if($article->parent->images->count() > 1)
              <div class="article-images">
                <div class="row">
                  @foreach($article->parent->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->parent->images->count() >= 3)
                            <div class="fancybox-extra-overlay"></div>
                            <div class="fancybox-extra-counter"><span>{{ '+ '.($article->parent->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
            <!-- Request -->
            @if($article->request)
              <hr>
              <div class="controls text-center">
                <button class="btn btn-request btn-sm-block"
                  ng-click="vm.request_article_modal(vm.article)">{{ $property->id == 6 ? 'Service Request' : 'Request​' }}
                </button>
              </div>
            @endif

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

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

      </div>
    </div>
  </div>
  <!-- Request Modal -->
  @include('client.partials.modal.article')
@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/articles.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">
    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>
@endsection