@extends('app_admin')

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

@section('content')
  <div class="container-fluid" ng-controller="ConciergeCtlr as vm">
    <!-- Header -->
    <div class="page-header clearfix">
      <!-- Title -->
      <div class="header left mr-m--s mr-f--m">
        <span class="icon icon-headphones_headset_audio_music_sound_support"></span>
        <h1 class="header-title">Concierges</h1>
      </div>
      <!-- Create -->
      @if(Auth::user()->hasRole('admin'))
        <div class="sort"
          ng-show="vm.concierges_loaded">
          <div class="filter-group">
            <div class="form-group">
              <button class="btn-oval-transparent btn-sm-block"
                ng-click="vm.create_concierge_modal()">Create New
              </button>
            </div>
          </div>
        </div>
      @endif
      <!-- Properties -->
      @if(Auth::user()->get_admin_properties()->count() >= 2)
        <div class="sort" ng-if="vm.concierges_loaded && vm.concierges.length">
          <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(Auth::user()->get_admin_properties() as $venue)
                  <option value="{{ $venue->id }}">{{ $venue->name }}</option>
                @endforeach
              </select>
            </div>
          </div>
        </div>
      @endif
    </div><!-- .page-header -->

    <!-- Loader -->
    <div class="loading-directories text-center" ng-show="!vm.concierges_loaded">
      <img src="{{ asset('assets/images/loading-primary.svg') }}" alt="" width="62px">
      <em>Loading concierges ...</em>
    </div>
    <!-- Content -->
    <div class="row" ng-init="vm.get_concierges()">
      <div class="col-sm-12 full-table"
        ng-show="vm.concierges_loaded">
        <!-- Table -->
        <table class="category-table grid-list"
          ng-show="filtered_concierges.length">
          <tr>
            <!-- Name -->
            <th>
              <a class="no-open" ng-click="sortBy='name'; reverseSort = !reverseSort">Name
                <span class="filter--icon" ng-show="sortBy == 'name'">
                  <span class="icon-arrow-up" ng-show="!reverseSort"></span>
                  <span class="icon-arrow-down" ng-show="reverseSort"></span>
                </span>
              </a>
            </th>
            <!-- Gender -->
            <th>
              <a class="no-open" ng-click="sortBy='gender'; reverseSort = !reverseSort">Gender
                <span class="filter--icon" ng-show="sortBy == 'gender'">
                  <span class="icon-arrow-up" ng-show="!reverseSort"></span>
                  <span class="icon-arrow-down" ng-show="reverseSort"></span>
                </span>
              </a>
            </th>
            <!-- Cell Phone -->
            <th>
              <a class="no-open" ng-click="sortBy='phone'; reverseSort = !reverseSort">Cell Phone
                <span class="filter--icon" ng-show="sortBy == 'phone'">
                  <span class="icon-arrow-up" ng-show="!reverseSort"></span>
                  <span class="icon-arrow-down" ng-show="reverseSort"></span>
                </span>
              </a>
            </th>
            <!-- Email -->
            <th>
              <a class="no-open" ng-click="sortBy='email'; reverseSort = !reverseSort">Email
                <span class="filter--icon" ng-show="sortBy == 'email'">
                  <span class="icon-arrow-up" ng-show="!reverseSort"></span>
                  <span class="icon-arrow-down" ng-show="reverseSort"></span>
                </span>
              </a>
            </th>
            <!-- Controls -->
            <th>Controls</th>
          </tr>
          <!-- Concierges -->
          <tr class="toggle animate-repeat"
            ng-class="{ inactive: !concierge.active }"
            dir-paginate="concierge in vm.concierges | filter: vm.property_filter | orderBy:'first_name + last_name' | orderBy:sortBy:reverseSort | itemsPerPage: 10 as filtered_concierges">
            <!-- Full Nem -->
            <td data-th="Name">
              <a class="accent" href="/concierges/@{{ concierge.id }}">@{{ concierge.first_name + ' ' + concierge.last_name }}</a>
            </td>
            <!-- Gender -->
            <td data-th="Category">@{{ concierge.gender }}</td>
            <!-- Cell Phone -->
            <td data-th="Cell_Phone">@{{ concierge.cell_phone | tel }}</td>
            <!-- Email -->
            <td data-th="Email">@{{ concierge.email }}</td>
            <!-- Controls -->
            <td data-th="Controls" class="pr-m--s">
              <div class="controls">
                <!-- Invite -->
                <button class="btn-small accent view center"
                  ng-click="vm.invite_concierge_modal(concierge)">@{{ concierge.invitation_sent ? 'Re-send Invite': 'Send Invite' }}
                </button>
                <!-- Edit -->
                @if(Auth::user()->hasRole('admin') || Auth::user()->id == 63)
                  <button class="btn-small accent view center"
                    ng-click="vm.edit_concierge_modal(concierge)">Edit
                  </button>
                @endif
                <!-- Delete -->
                <button class="btn-small accent view center"
                  ng-click="vm.delete_concierge_modal(concierge)">Delete
                </button>
              </div>
            </td>
          </tr>

        </table>
        <!-- Pagination -->
        <dir-pagination-controls></dir-pagination-controls>
        <!-- No Filtered Concierges -->
        <h5 ng-if="vm.concierges_loaded && vm.concierges.length && !filtered_concierges.length">There are no concierges.</h5>
      </div><!--./col-sm-12-->
      <!-- No Concierges -->
      <div class="col-sm-12"
        ng-if="vm.concierges_loaded && !vm.concierges.length">
        <h5>{!! $empty !!}</h5>
      </div>

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

    <!-- Modals -->
    @include('admin.partials.concierge.create_modal')
    @include('admin.partials.concierge.edit_modal')
    @include('admin.partials.concierge.delete_modal')
    @include('admin.partials.concierge.invite_modal')
  </div>
@endsection

@section('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/angular-ui-switch.min.js"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/concierges.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