@extends('app_client')

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

@section('content')
  <div class="container-fluid" ng-controller="DirectoryCtlr as vm" ng-init="vm.get_items({{ $filter_category }})">
    <!-- Header -->
    <div class="page-header">
      <div class="header left">
        <span class="icon icon-label_folder_phone_book_contacts_documents_3"></span>
        <h1 class="header-title">Directory</h1>
      </div>
      <!-- Controls -->
      @if($directories->count())
        <div class="sort">
          <!-- Map -->
          <a href="{{ url('/directories/map') }}" class="btn-oval viewmap uppercase">View results in map</a>
          <!-- Search -->
          <div class="search-field">
            <input type="search" placeholder="Search here ..." ng-model="vm.search_filter"/>
            <div class="search-result" ng-if="vm.search_filter">@{{ filtered.length }} results found</div>
          </div>
        </div>
      @endif
      <div class="clear"></div>
    </div>
    <!-- Content -->
    <div class="row">
      @if($directories->count())
        <div class="mobile-filter">
          <div class="{{ $filter_category ? 'col-xs-6' : 'col-xs-12' }}">
            <div class="form-group select">
              <!-- Categories -->
              <label>Category</label>
              <select class="form-control" onchange="location = this.value;">
                <option value="{{ url('directories') }}">All</option>
                @foreach($directory_categories as $category)
                  @if($main_category)
                    @if($main_category->parent_id == 0)
                      <option value="{{ url('directories?category='.$category->id) }}" {{ $category->id == $main_category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                    @else
                      <option value="{{ url('directories?category='.$category->id) }}" {{ $category->id == $filter_category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                    @endif
                  @else
                    <option value="{{ url('directories?category='.$category->id) }}">{{ $category->name }}</option>
                  @endif
                @endforeach
              </select>
            </div>
          </div>
          <!-- Subcategories -->
          @if($main_category)
            <div class="col-xs-6" ng-show="{{ $filter_category }}">
              <div class="form-group select">
                <label>Sub-category</label>
                <select class="form-control" onchange ="location=this.value;">
                  <option value="{{ url('directories?category='.$main_category->id) }}">All</option>
                  @foreach($main_category->subcategories->filter(function($item) use ($property) {
                    return $item->directory_category_is_in_property($property); }) as $subcategory)
                    <option value="{{ url('directories?category='.$subcategory->id) }}"
                      {{ $subcategory->id == $filter_category ? 'selected' : '' }}>{{ $subcategory->name }}
                    </option>
                  @endforeach
                </select>
              </div>
            </div>
          @endif
          <div class="clear"></div>
        </div>
        <div class="desktop-filter">
          <div class="col-sm-3 col-md-3 dirnavigation">
            <div class="filters">
              @if($directory_categories->count())
                <div class="media category">
                  <div class="media-left media-middle">
                    <span class="otmicon icon-layout_menu_list"></span>
                  </div>
                  <div class="media-body">
                    <a href="{{ url('directories') }}" class="{{ !$filter_category ? 'bold' : '' }}"><span class="uppercase category-title">All listings</span></a>
                  </div>
                </div>
                <!-- Categories -->
                @foreach($directory_categories as $category)
                  <div class="media category" class="{{ $directory_categories->last()->id == $category->id ? 'last' : '' }}">
                    <div class="media-left media-middle">
                      <span class="otmicon icon-{{ $category->icon_slug }}"></span>
                    </div>
                    <div class="media-body">
                      <a href="{{ url('directories?category='.$category->id) }}" class="{{ ($filter_category == $category->id || $category->is_subcategory($filter_category)) ? 'bold' : '' }}"><span class="uppercase category-title">{{ $category->name }}</span></a>
                    </div>
                  </div>
                  <!-- Subcategories -->
                  <ul class="subcategory {{ ($filter_category == $category->id || $category->is_subcategory($filter_category)) ? 'show' : '' }}">
                    @foreach($category->subcategories->filter(function($item) use ($property) { return $item->directory_category_is_in_property($property); }) as $subcategory)
                      <li><a href="{{ url('directories?category='.$subcategory->id) }}" class="{{ $filter_category == $subcategory->id ? 'underline' : '' }}"><span>{{ $subcategory->name }}</span></a></li>
                    @endforeach
                  </ul>
                @endforeach
              @endif
            </div><!-- filters -->
          </div><!--./col-sm-2-->
        </div>
        <div class="col-sm-9 col-md-9">
          <!-- Loader -->
          <div class="loading-directories text-center" ng-show="!vm.directories_loaded">
            <img src="{{ asset('assets/images/loading-primary.svg') }}" alt="" width="62px">
            <em>Loading directories....</em>
          </div>
          <!-- Directories -->
          <div class="panel directories clearfix" ng-show="vm.directories_loaded">
            <div class="masonry directories featured-directories-list">
              <div dir-paginate="directory in vm.filter_directories | filter:vm.search_filter | orderBy:['-parent.featured', 'parent.name'] | itemsPerPage: 48 as filtered"
                ng-class="{'masonry-item-big': directory.parent.featured, 'masonry-item': !directory.parent.featured, 'bordered': !directory.parent.featured }"
                ng-switch="directory.parent.featured">
                <!-- If featured -->
                <div class="featured-directories-item clearfix" ng-switch-when="1">
                  <div class="panel-content">
                    <div class="col-sm-8">
                      <div class="panel-heading">
                        <!-- Name -->
                        <h2 class="title">@{{ directory.parent.name }}</h2>
                        <!-- Category -->
                        <h5 class="col-primary subtitle">@{{ directory.parent.category }}</h5>
                      </div>
                      <!-- Description -->
                      <p class="description" ng-bind-html="directory.description | limitHtml:400">@{{ directory.description.length > 400 ? '...' : '' }}</p>
                      <div class="directory-info">
                        <ul class="directory-info-list inline list-unstyled">
                          <!-- Website -->
                          <li ng-show="directory.website">
                            <span class="icon icon-planet_earth_globe_world_worldwide_space_cosmos_science_solar_system"></span>
                            <a href="@{{ directory.parent.hyperlink }}" target="_blank">
                              @{{ directory.website.length > 25 ? (directory.parent.website | limitTo:25 + '...') : directory.parent.website }}
                            </a>
                          </li>
                          <!-- Address -->
                          <li ng-show="directory.address">
                            <span class="icon icon-map_pin_locate_location_marker_gps"></span>
                            @{{ directory.parent.address }}
                          </li>
                        </ul>
                      </div>
                      <!-- Controls -->
                      <div class="btn-group">
                        <!-- View Button -->
                        <a href="directories/@{{ directory.parent.slug }}" class="btn btn-sm accent half-width">View</a>
                        <!-- Request Button -->
                        <button class="btn btn-sm green half-width no-open request"
                          ng-click="vm.request_directory_modal(directory.parent)">{{ $property->id == 6 ? 'Service Request' : 'Request​' }}
                        </button>
                      </div>
                    </div>
                    <!-- Images -->
                    <div class="col-sm-4 center" ng-show="directory.parent.directory_images.length !== 0">
                      <div class="featured-images clearfix">
                        <ul class="list-unstyled">
                          <li ng-repeat="image in directory.parent.directory_images">
                            @if(strpos(strtolower($_SERVER['HTTP_USER_AGENT']),"iphone"))
                              @if(strpos(strtolower($_SERVER['HTTP_USER_AGENT']),"safari"))
                                <!-- Safari Browser on mobile -->
                                <a class="fancybox-thumb no-open" rel="group-@{{ image.directory_id }}" href="/assets/images/directories/@{{ image.hyperlink }}">
                                  <img ng-src="/assets/images/directories/@{{ image.hyperlink }}" width="210"/>
                                </a>
                              @else
                                <!-- Running as stand alone WebApp on iPhone -->
                                <a class="fancybox-thumb no-open" rel="group-@{{ image.directory_id }}" data-action="zoom">
                                  <img ng-src="/assets/images/directories/@{{ image.hyperlink }}" width="210"/>
                                </a>
                              @endif
                            @else
                              <a class="fancybox-thumb no-open" rel="group-@{{ image.directory_id }}" href="/assets/images/directories/@{{ image.hyperlink }}">
                                <img ng-src="/assets/images/directories/@{{ image.hyperlink }}" width="210"/>
                              </a>
                            @endif
                          </li>
                        </ul>
                      </div>
                    </div><!--./col-sm-5-->
                  </div><!-- ./panel-content -->
                </div><!--./featured-directories-item -->

                <div class="card card-news" ng-switch-when="0">
                  <div class="directories-grid">
                    <div class="panel-heading">
                      <!-- Name -->
                      <h4 class="title">@{{ directory.parent.name }}</h4>
                      <!-- Category -->
                      <h5 class="subtitle">@{{ directory.parent.category }}</h5>
                    </div><!--./panel-heading -->
                    <div class="panel-content">
                      <!-- Description -->
                      <p ng-bind-html="directory.description | limitHtml:100"></p>
                    </div><!--./panel-content -->
                    <!-- Controls -->
                    <div class="btn-group">
                      <!-- View Button -->
                      <a href="directories/@{{ directory.parent.slug }}" class="btn btn-xs accent half-width">View</a>
                      <!-- Request Button -->
                      <a class="btn btn-xs green half-width request no-open" ng-click="vm.request_directory_modal(directory.parent)">{{ $property->id == 6 ? 'Service Request' : 'Request​' }}</a>
                    </div>
                  </div>
                </div><!--./masonry-item -->

              </div><!-- ./ng-repeat [directory]-->
            </div>
            <!-- Pagiantion -->
            <dir-pagination-controls></dir-pagination-controls>
            <!-- No Filtered Directories -->
            <div class="col-sm-10"><h5 ng-if="filtered.length == 0">There are no directories.</h5></div>
          </div><!--./panel directories-->
        </div><!--./col-sm-10-->
      @else
        <!-- No Directories -->
        <div class="col-sm-12"><h5>{!! $empty !!}</h5></div>
      @endif
    </div><!--./row-->
  </div><!--./container-fluid-->
  <!-- Modals -->
  @include('client.partials.modal.directory')
@endsection

@section('script')
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></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/mobileImageZoom.js"></script>
  <script type="text/javascript">
    angular.module('luxury-concierge', [
      'angularUtils.directives.dirPagination',
      'ui.dateTimeInput',
      'ui.bootstrap.datetimepicker',
      'ngFileUpload',
      'directories',
      'user',
      'socket',
      'liveChat',
      'modal'
    ]);
  </script>
  <script type="text/javascript" src="/assets/js/ngSticky.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/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="{{ 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() {
      $('.filters').affix({
        offset: {
          top: 100
        }
      })
      setTimeout(function() {
        $('.directory-column').matchHeight();
      }, 1000);
    });

    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