@extends('app_admin')

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

@section('content')
  <div class="container-fluid" ng-controller="DirectoryCtlr as vm">
    <!-- Header -->
    <div class="page-header">
      <!-- Title -->
      <div class="header left">
        <span class="icon icon-label_folder_phone_book_contacts_documents_3"></span>
        <h1 class="header-title">Directories</h1>
      </div>
      <!-- Search -->
      <div class="row desktop-filter">
        <div class="col-sm-4" ng-show="vm.directories.length">
          <div class="sort">
            <div class="search-field">
              <input type="search"
                placeholder="Search here ..."
                ng-model="filterDirectories"/>
              <div class="search-result"
                ng-show="filterDirectories">@{{ filtered_directories.length }} results found
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="row mg-top-30">
        <div class="col-sm-12">
          <!-- Controls -->
          @if(!Auth::user()->hasRole('onsite_concierge'))
            <div class="sort"
              ng-show="vm.directories_loaded">
              <div class="filter-group">
                <div class="form-group">
                  <button class="btn-oval-transparent btn-sm-block"
                    ng-click="vm.create_directory_modal()">Create
                  </button>
                </div>
              </div>
            </div>
            <div class="sort"
              ng-show="vm.directories_loaded">
              <div class="filter-group">
                <div class="form-group">
                  <button class="btn-oval-transparent btn-sm-block"
                    ng-click="vm.import_directory_modal()">Import
                  </button>
                </div>
              </div>
            </div>
          @endif
          <!-- Properties -->
          @if($properties->count() >= 2)
            <div class="sort desktop-filter" ng-show="vm.directories.length">
              <div class="filter-group">
                <div class="form-group select">
                  <select class="form-control"
                    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 desktop-filter"
              ng-init="vm.filter_property = '{{ $properties->first()->id }}'"></div>
          @endif
          <!-- Type -->
          <div class="sort desktop-filter"
            ng-show="vm.directories.length">
            <div class="filter-group">
              <div class="form-group select">
                <select ng-model="featured"
                  ng-options="type.value as type.name for type in vm.types"
                  ng-init="featured = ''">
                </select>
              </div>
            </div>
          </div>
          @if($properties->count() >= 2)
            <!-- Select All -->
            <div class="sort"
              ng-show="vm.directories.length">
              <div class="filter-group">
                <div class="form-group">
                  <button class="btn-oval-transparent btn-sm-block"
                    ng-click="vm.select_all_directories()">@{{ vm.selected_directories.length == 0 ? 'Select All' : 'Unselect All' }}
                  </button>
                </div>
              </div>
            </div>
            <!-- Action -->
            <div class="sort"
              ng-if="vm.directories.length && vm.selected_directories.length">
              <div class="filter-group">
                <div class="form-group select">
                  <select ng-model="vm.action"
                    ng-options="action.value as action.name for action in vm.actions"
                    ng-init="vm.action = ''">
                  </select>
                </div>
              </div>
            </div>
            <!-- Action Button -->
            <div class="sort"
              ng-if="vm.directories.length && vm.selected_directories.length && vm.action">
              <div class="filter-group">
                <div class="form-group">
                  <button class="btn-oval-transparent btn-sm-block"
                    ng-click="vm.action == 'property' ?
                    vm.property_directory_modal(vm.selected_directories | filter: vm.property_filter | filter: { featured: featured } | filter: { name: filterDirectories }) :
                    vm.submit_action(vm.action, vm.selected_directories | filter: vm.property_filter | filter: { featured: featured } | filter: { name: filterDirectories })">Submit
                  </button>
                </div>
              </div>
            </div>
            @endif

        </div><!-- .col-sm-12 -->
      </div><!-- .row -->

    </div><!-- .page-header -->

    <!-- 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>
    <!-- Content -->
    <div class="row"
      ng-init="vm.get_items({{ $filter_category }})"
      ng-show="vm.directories_loaded">
      <!-- Mobile -->
      <div class="mobile-filter clearfix">
        <!-- Search -->
        <div class="col-xs-12">
          <div class="form-group" ng-show="vm.directories.length">
            <div class="search-field" style="width:100%; margin: 0">
              <input type="search"
                placeholder="Search directories ..."
                ng-model="filterDirectories"/>
              <div class="search-result"
                ng-show="filterDirectories">@{{ filtered_directories.length }} results found
              </div>
            </div>
          </div>
        </div>
        <!-- Properties -->
        @if($properties->count() >= 2)
          <div class="col-xs-6">
            <div class="form-group select">
              <label>Property</label>
              <select class="form-control"
                ng-model="vm.filter_property"
                ng-init="vm.filter_property = ''">
                <option value="">Property</option>
                @foreach($properties as $property)
                  <option value="{{ $property->name }}">{{ $property->name }}</option>
                @endforeach
              </select>
            </div>
          </div>
        @else
          <div ng-init="vm.filter_property = '{{ $properties->first()->id }}'"></div>
        @endif
        <!-- Type -->
        <div class="{{ $properties->count() >= 2 ? 'col-xs-6' : 'col-xs-12' }}">
          <div class="form-group select">
            <label>Filter</label>
            <select class="form-control"
              ng-model="featured">
              <option ng-value="''" ng-selected="true">All</option>
              <option ng-value="0">Regular</option>
              <option ng-value="1">Featured</option>
            </select>
          </div>
        </div>
        <!-- Category -->
        <div class="{{ $filter_category ? 'col-xs-6' : 'col-xs-12' }}">
          <div class="form-group select">
            <label for="gender">Category</label>
            <select class="form-control" onchange="location = '/directories/' + this.value">
              <option ng-value="''" {{ !$filter_category ? 'selected' : '' }}>All</option>
              @foreach($directory_categories as $category)
                <option value="'?category={{ $category->id }}'">{{ $category->name }}</option>
              @endforeach
            </select>
          </div>
        </div>
        <!-- Subcategory -->
        @if($main_category)
          <div class="col-xs-6">
            <div class="form-group select">
              <label for="gender">Sub-category</label>
              <select class="form-control" onchange="location = '/directories/' + this.value">
                <option ng-value="'?category={{ $main_category->id }}'"
                  {{ $main_category->parent_id == 0 ? 'selected' : '' }}>All</option>
                @foreach($main_category->subcategories as $subcategory)
                  <option ng-value="'?category={{ $subcategory->id }}'"
                    {{ $filter_category == $subcategory->id ? 'selected' : '' }}>{{ $subcategory->name }}</option>
                @endforeach
              </select>
            </div>
          </div>
        @endif

      </div><!-- .mobile-filter -->
      <!-- Desktop -->
      <div class="desktop-filter">

        <div class="col-sm-3 col-md-3 dirnavigation">
          <div class="filters">
            <!-- Category -->
            @if($directory_categories->count())
              <div class="media category">
                <div class="media-left media-middle">
                  <span class="otmicon otmicon-list"></span>
                </div>
                <div class="media-body">
                  <a class="{{ !$filter_category ? 'bold' : '' }}" href="{{ url('directories') }}">
                    <span class="uppercase category-title">All listings</span>
                  </a>
                </div>
              </div>
              <!-- Subcategory -->
              @foreach($directory_categories as $category)
                <div class="media category {{ $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 class="{{ ($filter_category == $category->id || $category->is_subcategory($filter_category)) ? 'bold' : '' }}"
                      href="{{ 'directories?category='.$category->id }}">
                      <span class="uppercase category-title">{{ $category->name }}</span>
                    </a>
                  </div>
                </div>
                <ul class="subcategory {{ ($filter_category == $category->id || $category->is_subcategory($filter_category)) ? 'show' : '' }}">
                  @foreach($category->subcategories as $subcategory)
                    <li>
                      <a class="{{ $filter_category == $subcategory->id ? 'underline' : '' }}"
                        href="{{ 'directories?category='.$subcategory->id }}">
                        <span>{{ $subcategory->name }}</span>
                      </a>
                    </li>
                  @endforeach
                </ul>
              @endforeach

            @endif
          </div><!--./filters-->
        </div><!--./col-sm-2-->

      </div><!-- .desktop-filter -->

      <!-- Content -->
      <div class="col-sm-9 col-md-9 full-table"
        ng-class="!vm.directories_loaded || !filtered_directories.length ? 'hidden' : ''">
        <!-- Table -->
        <table class="category-table grid-list">
          <!-- Header -->
          <tr>
            <!-- Checkbox -->
            <th></th>
            <!-- Name -->
            <th>
              <div ng-click="vm.sort_by = 'name'; vm.reverse_sort = !vm.reverse_sort"
                ng-switch="vm.reverse_sort">Name
                <span class="filter--icon"
                  ng-show="vm.sort_by == 'name'">
                  <span class="icon-up_arrow_prev_previous_top_home"
                    ng-switch-when="false"></span>
                  <span class="icon-down_arrow_next_bottom_end"
                    ng-switch-when="true"></span>
                </span>
              </div>
            </th>
            <!-- Category -->
            <th>
              <div ng-click="vm.sort_by = 'category'; vm.reverse_sort = !vm.reverse_sort"
                ng-switch="vm.reverse_sort">Category
                <span class="filter--icon"
                  ng-show="vm.sort_by == 'category'">
                  <span class="icon-up_arrow_prev_previous_top_home"
                    ng-switch-when="false"></span>
                  <span class="icon-down_arrow_next_bottom_end"
                    ng-switch-when="true"></span>
                </span>
              </div>
            </th>
            <!-- Address -->
            <th>
              <div ng-click="vm.sort_by = 'address'; vm.reverse_sort = !vm.reverse_sort"
                ng-switch="vm.reverse_sort">Address
                <span class="filter--icon"
                  ng-show="vm.sort_by == 'address'">
                  <span class="icon-up_arrow_prev_previous_top_home"
                    ng-switch-when="false"></span>
                  <span class="icon-down_arrow_next_bottom_end"
                    ng-switch-when="true"></span>
                </span>
              </div>
            </th>
            <!-- Controls -->
            @if($properties->count() >= 2)
              <th>Controls</th>
            @endif

          </tr>
          <!-- Directories -->
          <tr class="toggle animate-repeat"
            dir-paginate="directory in filtered_directories = (vm.directories |
            filter: vm.property_filter |
            filter: { featured: featured } |
            filter: { name: filterDirectories } |
            orderBy: vm.sort_by:vm.reverse_sort) |
            itemsPerPage: 25">
            <!-- Checkbox -->
            @if($properties->count() >= 2)
              <td>
                <div class="check-box">
                  <input id="directory-@{{ directory.id }}"
                    type="checkbox"
                    ng-model="select"
                    ng-click="vm.select_directory(select, directory)"
                    ng-checked="vm.check_directory(directory.id)">
                  <label for="directory-@{{ directory.id }}"></label>
                </div>
              </td>
            @endif
            <!-- Name -->
            <td data-th="Name">
               <span class="icon icon-star-icon col-primary pad-sides-5"
                ng-show="directory.featured"></span>
               <a class="accent" href="/directories/@{{ directory.slug }}">
                 <span>@{{ directory.duplicate ? directory.name + ' (Duplicate)' : directory.name }}</span>
               </a>
            </td>
            <!-- Category -->
            <td data-th="Category">@{{ directory.category }}</td>
            <!-- Address -->
            <td data-th="Address">@{{ directory.address.length > 25 ? (directory.address | limitTo: 25) + ' ...' : directory.address }}</td>
            <!-- Controls -->
            <td>
              <div class="controls col-xs-12">
                @if(!Auth::user()->hasRole('onsite_concierge'))
                  <button class="btn-small accent view center"
                    ng-click="vm.edit_directory_modal(directory)"
                    ng-if="directory.permission">Edit
                  </button>
                  <button class="btn-small accent view center"
                    ng-click="vm.duplicate_directory_modal(directory)">Copy
                  </button>
                  <button class="btn-small accent view center"
                    ng-click="vm.delete_directory_modal(directory)">Delete
                  </button>
                @endif
              </div>
            </td>
          </tr>

        </table>
        <!-- Pagination -->
        <dir-pagination-controls></dir-pagination-controls>
      </div><!--./col-sm-10-->
      <!-- No Filtered Directories -->
      <div class="col-sm-9 col-md-9 full-table"><h5 ng-show="vm.directories.length && !filtered_directories.length">There are no directories.</h5></div>
      <!-- No Directories -->
      <div class="col-sm-12"><h5 ng-show="vm.directories_loaded && vm.directories.length == 0">{!! $empty !!}</h5></div>

    </div><!--./row-->
    <!-- Modals -->
    @include('admin.partials.directory.create_modal')
    @include('admin.partials.directory.import_modal')
    @include('admin.partials.directory.edit_modal')
    @include('admin.partials.directory.duplicate_modal')
    @include('admin.partials.directory.delete_modal')
    @include('admin.partials.directory.property_modal')
    @include('admin.partials.upload_modal')
    @include('admin.partials.import_modal')
  </div>
@endsection

@section('script')
  <script type="text/javascript">
    angular.module('luxury-concierge', [
      'angularUtils.directives.dirPagination',
      'uiSwitch',
      'ngFileUpload',
      'modal',
      'directories',
      'user',
      'socket',
      'liveChat'
    ]);
  </script>
  <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyDYRfHyCyq5g1fTsZYMKrpbNG2sbVCpi9s"></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/ngSticky.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/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/directories.js') }}"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/modal.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">
    $(function() {
      $('.filters').affix({
        offset: {
          top: 100
        }
      })
      setTimeout(function() {
        $('.directory-column').matchHeight();
      }, 1000);
    });
  </script>
@endsection