@extends('app_admin')

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

@section('content')
  <div class="container-fluid" ng-controller="EventCtlr">
    <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">
          <div class="panel-heading clearfix">
            <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>
            <h1 class="title">{{ $event->title }}</h1>
            <h3 class="subtitle">{{ $event->category->name }}</h2>
          </div><!--./panel-heading -->
          <div class="panel-content">
            <div class="row">
              <div class="col-sm-6">
                <div class="event-description">
                  {!! $event->content !!}
                  @if($event->video)
                    <iframe width="100%" height="360" src="https://www.youtube.com/embed/{{ $event->short_video }}" frameborder="0" allowfullscreen></iframe>
                  @endif
                  @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
                </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>
              @if($event->hyperlink)
              <div class="controls text-center">
                <hr>
                <a class="btn btn-sm-block" href="{{ $event->hyperlink }}" target="_blank">Visit Site</a>
              </div>
              @endif
          </div><!--./panel-content -->
        </div><!--./panel -->
      </div>
    </div>
  </div>
  @include('admin.partials.event_modal')
@endsection

@section('script')
  <script type="text/javascript" src="/https://maps.googleapis.com/maps/api/js?key=AIzaSyAok3PHxGwYlbq2AggZ7upd-1ltmBUJCMs"></script>
  <script type="text/javascript" src="/assets/js/moment.min.js"></script>
  <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', [
      'modal',
      'events',
      'user',
      'socket',
      'liveChat',
      'uiSwitch'
    ]);

    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>
  <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>
  <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="{{ 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>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/user.js') }}"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/events.js') }}"></script>
@endsection