@extends('app_admin')

@section('title', 'News | Luxury Concierge')

@section('content')
  <div class="container-fluid" ng-controller="ArticleCtlr as vm">
    <!-- Header -->
    <div class="page-header">
      <!-- Title -->
      <div class="header left mr-s--s mr-f--m">
        <span class="icon icon-newspaper_news_morning_events_journal"></span>
        <h1 class="header-title">News</h1>
      </div>
      <!-- Controls -->
      @if(!Auth::user()->hasRole('onsite_concierge'))
        <div class="sort"
          ng-show="vm.articles_loaded">
          <div class="filter-group">
            <div class="form-group">
              <button class="btn-oval-transparent btn-sm-block"
                ng-click="vm.create_article_modal()">Create
              </button>
            </div>
          </div>
        </div>
      @endif
      <!-- Filter -->
      <div class="sort" ng-show="vm.articles_loaded && vm.articles.length">
        <!-- Properties -->
        @if($properties->count() >= 2)
          <div class="sort">
            <div class="filter-group">
              <div class="form-group select">
                <select ng-model="vm.filter_property"
                  ng-init="vm.filter_property = ''">
                  <option value="">Property</option>
                  @foreach($properties as $property)
                    <option value="{{ $property->id }}">{{ $property->name }}</option>
                  @endforeach
                </select>
              </div>
            </div>
          </div>
        @else
          <div class="sort" ng-init="vm.filter_property = '{{ $properties->first()->id }}'"></div>
        @endif
        <!-- Category -->
        <div class="sort">
          <div class="filter-group">
            <div class="form-group select">
              <select ng-model="vm.sort_category"
                ng-options="category.value as category.name for category in vm.article_categories"
                ng-init="vm.sort_category = ''">
              </select>
            </div>
          </div>
        </div>
        <!-- Order -->
        <div class="sort">
          <div class="filter-group">
            <div class="form-group select">
              <select ng-model="vm.sort_by"
                ng-options="sort.value as sort.name for sort in vm.alpha_sort"
                ng-init="vm.sort_by = '-created_at'">
              </select>
            </div>
          </div>
        </div><!-- .sort -->
      </div><!-- .sort -->

    </div><!-- .page-header -->
    <!-- Loader -->
    <div class="loading-directories text-center" ng-show="!vm.articles_loaded">
      <img src="{{ asset('assets/images/loading-primary.svg') }}" alt="" width="62px">
      <em>Loading articles ...</em>
    </div>
    <!-- Content -->
    <div class="row">
      <!-- Articles -->
      <div ng-init="vm.get_items()"
        ng-show="vm.articles_loaded && vm.articles.length">
        <div class="col-sm-12 masonry">
          <div dir-paginate="article in vm.articles |
            filter: vm.property_filter | orderBy: vm.sort_by |
            filter: { article_category_id: vm.sort_category } |
            itemsPerPage: 12 as filtered_articles track by $index"
            class="masonry-item news-list-item card card-news shadowed"
            ng-class="animation"
            ng-cloak>
            <!-- Image -->
            <div ng-class="animation">
              <div class="news-item-image lazy"
                style="background-image:url(@{{ article.image }});
                background-size: @{{ vm.get_title_image(article) ? 'cover' : 'contain' }};
                background-repeat: no-repeat">
              </div>
            </div>
            <!-- Content -->
            <div class="news-list-item-content">
              <div class="place">
                <span class="time">@{{ article.created_at | newsDate }}</span>
                <a class="title" href="{{ url('news') }}/@{{ article.id }}">@{{ article.title }}</a>
                <p ng-bind-html="article.admin_info[0].content | limitHtml: 200"></p>
              </div>
              <!-- Controls -->
              <div class="controls">
                @if(!Auth::user()->hasRole('onsite_concierge'))
                  <button class="btn-small accent view half-width center"
                    ng-click="vm.edit_article_modal(article, $index)">Edit
                  </button>
                  <button class="btn-small accent view half-width center"
                    style="margin-left: 5px"
                    ng-click="vm.delete_article_modal(article, $index)"
                    ng-show="!loading">Delete
                  </button>
                @endif
              </div>
            </div>
          </div>
          <!-- No Filtered Articles -->
          <h5 ng-show="filtered_articles.length == 0 && vm.articles.length">There are no articles.</h5>
        </div><!-- .col-sm-12 -->
        <div class="clearfix"></div>
        <!-- Pagination -->
        <dir-pagination-controls></dir-pagination-controls>
      </div>
      <!-- No Articles -->
      <div class="col-sm-12 masonry"
        ng-show="vm.articles_loaded && vm.articles.length == 0"><h5>{!! $empty !!}</h5>
      </div>

    </div><!-- .row -->

  </div><!-- .container-fluid -->
  <!-- Modals -->
  @include('admin.partials.article.create_modal')
  @include('admin.partials.article.edit_modal')
  @include('admin.partials.article.delete_modal')
  @include('admin.partials.import_modal')
@endsection

@section('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/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>
@endsection