@extends('app_client')

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

@section('content')
  <div class="container-fluid"
    ng-controller="mapCtlr as vm"
    ng-init="vm.get_map()"
    ng-switch="vm.map_loaded">
    <!-- 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>
      <div class="sort">
        <a href="{{ url('directories') }}" class="btn-oval viewmap uppercase">View results in grid</a>
        <div class="search-field">
          <input type="search"
            placeholder="Search here ..."
            ng-model="vm.filterParams.nameSearch"
            ng-change="vm.search()"/>
          <div class="search-result"
            ng-show="vm.filterParams.nameSearch">@{{ vm.filtered_markers.length }} results found
          </div>
        </div>
      </div>
    </div>
    <div class="clear"></div>
    <!-- Loader -->
    <div class="loading-directories text-center" ng-switch-when="false">
      <img src="{{ asset('assets/images/loading-primary.svg') }}" alt="" width="62px">
      <em>Loading map ...</em>
    </div>
    <!-- Content -->
    <div class="row" ng-switch-when="true">
      <!-- Category Filter -->
      <div class="desktop-filter">
        <div class="col-sm-2 dirnavigation">
          <div class="filters"
            ng-show="vm.categories_loaded">
            <!-- Categories -->
            <div class="media category">
              <div class="media-left media-middle">
                <span class="otmicon icon-layout_menu_list"></span>
              </div>
              <a class="media-body bold"
                ng-click="vm.filter_map(null, $event, null)">
                <span id="all-listings"
                  class="uppercase category-title">All listings
                </span>
              </a>
            </div>
            <div class="media category" ng-repeat="category in vm.directory_categories track by $index">
              <div class="media-left media-middle">
                <span class="otmicon icon-@{{ category.icon_slug }}"></span>
              </div>
              <a class="media-body"
                ng-click="vm.filter_map(category.id, $event, null)">
                <span class="uppercase category-title">@{{ category.name }}</span>
              </a>
              <!-- Subcategories -->
              <ul class="subcategory">
                <li class="subcategory-item"
                  ng-class="{ 'last': $index == category.subcategories.length - 1 }"
                  ng-repeat="subcategory in category.subcategories track by $index">
                  <span ng-click="vm.filter_map(subcategory.id, null, $event)">@{{ subcategory.name }}</span>
                </li>
              </ul>
            </div>
          </div>
        </div><!--./col-sm-2-->
      </div><!--./desktop-filter-->
      <!-- Map -->
      <div class="col-sm-10">
        <div class="panel">
          <div class="content">
            <ui-gmap-google-map center="vm.map.center"
              zoom="vm.map.zoom"
              options="vm.map.options">
              <ui-gmap-window
                show="vm.map.window.show"
                coords="vm.map.window.model"
                doCluster="vm.map.doCluster"
                options="vm.map.window.options"
                closeClick="vm.map.window.closeClick()"
                templateUrl="'/directories/google-window'"
                templateParameter="vm.map.window">
              </ui-gmap-window>
              <ui-gmap-markers
                models="vm.filtered_markers"
                coords="'self'"
                icon="'icon'"
                type="'cluster'"
                events="vm.map.markersEvents"
                options="'options'">
              </ui-gmap-markers>
            </ui-gmap-google-map>
          </div>
        </div>
      </div><!--./col-sm-10-->
    </div><!--./row-->

  </div>
@endsection

@section('script')
  <script type="text/javascript">
    angular.module('luxury-concierge', [
      'ui.dateTimeInput',
      'ui.bootstrap.datetimepicker',
      'uiGmapgoogle-maps',
      'ngFileUpload',
      'map',
      'user',
      'socket',
      'liveChat',
      'modal'
    ]);
  </script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.0.1/lodash.js"></script>
  <script type="text/javascript" src="//cdn.rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script>
  <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyAok3PHxGwYlbq2AggZ7upd-1ltmBUJCMs"></script>
  <script type="text/javascript" src="/assets/js/angular-google-maps.min.js"/></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="{{ elixir('assets/js/controllers/map.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>
@endsection