@extends('app_admin')

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

@section('content')
    <div class="container-fluid" ng-controller="RequestCtlr" ng-init="get_items(); get_categories();">
        <div class="page-header" ng-cloak>
            <div class="header left">
                <span class="icon icon-layers_windows_multiple_copy_duplicate"></span>
                <h1 class="header-title">Requests</h1>
            </div>
            <div class="sort" ng-show="requests.length">
                <div class="search-field">
                    <input type="search" placeholder="Search here..." ng-model="filterRequests"/>
                    <div class="search-result" ng-if="filterRequests" ng-cloak>@{{ filtered.length }} results found
                    </div>
                </div>
            </div>
        </div>
        <div class="row" ng-cloak>
            <div class="col-sm-12 requests" ng-show="requests.length">
                <div class="requests" ng-show="requests.length">
                    <div class="requests-filter filter-group" ng-init="get_categories()" ng-cloak>
                        <div class="row" ng-cloak>
                            <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($venues->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($venues->filter(function($item) { return !$item->private; }) as $venue)
                                                <option value="{{ $venue->id }}">{{ $venue->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            @endif
                            <div class="col-xs-6 col-sm-3">
                                <div class="form-group select">
                                    <select ng-model="sortByDate" ng-init="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>
                                    </select>
                                </div>
                            </div>
                            <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>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="requests-item"
                         dir-paginate="request in filtered = (requests | filter: { status: status } | filter: { archived: archived } |  filter: { venue_id: filter_venue } | filter: {client: {id: filter_client}} | filter: { request_type_id: requestType } | filter:filterRequests | orderBy: sortByDate) | itemsPerPage: 50">
                        <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">
                                <li>
                                    <span class="icon icon-map_pin_locate_location_marker_gps"></span>
                                    <h5 class="info-text">@{{ request.venue.name }}</h5>
                                </li>
                                <li>
                                    <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.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-if="request.concierge_id">
                                    <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-if="!request.concierge_id">
                                    @if(Auth::user()->hasRole('virtual_concierge') || Auth::user()->hasRole('onsite_concierge'))
                                        <button class="btn btn-small" ng-click="assign_to_me(request.id)">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="filtered.length == 0">There are no requests.</h5>
            </div>
            <div class="col-sm-12" ng-if="filtered.length == 0 && request.length"><br/><h5>{!! $empty !!}</h5></div>
        </div>
    </div>
@endsection

@section('script')
    <script type="text/javascript">
        angular.module('luxury-concierge', [
            'angularUtils.directives.dirPagination',
            'modal',
            'requests',
            'user',
            'socket',
            'liveChat',
            'ngFileUpload',
            'uiSwitch'
        ]);
    </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/requests.js') }}"></script>
    <script type="text/javascript" src="/assets/js/moment.min.js"></script>
    <script type="text/javascript" src="/assets/js/ng-file-upload-shim.min.js"></script>
    <script type="text/javascript" src="/assets/js/ng-file-upload.min.js"></script>
    <script type="text/javascript" src="/assets/js/angular-moment.min.js"></script>
    <script type="text/javascript" src="/assets/js/dirPagination.js"></script>
    <script type="text/javascript" src="{{ elixir('assets/js/controllers/modal.js') }}"></script>
    <script type="text/javascript" src="{{ elixir('assets/js/controllers/user.js') }}"></script>
    @if(session()->has('success'))
        <script type="text/javascript">
            toastr.success("{{ session()->get('success') }}");
        </script>
    @endif
@endsection