@extends('app_admin')


@section('title', $title.' | Luxury Concierge')

@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>
      <span class="icon icon-label_folder_phone_book_contacts_documents_3"></span>
      <h1>Directory / <span class="regular">{{ $directory ? $directory->name : $perk->custom_directory }}</span></h1>
    </div>
    <!-- Filter -->
    @if($properties->count() >= 2)
      <div class="filter-group">
        <div class="form-group select">
          <select id="directoryFilter">
            @foreach($properties as $property)
              <option value="{{ $property->id }}">{{ $property->name }}</option>
            @endforeach
          </select>
        </div>
      </div>
    @endif
    <!-- Directory -->
    <div class="row">
      <div class="col-sm-12">
        <div class="panel directory">
          @if($directory)
            <!-- Title -->
            <div class="panel-heading">
              <h1 class="title">{{ $directory->name.($directory->duplicate ? ' (Duplicate)' : '') }}</h1>
              <h3 class="subtitle">{{ $directory->categories->last()->name }}</h3>
            </div><!--./panel-heading -->
            <!-- Content -->
            <div class="panel-content">
              <div class="row">
                <div class="col-sm-6">
                  <div class="directory-info">
                    <ul class="directory-info-list list-unstyled">
                      <!-- Hyperlink -->
                      @if($directory->hyperlink)
                        <li class="clearfix">
                          <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 nofloat nomg"></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 class="clearfix">
                          <div class="media">
                            <div class="media-left media-middle media-fifty text-center">
                              <span class="icon icon-map_pin_locate_location_marker_gps nofloat nomg"></span>
                            </div>
                            <div class="media-body">
                              {{ $directory->address }}
                            </div>
                          </div>
                        </li>
                      @endif
                      <!-- Phone -->
                      @if($directory->phone)
                        <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">
                              {{ phone_number($directory->phone) }}
                            </div>
                          </div>
                        </li>
                      @endif
                      <!-- Agent -->
                      @if($directory->agent)
                        <li class="clearfix">
                          <div class="directory-agent">
                            @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">
                                  <!-- Name -->
                                  <h5>{{ $directory->agent->first_name.' '.$directory->agent->last_name }}</h5>
                                  <!-- Position -->
                                  @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 }}">{{ phone_number($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 }}">{{ phone_number($directory->agent->mobile_phone) }}</a>
                                    @endif
                                    @if($directory->agent->mobile_phone && $directory->agent->ext)
                                      <span> / </span>
                                    @endif
                                    @if($directory->agent->ext)
                                      <a href="tel:{{ $directory->agent->ext }}">{{ phone_number($directory->agent->ext) }}</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(count($directory->perks))
                      <div id="perks">
                        @foreach($directory->perks as $perk)
                          <div class="offer {{ $properties->count() > 1 ? 'hidden':'' }} {{ $perk->venue_id }}">
                            <div class="tag">
                              @if ($perk->venue_id === 4)
                                <i class="icon-price_tag_finance_product_info_details"></i>Concierge Perks
                              @elseif ($perk->venue_id === 20)
                                <i class="icon-price_tag_finance_product_info_details"></i>Member Perks
                              @else
                                <i class="icon-price_tag_finance_product_info_details"></i>Residents Perks
                              @endif
                            </div>
                            <!-- Perk -->
                            <div class="inner-offer">
                              <div class="perk 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
                                <!-- Description -->
                                <div class="media-body">
                                  {!! $perk->description !!}
                                </div>
                              </div>
                            </div>
                          </div>
                        @endforeach
                      </div>
                    @endif
                    <!-- Description -->
                    <div class="description">
                      <div id="directories">
                        @foreach($directory->child->filter(function($item) use ($properties) { return $properties->contains($item->property); }) as $directory_info)
                          <div class="inner-offer {{ $properties->count() >= 2 ? 'hidden' : '' }} {{ $directory_info->property_id }}">
                            <div class="directory media">
                              <div class="media-body">
                                {!! $directory_info->description !!}
                              </div>
                            </div>
                          </div>
                        @endforeach
                      </div>
                    </div>
                    <!-- Video -->
                    @if($directory->video)
                      <div class="video">
                        <iframe width="100%"
                          height="360"
                          src="https://www.youtube.com/embed/{{ youtube($directory->video) }}"
                          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 href="{{ url('/assets/files/'.$directory->file) }}" class="btn btn-small btn-download right">View file</a>
                        </div>
                      </div>
                    @endif
                  </div>
                </div>
                <div class="col-sm-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">
                        @foreach($directory->images as $key => $image)
                          @if($key == 0)
                            <div class="col-sm-6">
                              <a class="fancybox-thumb" rel="group" href="{{ asset('assets/images/directories/'.$image->hyperlink) }}">
                                <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" rel="group" href="{{ asset('assets/images/directories/'.$image->hyperlink) }}">
                                <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" rel="group" href="{{ asset('assets/images/directories/'.$image->hyperlink) }}">
                                <img src="{{ asset('assets/images/directories/'.$image->hyperlink) }}" alt=""/>
                              </a>
                            </div>
                          @endif
                        @endforeach
                      </div> <!--./row -->
                    </div><!--./directory-images -->
                  @endif
                </div>
              </div><!--./row -->
            </div><!--./panel-content -->
          @else
            <!-- Custom Directory -->
            <div class="panel-heading">
              <h1 class="title">{{ $perk->custom_directory }}</h1>
              <h3 class="subtitle">{{ $perk->categories->last()->name }}</h3>
            </div><!--./panel-heading -->
            <div class="panel-content">
              <div class="row">
                <div class="col-sm-6">
                  <!-- Property Info -->
                  @if($perk->info->count())
                    <div class="offer">
                      <div class="tag">
                        <i class="icon-price_tag_finance_product_info_details"></i>Residents Perks
                      </div>
                      <!-- Info -->
                      <div id="perks">
                        @foreach($perk->info as $perk)
                          <div class="inner-offer {{ $properties->count() > 1 ? 'hidden':'' }} {{ $perk->venue_id }}">
                            <div class="perk media">
                              @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>
                    </div>
                  @endif

                </div><!-- .col-sm-6 -->
              </div><!-- .row -->
            </div><!-- .panel-content -->
          @endif

        </div><!-- .panel directory -->
      </div><!-- .col-sm-12 -->
    </div><!-- .row -->

  </div><!-- .container-fluid -->
@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',
      'uiSwitch',
      'ngFileUpload',
      'modal',
      'directories',
      'user',
      'socket',
      'liveChat'
    ]);
  </script>
  <script type="text/javascript" src="/assets/js/ngSticky.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/dirPagination.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-ui-switch.min.js'></script>
  <script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/textAngular/1.5.0/textAngular-rangy.min.js'></script>
  <script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/textAngular/1.5.0/textAngular-sanitize.min.js'></script>
  <script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/textAngular/1.5.0/textAngular.min.js'></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/modal.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>
  @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">
    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
        }
      }
    }

    $(document).ready(function() {
      $('.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>
  @if($properties->count() >= 2)
    <script type="text/javascript">
      function loadInfo() {
        var directoryFilter = $('#directoryFilter').val();
        $('#directories > div').each(function() {
          if($(this).hasClass(directoryFilter)) $(this).removeClass('hidden');
          else $(this).addClass('hidden');
        });
        $('#perks > div').each(function() {
          if($(this).hasClass(directoryFilter)) $(this).removeClass('hidden');
          else $(this).addClass('hidden');
        });
      }

      loadInfo();

      $('#directoryFilter').change(function() {
        loadInfo();
      });
    </script>
  @endif
@endsection