@extends('app_client')


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

@section('content')
  <div class="container-fluid" ng-controller="DirectoryCtlr as vm">
    <!-- Header -->
    <div class="page-header">
      <div class="back-navigation">
        <a href="javascript:history.go(-1)" class="btn-back">Back</a>
      </div> <!-- back-navigation -->
      <div class="header">
        <span class="icon icon-label_folder_phone_book_contacts_documents_3 media-middle"></span>
        <h1 class="header-title">Directory / <span class="regular">{{ $directory ? $directory->name : $perk->custom_directory }}</span></h1>
      </div>
    </div>
    <!-- Directory -->
    <div class="row">
      <div class="col-sm-12">
        <div class="panel directory">
          @if($directory)
            <div class="panel-content" ng-init="vm.get_directory({{ $directory->id }})">
              <div class="row">
                <div class="col-sm-12 col-md-6">
                  <!-- Name -->
                  <div class="panel-heading">
                    <h1 class="title">{{ $directory->name }}</h1>
                    <h3 class="subtitle">{{ $directory->categories->last()->name }}</h3>
                  </div><!--./panel-heading -->
                  <!-- Main Info -->
                  <div class="directory-info">
                    <ul class="directory-info-list list-unstyled">
                      <!-- Hyperlink -->
                      @if($directory->hyperlink)
                        <li>
                          <div class="media">
                            <div class="media-left media-top media-fifty text-center">
                              <span class="icon icon-planet_earth_globe_world_worldwide_space_cosmos_science_solar_system nomg nofloat"></span>
                            </div>
                            <div class="media-body">
                              <a href="{{ $directory->hyperlink }}" target="_blank">{{ website($directory->hyperlink) }}</a>
                            </div>
                          </div>
                        </li>
                      @endif
                      <!-- Address -->
                      @if($directory->address)
                        <li>
                          <div class="media">
                            <div class="media-left media-top media-fifty text-center">
                              <span class="icon icon-map_pin_locate_location_marker_gps nomg nofloat"></span>
                            </div>
                            <div class="media-body">
                              {{ $directory->address }}
                            </div>
                          </div>
                        </li>
                      @endif
                      <!-- Phone -->
                      @if($directory->phone && $property->slug == 'lcn')
                        <li class="clearfix">
                          <div class="media">
                            <div class="media-left media-middle media-fifty text-center">
                              <span class="icon icon-phone_iphone_mobile_smartphone_device_contact_call_5 nofloat nomg"></span>
                            </div>
                            <div class="media-body media-middle">
                              {{ $directory->phone }}
                            </div>
                          </div>
                        </li>
                      @endif
                      <!-- Agent -->
                      @if($directory->agent && $property->slug == 'lcn')
                        <li class="clearfix">
                          <div class="directory-agent">
                            <!-- Name -->
                            @if($directory->agent->first_name && $directory->agent->last_name)
                              <div class="media">
                                <div class="media-left media-middle media-fifty text-center">
                                  <span class="icon icon-user_profile_avatar_man_boy_silhoette nofloat nomg"></span>
                                </div>
                                <div class="media-body">
                                  <h5>{{ $directory->agent->first_name.' '.$directory->agent->last_name }}</h5>
                                  @if($directory->agent->position)
                                    <p>{{ $directory->agent->position }}</p>
                                  @endif
                                </div>
                              </div>
                            @endif
                            <!-- Phone -->
                            @if($directory->agent->phone || $directory->agent->mobile_phone)
                              <div class="media">
                                <div class="media-left media-middle media-fifty text-center">
                                  <span class="icon icon-phone_iphone_mobile_smartphone_device_contact_call_5 nofloat nomg"></span>
                                </div>
                                <div class="media-body">
                                  <p>
                                    @if($directory->agent->phone)
                                      <a href="tel:{{ $directory->agent->phone }}">{{ $directory->agent->phone }}</a>
                                    @endif
                                    @if($directory->agent->phone && $directory->agent->mobile_phone)
                                      <span> / </span>
                                    @endif
                                    @if($directory->agent->mobile_phone)
                                      <a href="tel:{{ $directory->agent->mobile_phone }}">{{ $directory->agent->mobile_phone }}</a>
                                    @endif
                                  </p>
                                </div>
                              </div>
                            @endif
                            <!-- Email -->
                            @if($directory->agent->email)
                              <div class="media">
                                <div class="media-left media-middle media-fifty text-center">
                                  <span class="icon icon-mail_email_envelope_message nomg nofloat" style="font-size: 22px;"></span>
                                </div>
                                <div class="media-body">
                                  <p>
                                    <a href="mailto:{{ $directory->agent->email }}">{{ $directory->agent->email }}</a>
                                    @if($directory->agent->alternative_email)
                                      {{ ' / ' }}<a href="mailto:{{ $directory->agent->alternative_email }}">{{ $directory->agent->alternative_email }}</a>
                                    @endif
                                  </p>
                                </div>
                              </div>
                            @endif
                          </div>
                        </li>
                      @endif
                    </ul>
                    <!-- Directory Perks -->
                    @if($directory->perks->filter(function($item) { return $item->active; })->count())
                      <div class="offer">
                        <div class="tag">
                          <i class="icon-price_tag_finance_product_info_details"></i>{{ $property->slug == 'lcn' ? 'Concierge' : 'Resident' }} Perks
                        </div>
                        <!-- Perk -->
                        @foreach($directory->perks->filter(function($item) { return $item->active; }) as $perk)
                          <div class="inner-offer">
                            <div class="media">
                              <!-- Image -->
                              @if($perk->parent->image)
                                <div class="media-left media-middle perk-image">
                                  <img src="/assets/images/perks/{{ $perk->parent->image }}" alt="">
                                </div>
                              @endif
                              <div class="media-body">
                                {!! $perk->description !!}
                              </div>
                            </div>
                          </div>
                        @endforeach
                      </div>
                    @endif
                    <!-- Description -->
                    <div class="description">
                      {!! $directory->info->description !!}
                    </div>
                    <!-- Video -->
                    @if($directory->video)
                      <div class="video">
                        <iframe src="https://www.youtube.com/embed/{{ youtube($directory->video) }}"
                          width="100%"
                          height="360"
                          frameborder="0"
                          allowfullscreen>
                        </iframe>
                      </div>
                    @endif
                    <!-- File -->
                    @if($directory->file)
                      <div class="download-pdf">
                        <div class="download-pdf-content">
                          <span class="icon icon-document_file_oen_write_new_edit_text"></span>
                          <h4 class="light">Attached file</h4>
                          <a class="btn btn-small btn-download right"
                            href="{{ url('/assets/files/'.$directory->file) }}">View file
                          </a>
                        </div>
                      </div>
                    @endif
                  </div><!--./directory-info -->
                </div><!--./col-sm-6 -->
                <div class="col-sm-12 col-md-6">
                  <!-- Map -->
                  @if($directory->lat && $directory->lng)
                    <div id="directory-location-map"></div>
                  @endif
                  <!-- Images -->
                  @if($directory->images->count())
                    <div class="directory-images">
                      <div class="row">
                        @if(strpos(strtolower($_SERVER['HTTP_USER_AGENT']),"iphone"))
                           @if(!strpos(strtolower($_SERVER['HTTP_USER_AGENT']),"safari"))
                             @foreach($directory->images as $key => $image)
                             <div class="col-sm-6">
                               <a class="fancybox-thumb no-open" rel="group-{{ $key }}" data-action="zoom">
                                 <img src="{{ asset('assets/images/directories/'.$image->hyperlink) }}" width="285" />
                               </a>
                             </div>
                             @endforeach
                          @endif
                        @else
                          @foreach($directory->images as $key => $image)
                            @if($key == 0)
                              <div class="col-sm-6">
                                <a class="fancybox-thumb no-open"
                                  rel="group"
                                  href="{{ asset('assets/images/directories/'.$image->hyperlink) }}"
                                  target="_self">
                                  <img src="{{ asset('assets/images/directories/'.$image->hyperlink) }}" alt=""/>
                                </a>
                              </div>
                            @elseif($key == 1)
                              <div class="col-sm-6 fancybox-extra">
                                <a class="fancybox-thumb no-open"
                                  rel="group"
                                  href="{{ asset('assets/images/directories/'.$image->hyperlink) }}"
                                  target="_self">
                                  <img src="{{ asset('assets/images/directories/'.$image->hyperlink) }}" alt=""/>
                                  @if(count($directory->images) > 2)
                                    <div class="fancybox-extra-overlay"></div>
                                    <div class="fancybox-extra-counter"><span>+{{ count($directory->images) - 2 }}</span></div>
                                  @endif
                                </a>
                              </div>
                            @else
                              <div class="hidden">
                                <a class="fancybox-thumb no-open"
                                  rel="group"
                                  href="{{ asset('assets/images/directories/'.$image->hyperlink) }}"
                                  target="_self">
                                  <img src="{{ asset('assets/images/directories/'.$image->hyperlink) }}" alt=""/>
                                </a>
                              </div>
                            @endif
                          @endforeach
                        @endif
                      </div> <!-- row -->
                    </div> <!-- directory images -->
                  @endif
                </div><!--./col-sm-6 -->
              </div><!--./row -->
            </div><!--./panel-content -->
            <!-- Request Button -->
            <div ng-show="vm.directory">
              <hr>
              <div class="controls text-center">
                <button class="btn btn-request btn-sm-block no-open"
                  ng-click="vm.request_directory_modal(vm.directory)">{{ $property->id == 6 ? 'Service Request' : 'Request​' }}
                </button>
              </div>
            </div>
          @else
            <!-- Perk -->
            <div class="panel-content">
              <div class="row">
                <div class="col-sm-6">
                  <!-- Name -->
                  <div class="panel-heading">
                    <h1 class="title">{{ $perk->custom_directory }}</h1>
                    <h3 class="subtitle">{{ $perk->categories->last()->name }}</h3>
                  </div><!--./panel-heading -->
                  <!-- Info -->
                  @if($perk->info->count())
                    <div class="offer">
                      <div class="tag">
                        <i class="icon-price_tag_finance_product_info_details"></i>
                        @if ($property->slug == 'lcn')
                          Concierge Perks
                        @elseif ($property->slug == 'ficlub')
                          Member Perks
                        @else
                          Residents Perks
                        @endif
                      </div>
                      <div class="inner-offer">
                        <div class="perk media">
                          @if($perk->image)
                            <div class="media-left media-middle perk-image">
                              <img src="/assets/images/perks/{{ $perk->image }}" alt="">
                            </div>
                          @endif
                          <div class="media-body">
                            {!! $perk->info->description !!}
                          </div>
                        </div>
                      </div>
                    </div>
                  @endif
                </div>
              </div>
            </div>
            <!-- Request Button -->
            @if($perk && $perk->info->request)
              <hr>
              <div class="controls text-center"
                ng-controller="modalCtlr">
                <button class="btn btn-request btn-sm-block no-open"
                  ng-click="index_modal_perk_request_open({{ $perk->id }})"
                  ng-init="get_index_perks({{ $perk->id }})">{{ $property->id == 6 ? 'Service Request' : 'Request​' }}
                </button>
              </div>
            @endif
          @endif
        </div><!-- panel directory -->
      </div> <!-- col-sm-12 -->
    </div> <!-- row -->
  </div><!-- content fluid -->
  <!-- Modals -->
  @include('client.partials.modal.directory')
  @include('client.partials.modal.perk')
@endsection

@section('script')
  @if($directory && $directory->lat && $directory->lng)
    <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=AIzaSyAok3PHxGwYlbq2AggZ7upd-1ltmBUJCMs"></script>
  @endif
  <script type="text/javascript" src="/assets/js/jquery.fancybox.pack.js"></script>
  <script type="text/javascript" src="/assets/js/jquery.fancybox-thumbs.js"></script>
  <script type="text/javascript" src="/assets/js/mobileImageZoom.js"></script>
  <script type="text/javascript">
    angular.module('luxury-concierge', [
      'angularUtils.directives.dirPagination',
      'ui.dateTimeInput',
      'ui.bootstrap.datetimepicker',
      'ngFileUpload',
      'modal',
      'directories',
      'user',
      'socket',
      'liveChat'
    ]);
  </script>
  <script type="text/javascript" src="/assets/js/ngSticky.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/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/directories.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>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/modal.js') }}"></script>
  @if($directory && $directory->lat && $directory->lng)
    <script type="text/javascript">
      function initMap() {
        var map = new google.maps.Map(document.getElementById('directory-location-map'), {
          zoom: 14,
          center: {
            lat: parseFloat({{ $directory->lat }}),
            lng: parseFloat({{ $directory->lng }})
          }
        });
        marker = new google.maps.Marker({
          map: map,
          draggable: false,
          animation: google.maps.Animation.DROP,
          position: {
            lat: parseFloat({{ $directory->lat }}),
            lng: parseFloat({{ $directory->lng }})
          }
        });
      }
      google.maps.event.addDomListener(window, 'load', initMap);
    </script>
  @endif
  <script type="text/javascript">
    $(document).ready(function() {
      var fancyOptions = {
        prevEffect: 'none',
        nextEffect: 'none',
        helpers: {
          title: {
            type: 'inside'
          },
          buttons: {},
          overlay: {
            css: {
              'background' : 'rgba(28, 27, 35, 0.95)'
            }
          },
          thumbs: {
            width: 50,
            height: 50
          }
        }
      }

      $('.panel a').each(function(key, anchor) {
        $(this).attr('target', '_blank');
      });
      @if(!strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'iphone') && strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'safari'))
        $('.fancybox-thumb').fancybox(fancyOptions);
      @endif
    });
  </script>
@endsection