@extends('app_client')

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

@section('content')
  <div class="container-fluid request-wrapper" ng-controller="RequestCtlr" ng-init="get_items()">
    <div class="page-header">
      <div class="header left">
        <span class="icon icon-layers_windows_multiple_copy_duplicate"></span>
        <h1 class="header-title">Your Requests</h1>
      </div>
      <div class="sort" ng-show="requests.length">
        <div class="search-field" ng-cloak>
          <input type="search" placeholder="Search here ..." ng-model="filterRequests"/>
        </div>
      </div>
      <div class="clear"></div>
    </div>
    <div class="requests" ng-cloak>
      <div class="requests-filter filter-group" ng-show="requests.length">
        <div class="row">
          <div class="col-xs-6 col-sm-4">
            <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>
          <div class="col-xs-6 col-sm-4">
            <div class="form-group select">
              <select ng-model="sortByDate" ng-init="sortByDate = ''">
                <option value="">Sort By</option>
                <option ng-value="'-created_at'">Newest</option>
                <option ng-value="'created_at'">Oldest</option>
              </select>
            </div>
          </div>
          <div class="col-xs-12 col-sm-4">
            <div class="form-group select">
              <select ng-model="requestTypeFilter" ng-init="requestTypeFilter = ''">
                <option value="" selected>Request Type</option>
                @foreach($property->request_type as $request_type)
                  <option ng-value="{{ $request_type->id }}">{{ $request_type->name }}</option>
                @endforeach
              </select>
            </div>
          </div>
        </div>
        <div class="clear"></div>
      </div>
      <div active="activeForm" ng-show="requests.length" class="tabset-two">
        <div class="tabset-two" heading="Requests">
          <div dir-paginate="request in requests | filter: { status: status } | filter: { request_type_id: requestTypeFilter } | filter:filterRequests | filter: { archived: archived }  | orderBy: sortByDate | itemsPerPage: 25 as requestsFiltered" class="requests-item"  ng-cloak>
            <div class="requests-item-info dashboard">
              <div class="requests-item-info-request">
                <div class="media">
                  <div class="media-left media-middle">
                    <span class="admin-request-status">
                      <div ng-if="request.status && !request.archived">
                        <span class="status-icon solved icon-check_complete_alright_ok_tick_test_circle_button" tooltip-placement="top" uib-tooltip="This request is solved"></span>
                      </div>
                      <div ng-if="!request.status && !request.archived">
                        <span class="status-icon pending icon-question_ask_help_support_circle_button" tooltip-placement="top" uib-tooltip="This request is in progress"></span>
                      </div>
                      <div ng-if="request.archived">
                        <span class="status-icon archived icon-delete_close_hide_circle_button" tooltip-placement="top" 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-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>
                  <span class="icon icon-user_profile_avatar_man_boy_silhoette"></span>
                  <h5 class="info-text">Requested by <a href="{{ url('profile') }}">{{ Auth::user()->first_name }} {{ Auth::user()->last_name }}</a></h5>
                </li>
                @if(Auth::user()->unit_number)
                  <li tooltip-placement="top" uib-tooltip="Unit Number">
                    <span class="icon icon-home_house_main_homepage"></span>
                    <h5 class="info-text">{{ Auth::user()->unit_number }}</h5>
                  </li>
                @endif
                <li ng-if="request.concierge">
                  <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>
              </ul>
            </div><!--./requests-item-info -->
            <div class="requests-item-action" ng-if="!request.archived">
              <a href="requests/@{{ request.id }}" class="btn btn-sm buffer" ng-class="{'half-width': request.status == 0, 'btn-sm-block': request.status != 0}">View request</a>
              <a class="btn btn-sm request-cancel half-width no-open" ng-show="!request.concierge && request.status == 0" ng-click="archive_unnasigned(request, 1)"/>Cancel</a>
              <a class="btn btn-sm request-cancel half-width no-open" ng-show="request.concierge && request.status == 0" ng-click="archive(request, 1, request.concierge.id, {{ Auth::user()->id }})"/>Cancel</a>
            </div><!--./pad-10 -->
            <div class="requests-item-action" ng-if="request.archived">
              <a class="btn btn-sm half-width no-open" value="Cancel" ng-show="!request.concierge" ng-click="archive_unnasigned(request, 0)"/>Resubmit</a>
              <a class="btn btn-sm half-width no-open" value="Cancel" ng-show="request.concierge" ng-click="archive(request, 0, request.concierge.id, {{ Auth::user()->id }})"/>Resubmit</a>
              <a class="btn btn-sm request-delete col-red half-width no-open" value="Cancel" ng-click="delete_request(request.id)"/>Delete</a>
            </div><!--./requests-item-action -->
          </div>
          <h5 ng-cloak ng-show="requestsFiltered.length == 0"><p>No requests</p></h5>
          <dir-pagination-controls></dir-pagination-controls>
        </div>
      </div>

      <div class="col-sm-12" style="padding: 0" ng-if="requests.length == 0">
        <h5>{!! $empty !!}</h5>
      </div>
    </div>
  </div>
@endsection

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