@extends('frontend.layouts.layout_custom')

@section("style")
    
@endsection
@section('pageTitle')
<title>{{trans('panel.event_page_title')}}</title>
@endsection

@section('content')
  <div class="modal upper_modal" id="modal_event_detail">
    <div class="modal-content">
      <div class="modal-body">
        <div class="ccontainer">
          <div class="crow">
            <div class="ccol ccol-lg-4 ccol-sm-6 mx-auto">
              <hr />
              <h2 class="mb-1">{{$event->event_title}}</h2>
              <div class="d-flex flex-justify-between mb-1">
                <div class="mr-1 col">
                  <div style="min-width: 100px;">
                    <strong class="d-block">{{trans('event.date')}}</strong>
                    <span>{{date('l, M. d, Y', strtotime($event->start_date))}} </span>
                  </div>
                </div>
                <div class="mr-1 col">
                  <div style="min-width: 100px;">
                    <strong class="d-block">{{trans('event.time')}}</strong>
                    <span>{{ date('h:i A', strtotime($event->start_time))}}</span>
                  </div>
                </div>        
                <div class="col">
                  <div style="min-width: 100px;">
                    <strong class="d-block">{{trans('event.location')}}</strong>
                    <span>{{$event->address_line1}} {{$event->address_location}}</span> <a target="_blank" class='text-link' href="https://www.google.com/maps/search/?api=1&query={{$event->address_lat}},{{$event->address_long}}" >View on Map</a>
                  </div>
                </div>
              </div>
              @if($user_type == 'Volunteer')     
                <div class="mb-2">
                  <strong class="d-block">{{trans('event.desc')}}</strong>
                  @if($event_ticket_status)
                    <span>{!! trans('event.earned_ticket_msg') !!}</span>
                  @elseif($volunteer_earned_hours >= $event->event_hours)
                    <span>{!! trans('event.earned_hours_msg', [ 'hours' =>$volunteer_earned_hours, 'event_hours' => $event->event_hours, 'event_title'=>$event->event_title ]) !!}</span>
                  @else
                    <span>{!! trans('event.earn_hours_msg', [ 'event_hours' => $event_hours]) !!}</span>
                  @endif
                </div>
                
                <div>
                  @if($volunteer_earned_hours >= $event->event_hours && !$event_ticket_status)
                    <a href="javascript:;" action_url="#" data_id='3' class="cbtn cbtn-primary mr-2 get_event_ticket" >{{trans('event.get_my_ticket')}}</a>
                  @elseif(!$event_ticket_status)
                    <a href="{{route('dashboard.opportunities')}}" action_url="#" data_id='3' class="cbtn cbtn-primary mr-2 " >{{trans('event.opportunities')}}</a>
                  @endif
                    <a href="javascript:;" class="cbtn cbtn-text-primary close">{{trans('event.close')}} <!-- <span><img src="{{URL::asset('frontend/images/arrow.svg')}}" alt="arrow" class="img-svg" /></span> --></a>
                </div>
              @else
                <div class="mb-2">
                  <strong class="d-block">Note</strong>
                  <span>{{trans('event.login_text')}}</span>
                </div>
                
                <div>
                    <a href="{{route('login')}}" class="cbtn cbtn-primary mr-2" >{{trans('event.login')}}</a>
                  
                    <a href="{{route('frontend.checkout')}}" class="cbtn cbtn-primary mr-2" >{{trans('event.register')}}</a>
                  
                    <a href="javascript:;" class="cbtn cbtn-text-primary close">{{trans('event.close')}} <!-- <span><img src="{{URL::asset('frontend/images/arrow.svg')}}" alt="arrow" class="img-svg" /></span> --></a>
                </div>
              @endif
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

@include("frontend.include.navbar")
  <div data-scroll-container class="page-wrapper">
      
     
    
    
    <section  style="padding-top: 0;">
      

      <?php $feature_image = 'https://res.cloudinary.com/lift-cincy/image/upload/v1651630293/blurred-img/0_inbble.png';
        if(!empty($event->feature_image)){
          $feature_image = URL::asset('Event/'.$event->id.'/'.$event->feature_image);
        }
      ?>

      <div class="event_details">
        <section class="small_banner1 burger">
          <div class="ccontainer">
            <div class="crow g-0">
              <div class="ccol ccol-md-6 ccol-sm-8 mx-auto">
                  <div class="banner_txt">
                    <div class=""><a href="{{route('frontend.find_events')}}" class="cbtn cbtn-bdr-light back-btn text-white">{{trans('event.back')}}</a></div>
                    <h3 class="text-white mt-3 cursor-p ticket_area_div">{{trans('event.get_your_ticket')}} <a href="#ticket_area" class="gobottom ml-1"><img src="{{URL::asset('images/arrow_white_back.svg')}}" alt="img" class="img-svg" /></a></h3>
                  </div>

                <div class="bannerslider__content">
                  <div class="banner_txt">
                    <a href="javascript:;" class="text-white small">{{date('l, M. d, Y', strtotime($event->start_date))}} @ {{ date('h:i A', strtotime($event->start_time))}} </a>
                    <h3 class="text-white mr-2">{{$event->event_title}}</h3>
                    <p class="text-white mt-0">{{$event->event_subtitle}}</p>
                  </div>
                  <img src="{{$feature_image}}" alt="img" class="w-100" />
                </div>
              </div>
            </div>
          </div>
          <div class="bg_strip3"><img src="{{URL::asset('images/bg_strip7.svg')}}" alt="image" class="img-svg" /></div>
          <div class="bg_strip2"><img src="{{URL::asset('images/bg_strip5.svg')}}" alt="image" class="img-svg" /></div>
        </section>

        <section style="padding-top: 0; " class="burger_b">      
          <div>  
            <div class="ccontainer">
              <div class="crow">
                <div class="ccol ccol-lg-6 mx-auto">
                  @if(count($artist_list))
                  <div class="profile_list">
                    <div class="d-flex flex-justify-center">
                      @foreach($artist_list as $key => $artist)
                        <?php
                          $artist_image = 'https://res.cloudinary.com/lift-cincy/image/upload/v1651630293/blurred-img/0_inbble.png';
                          if(!empty($artist->artist_image)){ $artist_image = URL::asset('Artist/'.$artist->id.'/'.$artist->artist_image); }
                          $artist_title = $artist->artist_title;
                          $artist_url = route('frontend.event_detail',$artist->slug);
                          $show_artist_page = '';
                        ?>
                        <div class="">
                          <a href="{{route('frontend.artist_detail',[$artist->slug])}}" class="text-strong text-black px-1"><span class="profile_img mr-1"><img src="{{$artist_image}}" /></span><span class="text text-underline">{{$artist_title}}</span></a>
                        </div>
                      @endforeach
                      
                    </div>
                  </div>
                  @endif
                  <div class="grid_section text-center">
                    <div class="crow flex-justify-center">
                      <div class="ccol ccol-sm-4">
                        <span class="box_circle age mr-05">
                          @if(\Illuminate\Support\Str::contains(strtolower($event->event_age_group), ['all']) )
                            All
                          @else
                            {{$event->event_age_group}}
                          @endif
                        </span>
                        @if(\Illuminate\Support\Str::contains(strtolower($event->event_age_group), ['all']) )
                          {!! trans('event.event_age_group_all',['age'=>$event->event_age_group]) !!}
                        @else
                          {!! trans('event.event_age_group',['age'=>$event->event_age_group]) !!}
                        @endif

                      </div>
                      <div class="ccol ccol-sm-4">
                        <span class="ticket_xs mr-05">{{$event->event_hours}}h</span> 
                          @if($event->event_hours == 1)
                            {!! trans('event.event_hour_required',['hours'=>$event_hours]) !!}
                          @else
                            {!! trans('event.event_hours_required',['hours'=>$event_hours]) !!}
                          @endif
                        
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="crow mt-2 flex-justify-center ticket_area" id="ticket_area">
                <div class="ccol ccol-md-3 ccol-sm-4">
                  <div class="ticket ticket_lg">
                    <!-- <img src="images/ticket.svg" alt="ticket" class="img-svg" /> -->
                    <div class="ticket_cnt">
                      <div class="mb-auto">
                        <h3>
                          @if($event->event_hours == 1)
                            {{$event->event_hours}} {{trans('event.hour')}}
                          @else
                            {{$event->event_hours}} {{trans('event.hours')}}
                          @endif
                        </h3>
                        <p>
                          @if($event->event_hours == 1)
                            {!! trans('event.cash_in_hour',['hours'=>$event_hours]) !!}
                          @else
                            {!! trans('event.cash_in_hours',['hours'=>$event_hours]) !!}
                          @endif
                        </p>
                      </div>
                      <div>
                        <a href="javascript:;" data-modal="#modal_event_detail" class="modal_trigger cbtn cbtn-secondary arrow cbtn-block text-left">{{trans('event.get_my_ticket')}} </a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="ccol ccol-md-3 ccol-sm-4">
                  <h3 class="heading_2 mb-1">{{$event->event_short_desc}}</h3>
                  <div class="event_remark">
                    {!! $event->event_remarks !!}
                  </div>
                  <ul class="list">
                    <li> <span class="check_dark"></span> {{$event->address_line1}} {{$event->address_location}}</li>
                  </ul>
                </div>
              </div>

              <div class="crow mt-2 flex-justify-center">
                <div class="ccol ccol-md-6 ccol-sm-8">
                  <hr />
                  <h2 class="heading_1">{{trans('event.about_vanue')}}</h2>
                  <div class="mb-0">
                    {!! $event->event_desc !!}
                  </div>
                  @if(!empty($event->prohibited_items))
                  <a href="javascript:;" class="text-primary small text-strong" onclick="$('.ProhibitedItemDiv').toggle();">{{trans('event.prohibited_items')}} ↓</a>
                  <div class="mb-0 mt-2 ProhibitedItemDiv" style="display: none;">
                    {!! $event->prohibited_items !!}
                  </div>
                  @endif
                  @if(!empty($event->seating_chart))
                    <h4 class="mt-3">{{trans('event.seating_chart')}}</h4>
                    <img src="{{URL::asset('Event/'.$event->id.'/'.$event->seating_chart)}}" alt="floor_plan" class="w-100" />
                  @endif
                  
                </div>
              </div>

              <div class="crow mt-2 flex-justify-center">
                <div class="ccol ccol-md-6 ccol-sm-8">
                  <hr />
                  <h2 class="heading_1">{{trans('event.ticket_info')}}</h2>
                  <div class="mb-0">
                    {!! $event->event_desc_2 !!}
                  </div>
                </div>
              </div>

            </div>
          </div>
        </section>
      </div>
    </section>
    @include("frontend.include.footer")
  </div>
@endsection
@section('scripts')
  <script src="{{ asset('assets/js/sweet-alert.min.js')}}"></script>
  @if($volunteer_earned_hours >= $event->event_hours && !$event_ticket_status)
    <script>
      $(document).ready(function(){

      
      $('body').on('click','.get_event_ticket',function(){
        var action_url = '{{route("dashboard.get_event_ticket")}}';
        var this_oppor = $(this);
        var postData=new FormData();
        postData.append('volunteer_id',"{{$volunteer->id}}");
        postData.append('event_id',"{{$event->id}}");    
        swal({
          title: "{{ trans('new.are_you_sure') }}",
          text: "{{ trans('new.get_event_ticket') }}",
          //icon: "info", //Success, warning, info, error
          buttons: true,
        })
        .then((willComment) => {
            if (willComment) {
                swal({
                  title: "{{ trans('event.proccessing') }}",
                  text: "{{ trans('event.proccessing_text') }}",
                  //icon: "warning", //Success, warning, info, error
                  buttons: false,
                  dangerMode: true,
                });
                
                $.ajax({
                    headers:{'X-CSRF-Token':'{{ csrf_token() }}'},
                    async:true,
                    type:"post",
                    dataType: 'json',
                    contentType:false,
                    url:action_url,
                    data:postData,
                    processData:false,
                    success:function(data){
                        if(data.success == 'done'){
                            //$('body').find('.'+files_div).attr('src',data.doc_url);
                            //$('.delete_feature_image').hide();
                            
                            this_oppor.addClass('view_event_ticket');
                            this_oppor.removeClass('get_event_ticket');
                            this_oppor.html('Ticket Earned');
                            swal("You are In!",data.msg);
                        }else{
                            swal("Oh no!!",data.msg,"error");
                        }
                    },
                    error: function(data, errorThrown)
                    {
                        swal("Opps!",errorThrown,"error");
                    },
                });
            }
        });

      });
    });
  </script>
  @endif
  <script>
    $(document).ready(function() {
      
      $(".inner_nav a").removeClass("active")
      //$("#details").addClass("active");

      $('.event_remark').find('ul').addClass('list');

      /*$(".ticket_area_div").click(function() {
          $('html, body').animate({
              scrollTop: $("#ticket_area").offset().top
          }, 2000);
      });*/

      const remark_array = ["check_warning", "check_primary", "check_info","check_dark"];
      var count = 0;
      $('.event_remark').find('ul li').each(function(){
        $(this).html('<span class="'+remark_array[count]+'"></span>'+ $(this).html());
        if(count == 3){count = 0;}else{count++;}
      });

      
    });
  </script>

  <script type="text/javascript">
    $(document).ready(function() {
      $(".accordion h2").click(function() {
        $(this).toggleClass("open");
        var id = this.id; 
        $(".accordion-content").each(function() {
          if ($("#" + id).next()[0].id != this.id) {
            $(this).slideUp("slow");
            $('.detail-row').each(function(){
              if($(this).attr('id') != id){
                //alert($(this).html());
                $(this).removeClass('open');
              }
            });
            
          }
        });
        $(this).next().slideToggle();
      });
    });
  </script>
@endsection