@extends('app_admin')

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

@section('content')
    <div class="content statistics">
        <div class="container-fluid">
            <div class="row">
                @if(!Auth::user()->hasRole('admin'))
                    <div class="col-sm-8" ng-controller="RequestCtlr" ng-init="get_items()">
                        <div ng-cloak>
                            <div class="page-header">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="header left">
                                            <span class="icon icon-layers_windows_multiple_copy_duplicate"></span>
                                            <h1 class="header-title">Request Stream</h1>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="row">
                                            <div class="col-sm-8">
                                                <div class="sort">
                                                    <div class="search-field mb-l--s mb-f--m" ng-show="requests.length">
                                                        <input type="search" placeholder="Search here ..."
                                                               ng-model="filterRequests"/>
                                                        <div class="search-result" ng-if="filterRequests" ng-cloak>@{{
                                                            filteredRequests.length }} results found
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-4">
                                                @if(Auth::user()->global_property_requests())
                                                    <div ng-controller="modalCtlr" ng-init="get_residents()"
                                                         style="text-align: right">
                                                        <button type="button" name="button"
                                                                class="btn btn-small btn-block mt-s--m"
                                                                ng-click="modal_request_open()"
                                                                ng-show="residents.length">
                                                            <b>{{ ($properties->count() == 1 && $properties->first()->id == 6) ? 'Service Request' : 'Request​' }}</b>
                                                        </button>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="requests-filter" ng-show="requests.length">
                                    <ul class="filter-list">
                                        <div class="row" ng-cloak>
                                            <div class="filter-group">
                                                <div class="col-xs-6 col-sm-3">
                                                    <div class="form-group select">
                                                        <select ng-model="status" ng-init="status = 0"
                                                                ng-change="status == '' ? archived = 1 : archived = 0">
                                                            <option ng-value="0" ng-selected="true">Status</option>
                                                            <option ng-value="1">Solved</option>
                                                            <option ng-value="0">In Progress</option>
                                                            <option ng-value="''">Canceled</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                @if($properties->count() >= 2)
                                                    <div class="col-xs-6 col-sm-3">
                                                        <div class="form-group select">
                                                            <select ng-model="filter_venue" ng-init="filter_venue = ''">
                                                                <option value="">Property</option>
                                                                @foreach($properties->filter(function($item) { return !$item->private; }) as $property)
                                                                    @if(Auth::user()->property_requests($property))
                                                                        <option value="{{ $property->id }}">{{ $property->name }}</option>
                                                                    @endif
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                @endif

                                                <div class="col-xs-6 col-sm-3">
                                                    <div class="form-group select">
                                                        <select ng-model="sortByDate"
                                                                ng-change="client_filter_directories(filterSelect_Category.id);">
                                                            <option ng-value="'-created_at'" ng-selected="true">Sort
                                                                By
                                                            </option>
                                                            <option ng-value="'-created_at'"
                                                                    ng-init="sortByDate = '-created_at' ">Newest
                                                            </option>
                                                            <option ng-value="'created_at'">Oldest</option>
                                                            <option ng-value="'date'">Upcoming Requests</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                @if($properties->count() == 1)
                                                    @if($properties->first()->request_type->filter(function($item) use ($properties) {
                                                      return Auth::user()->check_request_type($properties->first()->id, $item->id); })->count() >= 2)
                                                        <div class="col-xs-6 col-sm-3">
                                                            <div class="form-group select">
                                                                <select ng-model="requestType"
                                                                        ng-init="requestType = ''">
                                                                    <option value="">Request Type</option>
                                                                    @foreach($properties->first()->request_type->filter(function($item) use ($properties) {
                                                                      return Auth::user()->check_request_type($properties->first()->id, $item->id); }) as $request_type)
                                                                        <option ng-value="{{ $request_type->id }}">{{ $request_type->name }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                    @endif
                                                @else
                                                    @if($request_types->count() >= 2)
                                                        <div class="col-xs-6 col-sm-3">
                                                            <div class="form-group select">
                                                                <select ng-model="requestType"
                                                                        ng-init="requestType = ''">
                                                                    <option value="">Request Type</option>
                                                                    @foreach($request_types as $request_type)
                                                                        <option ng-value="{{ $request_type->id }}">{{ $request_type->name }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                    @endif
                                                @endif
                                            </div>
                                        </div>
                                    </ul>
                                    <div class="clear"></div>
                                </div><!-- requests-filter -->
                            </div><!--./page-header -->
                            <div class="requests dashboard" ng-show="requests.length">
                                <div class="shadow"></div>
                                <div class="requests-item"
                                     dir-paginate="request in requests | filter: { status: status } | filter: { venue_id: filter_venue } | filter: { archived: archived } | filter: {client: {id: filter_client}} | filter: { request_type_id: requestType } | filter:filterRequests | orderBy: sortByDate | itemsPerPage: 50 as filteredRequests">
                                    <div class="requests-item-info dashboard operator">
                                        <div class="requests-item-info-request">
                                            <div class="media">
                                                <div class="media-left media-middle">
                          <span class="admin-request-status">
                            <div ng-show="request.archived == 0">
                              <div ng-if="request.status == true">
                                <span class="status-icon solved icon-check_complete_alright_ok_tick_test_circle_button"
                                      tooltip-placement="right" uib-tooltip="This request is solved"></span>
                              </div>
                              <div ng-if="request.status == false">
                                <span class="status-icon pending icon-question_ask_help_support_circle_button"
                                      tooltip-placement="right" uib-tooltip="This request is in progress"></span>
                              </div>
                            </div>
                            <div ng-show="request.archived == 1">
                              <span class="status-icon pending icon-delete_close_hide_circle_button col-red"
                                    tooltip-placement="right" uib-tooltip="This request is canceled"></span>
                            </div>
                          </span>
                                                </div>
                                                <div class="media-body">
                                                    <a href="/requests/@{{ request.id }}" class="title">@{{
                                                        (request.description.toString() | limitHtml:50) +
                                                        (request.request_type_id == 2 ? ' (' + request.vehicle + ')' :
                                                        '') }}</a>
                                                </div>
                                            </div>
                                        </div>
                                        <ul class="requests-item-moreinfo clearfix"
                                            ng-init="requests_check_if_assigned(request)"
                                            ng-switch="request.request_assigned">
                                            @if($properties->count() >= 2)
                                                <li>
                                                    <span class="icon icon-map_pin_locate_location_marker_gps"></span>
                                                    <h5 class="info-text">@{{ request.venue.name }}</h5>
                                                </li>
                                            @endif
                                            <li ng-if="sortByDate != 'date'" tooltip-placement="top"
                                                uib-tooltip="Created at">
                                                <span class="icon icon-calendar_date_schedule_event_month_year_3"></span>
                                                <h5 class="info-text">@{{ request.created_date }}</h5>
                                            </li>
                                            <li ng-if="request.requested_date && sortByDate == 'date'"
                                                tooltip-placement="top" uib-tooltip="Upcoming request">
                                                <span class="icon icon-calendar_date_schedule_event_month_year_3"></span>
                                                <h5 class="info-text">@{{ request.requested_date }}</h5>
                                            </li>
                                            <li ng-if="request.category">
                                                <span class="icon icon-folder_files_storage_open"></span>
                                                <h5 class="info-text">@{{ request.category }}</h5>
                                            </li>
                                            <li ng-if="request.request_type">
                                                <span class="icon icon-layers_windows_multiple_copy_duplicate"></span>
                                                <h5 class="info-text">@{{ request.request_type.name }}</h5>
                                            </li>
                                            <li>
                                                <span class="icon icon-user_profile_avatar_man_boy_silhoette"></span>
                                                <h5 class="info-text">Requested by <a
                                                            href="/residents/@{{ request.client.id }}">@{{
                                                        request.client.first_name + ' ' + request.client.last_name
                                                        }}</a></h5>
                                            </li>
                                            <li ng-if="request.client.unit_number" tooltip-placement="top"
                                                uib-tooltip="Unit Number">
                                                <span class="icon icon-home_house_main_homepage"></span>
                                                <h5 class="info-text">@{{ request.client.unit_number }}</h5>
                                            </li>
                                            <li ng-switch-when="true">
                                                <span class="icon icon-user_profile_avatar_man_boy_silhoette"></span>
                                                <h5 class="info-text">Concierge
                                                    <a href="/concierges/@{{ request.concierge.id }}">@{{
                                                        request.concierge.first_name + ' ' + request.concierge.last_name
                                                        }}</a>
                                                </h5>
                                            </li>
                                            <li ng-switch-when="false">
                                                @if(Auth::user()->hasRole('virtual_concierge') || Auth::user()->hasRole('onsite_concierge'))
                                                    <button class="btn btn-small"
                                                            ng-click="assign_to_me(request, user)">Assign to me
                                                    </button>
                                                @endif
                                            </li>
                                            <a href="/venues/@{{ request.venue[0].slug }}"><img
                                                        ng-src="/assets/images/venues/logo/@{{ request.venue[0].logo_image }}"
                                                        width="60"/></a>
                                        </ul>
                                    </div><!--./requests-item-info -->
                                </div><!--./requests-item -->
                            </div>
                            <dir-pagination-controls></dir-pagination-controls>
                            <h5 ng-if="filteredRequests == 0 && requests.length">There are no requests.</h5>
                            <h5 ng-if="requests.length == 0">{!! $empty !!}</h5>
                        </div>
                    </div><!--./col-sm-8 -->
                    <div class="col-sm-4 widget-sidebar">
                        <div ng-controller="TaskCtlr as task_vm" ng-init="task_vm.get_items()">
                            <div class="panel-heading clearfix" style="margin-bottom: 20px">
                <span>
                  <span class="panel-icon icon-calendar_date_schedule_event_month_year_3"></span>
                  <h3 class="panel-title">Daily Planner</h3>
                </span>
                                <span class="right">
                  <button class="btn btn-primary btn-sm" ng-click="task_vm.create_task_modal()"
                          style="margin-right: 3px">Add Task</button>
                  <a class="btn btn-sm btn-default" href="{{ url('planner') }}">View all</a>
                </span>
                            </div><!--./panel-heading -->
                            <div class="panel planner pt-s--s pb-m--s">
                                <div class="panel-heading">
                                    <h4>Today (@{{ (task_vm.tasks |
                                        filter: task_vm.filter_today_tasks |
                                        orderBy: 'start_date').length }})</h4>
                                </div><!--./panel-heading -->
                                <div class="panel-content">
                                    <div class="widget-planner panel-list perks"
                                         ng-init="task_vm.selected_date = '{{ date('Y-m-d') }}'">
                                        <li ng-repeat="task in todays_tasks = (task_vm.tasks |
                      filter: task_vm.filter_today_tasks |
                      orderBy: 'start_date')">
                                            <div class="row">
                                                <div class="col-xs-7 col-sm-6">
                                                    <h5 class="widget-planner-title">@{{ task.title }}</h5>
                                                    <div class="widget-planner-description">@{{ task.description }}
                                                    </div>
                                                    <div ng-if="task_vm.dateIsToday(task.start_date)" class="widget-planner-time">Starts at @{{ task.start_date_time }}</div>
                                                    <div ng-if="task_vm.dateIsToday(task.end_date)" class="widget-planner-time">Ends at @{{ task.end_date_time }}</div>
                                                </div>
                                                <div class="col-xs-5 col-sm-6 clearfix">
                                                    <div class="controls right">
                                                        <span class="status-icon icon-check_complete_alright_ok_tick_test_circle_button"
                                                              ng-class="{'solved': task.status == true}"></span>
                                                        <span class="edit-icon icon-gear_settings_set_tune_tuning_options_preferences_controls_configuration_adjustment_2"
                                                              ng-click="task_vm.edit_task_modal(task)"></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </div>
                                    <div ng-if="task_vm.tasks_loaded && todays_tasks.length == 0">There are no tasks.
                                    </div>
                                </div><!--./panel-content -->
                            </div><!--./panel -->
                            <div class="panel planner pt-s--s pb-m--s">
                                <div class="panel-heading">
                                    <h4>Upcoming Tasks (@{{ (task_vm.tasks | filter: task_vm.future_tasks).length
                                        }})</h4>
                                </div><!--./panel-heading -->
                                <div class="panel-content">
                                    <div class="widget-planner panel-list perks">
                                        <li ng-repeat="task in upcoming_tasks = (task_vm.tasks |
                                        filter: task_vm.future_tasks |
                                        orderBy: 'start_date' | limitTo: 5)">
                                            <div class="row">
                                                <div class="col-sm-6">
                                                <h5 class="widget-planner-title">@{{ task.title }}</h5>
                                                    <div class="widget-planner-description">@{{ task.description }}
                                                    </div>
                                                    <span class="widget-planner-time">
                                                        @{{ task.start_date_day + ' ' + task.start_date_time }}
                                                        <span ng-if="task.end_date"> - 
                                                            <span ng-if="!task_vm.isSameDate(task.start_date_day,task.end_date_day)">@{{ task.end_date_day }} </span>
                                                            @{{ task.end_date_time  }}
                                                        </span>
                                                    </span>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="controls right">
                                                        <span class="status-icon icon-check_complete_alright_ok_tick_test_circle_button"
                                                              ng-class="{'solved': task.status == true}"></span>
                                                        <span class="edit-icon icon-gear_settings_set_tune_tuning_options_preferences_controls_configuration_adjustment_2"
                                                              ng-click="task_vm.edit_task_modal(task)"></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </div>
                                    <div ng-if="task_vm.tasks_loaded && upcoming_tasks.length == 0">There are no
                                        tasks.
                                    </div>
                                </div><!--./panel-content -->
                            </div><!--./panel -->
                            <div class="panel planner pt-s--s pb-m--s">
                                <div class="panel-heading">
                                    <h4>Notes</h4>
                                </div><!--./panel-heading -->
                                <div class="panel-content">
                                    <div ng-controller="NotesCtlr as vm">
                                        <textarea class="notes-input" name="notes" rows="8"
                                                  ng-model="vm.notes"></textarea>
                                    </div>
                                </div><!--./panel-content -->
                            </div><!--./panel -->
                            @include('admin.partials.weather')
                        </div>
                    </div>
                @else
                    <div class="col-sm-12" ng-controller="StatsCtlr" ng-init="getType('{{ $global_filter }}')">

                        <div class="page-header" ng-cloak>
                            <div class="header left">
                                <span class="icon icon-analytics_chart_stats_statistics_5"></span>
                                <h1 class="header-title">Detailed Statistics</h1>
                            </div>
                            <div class="requests-filter">
                                <ul class="filter-list">
                                    <div class="row">
                                        <div class="filter-group">
                                            <div class="col-xs-12 col-sm-3">
                                                <div class="form-group select">
                                                    <select ng-disabled="!loading" ng-model="venue"
                                                            ng-change="filter_venue(user)">
                                                        <option value="">Property</option>
                                                        @foreach($properties as $property)
                                                            <option value="{{ $property->id }}">{{ $property->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-xs-12 col-sm-9">
                                                <form name="filterForm" ng-submit="filter_date()">
                                                    <div class="row">
                                                        <div class="col-xs-12 col-sm-4 form-group">
                                                            <div class="dropdown">
                                                                <a id="startDate" data-toggle="dropdown" data-target="#"
                                                                   href="#">
                                                                    <div class="input-group date-dropdown"
                                                                         style="margin: 0; padding: 0;">
                                                                        <input type="text" class="form-control"
                                                                               data-date-time-input="MMM D, YYYY"
                                                                               ng-model="$parent.start_date"
                                                                               placeholder="Start date" required>
                                                                        <span class="input-group-addon"><i
                                                                                    class="icon-calendar_date_schedule_event_month_year_3"></i></span>
                                                                    </div>
                                                                </a>
                                                                <ul class="dropdown-menu  fadeIn"
                                                                    data-wow-duration="300ms" role="menu"
                                                                    aria-labelledby="dLabel">
                                                                    <datetimepicker style="z-index: 1081"
                                                                                    ng-model="$parent.start_date"
                                                                                    min="disabled"
                                                                                    data-before-render="beforeRender($view, $dates, $leftDate, $upDate, $rightDate)"
                                                                                    data-datetimepicker-config="{ dropdownSelector: '#startDate', startView:'day', minView:'day' }"/>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="col-xs-12 col-sm-4 form-group">
                                                            <div class="dropdown">
                                                                <a id="endDate" data-toggle="dropdown" data-target="#"
                                                                   href="#">
                                                                    <div class="input-group date-dropdown"
                                                                         style="margin: 0; padding: 0;">
                                                                        <input type="text" class="form-control"
                                                                               data-date-time-input="MMM D, YYYY"
                                                                               ng-model="$parent.end_date"
                                                                               placeholder="End date" required>
                                                                        <span class="input-group-addon"><i
                                                                                    class="icon-calendar_date_schedule_event_month_year_3"></i></span>
                                                                    </div>
                                                                </a>
                                                                <ul class="dropdown-menu  fadeIn"
                                                                    data-wow-duration="300ms" role="menu"
                                                                    aria-labelledby="dLabel">
                                                                    <datetimepicker style="z-index: 1081"
                                                                                    ng-model="$parent.end_date"
                                                                                    min="disabled"
                                                                                    data-before-render="beforeRender($view, $dates, $leftDate, $upDate, $rightDate)"
                                                                                    data-datetimepicker-config="{ dropdownSelector: '#endDate', startView:'day', minView:'day' }"/>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="col-xs-12 col-sm-4 form-group">
                                                            <div>
                                                                <button ng-disabled="!loading" id="btn-filter"
                                                                        type="submit"
                                                                        class="btn btn-request medium mr-s--s">Filter
                                                                </button>
                                                                <button ng-disabled="!loading" type="button"
                                                                        class="btn btn-request medium" print-btn>Print
                                                                </button>
                                                            </div>
                                                            <div class="mt-s--s">
                                                                <a class="btn btn-request medium"
                                                                   href="{{ url('reports') }}">Reports</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </ul>
                            </div>
                            <div class="clear"></div>
                        </div>

                        <div class="row" ng-switch="loading" ng-cloak>
                            <div class="loading-directories text-center" ng-switch-when="false">
                                <img src="{{ asset('assets/images/loading-primary.svg') }}" alt="" width="62px">
                                <em>Loading data ...</em>
                            </div>

                            <div ng-switch-when="true">
                                <div class="col-xs-12 col-sm-12" ng-switch="date_filter">
                                    <div ng-switch-when="true">
                                        <a href="{{ url('/') }}" class="btn btn-small">Today</a>
                                        <a href="{{ url('?filter=weekly') }}" class="btn btn-small">Weekly</a>
                                        <a href="{{ url('?filter=monthly') }}" class="btn btn-small">Monthly</a>
                                        <center>
                                            <h5 ng-if="filter_start_date == filter_end_date">@{{ filter_start_date |
                                                date:'MMM d, yyyy' }}</h5>
                                            <h5 ng-if="filter_start_date != filter_end_date">@{{ filter_start_date |
                                                date:'MMM d, yyyy' }} - @{{ filter_end_date | date:'MMM d, yyyy' }}</h5>
                                        </center>
                                    </div>
                                    <div ng-switch-when="false">
                                        <button class="btn btn-small" ng-class="{'accent': global_filter == 'today'}"
                                                ng-click="changeType('today')">Today
                                        </button>
                                        <button class="btn btn-small" ng-class="{'accent': global_filter == 'weekly'}"
                                                ng-click="changeType('weekly')">Weekly
                                        </button>
                                        <button class="btn btn-small" ng-class="{'accent': global_filter == 'monthly'}"
                                                ng-click="changeType('monthly')">Monthly
                                        </button>
                                    </div>
                                    <br/>
                                </div>
                                <!-- Table for printing -->
                                <div class="print-table" print-only>
                                    <!-- Print Table Color Style -->
                                    <style>
                                        .print-table table thead tr th {

                                        background-color:

                                        #
                                        @
                                        {
                                        {
                                            filtered_venue . color ? filtered_venue .
                                            color: 'ab004f'
                                        }
                                        }
                                        }
                                    </style>
                                    <!-- Table starts here -->
                                    <div class="table-header">
                                        <div class="row">
                                            <div class="col-sm-6 col-xs-6">
                                                @if($properties->count() == 1)
                                                    <img class="table-logo"
                                                         src="{{ asset('assets/images/venues/logo/'.$properties->first()->logo_image) }}"
                                                         alt=""/>
                                                @else
                                                    <img class="table-logo"
                                                         src="{{ asset('assets/images/lcn-logo.svg') }}"
                                                         ng-show="!filtered_venue"/>
                                                    <img ng-src="/assets/images/venues/logo/@{{ filtered_venue.logo_image }}"
                                                         ng-show="filtered_venue"/>
                                                @endif
                                            </div>
                                            <div class="col-sm-6 col-xs-6 text-right">
                                                <div class="table-info">
                                                    <h5>Report Generated</h5>
                                                    <div class="date" ng-show="!filter_start_date && !filter_end_date">
                                                        @{{ concierge_filter }}
                                                    </div>
                                                    <div class="date" ng-show="filter_start_date && filter_end_date">@{{
                                                        filter_start_date | date:"MMM dd, yyyy" }} - @{{ filter_end_date
                                                        | date:"MMM dd, yyyy" }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <h5>Request Breakdown</h5>
                                    <table id="table-request-breakdowns" class="table table-hover table-mc-light-blue">
                                        <thead>
                                        <tr>
                                            <th>Day</th>
                                            <th>Requests</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr ng-repeat="day in request_breakdown.labels track by $index"
                                            ng-show="request_breakdown.data[0][$index] !== 0">
                                            <td>@{{ day }}</td>
                                            <td>@{{ request_breakdown.data[0][$index] }}</td>
                                        </tr>
                                        </tbody>
                                    </table>

                                    <h5>Requests</h5>
                                    <table id="table-requests" class="table table-hover table-mc-light-blue">
                                        <thead>
                                        <tr>
                                            <th>Status</th>
                                            <th>Requests</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr ng-repeat="request in request_status.labels track by $index"
                                            ng-show="request_status[global_filter].data[$index] !== 0"
                                            ng-switch="date_filter">
                                            <td>@{{ request }}</td>
                                            <td ng-switch-when="false">@{{ request_status[global_filter].data[$index]
                                                }}
                                            </td>
                                            <td ng-switch-when="true">@{{ request_status.data[$index] }}</td>
                                        </tr>
                                        </tbody>
                                    </table>

                                    <h5>Requested Using</h5>
                                    <table id="table-requested-using" class="table table-hover table-mc-light-blue">
                                        <thead>
                                        <tr>
                                            <th>Requested by</th>
                                            <th>Requests</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr ng-repeat="request in request_using.labels track by $index"
                                            ng-show="request_using[global_filter].data[$index] !== 0"
                                            ng-switch="date_filter">
                                            <td>@{{ request }}</td>
                                            <td ng-switch-when="false">@{{ request_using[global_filter].data[$index]
                                                }}
                                            </td>
                                            <td ng-switch-when="true">@{{ request_using.data[$index] }}</td>
                                        </tr>
                                        </tbody>
                                    </table>

                                    <h5>Most Active Residents</h5>
                                    <table id="table-most-active-residents"
                                           class="table table-hover table-mc-light-blue">
                                        <thead>
                                        <tr>
                                            <th>Resident</th>
                                            <th>Requests</th>
                                        </tr>
                                        </thead>
                                        <tbody ng-switch="date_filter">
                                        <tr ng-repeat="resident in filter_residents | filter:filterResidents | orderBy:'-request_count' | limitTo: 5"
                                            ng-switch-when="true">
                                            <td>@{{ resident.first_name + ' ' + resident.last_name }}</td>
                                            <td>@{{ resident.request_count }}</td>
                                        </tr>
                                        <tr ng-repeat="resident in filter_residents | filter:filterResidents | orderBy:resident_sort | limitTo: 5"
                                            ng-switch-when="false">
                                            <td>@{{ resident.first_name + ' ' + resident.last_name }}</td>
                                            <td>@{{ resident[resident_filter] }}</td>
                                        </tr>
                                        </tbody>
                                    </table>

                                    <h5>Most Active Concierges</h5>
                                    <table id="table-most-active-concierges"
                                           class="table table-hover table-mc-light-blue">
                                        <thead>
                                        <tr>
                                            <th>Concierge</th>
                                            <th>Requests</th>
                                        </tr>
                                        </thead>
                                        <tbody ng-switch="date_filter">
                                        <tr ng-repeat="concierge in filter_concierges | filter:filterConcierges | orderBy:'-filter_requests' | limitTo: 5"
                                            ng-switch-when="true">
                                            <td>@{{ concierge.first_name + ' ' + concierge.last_name }}</td>
                                            <td>@{{ concierge.filter_requests.length }}</td>
                                        </tr>
                                        <tr ng-repeat="concierge in filter_concierges | filter:filterConcierges | orderBy:concierge_sort | limitTo: 5"
                                            ng-switch-when="false">
                                            <td>@{{ concierge.first_name + ' ' + concierge.last_name }}</td>
                                            <td>@{{ concierge['filter_' + concierge_filter].length }}</td>
                                        </tr>
                                        </tbody>
                                    </table>

                                    <h5>Top Vendors</h5>
                                    <table id="table-top-vendors" class="table table-hover table-mc-light-blue">
                                        <thead>
                                        <tr>
                                            <th>Vendor</th>
                                            <th>Requests</th>
                                        </tr>
                                        </thead>
                                        <tbody ng-switch="date_filter">
                                        <tr ng-repeat="directory in filter_directories | filter:filterDirectories | orderBy:'-filter_requests' | limitTo: 5 as filteredDirectories track by $index"
                                            ng-switch-when="true">
                                            <td>@{{ directory.name }}</td>
                                            <td>@{{ directory.filter_requests.length }}</td>
                                        </tr>
                                        <tr ng-repeat="directory in filter_directories | filter:filterDirectories | orderBy:directory_sort | limitTo: 5 as filteredDirectories track by $index"
                                            ng-switch-when="false">
                                            <td>@{{ directory.name }}</td>
                                            <td>@{{ directory['filter_' + directory_filter].length }}</td>
                                        </tr>
                                        </tbody>
                                    </table>

                                    <h5>Property Ratings</h5>
                                    <table id="table-property-ratings" class="table table-hover table-mc-light-blue">
                                        <thead>
                                        <tr>
                                            <th>Vendor</th>
                                            <th>Rating</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr ng-repeat="filter_venue in filter_venues | filter: {'rating' : ''} | orderBy: '-rating'">
                                            <td>@{{ filter_venue.name }}</td>
                                            <td>@{{ filter_venue.rating }}</td>
                                        </tr>
                                        </tbody>
                                    </table>

                                    <h5 ng-if="!filtered_venue">Most Active Property</h5>
                                    <table id="table-most-active-property" class="table table-hover"
                                           ng-if="!filtered_venue">
                                        <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Requests</th>
                                        </tr>
                                        </thead>
                                        <tbody ng-switch="date_filter">
                                        <tr class="item"
                                            ng-repeat="filter_venue in filter_venues | filter:filterVenues | orderBy:'-request_count' | limitTo: 5 as filteredVenues track by $index"
                                            ng-switch-when="true">
                                            <td>@{{ filter_venue.name }}</td>
                                            <td>@{{ filter_venue.request_count }}</td>
                                        </tr>
                                        <tr class="item"
                                            ng-repeat="filter_venue in filter_venues | filter:filterVenues | orderBy:venue_sort | limitTo: 5 as filteredVenues track by $index"
                                            ng-switch-when="false">
                                            <td>@{{ filter_venue.name }}</td>
                                            <td>@{{ filter_venue[venue_filter] }}</td>
                                        </tr>
                                        </tbody>
                                    </table>

                                    <h5 ng-if="unactive_residents[global_filter].length != 0 && unactive_residents.length != 0">
                                        Deleted Accounts</h5>
                                    <table id="table" class="table table-hover"
                                           ng-if="unactive_residents[global_filter].length != 0 && unactive_residents.length != 0">
                                        <thead>
                                        <tr>
                                            <th>Full Name</th>
                                            <th>Date</th>
                                        </tr>
                                        </thead>
                                        <tbody ng-switch="date_filter">
                                        <tr ng-repeat="resident in unactive_residents | limitTo: 5"
                                            ng-switch-when="true">
                                            <td>@{{ resident.first_name + ' ' + resident.last_name }}</td>
                                            <td>@{{ resident.updated_at | date:"medium" }}</td>
                                        </tr>
                                        <tr ng-repeat="resident in unactive_residents[global_filter] | limitTo: 5"
                                            ng-switch-when="false">
                                            <td>@{{ resident.first_name + ' ' + resident.last_name }}</td>
                                            <td>@{{ resident.updated_at | date:"medium" }}</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div> <!--./print-table -->

                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="venue-stats masonry">
                                            <!-- Property Count -->
                                            <div ng-if="properties_data.venues > 1" class="masonry-item media">
                                                <div class="col-md-12 box-stats">
                                                    <div class="media-left media-middle">
                                                        <span class="menu-icon icon-skyscraper_company_office_commercial_building_3 icon"></span>
                                                    </div>
                                                    <div class="media-body">
                                                        <span class="title">Properties</span>
                                                        <span class="variable">@{{ properties_data.venues }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Total Articles Count -->
                                            <div class="masonry-item media">
                                                <div class="col-md-12 box-stats">
                                                    <div class="media-left media-middle">
                                                        <span class="menu-icon icon-newspaper_news_morning_events_journal icon"></span>
                                                    </div>
                                                    <div class="media-body">
                                                        <span class="title">Total News</span>
                                                        <span class="variable">@{{ properties_data.articles }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Community Articles Count -->
                                            <div class="masonry-item media">
                                                <div class="col-md-12 box-stats">
                                                    <div class="media-left media-middle">
                                                        <span class="menu-icon icon-skyscraper_company_office_commercial_building_3 icon"></span>
                                                    </div>
                                                    <div class="media-body">
                                                        <span class="title">Community News</span>
                                                        <span class="variable">@{{ properties_data.articles_parent }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Lifestyle Articles Count -->
                                            <div class="masonry-item media">
                                                <div class="col-md-12 box-stats">
                                                    <div class="media-left media-middle">
                                                        <span class="menu-icon icon-vacation_beach_sun_sea_ocean_sand_lounger_umbrella_nature_travel icon"></span>
                                                    </div>
                                                    <div class="media-body">
                                                        <span class="title">Lifestyle News</span>
                                                        <span class="variable">@{{ properties_data.articles_lifestyle }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Total Directories Count -->
                                            <div class="masonry-item media">
                                                <div class="col-md-12 box-stats">
                                                    <div class="media-left media-middle">
                                                        <span class="menu-icon icon-label_folder_phone_book_contacts_documents_3 icon"></span>
                                                    </div>
                                                    <div class="media-body">
                                                        <span class="title">Total Directories</span>
                                                        <span class="variable">@{{ properties_data.directories }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Featured Directories Count -->
                                            <div class="masonry-item media">
                                                <div class="col-md-12 box-stats">
                                                    <div class="media-left media-middle">
                                                        <span class="menu-icon icon-label_folder_phone_book_contacts_documents_3 icon"></span>
                                                    </div>
                                                    <div class="media-body">
                                                        <span class="title">Featured Directories</span>
                                                        <span class="variable">
                              <span>@{{ properties_data.directories_featured_one || properties_data.directories_featured_two || 0}}</span>
                            </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="masonry-item media">
                                                <div class="col-md-12 box-stats">
                                                    <div class="media-left media-middle">
                                                        <span class="icon icon-calendar_date_schedule_event_month_year_3 icon"></span>
                                                    </div>
                                                    <div class="media-body">
                                                        <span class="title">Total Events</span>
                                                        <span class="variable">@{{ properties_data.events }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="masonry-item media">
                                                <div class="col-md-12 box-stats">
                                                    <div class="media-left media-middle">
                                                        <span class="icon icon-calendar_date_schedule_event_month_year_3 icon"></span>
                                                    </div>
                                                    <div class="media-body">
                                                        <span class="title">Upcoming Events</span>
                                                        <span class="variable"> @{{ properties_data.events_upcoming }}</span>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="masonry-item media">
                                                <div class="col-md-12 box-stats">
                                                    <div class="media-left media-middle">
                                                        <span class="menu-icon icon-collective_group_masses_friends_company_silhoette icon"></span>
                                                    </div>
                                                    <div class="media-body">
                                                        <span class="title">Residents</span>
                                                        <span class="variable">@{{ properties_data.residents }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            @if(Auth::user()->hasRole('virtual_concierge') || Auth::user()->hasRole('admin'))
                                                <div class="masonry-item media">
                                                    <div class="col-md-12 box-stats">
                                                        <div class="media-left media-middle">
                                                            <span class="menu-icon icon-layers_windows_multiple_copy_duplicate icon"></span>
                                                        </div>
                                                        <div class="media-body">
                                                            <span class="title">Total Requests</span>
                                                            <span class="variable">@{{ properties_data.requests }}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- Closed Requests Count -->
                                                <div class="masonry-item media">
                                                    <div class="col-md-12 box-stats">
                                                        <div class="media-left media-middle">
                                                            <span class="menu-icon icon-layers_windows_multiple_copy_duplicate icon"></span>
                                                        </div>
                                                        <div class="media-body">
                                                            <span class="title">Closed Requests</span>
                                                            <span class="variable">@{{ properties_data.requests_closed }}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- In Progress Requests Count -->
                                                <div class="masonry-item media">
                                                    <div class="col-md-12 box-stats">
                                                        <div class="media-left media-middle">
                                                            <span class="menu-icon icon-layers_windows_multiple_copy_duplicate icon"></span>
                                                        </div>
                                                        <div class="media-body">
                                                            <span class="title">Requests In Progress</span>
                                                            <span class="variable">@{{ properties_data.requests_progress }}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="row" ng-if="requests_total != 0">
                                    <div class="col-sm-12">
                                        <div class="row">
                                            <div class="col-sm-12">
                                                <div id="request-breakdowns" class="card card-news shadowed">
                                                    <center>Requests Breakdown</center>
                                                    <br>
                                                    <canvas class="chart chart-line"
                                                            chart-data="request_breakdown.data"
                                                            chart-labels="request_breakdown.labels"
                                                            chart-series="request_breakdown.series"
                                                            chart-options="request_breakdown.options"
                                                            height="75">
                                                    </canvas>
                                                </div>
                                            </div>
                                        </div>
                                        <div vertilize-container class="row full-row">
                                            <div class="col-sm-4">
                                                <div vertilize>
                                                    <div class="card card-news shadowed" ng-switch="date_filter">
                                                        <div class="header">
                                                            <span>Total Requests</span>
                                                        </div>
                                                        <canvas ng-switch-when="false" class="chart chart-doughnut"
                                                                chart-data="request_status[global_filter].data"
                                                                chart-labels="request_status.labels"
                                                                chart-colors="colors"
                                                                height="130">
                                                        </canvas>
                                                        <canvas ng-switch-when="true" class="chart chart-doughnut"
                                                                chart-data="request_status.data"
                                                                chart-labels="request_status.labels"
                                                                chart-colors="colors"
                                                                height="130">
                                                        </canvas>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div vertilize>
                                                    <div class="card card-news shadowed" ng-switch="date_filter">
                                                        <div class="header">
                                                            <span>Request Types</span>
                                                        </div>
                                                        <canvas ng-switch-when="false" class="chart chart-doughnut"
                                                                chart-data="request_type[global_filter].data"
                                                                chart-labels="request_type[global_filter].labels"
                                                                chart-options="options"
                                                                height="130">
                                                        </canvas>
                                                        <canvas ng-switch-when="true" class="chart chart-doughnut"
                                                                chart-data="request_type.data"
                                                                chart-labels="request_type.labels"
                                                                chart-options="options"
                                                                height="130">
                                                        </canvas>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div vertilize>
                                                    <div class="card card-news shadowed" ng-switch="date_filter">
                                                        <div class="header">
                                                            <span>Requested Using</span>
                                                        </div>
                                                        <canvas ng-switch-when="false" class="chart chart-doughnut"
                                                                chart-data="request_using[global_filter].data"
                                                                chart-labels="request_using.labels"
                                                                chart-colors="colors"
                                                                height="130">
                                                        </canvas>
                                                        <canvas ng-switch-when="true" class="chart chart-doughnut"
                                                                chart-data="request_using.data"
                                                                chart-labels="request_using.labels"
                                                                chart-colors="colors"
                                                                height="130">
                                                        </canvas>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div vertilize-container class="row full-row">
                                       <!-- <div class="col-sm-4">
                                                <div vertilize>
                                                    <div class="card card-news shadowed" ng-switch="date_filter">
                                                        <div class="header">
                                                            <span>Most Active Residents</span>
                                                        </div>
                                                        <ul class="user-list">
                                                            <div ng-switch-when="false">
                                                                <li class="user-list__item"
                                                                    ng-repeat="resident in filter_residents | filter:filterResidents | orderBy:resident_sort | limitTo: 5 as filteredResidents">
                                                                    <img src="@{{ resident.avatar }}" class="img-circle"
                                                                         width="25"/> @{{ resident.first_name + ' ' +
                                                                    resident.last_name }}
                                                                    <strong>@{{ resident[resident_filter] }}</strong>
                                                                </li>
                                                                <li class="user-list__item"
                                                                    ng-if="filteredResidents == 0">
                                                                    @{{ resident_filter == 'today' ? 'There are no
                                                                    requests today.' : '' }}
                                                                    @{{ resident_filter == 'weekly' ? 'There are no
                                                                    requests this week.' : '' }}
                                                                    @{{ resident_filter == 'monthly' ? 'There are no
                                                                    requests this month.' : '' }}
                                                                </li>
                                                            </div>
                                                            <div ng-switch-when="true">
                                                                <li class="user-list__item"
                                                                    ng-repeat="resident in filter_residents | orderBy: '-request_count' | limitTo: 5 as filteredResidents">
                                                                    <img src="@{{ resident.avatar }}" class="img-circle"
                                                                         width="25"/> @{{ resident.first_name + ' ' +
                                                                    resident.last_name }}
                                                                    <strong>@{{ resident.request_count }}</strong>
                                                                </li>
                                                                <div ng-if="filteredResidents == 0">There are no
                                                                    requests.
                                                                </div>
                                                            </div>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div> -->
                                            <div class="col-sm-4">
                                                <div vertilize>
                                                    <div class="card card-news shadowed" ng-switch="date_filter">
                                                        <div class="header">
                                                            <span>Most Active Concierges</span>
                                                        </div>
                                                        <ul class="user-list">
                                                            <div ng-switch-when="false">
                                                                <li class="user-list__item"
                                                                    ng-repeat="concierge in filter_concierges | filter:filterConcierges | orderBy:concierge_sort | limitTo: 5 as filteredConcierges">
                                                                    <img class="img-circle"
                                                                         src="@{{ concierge.avatar }}" width="25"/> @{{
                                                                    concierge.first_name + ' ' + concierge.last_name }}
                                                                    <strong>@{{ concierge['filter_' +
                                                                        concierge_filter].length }}</strong>
                                                                </li>
                                                                <li class="user-list__item"
                                                                    ng-if="filteredConcierges == 0">
                                                                    @{{ concierge_filter == 'today' ? 'There are no
                                                                    requests today.' : '' }}
                                                                    @{{ concierge_filter == 'weekly' ? 'There are no
                                                                    requests this week.' : '' }}
                                                                    @{{ concierge_filter == 'monthly' ? 'There are no
                                                                    requests this month.' : '' }}
                                                                </li>
                                                            </div>
                                                            <div ng-switch-when="true">
                                                                <li class="user-list__item"
                                                                    ng-repeat="concierge in filter_concierges | filter:filterConciergesAlter | orderBy:'-requests' | limitTo: 5 as filteredConcierges">
                                                                    <img class="img-circle"
                                                                         src="@{{ concierge.avatar }}" width="25"/> @{{
                                                                    concierge.first_name }} @{{ concierge.last_name }}
                                                                    <strong>@{{ concierge.filter_requests.length
                                                                        }}</strong>
                                                                </li>
                                                                <div ng-if="filteredConcierges == 0">There are no
                                                                    requests.
                                                                </div>
                                                            </div>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                    <!--    <div class="col-sm-4">
                                                <div vertilize>
                                                    <div class="card card-news shadowed" ng-switch="date_filter">
                                                        <div class="header">
                                                            <span>Top Vendors</span>
                                                        </div>
                                                        <ul class="rating-list">
                                                            <div ng-switch-when="false">
                                                                <li ng-repeat="directory in filter_directories | filter:filterDirectories | orderBy:directory_sort | limitTo: 5 as filteredDirectories track by $index">
                                                                    <span class="rating-round">@{{ $index + 1 }}</span>
                                                                    @{{ directory.name }}
                                                                    <strong>@{{ directory['filter_' +
                                                                        directory_filter].length }}</strong>
                                                                </li>
                                                                <div ng-if="filteredDirectories == 0">
                                                                    @{{ directory_filter == 'today' ? 'There are no
                                                                    requests today.' : '' }}
                                                                    @{{ directory_filter == 'weekly' ? 'There are no
                                                                    requests this week.' : '' }}
                                                                    @{{ directory_filter == 'monthly' ? 'There are no
                                                                    requests this month.' : '' }}
                                                                </div>
                                                            </div>
                                                            <div ng-switch-when="true">
                                                                <li ng-repeat="directory in filter_directories | filter:filterDirectoriesAlter | orderBy:'-filter_requests' | limitTo: 5 as filteredDirectories">
                                                                    <span class="rating-round">@{{ $index + 1 }}</span>
                                                                    @{{ directory.name }} <strong>@{{
                                                                        directory.filter_requests.length }}</strong>
                                                                </li>
                                                                <div ng-if="filteredDirectories == 0">There are no
                                                                    requests.
                                                                </div>
                                                            </div>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>      -->
                                        </div>
                                        <div vertilize-container class="row full-row">
                                        <!-- <div class="col-sm-4">
                                                <div vertilize>
                                                    <div class="card card-news shadowed">
                                                        <div class="header">
                                                            <span>Property Rating</span>
                                                        </div>
                                                        <ul class="rating-list">
                                                            <li ng-repeat="filter_venue in filter_venues | filter: {'rating' : ''} | orderBy: '-rating'"
                                                                ng-if="!venue">
                                                                <span class="rating-round">@{{ filter_venue.rating }}</span>
                                                                @{{ filter_venue.name }}
                                                            </li>
                                                        </ul>
                                                        <ul class="list-unstyled">
                                                            <li ng-repeat="filter_venue in filter_venues | filter: {'rating' : ''} | orderBy: '-rating'"
                                                                ng-if="venue">
                                                                <div class="top-label__wrapper">
                                                                    <div class="top-label">
                                                                        <h5>@{{ filter_venue.rating }}</h5>
                                                                    </div>
                                                                </div>
                                                            </li>
                                                        </ul>
                                                        <center ng-if="venue && !filter_venues[0].rating">There is no
                                                            rating.
                                                        </center>
                                                    </div>
                                                </div>
                                            </div> -->
                                            <div class="col-sm-4">
                                                <div vertilize>
                                                    <div class="card card-news shadowed" ng-switch="date_filter">
                                                        <div class="header">
                                                            <span>Most Active Property</span>
                                                        </div>
                                                        <ul class="rating-list">
                                                            <div ng-switch-when="false">
                                                                <li class="item"
                                                                    ng-repeat="filter_venue in filter_venues | filter:filterVenues | orderBy:venue_sort | limitTo: 5 as filteredVenues track by $index">
                                                                    <span class="rating-round grey">@{{ $index + 1 }}</span>
                                                                    @{{ filter_venue.name }}
                                                                    <strong>@{{ filter_venue[venue_filter] }}</strong>
                                                                </li>
                                                                <li class="item" ng-if="filteredVenues == 0">
                                                                    @{{ venue_filter == 'today' ? 'There are no requests
                                                                    today.' : '' }}
                                                                    @{{ venue_filter == 'weekly' ? 'There are no
                                                                    requests this week.' : '' }}
                                                                    @{{ venue_filter == 'monthly' ? 'There are no
                                                                    requests this month.' : '' }}
                                                                </li>
                                                            </div>
                                                            <div ng-switch-when="true">
                                                                <li class="item"
                                                                    ng-repeat="filter_venue in filter_venues | filter:filterVenues | orderBy:'-request_count' | limitTo: 5 as filteredVenues track by $index">
                                                                    <span class="rating-round grey">@{{ $index + 1 }}</span>
                                                                    @{{ filter_venue.name }} <strong>@{{
                                                                        filter_venue.request_count }}</strong>
                                                                </li>
                                                                <div ng-if="filteredVenues == 0">There are no
                                                                    requests.
                                                                </div>
                                                            </div>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div><!--./col-sm-4 -->
                                            <div class="col-sm-4">
                                                <div vertilize>
                                                    <div class="card card-news shadowed" ng-switch="date_filter">
                                                        <div class="header">
                                                            <span>Deleted Accounts</span>
                                                        </div>
                                                        <ul class="rating-list" ng-switch-when="false">
                                                            <li ng-repeat="resident in unactive_residents[global_filter] | limitTo: 5 as unactiveResidents">
                                                                <img class="img-circle" src="@{{ resident.avatar }}"
                                                                     width="25"/> @{{ resident.first_name + ' ' +
                                                                resident.last_name }}
                                                            </li>
                                                            <p ng-show="!unactiveResidents.length">No deleted accounts
                                                                recently</p>
                                                        </ul>
                                                        <ul class="rating-list" ng-switch-when="true">
                                                            <li ng-repeat="resident in unactive_residents | limitTo: 5 as unactiveResidents">
                                                                <img class="img-circle" src="@{{ resident.avatar }}"
                                                                     width="25"/> @{{ resident.first_name + ' ' +
                                                                resident.last_name }}
                                                            </li>
                                                            <p ng-show="!unactiveResidents.length">No deleted accounts
                                                                recently</p>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div><!--./col-sm-4 -->
                                        </div>

                                    </div><!--./col-sm-9 -->
                                </div>
                                <div class="col-xs-12 col-sm-12" ng-if="requests_total == 0">
                                    <h5>There are no requests.</h5>
                                    <br>
                                </div>
                                <div class="row">
                                    <div class="col-xs-12 col-sm-12">
                                        <div vertilize-container class="row full-row">
                                            <div class="col-sm-4">
                                                <div vertilize>
                                                    <div class="card card-news shadowed" ng-switch="date_filter">
                                                        <div class="header">
                                                            <span>Longest Sessions</span>
                                                        </div>
                                                        @{{ filter_venue }}
                                                        <ul class="rating-list" ng-switch-when="false">
                                                            <li ng-repeat="session in longest_sessions[global_filter] | filter: { property_id: venue } | orderBy: '-duration' | limitTo: 5 as longestSessions">
                                                                <img class="img-circle" src="@{{ session.user.avatar }}"
                                                                     width="25"/> @{{ session.user.first_name + ' ' +
                                                                session.user.last_name + ' - ' + session.duration }}
                                                            </li>
                                                            <p ng-show="!longestSessions.length">No sessions
                                                                recently</p>
                                                        </ul>
                                                        <ul class="rating-list" ng-switch-when="true">
                                                            <li ng-repeat="session in longest_sessions | filter: { property_id: venue } | orderBy: '-duration' | limitTo: 5 as longestSessions">
                                                                <img class="img-circle" src="@{{ session.user.avatar }}"
                                                                     width="25"/> @{{ session.user.first_name + ' ' +
                                                                session.user.last_name + ' - ' + session.duration }}
                                                            </li>
                                                            <p ng-show="!longestSessions.length">No sessions
                                                                recently</p>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div><!--./col-sm-3 -->
                                            <div class="col-sm-4">
                                                <div vertilize>
                                                    <div class="card card-news shadowed" ng-switch="date_filter">
                                                        <div class="header">
                                                            <span>Avg Duration Of Session</span>
                                                        </div>
                                                        <ul class="rating-list" ng-switch-when="false">
                                                            <h1 class="text-center" style="color: #99244A">@{{
                                                                avg_time[global_filter] }}</h1>
                                                        </ul>
                                                        <ul class="rating-list" ng-switch-when="true">
                                                            <h1 class="text-center" style="color: #99244A">@{{ avg_time
                                                                }}</h1>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div><!--./col-sm-3 -->
                                            <div class="col-sm-4">
                                                <div vertilize>
                                                    <div class="card card-news shadowed" ng-switch="date_filter">
                                                        <div class="header">
                                                            <span>Device Using</span>
                                                        </div>
                                                        <canvas ng-if="checkDevices(filter_devices[global_filter].data)"
                                                                ng-switch-when="false" class="chart chart-pie"
                                                                chart-data="filter_devices[global_filter].data"
                                                                chart-labels="filter_devices[global_filter].labels"
                                                                chart-colors="colors"
                                                                height="130">
                                                        </canvas>
                                                        <p ng-if="!date_filter && !checkDevices(filter_devices[global_filter].data)">
                                                            No devices used recently</p>
                                                        <canvas ng-if="checkDevices(filter_devices.data)"
                                                                ng-switch-when="true" class="chart chart-pie"
                                                                chart-data="filter_devices.data"
                                                                chart-labels="filter_devices.labels"
                                                                chart-colors="colors"
                                                                height="130">
                                                        </canvas>
                                                        <p ng-if="date_filter && !checkDevices(filter_devices.data)">No
                                                            devices used recently</p>
                                                    </div>
                                                </div>
                                            </div><!--./col-sm-3 --><!--./col-sm-3 -->
                                        </div>
                                    </div><!--./col-sm-9 -->
                                </div>
                                <div class="row">
                                    <div class="col-xs-4 col-sm-4">
                                        <div vertilize-container class="row">
                                            <div class="col-sm-12">
                                                <div vertilize>
                                                    <div class="card card-news shadowed" ng-switch="date_filter">
                                                        <div class="header">
                                                            <span>Most Visited Inner Pages</span>
                                                        </div>
                                                        <ul class="rating-list animate-show-hide" ng-switch-when="false">
                                                            <li ng-repeat="page in page_views[global_filter] | filter: { property_id: venue } | orderBy: '-total_visits' | limitTo:limit as pageViews track by $index">
                                                                <span class="rating-round grey">@{{ $index + 1 }}</span>
                                                                @{{ page.title + ' - ' + page.total_visits + ' (by ' + page.users + ' users)' }}
                                                            </li>
                                                            <div class="btn btn-small btn-block mt-s--m" ng-show="limit == 10 && pageViews.length" ng-click="limit = page_views[global_filter].length">show more</div>
                                                            <div class="btn btn-small btn-block mt-s--m" ng-show="limit == page_views[global_filter].length && pageViews.length" ng-click="limit = 10">show less</div>

                                                            <p ng-show="!pageViews.length">No page views recently</p>
                                                        </ul>
                                                        <ul class="rating-list" ng-switch-when="true">
                                                            <li ng-repeat="page in page_views | filter: { property_id: venue } | orderBy: '-total_visits' | limitTo:limit as pageViews track by $index">
                                                                <span class="rating-round grey">@{{ $index + 1 }}</span>
                                                                @{{ page.title + ' - ' + page.total_visits + ' (by ' + page.users + ' users)' }}
                                                            </li>
                                                            <div class="btn btn-small btn-block mt-s--m" ng-show="limit == 10 && pageViews.length" ng-click="limit = page_views[global_filter].length">show more</div>
                                                            <div class="btn btn-small btn-block mt-s--m" ng-show="limit == page_views[global_filter].length && pageViews.length" ng-click="limit = 10">show less</div>
                                                            <p ng-show="!pageViews.length">No page views recently</p>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div><!--./container-fluid-->
    </div><!--./content-->
    @include('admin.partials.request_modal')
    @include('admin.partials.task.create_modal')
    @include('admin.partials.task.edit_modal')
    @include('admin.partials.task.delete_modal')
@endsection

@section('style')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.css">
@endsection

@section('script')
    <script type="text/javascript">
        angular.module('luxury-concierge', [
            {!! (Auth::user()->hasRole('virtual_concierge') || Auth::user()->hasRole('onsite_concierge')) ? "'requests', 'weather', 'ngAnimate', 'vsGoogleAutocomplete', 'textAngular', 'angularUtils.directives.dirPagination', 'ngFileUpload'," : "'AngularPrint','statistics', 'chart.js'," !!}
                'user',
            'socket',
            'notes',
            'liveChat',
            'tasks',
            'angular.vertilize',
            'modal',
            'ui.dateTimeInput',
            'ui.bootstrap.datetimepicker',
            'uiSwitch'
        ]);
        new WOW().init();
    </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/tasks.js') }}"></script>
    <script type="text/javascript" src="{{ elixir('assets/js/controllers/notes.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="{{ elixir('assets/js/controllers/modal.js') }}"></script>
    <script type="text/javascript" src="/assets/js/dateTimeInput.js"></script>
    <script type="text/javascript" src="/assets/js/angular-vertilize.min.js"></script>
    <script type="text/javascript" src="/assets/js/datetimepicker.js"></script>
    <script type="text/javascript" src="/assets/js/datetimepicker.templates.js"></script>
    @if(Auth::user()->hasRole('admin'))
        <script type="text/javascript"
                src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
        <script type="text/javascript" src="/assets/js/angular-chart.min.js"></script>
        <script type="text/javascript" src="/assets/js/angularPrint.js"></script>
        <script type="text/javascript" src="{{ elixir('assets/js/controllers/statistics.js') }}"></script>
    @else
        <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/dirPagination.js"></script>
        <script type="text/javascript" src="{{ elixir('assets/js/controllers/weather.js') }}"></script>
        <script type="text/javascript" src="{{ elixir('assets/js/controllers/requests.js') }}"></script>
    @endif
@endsection