@extends('app_client')

@section('title', 'Request '.$request->id.' | '.$property->name)

@section('content')
  <div class="container-fluid" ng-controller="RequestCtlr" ng-init="get_client_request({{ $request->id }});">
    <div class="row" ng-cloak>

      <div class="col-md-7 col-sm-12">
        <div class="page-header">
          <div class="back-navigation">
            <a href="{{ url('requests') }}" class="btn-back">Back</a>
          </div>
          <div class="header">
            <span class="icon icon-layers_windows_multiple_copy_duplicate"></span>
            <h1 class="header-title">Request ID <span class="regular wow animated fadeIn">{{ $request->id }}</span></h1>
          </div>
        </div>
        <div class="requests-item">
          <div class="requests-item-info">
            @if($request->category)
              <div class="request-category-mobile">
                <ul class="tooltip-list list-unstyled">
                  <li data-side="top" tabindex="0"><i class="icon-folder_files_storage_open"></i>Category: {{ $request->category }}</li>
                </ul>
              </div>
            @endif
            <h5 class="request-category">
              @if($request->category)
                <span class="request-category"> {{ $request->category }}</span>
              @endif
              @if($request->date)
                <span class="request-time nowrap"> <i class="icon-calendar_date_schedule_event_month_year_3"></i> {{ date('F d, Y h:i A', strtotime($request->date)) }}</span>
              @endif
              @if($request->concierge)
                <span class="request-concierge"> <i class="icon-user_profile_avatar_man_boy_silhoette"></i>Concierge: <a href="{{ url('/concierges/'.$request->concierge->id) }}">{{ $request->concierge->first_name }} {{ $request->concierge->last_name }}</a> </span>
              @endif
              @if($request->request_type)
                <span class="request-concierge nowrap"><i class="icon-layers_windows_multiple_copy_duplicate"></i>{{ 'Request Type: '.$request->request_type->name }}</span>
              @endif
            </h5>
            <p class="title">{{ $request->description }}</p>
            @if($request->amenity)
              <div class="media participants">
                <div class="media-left media-middle participants-icon">
                  <span class="icon-amenities"></span>
                </div>
                <div class="media-body media-middle participants-text">{{ $request->amenity }}</div>
              </div>
            @endif
            @if($request->destination)
              <div class="media participants">
                <div class="media-left media-middle participants-icon">
                  <span class="icon-camper"></span>
                </div>
                <div class="media-body media-middle participants-text">{{ $request->destination }}</div>
              </div>
            @endif
            @if($request->participants)
              <div class="media participants">
                <div class="media-left media-middle participants-icon">
                  <span class="icon-collective_group_masses_friends_company_silhoette"></span>
                </div>
                <div class="media-body media-middle participants-text">
                  {{ $request->participants }} Participants
                </div>
              </div>
            @endif
            @if($request->vehicle)
              <div class="media participants">
                <div class="media-left media-middle participants-icon">
                  <span class="icon-sign_car_passenger"></span>
                </div>
                <div class="media-body media-middle participants-text">
                  {{ $request->vehicle }}
                </div>
              </div>
            @endif
            <div class="request-status-wrapper">
              <div class="request-concierge">
                <div class="media">
                  <div class="media-left media-middle client-image">
                    <img src="{{ asset(Auth::user()->avatar) }}" class="lazy concierge-profile-avatar" alt="" />
                  </div>
                  <div class="media-body">
                    <span>Requested by:</span>
                    <span ng-show="sinceTime(request.created_at)" ng-cloak>{{ Auth::user()->first_name }} {{ Auth::user()->last_name }}</span>
                    <span ng-show="!sinceTime(request.created_at)" ng-cloak>{{ Auth::user()->first_name }} {{ Auth::user()->last_name }}</span>
                  </div>
                </div>
              </div>
              <span class="request-status">
                @if($request->concierge)
                  <div ng-if="request.status">
                    <span class="status-icon solved icon-check_complete_alright_ok_tick_test_circle_button"></span>
                    <h5>Solved</h5>
                    <form ng-submit="ticket_client(request, 0, {{ Auth::user()->id }}, {{ $request->concierge->id }})">
                      <button class="btn-small">Reopen request</button>
                    </form>
                  </div>
                @endif
                <div ng-if="request.status == false">
                  <span class="status-icon pending icon-question_ask_help_support_circle_button"></span>
                  <h5>Pending</h5>
                </div>
              </span><!--./request-status -->
            </div><!--./request-status-wrapper -->
            @if($request->concierge && $request->concierge->rateable)
              <hr>
              <form>
                <div class="request-rating">
                  <h4>Rate your concierge</h4>
                  <div class="rating">
                    <input type="radio" ng-model="request.rating" name="test" ng-value="1" id="one"/>
                    <label for="one"><i class="fa fa-star"></i></label>
                    <input type="radio" ng-model="request.rating" name="test" ng-value="2" id="two"/>
                    <label for="two"><i class="fa fa-star"></i></label>
                    <input type="radio" ng-model="request.rating" name="test" ng-value="3" id="three"/>
                    <label for="three"><i class="fa fa-star"></i></label>
                    <input type="radio" ng-model="request.rating" name="test" ng-value="4" id="four"/>
                    <label for="four"><i class="fa fa-star"></i></label>
                    <input type="radio" ng-model="request.rating" name="test" ng-value="5" id="five"/>
                    <label for="five"><i class="fa fa-star"></i></label>
                  </div>
                  <div ng-if="request.rating" class="form-group">
                    <label for="rating-comment">Add your comment</label>
                    <textarea class="form-control" id="rating-comment" ng-model="request.comment"></textarea>
                    <button class="btn right" ng-click="rating(request)">Submit</button>
                  </div>
                </div>
              </form>
            @endif
          </div><!--./requests-item-info -->
        </div><!--./request-item -->

        @if($request->directory)
          <div class="panel directory request-panel wow animated fadeInUp" data-wow-delay="100ms" data-wow-duration="400ms">
            <div class="panel-heading">
              <h1 class="title"><a href="{{ url('/directories/'.$request->directory->slug) }}">{{ $request->directory->name }}</a></h1>
              <h3 class="subtitle">{{ $request->directory->category }}</h3>
            </div>
            <div class="panel-content">
              <div class="directory-info">
                <ul class="directory-info-list list-unstyled">
                  @if($request->directory->hyperlink)
                    <li>
                      <span class="icon icon-planet_earth_globe_world_worldwide_space_cosmos_science_solar_system"></span>
                      <a href="{{ url($request->directory->hyperlink) }}" target="_blank">{{ website($request->directory->hyperlink) }}</a>
                    </li>
                  @endif
                  @if($request->directory->address)
                    <li>
                      <span class="icon icon-map_pin_locate_location_marker_gps"></span>{{ ' '.$request->directory->address }}
                    </li>
                  @endif
                </ul>
              </div>
            </div>
          </div>
        @endif

        @if($request->perk)
          <div class="req-perk">
            <div class="panel directory request-panel wow animated fadeInUp" data-wow-delay="100ms" data-wow-duration="400ms">
              <div class="perk-tag">
                <div class="tag">
                  <i class="icon-price_tag_finance_product_info_details"></i>Residents Perk
                </div>
              </div>
              <div class="panel-heading">
                @if($request->perk->directory)
                  <h1 class="title"><a href="{{ url('/directories/'.$request->perk->directory->slug) }}">{{ $request->perk->directory->name }}</a></h1>
                @else
                  <h1 class="title">{{ $request->perk->custom_directory }}</a></h1>
                @endif
                <h3 class="subtitle">{{ $request->perk->categories->last()->name }}</h3>
              </div>
              @if($request->perk->directory)
                <div class="panel-content">
                  <div class="directory-info">
                    <ul class="directory-info-list list-unstyled">
                      @if($request->perk->directory->hyperlink)
                        <li>
                          <span class="icon icon-planet_earth_globe_world_worldwide_space_cosmos_science_solar_system"></span>
                          <a href="{{ url($request->perk->directory->hyperlink) }}" target="_blank">{{ website($request->perk->directory->hyperlink) }}</a>
                        </li>
                      @endif
                      <li>
                      <span class="icon icon-map_pin_locate_location_marker_gps"></span>
                        {{ $request->perk->directory->address }}
                      </li>
                    </ul>
                  </div>
                </div>
              @endif
            </div>
          </div>
        @endif

        @if($request->event)
          <div class="panel event request-panel wow animated fadeInUp" data-wow-delay="100ms" data-wow-duration="400ms">
            <div class="panel-heading clearfix">
              <div class="media">
                <div class="media-left media middle">
                  <div class="event-date">
                    <h3 class="day">{{ date('d', strtotime($request->date)) }}</h3>
                    <span class="month uppercase">{{ date('M', strtotime($request->date)) }}</span>
                  </div>
                </div>
                <div class="media-body">
                  <h1 class="title"><a href="{{ url('events/'.$request->event->slug.'/'.date('Y-m-d', strtotime($request->date))) }}">{{ $request->event->title }}</a></h1>
                  <h3 class="subtitle">{{ $request->event->category->name }}</h3>
                </div>
              </div>
            </div>
          </div>
        @endif

        @if($request->article)
          <div class="news-list request-panel slide-top wow animated fadeInUp" data-wow-delay="100ms" data-wow-duration="400ms">
            <div class="news-list-item">
              <div class="row">
                <div class="col-sm-12">
                  @if($request->article->images->count())
                    <div class="news-list-item-image lazy" style="background-image:url(/assets/images/articles/{{ $request->article->images->first()->hyperlink }})"></div>
                  @else
                    <div class="news-list-item-image lazy" style="background-image:url(/assets/images/default-profile.png)"></div>
                  @endif
                </div>
                <div class="col-sm-12">
                  <div class="news-list-item-content">
                    <span class="time">{{ date('M d', strtotime($request->date)) }}</span>
                    <a class="title no-open" href="{{ url('news/'.$request->article->article_category->slug.'/'.$request->article->slug) }}">{{ $request->article->title }}</a>
                    {!! strlen($request->article->content) < 200 ? $request->article->content : substr($request->article->content, 0, 200).' ...' !!}
                    <div class="controls">
                      <a href="{{ url('news/'.$request->article->article_category->slug.'/'.$request->article->slug) }}" class="btn-medium bg-accent">Read more</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        @endif

        @if($request->recommendation)
          <div class="req-recommendation">
            <div class="news-list request-panel slide-top wow animated fadeInUp" data-wow-delay="100ms" data-wow-duration="400ms">
              <div class="req-recommendation-tag">
                <div class="tag">
                  <i class="icon-hotel_service_employee_manager_concierge"></i>Recommendation
                </div>
              </div>
              <div class="news-list-item">
                <div class="row">
                  <div class="col-sm-12">
                    <div class="news-list-item-image lazy" style="background-image:url(/assets/images/recommendations/{{ $request->recommendation->image }})"></div>
                  </div>
                  <div class="col-sm-12">
                    <div class="news-list-item-content">
                      <a class="title" href="{{ url('recommendations/'.$request->recommendation->slug) }}">{{ $request->recommendation->title }}</a>
                      <span class="time">{{ $request->recommendation->subtitle }}</span>
                      {!! $request->recommendation->description !!}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        @endif

      </div><!--./col-sm-6 -->

      <div class="col-md-5 col-sm-12">
        <div class="page-header messages">
          <div class="header">
            <span class="icon icon-message_chat_bubble_comment_talk_conversation"></span>
            <h1 class="header-title">Your Messages</h1>
          </div>
        </div>
        <div class="conversation-panel scroll-bottom" scroll-bottom="request.messages" ng-cloak>
          <div class="conversation-panel-inner chat-wrap">
            <div ng-repeat="message in request.messages track by $index">
              <div class="message-wrapper clearfix" ng-class="{true: 'me', false: 'you'}[message.user.id == {{ Auth::user()->id }}]">
                <span class="avatar">
                  <img ng-src="/@{{ message.user.avatar }}" class="lazy concierge-profile-avatar" alt=""/>
                  @{{ message.user.first_name }}
                </span>
                <div class="message">
                  <div class="bubble">
                    <p ng-bind-html="message.text | parseUrl | linkify">
                      @{{ message.text | parseUrl}}
                    </p>
                  </div>
                  <div class="time"><span>@{{ message.created_at | amDateFormat:'MM/DD/YYYY HH:mm A'}}</span></div>
                </div>
              </div>
            </div>
            <div class="message-wrapper me clearfix" ng-show="fileUploadProgress">
              <div class="message">
                <div class="bubble">
                  <span class="file-upload-loading"><img src="/assets/images/loading-primary.svg" width="32px" /></span>
                </div>
                <div class="time"><span>@{{ message.created_at | amDateFormat:'MM/DD/YYYY HH:mm A'}}</span></div>
              </div>
            </div>
          </div>
          @if($request->concierge_id)
            <div class="form-group">
              <textarea class="form-control message-box" ng-model="message.text"
                ng-keydown="$event.which === 13 && sendMessageRequestConcierge({{ $request->concierge_id }}, {{ Auth::user() }}, {{ $request->id }})"
                required elastic></textarea>
              <button type="button" class="btn btn-small" name="button" ngf-select="client_chatFileUpload($file, {{ $request->concierge_id }}, {{ Auth::user() }}, {{ $request->id }})" ngf-max-size="2MB" ngf-resize="{width: 600, height: 600}">Add attachment</button>
            </div>
            <button class="btn full-width uppercase" ng-click="sendMessageRequestConcierge({{ $request->concierge_id }}, {{ Auth::user() }}, {{ $request->id }})">Submit new message</button>
          @else
            <div class="form-group">
              <textarea class="form-control message-box" ng-model="message.text"
                ng-keydown="$event.which === 13 && sendMessageRequestUnassigned({{ Auth::user() }}, {{ $request->id }})"
                required elastic></textarea>
              <button type="button" class="btn btn-small" name="button" ngf-select="client_chatFileUploadUnasigned($file, {{ Auth::user() }}, {{ $request->id }})" ngf-max-size="2MB" ngf-resize="{width: 600, height: 600}">Add attachment</button>
            </div>
            <button class="btn full-width uppercase" ng-click="sendMessageRequestUnassigned({{ Auth::user() }}, {{ $request->id }})">Submit new message</button>
          @endif
        </div>
      </div>

    </div>
  </div>
@endsection

@section('script')
  <script src="//cdn.rawgit.com/AngularClass/angular-websocket/v2.0.0/dist/angular-websocket.min.js"></script>
  <script type="text/javascript">
    angular.module('luxury-concierge', [
      'ui.dateTimeInput',
      'ui.bootstrap.datetimepicker',
      'ngFileUpload',
      '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="{{ 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