@extends('app_client')

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

@section('content')
  <div class="container-fluid"
    ng-controller="EventCtlr as vm"
    ng-init="vm.get_item({{ $event->id }}, '{{ $event->start_date }}')">
    <div class="page-header">
      <div class="back-navigation">
        <a href="javascript:history.go(-1)" class="btn-back">Back</a>
      </div>
      <span class="icon icon-wineglass_goblet_glass_drink_toast_party_clink"></span>
      <h1>Events / <span class="regular">{{ $event->title }}</span></h1>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <div class="panel event clearfix" ng-controller="modalCtlr">
          <div class="media">
            <div class="media-left media-middle">
              <div class="event-date">
                <h3 class="day">{{ date('d', strtotime($event->start_date)) }}</h3>
                <span class="month uppercase">{{ date('M', strtotime($event->start_date)) }}</span>
              </div>
            </div>
            <div class="media-body">
              <h1 class="title">{{ $event->title }}</h1>
              <h3 class="subtitle">{{ $event->category->name }}</h2>
            </div>
          </div>
          <div class="panel-content">
            <div class="row">
              <div class="col-sm-6">
                <div class="event-description">
                  {!! $event->content !!}
                  @if(strlen($event->content) < 2100 && !$event->video)
                    @if($event->images->count() > 0)
                      <div class="directory-images clearfix mg-bottom-30">
                        <div class="row">
                          @if(strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'iphone'))
                             @if(!strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'safari'))
                               @foreach($event->images as $key => $image)
                                 <div class="col-sm-6">
                                   <a class="fancybox-thumb no-open" rel="group-@{{ image.event_id }}" data-action="zoom">
                                     <img src="{{ asset('assets/images/events/'.$image->hyperlink) }}" width="285"/>
                                   </a>
                                 </div>
                               @endforeach
                            @endif
                          @else
                            @foreach($event->images as $key => $image)
                              @if($key == 0)
                                <div class="col-sm-6">
                                  <a class="fancybox-thumb no-open" rel="group" href="{{ asset('assets/images/events/'.$image->hyperlink) }}" target="_self">
                                    <img src="{{ asset('assets/images/events/'.$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/events/'.$image->hyperlink) }}" target="_self">
                                    <img src="{{ asset('assets/images/events/'.$image->hyperlink) }}" alt="" />
                                    @if($event->images->count() > 2)
                                      <div class="fancybox-extra-overlay"></div>
                                      <div class="fancybox-extra-counter"><span>+{{ $event->images->count() - 2 }}</span></div>
                                    @endif
                                  </a>
                                </div>
                              @else
                                <div class="hidden">
                                  <a class="fancybox-thumb no-open" rel="group" href="{{ asset('assets/images/events/'.$image->hyperlink) }}" target="_self">
                                    <img src="{{ asset('assets/images/events/'.$image->hyperlink) }}" alt="" />
                                  </a>
                                </div>
                              @endif
                            @endforeach
                          @endif
                        </div> <!-- row -->
                      </div> <!-- event images -->
                    @endif
                  @endif
                  @if($event->video)
                    <iframe width="100%" height="360" src="https://www.youtube.com/embed/{{ youtube($event->video) }}" frameborder="0" allowfullscreen></iframe>
                  @endif
                </div>
              </div>
              <div class="col-sm-6">
                <div class="event-info">
                  <ul class="event-info-list list-unstyled">
                    <li>
                      <span class="icon icon-map_pin_locate_location_marker_gps"></span>
                      <a href="{{ $event->hyperlink }}" target="_blank">{{ $event->location }},  {{ $event->city }}, {{ $event->state }}</a>
                    </li>
                    @if(date('d/m/y', strtotime($event->start_date)) !== date('d/m/y', strtotime($event->end_date)))
                    <li>
                      <span class="icon icon-calendar_date_schedule_event_month_year_3"></span>
                      {{ date('d F', strtotime($event->start_date)) }} - {{ date('d F', strtotime($event->end_date)) }}
                    </li>
                    @endif
                    <li>
                      <span class="icon icon-clock_time_date"></span>
                      {{ date('h:i A', strtotime($event->start_date)) }} - {{ date('h:i A', strtotime($event->end_date)) }}
                    </li>
                  </ul>
                </div>
                <div id="event-location-map"></div>
                @if($event->images->count() > 0 && strlen($event->content) > 2100 || $event->video)
                  <div class="directory-images">
                    <div class="row">
                      @if(strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'iphone'))
                         @if(!strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'safari'))
                           @foreach($event->images as $key => $image)
                           <div class="col-sm-6">
                             <a class="fancybox-thumb no-open" rel="group-@{{ image.event_id }}" data-action="zoom">
                               <img src="{{ asset('assets/images/events/'.$image->hyperlink) }}" width="285"/>
                             </a>
                           </div>
                           @endforeach
                        @endif
                      @else
                        @foreach($event->images as $key => $image)
                          @if($key == 0)
                            <div class="col-sm-6">
                              <a class="fancybox-thumb no-open" rel="group" href="{{ asset('assets/images/events/'.$image->hyperlink) }}" target="_self">
                                <img src="{{ asset('assets/images/events/'.$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/events/'.$image->hyperlink) }}" target="_self">
                                <img src="{{ asset('assets/images/events/'.$image->hyperlink) }}" alt="" />
                                @if($event->images->count() > 2)
                                  <div class="fancybox-extra-overlay"></div>
                                  <div class="fancybox-extra-counter"><span>+{{ $event->images->count() - 2 }}</span></div>
                                @endif
                              </a>
                            </div>
                          @else
                            <div class="hidden">
                              <a class="fancybox-thumb no-open" rel="group" href="{{ asset('assets/images/events/'.$image->hyperlink) }}" target="_self">
                                <img src="{{ asset('assets/images/events/'.$image->hyperlink) }}" alt="" />
                              </a>
                            </div>
                          @endif
                        @endforeach
                      @endif
                    </div> <!-- row -->
                  </div> <!-- event images -->
                @endif
              </div>
            </div>
            <div class="controls text-center">
              <hr>
              @if($event->hyperlink)
                <a class="btn btn-sm buffer-left accent {{ $event->request == 1 ? 'half-width':'btn-sm-block' }}" href="{{ $event->hyperlink }}" target="_blank">Visit Site</a>
              @endif
              @if($event->request == 1)
                <button class="btn btn-sm btn-request no-open half-width" ng-click="vm.modal_event_request_open(vm.event)">{{ $property->id == 6 ? 'Service Request' : 'Request​' }}</button>
              @endif
            </div><!--./controls-->
          </div><!--./panel-content -->
        </div><!--./panel-event-->
      </div><!--./col-sm-12 -->
    </div><!--./row-->
  </div><!--./container-fluid-->
@endsection

@section('script')
  @if($event && $event->lat && $event->lng)
    <script type="text/javascript" src="https://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', [
      'ui.dateTimeInput',
      'ui.bootstrap.datetimepicker',
      'ngFileUpload',
      'modal',
      'events',
      '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/events.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($event && $event->lat && $event->lng)
    <script type="text/javascript">
      function initMap() {
        var map = new google.maps.Map(document.getElementById('event-location-map'), {
          zoom: 14,
          center: {
            lat: parseFloat({{ $event->lat }}),
            lng: parseFloat({{ $event->lng }})
          }
        });
        marker = new google.maps.Marker({
          map: map,
          draggable: false,
          animation: google.maps.Animation.DROP,
          position: {
            lat: parseFloat({{ $event->lat }}),
            lng: parseFloat({{ $event->lng }})
          }
        });
      }
      google.maps.event.addDomListener(window, 'load', initMap);
    </script>
  @endif
  </script>
  <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
          }
        }
      }
            $(".fancybox-thumb").fancybox(fancyOptions);
          });
  </script>
@endsection