@extends('app_admin')

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

@section('content')
  <div class="container-fluid" ng-controller="ResidentCtlr as vm">
    <!-- Header -->
    <div class="page-header clarfix">
      <!-- Title -->
      <div class="header left">
        <span class="icon icon-collective_group_masses_friends_company_silhoette"></span>
        <h1 class="header-title">Residents</h1>
      </div>
      <!-- Controls -->
      @if(!Auth::user()->hasRole('onsite_concierge'))
        <!-- Search -->
        <div class="row">
          <div class="col-sm-4">
            <div class="sort">
              <div class="search-field"
                ng-show="vm.residents.length">
                <input type="search"
                  placeholder="Search here ..."
                  ng-model="vm.search_residents"/>
                <div class="search-result"
                  ng-show="vm.search_residents">@{{ (vm.residents |
                  filter: vm.search_residents |
                  filter: { venue_id: vm.filter_property }).length }} results found
                </div>
              </div>
            </div>
          </div>
        </div>
      @endif
      <div class="row mg-top-30">
        <div class="col-sm-12">
          @if(!Auth::user()->hasRole('onsite_concierge'))
            <!-- Create -->
            <div class="sort">
              <div class="filter-group">
                <div class="form-group">
                  <button class="btn-oval-transparent btn-sm-block"
                    ng-click="vm.create_resident_modal()"
                    ng-show="vm.residents_loaded">Create New
                  </button>
                </div>
              </div>
            </div>
            <!-- Import -->
            <div class="sort">
              <div class="filter-group">
                <div class="form-group">
                  <button class="btn-oval-transparent btn-sm-block"
                    ng-click="vm.import_resident_modal()"
                    ng-show="vm.residents_loaded">Import
                  </button>
                </div>
              </div>
            </div>
          @endif
          <!-- Properties -->
          @if($properties->count() >= 2)
            <div class="sort">
              <div class="filter-group"
                ng-show="vm.residents.length">
                <div class="form-group select">
                  <select ng-model="vm.filter_property"
                    ng-init="vm.filter_property = ''">
                    <option value="">Property</option>
                    @foreach($properties->filter(function($item) { return !$item->private; }) as $property)
                      <option value="{{ $property->id }}">{{ $property->name }}</option>
                    @endforeach
                  </select>
                </div>
              </div>
            </div>
          @endif
          <!-- Select -->
          <div class="sort">
            <div class="filter-group"
              ng-show="vm.residents.length">
              <div class="form-group">
                <button class="btn-oval-transparent btn-sm-block"
                  ng-click="vm.select_all_residents()">@{{ vm.all_selected ? 'Unselect All' : 'Select All' }}
                </button>
              </div>
            </div>
          </div>
          <!-- Action -->
          <div class="sort">
            <div class="filter-group"
              ng-show="vm.residents.length && vm.selected_residents.length">
              <div class="form-group select">
                <select ng-model="vm.select_action">
                  <option value="">Select Action</option>
                  <option ng-value="'invite'">Send Invite</option>
                </select>
              </div>
            </div>
          </div>
          <!-- Submit Button -->
          <div class="sort">
            <div class="filter-group"
              ng-show="vm.residents.length && vm.select_action">
              <div class="form-group">
                <button class="btn-oval-transparent btn-sm-block"
                  ng-click="vm.submit_action('residents', vm.select_action, null)"
                  ng-show="vm.select_action && vm.selected_residents.length !== 0">Submit
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Loader -->
    <div class="loading-directories text-center" ng-show="!vm.residents_loaded">
      <img src="{{ asset('assets/images/loading-primary.svg') }}" alt="" width="62px">
      <em>Loading residents ...</em>
    </div>
    <!-- Content -->
    <div class="row" ng-init="vm.get_items()">
      <div class="col-sm-12 full-table"
        ng-show="filtered_residents.length">
        <table class="category-table grid-list"
          ng-init="vm.sort_by = 'name'; vm.reverse_sort = false">
          <tr>
            <th></th>
            <!-- Name -->
            <th>
              <a class="no-open"
                ng-click="vm.sort_by = 'name'; vm.reverse_sort = !vm.reverse_sort">Name
                <span class="filter--icon"
                  ng-show="vm.sort_by == 'name'">
                  <span class="icon-arrow-up"
                    ng-show="!vm.reverse_sort"></span>
                  <span class="icon-arrow-down"
                    ng-show="vm.reverse_sort"></span>
                </span>
              </a>
            </th>
            <!-- Unit Number -->
            <th>
              <a class="no-open"
                ng-click="vm.sort_by = 'unit_number'; vm.reverse_sort = !vm.reverse_sort">Unit Number
                <span class="filter--icon"
                  ng-show="vm.sort_by == 'unit_number'">
                  <span class="icon-arrow-up"
                    ng-show="!vm.reverse_sort"></span>
                  <span class="icon-arrow-down"
                    ng-show="vm.reverse_sort"></span>
                </span>
              </a>
            </th>
            <th ng-show="!privacy">
              <!-- Phone -->
              <a class="no-open"
                ng-click="vm.sort_by = 'phone'; vm.reverse_sort = !vm.reverse_sort">Phone
                <span class="filter--icon"
                  ng-show="vm.sort_by == 'phone'">
                  <span class="icon-arrow-up"
                    ng-show="!vm.reverse_sort"></span>
                  <span class="icon-arrow-down"
                    ng-show="vm.reverse_sort"></span>
                </span>
              </a>
            </th>
            <th ng-show="!privacy">
              <!-- Email -->
              <a class="no-open"
                ng-click="vm.sort_by = 'email'; vm.reverse_sort = !vm.reverse_sort">Email
                <span class="filter--icon"
                  ng-show="vm.sort_by == 'email'">
                  <span class="icon-arrow-up"
                    ng-show="!vm.reverse_sort"></span>
                  <span class="icon-arrow-down"
                    ng-show="vm.reverse_sort"></span>
                </span>
              </a>
            </th>
            <th>Controls</th>
          </tr>
          <!-- Residents -->
          <tr class="toggle animate-repeat"
            ng-class="{ inactive: !resident.active }"
            dir-paginate="resident in filtered_residents = (vm.residents |
            filter: vm.search_residents |
            resident: vm.filter_property |
            orderBy: vm.sort_by:vm.reverse_sort) |
            itemsPerPage: 10">
            <td>
              <div class="check-box">
                <input id="resident-@{{ resident.id }}"
                  type="checkbox"
                  ng-model="bool"
                  ng-click="vm.resident_sync(bool, resident)"
                  ng-checked="vm.resident_checked(resident.id)">
                <label for="resident-@{{ resident.id }}"></label>
              </div>
            </td>
            <!-- Resident Name -->
            <td data-th="Name">
              <a class="accent"
                target="_blank"
                href="/residents/@{{ resident.id }}">@{{ resident.first_name + ' ' + resident.last_name }}
              </a>
            </td>
            <!-- Resident Unit Number -->
            <td data-th="Unit Number">@{{ resident.unit_number }}</td>
            <!-- Resident Phone Number -->
            <td data-th="Phone" ng-show="!privacy">@{{ resident.phone | tel }}</td>
            <!-- Resident Email -->
            <td data-th="Email" ng-show="!privacy">
              <a href="mailto:@{{ resident.email }}">@{{ resident.email }}</a>
            </td>
            <!-- Controlls -->
            <td data-th="Controls" ng-controller="modalCtlr">
              <div class="control">
                <!-- Send Invite Button -->
                <button class="btn-small accent view center"
                  ng-click="vm.invite_resident_modal(resident)">@{{ resident.invitation_sent ? 'Re-send Invite': 'Send Invite' }}
                </button>
                <!-- Edit Button -->
                @if(!Auth::user()->hasRole('onsite_concierge'))
                  <button class="btn-small accent view center"
                    ng-click="vm.edit_resident_modal(resident)">Edit
                  </button>
                @endif
                <!-- Delete -->
                <button class="btn-small accent view center"
                  ng-click="vm.delete_resident_modal(resident)">Delete
                </button>
              </div>
            </td>
          </tr>
        </table>
        <!-- Pagination -->
        <dir-pagination-controls></dir-pagination-controls>
      </div><!--./col-sm-12-->
      <!-- No Filtered Residents -->
      <div class="col-sm-12"
        ng-show="!filtered_residents.length && vm.residents.length"><h5>There are no residents.</h5>
      </div>
      <!-- No Residents -->
      <div class="col-sm-12"
        ng-if="vm.residents_loaded && vm.residents.length == 0"><h5>{!! $empty !!}</h5>
      </div>
    </div><!--./row-->
    <!-- Modals -->
    @include('admin.partials.resident.create_modal')
    @include('admin.partials.resident.edit_modal')
    @include('admin.partials.resident.delete_modal')
    @include('admin.partials.resident.import_modal')
    @include('admin.partials.resident.invite_modal')
  </div>
@endsection

@section('script')
  <script type="text/javascript">
    angular.module('luxury-concierge', [
      'angularUtils.directives.dirPagination',
      'ui.dateTimeInput',
      'ui.bootstrap.datetimepicker',
      'uiSwitch',
      'ngFileUpload',
      'residents',
      'user',
      'socket',
      'liveChat',
      'modal'
    ]);
  </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="{{ elixir('assets/js/controllers/residents.js') }}"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/modal.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