@extends('eventmie::layouts.app')

@section('title', $event->title)
@section('meta_title', $event->meta_title ? $event->meta_title : $event->title)
@section('meta_keywords', $event->meta_keywords)
@section('meta_description', $event->meta_description ? $event->meta_description : $event->excerpt)
@section('meta_image', getStorageImage($event['thumbnail']))
@section('meta_url', url()->current())

@section('content')

    <section class="cover-img-bg" style="background-image: url({{ getStorageImage($event['thumbnail']) }});">
        <div class="pb-3 pb-lg-5 py-2 mt-7 cover-img-bg-2">
            <!--ABOUT-->
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-12 z-3 mobile-0-padding">
                        <div class="event-hero-container">
                            <div class="row align-items-center justify-content-center">
                                <div class="col-lg-5 col-md-12 col-12">
                                    <div class="event-image-container">
                                        <img src="{{ getStorageImage($event['thumbnail']) }}" alt="{{ $event['title'] }}" class="event-hero-image">
                                    </div>
                                </div>
                                <div class="col-lg-7 col-md-12 col-12">
                                    <div class="event-info-container mobile-0-padding">
                                        <div class="event-category-badge">
                                            <i class="fas fa-tag"></i> {{ $category['name'] }}
                                        </div>
                                        
                                        <h1 class="event-title">{{ $event['title'] }}</h1>

                                        @if (!empty($event['online_location']))
                                            <div class="online-event-badge">
                                                <i class="fas fa-circle-play"></i> @lang('eventmie-pro::em.online_event')
                                            </div>
                                        @endif
                                        
                                        @if ($event->venues->isNotEmpty())
                                            <div class="venue-card">
                                                <div class="venue-card-image">
                                                    @if (!empty($event->venues[0]->images && !empty(json_decode($event->venues[0]->images))))
                                                        <img src="{{ getStorageImage(json_decode($event->venues[0]->images)[0]) }}" alt="{{ $event->venue }}" class="venue-img">
                                                    @else
                                                        <div class="venue-placeholder">
                                                            <i class="fas fa-map-marker-alt"></i>
                                                        </div>
                                                    @endif
                                                </div>
                                                <div class="venue-card-content">
                                                    <h2 class="venue-title h5">
                                                        <a href="{{ route('eventmie.venues.show', [$event->venues[0]->slug]) }}" class="text-white text-decoration-none">
                                                            {{ $event->venue }}
                                                            <i class="fas fa-external-link-alt ms-1"></i>
                                                        </a>
                                                    </h2>
                                                    <div class="venue-address">
                                                        @if ($event->address)
                                                            <span>{{ $event->address }}</span>
                                                        @endif
                                                        @if ($event->zipcode)
                                                            <span>{{ $event->zipcode }}</span>
                                                        @endif
                                                        @if ($event->city)
                                                            <span>{{ $event->city }},</span>
                                                        @endif
                                                        @if ($event->state)
                                                            <span>{{ $event->state }},</span>
                                                        @endif
                                                        @if ($country)
                                                            <span>{{ $country->get('country_name') }}</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        @else
                                            <p class="venue-text"><strong>{{ $event->venue }}</strong></p>
                                        @endif
                                        @if(!empty($event->start_date) && !empty($event->end_date))
                                            <div class="event-datetime">
                                                <i class="fa-regular fa-clock"></i>
                                                @if (!$event->repetitive)
                                                    @if (userTimezone($event->start_date, 'Y-m-d', 'Y-m-d') == userTimezone($event->end_date, 'Y-m-d', 'Y-m-d'))
                                                        {{ userTimezone($event->start_date . ' ' . $event->start_time, 'Y-m-d H:i:s', format_carbon_date(false)) }}
                                                        {{ showTimezone() }}
                                                    @else
                                                        {{ userTimezone($event->start_date . ' ' . $event->start_time, 'Y-m-d H:i:s', format_carbon_date(false)) }}
                                                        {{ showTimezone() }}
                                                        -
                                                        {{ userTimezone($event->end_date . ' ' . $event->end_time, 'Y-m-d H:i:s', format_carbon_date(false)) }}
                                                        {{ showTimezone() }}
                                                    @endif
                                                @else
                                                    {{ userTimezone($event->start_date . ' ' . $event->start_time, 'Y-m-d H:i:s', format_carbon_date(true)) }}
                                                    -
                                                    {{ userTimezone($event->start_date . ' ' . $event->start_time, 'Y-m-d H:i:s', 'Y-m-d') <= userTimezone($event->end_date . ' ' . $event->end_time, 'Y-m-d H:i:s', 'Y-m-d') ? userTimezone($event->end_date . ' ' . $event->end_time, 'Y-m-d H:i:s', format_carbon_date(true)) : userTimezone($event->start_date . ' ' . $event->start_time, 'Y-m-d H:i:s', format_carbon_date(true)) }}
                                                @endif
                                            </div>
                                        @endif
                                        <div class="event-about">
                                            <p class="about-text">{{ $event['excerpt'] }} <a class="about-link" id="about-link" href="#overview-content">@lang('eventmie-pro::em.more')</a></p>
                                        </div>

                                        <div class="event-actions-container">
                                            @php $organiser_slug = $extra['organiser']->organisation_url; @endphp
                                            <!-- Organizer Section -->
                                            @if (!empty($organiser_slug))
                                                <div class="organizer-card">
                                                    <div class="organizer-info">
                                                        <a href="{{ route('organiser_show', [$organiser_slug]) }}" class="organizer-link">
                                                            <div class="organizer-avatar-wrapper">
                                                                <img src="{{ $extra['organiser']->avatar ? getStorageImage($extra['organiser']->avatar) : asset('ep_img/512x512.webp') }}" 
                                                                     alt="{{ $organiser_slug }}" 
                                                                     class="organizer-avatar">
                                                            </div>
                                                            <div class="organizer-details">
                                                                <span class="organizer-label">@lang('eventmie-pro::em.organiser')</span>
                                                                <h6 class="organizer-name">{{ $extra['organiser']->organisation }}</h6>
                                                            </div>
                                                        </a>
                                                        <a href="{{ route('organiser_show', [$organiser_slug]) }}" class="btn btn-outline-white btn-sm text-warning">
                                                            <i class="fas fa-envelope"></i>
                                                            @lang('eventmie-pro::em.contact_organizer')
                                                        </a>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>

                                        <!-- widget --> 
                                        @if($event->coming_soon == 0)
                                        <a class="btn btn-dark btn-lg scrollEvent border-1 border-white white-shadow-lg" href="#buy-tickets">
                                            <i class="fas fa-ticket"></i> @lang('eventmie-pro::em.get_tickets')
                                        </a>
                                        @else
                                        <div class="d-inline-flex align-items-center gap-2 text-light my-2 py-2">
                                            <span class="badge bg-warning text-dark rounded-pill me-1"><i class="fas fa-hourglass-half"></i></span>
                                            <strong class="me-1">@lang('eventmie-pro::em.coming_soon')</strong>
                                            <span class="text-light d-none d-md-inline">&mdash; @lang('eventmie-pro::em.tickets_available_soon')</span>
                                        </div>
                                        @endif
                                        <!-- widget END --> 
                                
                                    </div>
                                </div>
                            </div>
                        </div> 
                        <br>
                    </div>
                </div>
            </div>

            @if ($event->coming_soon == 0)
            <div class="container">
                <div class="row g-3">
                    <div class="col-12 z-3 mobile-0-padding">

                        <!--SCHEDULE-->
                        <div class="buy-tickets-now-accordion">
                            
                        <div class="buy-tickets-now-accordion-item" id="buy-tickets" data-tickets-section>
                            <input type="checkbox" id="buy-tickets-now" class="buy-tickets-now-checkbox">
                            <label class="buy-tickets-now-accordion-label" for="buy-tickets-now" >
                                <i class="fas fa-ticket"></i>&nbsp; @lang('eventmie-pro::em.get_tickets')
                            </label>
                            <div class="buy-tickets-now-accordion-content px-3" id="buy-tickets-now">
                                @if ($event->merge_schedule)
                                    <p class="mb-1"><strong class="text-secondary fw-bold"><i class="fas fa-medal"></i> @lang('eventmie-pro::em.seasonal_tickets')</strong> <br>@lang('eventmie-pro::em.seasonal_tickets_ie')</p>
                                @elseif($event->repetitive)
                                    <p class="mb-1"><i class="fas fa-info-circle"></i> @lang('eventmie-pro::em.select_schedule')</p>
                                @endif
                                <div class="row">
                                    <div class="col-12 mobile-0-padding">
                                        <select-dates :event="{{ json_encode($event, JSON_HEX_APOS) }}"
                                            :max_ticket_qty="{{ json_encode($max_ticket_qty, JSON_HEX_APOS) }}"
                                            :login_user_id="{{ json_encode(Auth::check() ? Auth::id() : null, JSON_HEX_APOS) }}"
                                            :is_customer="{{ Auth::check() ? (Auth::user()->hasRole('customer') ? 1 : 0) : 1 }}"
                                            :is_organiser="{{ Auth::check() ? (Auth::user()->hasRole('organiser') || Auth::user()->hasRole('pos') ? 1 : 0) : 0 }}"
                                            :is_pos="{{ Auth::check() ? (Auth::user()->hasRole('pos') ? 1 : 0) : 0 }}"
                                            :is_admin="{{ Auth::check() ? (Auth::user()->hasRole('admin') ? 1 : 0) : 0 }}"
                                            :is_paypal="{{ $is_paypal }}"
                                            :is_offline_payment_organizer="{{ setting('booking.offline_payment_organizer') ? 1 : 0 }}"
                                            :is_offline_payment_customer="{{ setting('booking.offline_payment_customer') ? 1 : 0 }}"
                                            :tickets="{{ json_encode($tickets, JSON_HEX_APOS) }}"
                                            :booked_tickets="{{ json_encode($booked_tickets, JSON_HEX_APOS) }}"
                                            :currency="{{ json_encode($currency, JSON_HEX_APOS) }}"
                                            :total_capacity="{{ $total_capacity }}"
                                            :date_format="{{ json_encode(
                                                [
                                                    'vue_date_format' => format_js_date(),
                                                    'vue_time_format' => format_js_time(),
                                                ],
                                                JSON_HEX_APOS,
                                            ) }}">
                                        </select-dates>
                                    </div>
                                </div>

                            </div>
                        </div>

                        </div>
                        <!--SCHEDULE END-->

                        
                        <!-- post single -->
                        <div class="css-accordion">

                            <!-- post single -->
                            <div class="css-accordion-item border-gradient border-gradient-purple only-bottom">
                                <input type="checkbox" id="overview">
                                <label class="css-accordion-label" for="overview" tabindex="0" aria-controls="overview-content" aria-expanded="true">
                                    @lang('eventmie-pro::em.overview')
                                </label>
                                <div class="css-accordion-content quillWrapper" id="overview-content">
                                    <p>{!! $event['description'] !!}</p>

                                    @if ($event['faq'])
                                        <br>
                                        <p>{!! $event['faq'] !!}</p>
                                    @endif
                                </div>
                            </div>
                            <!-- post single -->
                            
                            <!-- Tag Groups -->
                            @php $i = 0; @endphp
                            @foreach ($tag_groups as $key => $group)
                                @php $i++; @endphp
                                <div class="css-accordion-item border-gradient border-gradient-purple only-bottom">
                                    <input type="checkbox" id="taggroup{{ $i }}">
                                    <label class="css-accordion-label" for="taggroup{{ $i }}">
                                        {{ ucfirst($key) }}
                                    </label>
                                    <div class="css-accordion-content">
                                        <div class="row">
                                            @foreach ($group as $key1 => $value)
                                                <div class="col-lg-2 col-md-4 col-6 text-center">
                                                    <!-- member -->
                                                    @if ($value['is_page'] > 0)
                                                        <a
                                                            href="{{ route('eventmie.events_tags', [$event->slug, str_replace(' ', '-', $value['title'])]) }}" class="text-light">
                                                    @elseif($value['website'])
                                                        <a href="{{ $value['website'] }}" target="_blank" class="text-light">
                                                    @endif
                                                    <div class="mb-3">
                                                        @if ($value['image'])
                                                            <img src="{{ getStorageImage($value['image']) }}"
                                                                alt="{{ $value['title'] }}" class="rounded-3 w-75 mb-1" />
                                                        @else
                                                            <img src="{{ asset('ep_img/512x512.webp') }}"
                                                                alt="{{ $value['title'] }}" class="rounded-3 w-75 mb-1" />
                                                        @endif
                                                        <h2 class="mb-0 h5">
                                                            @if ($value['is_page'] > 0)
                                                                <a
                                                                    href="{{ route('eventmie.events_tags', [$event->slug, str_replace(' ', '-', $value['title'])]) }}" class="text-light">{{ $value['title'] }}</a>
                                                            @elseif($value['website'])
                                                                <a href="{{ $value['website'] }}"
                                                                    target="_blank" class="text-light">{{ $value['title'] }}</a>
                                                            @else
                                                                {{ $value['title'] }}
                                                            @endif
                                                        </h2>
                                                        <p class="small font-weight-semibold mb-1">
                                                            @if ($value['sub_title'])
                                                                {{ $value['sub_title'] }}
                                                            @endif
                                                        </p>

                                                        @if ($value['is_page'] > 0)
                                                            <div class="text-center text-white">
                                                                <a class="me-1 badge text-light"
                                                                    href="{{ $value['twitter'] }}" target="_blank"><i
                                                                        class="fab fa-x"></i></a>
                                                                <a class="me-1 badge text-light"
                                                                    href="{{ $value['facebook'] }}" target="_blank"><i
                                                                        class="fab fa-facebook"></i></a>
                                                                <a class="me-1 badge text-light"
                                                                    href="{{ $value['instagram'] }}" target="_blank"><i
                                                                        class="fab fa-instagram"></i></a>
                                                                <a class="me-1 badge text-light"
                                                                    href="{{ $value['linkedin'] }}" target="_blank"><i
                                                                        class="fab fa-linkedin"></i></a>
                                                                <a class="me-1 badge text-light"
                                                                    href="{{ $value['website'] }}" target="_blank"><i
                                                                        class="fas fa-globe"></i></a>
                                                            </div>
                                                        @endif

                                                    </div>
                                                    @if ($value['is_page'] > 0 || $value['website'])
                                                        </a>
                                                    @endif
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                            <!--Tags END-->

                            <!-- Event Video -->
                            @if (!empty($event->video_link))
                                <div class="css-accordion-item border-gradient border-gradient-purple only-bottom">
                                    <input type="checkbox" id="video">
                                    <label class="css-accordion-label" for="video">
                                        @lang('eventmie-pro::em.watch_trailer')
                                    </label>
                                    <div class="css-accordion-content">
                                        @php
                                            $video_links = json_decode($event->video_link);
                                            $count = count($video_links);
                                        @endphp

                                        @if (!empty($video_links))
                                            <div class="row g-4">
                                                @foreach ($video_links as $item)
                                                    @php
                                                        parse_str(parse_url($item, PHP_URL_QUERY), $queryParams);
                                                        $videoId = $queryParams['v'] ?? null;
                                                        $embedUrl = $videoId ? 'https://www.youtube.com/embed/' . $videoId : $item;
                                                    @endphp

                                                    @if ($videoId)
                                                        <div class="@if($count == 1) col-12 @else col-md-6 @endif">
                                                            <div class="ratio ratio-16x9">
                                                                <iframe src="{{ $embedUrl }}"
                                                                    allowfullscreen class="rounded-3 img-hover"></iframe>
                                                            </div>
                                                        </div>
                                                    @endif
                                                @endforeach
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @endif
                            <!--Event Video END-->

                            <!-- Google Map -->
                            @if ($event->latitude && $event->longitude)
                                <div class="css-accordion-item border-gradient border-gradient-purple only-bottom">
                                    <input type="checkbox" id="map">
                                    <label class="css-accordion-label" for="map">
                                        @lang('eventmie-pro::em.location')
                                    </label>
                                    <div class="css-accordion-content">
                                        @if($event->venues->isNotEmpty())
                                            <div class="alert alert-light border-start border-4 border-secondary mb-4">
                                                <div class="d-flex align-items-start">
                                                    <i class="fas fa-map-marker-alt text-secondary fs-4 me-3 mt-1"></i>
                                                    <div class="fs-5 fw-medium">
                                                        @if($event->venues[0]->address) {{ $event->venues[0]->address }} @endif
                                                        @if($event->venues[0]->city) {{ ', '.$event->venues[0]->city }} @endif
                                                        @if($event->venues[0]->state) {{ ', '.$event->venues[0]->state }} @endif
                                                        @if($event->venues[0]->zipcode) {{ ', '.$event->venues[0]->zipcode }} @endif
                                                        @if(!empty($event->venues[0]->country['country_name'])) {{ ', '.$event->venues[0]->country['country_name'] }} @endif
                                                    </div>
                                                </div>
                                            </div>
                                        @else
                                            <div class="alert alert-light border-start border-4 border-secondary mb-4">
                                                <div class="d-flex align-items-start">
                                                    <i class="fas fa-map-marker-alt text-secondary fs-4 me-3 mt-1"></i>
                                                    <div class="fs-5 fw-medium">
                                                        @if($event->address) {{ $event->address }} @endif
                                                        @if($event->city) {{ ', '.$event->city }} @endif
                                                        @if($event->state) {{ ', '.$event->state }} @endif
                                                        @if($event->zipcode) {{ ', '.$event->zipcode }} @endif
                                                        @if(!empty($event->country['country_name'])) {{ ', '.$event->country['country_name'] }} @endif

                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    
                                        <div class="row">
                                            <div class="col-4">
                                                <a href="{{ 'https://www.google.com/maps/search/' . $event->address . '/' . $event->latitude . ',' . $event->longitude }}"
                                                    class="btn btn-primary bg-gradient btn-sm" id="get_directions">
                                                    <i class="fas fa-location-arrow"></i> @lang('eventmie-pro::em.get_directions')
                                                </a>
                                            </div>
                                            <div class="col-8 text-end">
                                                <p><i class="fas fa-info-circle"></i> &nbsp;<small>@lang('eventmie-pro::em.get_directions_ie')</small></p>
                                            </div>
                                        </div>

                                        <div class="col-md-12">
                                            <div class="innerpage-section g-map-wrapper">
                                                <div class="lgxmapcanvas map-canvas-default">
                                                    <g-component :lat="{{ json_encode($event->latitude, JSON_HEX_APOS) }}"
                                                        :lng="{{ json_encode($event->longitude, JSON_HEX_APOS) }}">
                                                    </g-component>
                                                    {{--  CUSTOM --}}
                                                    <div id="warnings-panel"></div>
                                                    <div id="map" style="height: 100%"></div>
                                                    {{--  CUSTOM --}}

                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            @endif
                            <!--GOOGLE MAP END-->

                            <!-- Reviews -->
                            @if ($event->show_reviews && ($extra['reviews']->count() > 0 || $extra['take_reviews'] > 0))
                                <div class="css-accordion-item">
                                    <input type="checkbox" id="reviews">
                                    <label class="css-accordion-label" for="reviews">
                                        @lang('eventmie-pro::em.rating_review')
                                    </label>
                                    <div class="css-accordion-content">
                                        @include('vendor.eventmie-pro.events.custom.average_rating')
                                    </div>
                                </div>
                            @endif
                            <!--Reviews END-->
                        </div>

                    </div>
                </div>

                <div class="row">
                    <div class="col-12">
                        <div class="share-buttons mb-2">
                            <a class="share-btn-with-text" href="javascript:void(0)" >
                                <i class="fas fa-share-nodes"></i>
                                <span>&nbsp;@lang('eventmie-pro::em.share_event')</span>
                            </a>
                        </div>
                        <div class="share-buttons mb-2">
                            <a class="share-btn share-facebook" target="_blank"
                            href="https://www.facebook.com/sharer/sharer.php?u={{ url()->current() }}"
                            title="Share on Facebook">
                                <i class="fab fa-facebook-f"></i>
                                <span class="share-btn-text">@lang('eventmie-pro::em.facebook')</span>
                            </a>
                            <a class="share-btn share-twitter" target="_blank"
                            href="https://x.com/intent/tweet?text={{ urlencode($event->title) }}&url={{ url()->current() }}"
                            title="Share on X (Twitter)">
                                <i class="fab fa-x"></i>
                                <span class="share-btn-text">@lang('eventmie-pro::em.twitter')</span>
                            </a>
                            <a class="share-btn share-linkedin" target="_blank"
                            href="http://www.linkedin.com/shareArticle?mini=true&url={{ url()->current() }}&title={{ urlencode($event->title) }}"
                            title="Share on LinkedIn">
                                <i class="fab fa-linkedin-in"></i>
                                <span class="share-btn-text">@lang('eventmie-pro::em.linkedin')</span>
                            </a>
                            <a class="share-btn share-whatsapp" target="_blank"
                            href="https://wa.me/?text={{ url()->current() }}"
                            title="Share on WhatsApp">
                                <i class="fab fa-whatsapp"></i>
                                <span class="share-btn-text">@lang('eventmie-pro::em.whatsapp')</span>
                            </a>
                            <a class="share-btn share-reddit" target="_blank"
                            href="https://www.reddit.com/submit?title={{ urlencode($event->title) }}&url={{ url()->current() }}"
                            title="Share on Reddit">
                                <i class="fab fa-reddit-alien"></i>
                                <span class="share-btn-text">@lang('eventmie-pro::em.reddit')</span>
                            </a>
                            <button class="share-btn share-copy" 
                                    onclick="copyToClipboard()"
                                    title="Copy link">
                                <i class="fas fa-link"></i>
                                <span class="share-btn-text">@lang('eventmie-pro::em.copy_link')</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            @endif

        </div>

    </section>
    
    @if (!empty($event->images))
    <div class="z-3">
        <gallery-images :gimages="{{ $event->images }}"></gallery-images>
    </div>
    @endif

@endsection


@section('javascript')
    <script type="text/javascript">
        var google_map_key = {!! json_encode($google_map_key) !!};

        var stripe_publishable_key = {!! json_encode(setting('apps.stripe_public_key')) !!};

        var stripe_secret_key = {!! json_encode($extra['stripe_secret_key']) !!};

        var is_stripe = {!! json_encode($extra['is_stripe']) !!};

        var is_authorize_net = {!! json_encode($extra['is_authorize_net']) !!};

        var is_bitpay = {!! json_encode($extra['is_bitpay']) !!};

        var is_stripe_direct = {!! json_encode($extra['is_stripe_direct']) !!};

        var is_twilio = {!! json_encode($extra['is_twilio']) !!};

        var default_payment_method = {!! json_encode($extra['default_payment_method']) !!};

        var sale_tickets = {!! json_encode($extra['sale_tickets']) !!};

        var is_pay_stack = {!! json_encode($extra['is_pay_stack']) !!};

        var is_razorpay = {!! json_encode($extra['is_razorpay']) !!};

        var is_paytm = {!! json_encode($extra['is_paytm']) !!};

        var login_user_id = {!! json_encode(Auth::check() ? Auth::id() : 0, JSON_HEX_APOS) !!};

        var is_guest_checkout = {!! json_encode(setting('multi-vendor.guest_checkout'), JSON_HEX_APOS)  !!};

        var is_otp_verify = {!! json_encode(setting('multi-vendor.is_otp_verify'), JSON_HEX_APOS)  !!};

        var is_mercadopago = {!! json_encode($extra['is_mercadopago']) !!};

        var is_flutterwave = {!! json_encode($extra['is_flutterwave']) !!};
        
    </script>



    <script type="text/javascript" src="https://js.stripe.com/v3/"></script>
    <script src="https://cdn.jsdelivr.net/npm/v-mask/dist/v-mask.min.js"></script>
    
    @Vite('resources/js/vendor/eventmie-pro/events_show/index.js')

    <script type="text/javascript">
        var latitude = {!! json_encode($event->latitude) !!};
        var longitude = {!! json_encode($event->longitude) !!};
        var venue = {!! json_encode($event->venue) !!};


        function initMap() {

            var markerArray = [];

            // Instantiate a directions service.
            var directionsService = new google.maps.DirectionsService;

            // Create a map and center it on Manhattan.
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 18,
                center: {
                    lat: parseFloat(latitude),
                    lng: parseFloat(longitude)
                },
                mapId: {!!  json_encode(setting('apps.google_map_key')) !!},
            });

            var marker =  new google.maps.marker.AdvancedMarkerElement({
                position: {
                    lat: parseFloat(latitude),
                    lng: parseFloat(longitude)
                },
                title: venue,
            });

            // To add the marker to the map, call setMap();
            marker.setMap(map);

            // Create a renderer for directions and bind it to the map.
            var directionsDisplay = new google.maps.DirectionsRenderer({
                map: map
            });

            // Instantiate an info window to hold step text.
            var stepDisplay = new google.maps.InfoWindow;

            // Listen to change events from the start and end lists.
            var onChangeHandler = function() {
                // get current location latlngs
                getUserLocationLatLong(directionsDisplay, directionsService, markerArray, stepDisplay, map);
            };
            document.getElementById('get_directions').addEventListener('click', onChangeHandler);

        }

        let infoWindow;

        function getUserLocationLatLong(directionsDisplay, directionsService, markerArray, stepDisplay, map) {

            console.log('heyy');
            // map = new google.maps.Map(document.getElementById("map"), {
            //     zoom: 13,
            //     center: {lat:  parseFloat(latitude), lng:  parseFloat(longitude)}
            // });
            infoWindow = new google.maps.InfoWindow();

            infoWindow = new google.maps.InfoWindow();

            infoWindow = new google.maps.InfoWindow();

            // Try HTML5 geolocation.
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    position => {
                        const pos = {
                            lat: position.coords.latitude,
                            lng: position.coords.longitude
                        };

                        calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, stepDisplay, map,
                            position.coords.latitude, position.coords.longitude);
                    },
                    () => {
                        alert('Error-1');
                    }
                );
            } else {
                // Browser doesn't support Geolocation
                alert('Browser doesnt support Geolocation');
            }

            console.log('heyy');
            console.log('heyy');
        }



        function calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, stepDisplay, map, cur_lat,
            cur_lng) {
            // First, remove any existing markers from the map.
            for (var i = 0; i < markerArray.length; i++) {
                markerArray[i].setMap(null);
            }

            directionsService.route({
                origin: new google.maps.LatLng(parseFloat(cur_lat), parseFloat(cur_lng)),
                destination: new google.maps.LatLng(parseFloat(latitude), parseFloat(longitude)),
                travelMode: 'DRIVING',
                drivingOptions: {
                    departureTime: new Date( /* now, or future date */ ),
                    trafficModel: google.maps.TrafficModel.BEST_GUESS
                },
            }, function(response, status) {
                console.log(response);
                if (status === 'OK') {
                    document.getElementById('warnings-panel').innerHTML =
                        '<b>' + response.routes[0].warnings + '</b>';
                    directionsDisplay.setDirections(response);
                    showSteps(response, markerArray, stepDisplay, map);
                } else {
                    window.alert(trans('em.fail_directions'));
                }
            });
        }

        function showSteps(directionResult, markerArray, stepDisplay, map) {
            var myRoute = directionResult.routes[0].legs[0];
            for (var i = 0; i < myRoute.steps.length; i++) {
                var marker = markerArray[i] = markerArray[i] || new google.maps.Marker;
                marker.setMap(map);
                marker.setPosition(myRoute.steps[i].start_location);
                attachInstructionText(
                    stepDisplay, marker, myRoute.steps[i].instructions, map);
            }
        }

        function attachInstructionText(stepDisplay, marker, text, map) {
            google.maps.event.addListener(marker, 'click', function() {
                stepDisplay.setContent(text);
                stepDisplay.open(map, marker);
            });
        }



        function open() {
            document.getElementById("review_modal").style.display = "block";
        }

        //  Single day non-repetitive event
        function triggerSignleDay() {
            const hash = location.hash;
            if (hash != '#/checkout') {
                parent.location.hash = "/checkout";
            }
        }

        document.addEventListener("DOMContentLoaded", function () {
            // Mobile scroll to tickets section functionality
            function handleMobileTicketScroll() {
                console.log("handleMobileTicketScroll called");
                console.log("Window width:", window.innerWidth);
                
                // Check if we're on mobile (screen width less than 992px)
                if (window.innerWidth < 992) {
                    var ticketsSection = document.querySelector('[data-tickets-section]');
                    console.log("Tickets section found:", ticketsSection);
                    
                    if (ticketsSection) {
                        // Calculate offset to scroll to tickets section with some padding
                        var offset = ticketsSection.offsetTop + 600; // 100px padding from top
                        console.log("Scrolling to offset:", offset);
                        
                        window.scrollTo({
                            top: offset,
                            behavior: "smooth"
                        });
                    } else {
                        console.log("Tickets section not found");
                    }
                } else {
                    console.log("Not mobile, skipping scroll");
                }
            }

            // Add click event listener for mobile ticket scroll
            var getTicketsLabels = document.querySelectorAll('label[for="buy-tickets-now"]');
            console.log("Found get tickets labels:", getTicketsLabels.length);
            
            getTicketsLabels.forEach(function(label, index) {
                console.log("Adding click listener to label", index);
                label.addEventListener("click", function(e) {
                    console.log("Get tickets label clicked!");
                    console.log("Window width:", window.innerWidth);
                    
                    // Only handle mobile scroll, let default behavior work on desktop
                    if (window.innerWidth < 992) {
                        console.log("Mobile detected, will scroll after delay");
                        // Small delay to allow the accordion to open first
                        setTimeout(function() {
                            handleMobileTicketScroll();
                        }, 100);
                    } else {
                        console.log("Desktop detected, no scroll needed");
                    }
                });
            });

            // Scroll and expand overview on 'more' click
            var aboutLink = document.getElementById('about-link');
            if (aboutLink) {
                aboutLink.addEventListener('click', function(e) {
                    e.preventDefault();
                    var overviewCheckbox = document.getElementById('overview');
                    var overviewContent = document.getElementById('overview-content');
                    if (overviewCheckbox && overviewContent) {
                        overviewCheckbox.checked = true;
                        overviewContent.scrollIntoView({ behavior: 'smooth', block: 'start' });
                    }
                });
            }


            /* Get Tickets Widget button start*/
            // Select the scroll button
            var scrollEvent = document.querySelector(".scrollEvent");
            var buyTickets = document.getElementById("overview-content");

            // Debugging to ensure elements are found
            console.log(scrollEvent, "scrollEvent");
            console.log(buyTickets, "overview-content");

            if (!scrollEvent || !buyTickets) {
                console.error("Required elements not found");
                return;
            }

            function handleScroll() {
                // Get the position of the overview-content section relative to the viewport
                var rect = buyTickets.getBoundingClientRect();
                // Show the button if the top of overview-content is above the top of the viewport (scrolled past)
                if (rect.top <= 0) {
                    scrollEvent.classList.add("showBtn");
                } else {
                    scrollEvent.classList.remove("showBtn");
                }
            }

            function scrollToTop() {
                // Scroll to top smoothly
                window.scrollTo({
                    top: 0,
                    behavior: "smooth"
                });
            }

            // Attach event listeners
            scrollEvent.addEventListener("click", scrollToTop);
            window.addEventListener("scroll", handleScroll);
            // Initial check in case already scrolled
            handleScroll();
            /* Get Tickets Widget button end*/
        });

    </script>
@stop

@section('schema')
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Event", 
    "@id": "{{ url()->current() }}#schema",
    "name": "{{ $event->title ?? '' }}",
    "description": "{{ $event->excerpt ?? '' }}",
    "startDate": "{{ $event->start_date ?? '' }}",
    "endDate": "{{ $event->end_date ?? '' }}",
    "eventStatus": "https://schema.org/EventScheduled",
    "eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode",
    "image": [
        @if(!empty($event['thumbnail']))
            "{{ getStorageImage($event['thumbnail']) }}"
            @if(!empty($event['images'])), "{{ getStorageImage($event['images']) }}"@endif
        @endif
    ],
    @if(!empty($event->venue))
        "location": {
            "@type": "Place",
            "name": "{{ $event->venue }}",
            "address": {
                "@type": "PostalAddress",
                "streetAddress": "{{ $event->address ?? '' }}",
                "addressLocality": "{{ $event->city ?? '' }}",
                "addressRegion": "{{ $event->state ?? '' }}",
                "postalCode": "{{ $event->zipcode ?? '' }}",
                "addressCountry": "{{ $event->country_id ?? '' }}"
            }
        },
    @endif
    @if(!empty($extra['organiser']))
        "organizer": {
            "@type": "Organization",
            "name": "{{ $extra['organiser']->organisation ?? '' }}",
            "url": "{{ !empty($extra['organiser']->organisation_url) ? route('organiser_show', [$extra['organiser']->organisation_url]) : '' }}"
        },
    @endif
    @if(!empty($tag_groups))
        "performer": {
            @foreach ($tag_groups as $key => $group)
                @foreach ($group as $key1 => $value)        
                    "@type": "{{ ucfirst($key) }}",
                    "name": "{{ $value['title'] ?? '' }}"
                    @if(!$loop->last),@endif
                @endforeach
            @endforeach
        },
    @endif
    "offers": [
        @if ($event->tickets->isNotEmpty())
            @foreach($event->tickets as $ticket)
                {
                "@type": "Offer",
                "name": "{{ $ticket->title ?? '' }}",
                "url": "{{ url()->current() }}",
                "priceCurrency": "{{ $currency ?? '' }}",
                "price": "{{ $ticket->price ?? '0' }}",
                "availability": "{{ !empty($ticket->t_soldout) ? 'https://schema.org/SoldOut' : 'https://schema.org/InStock' }}",
                "validFrom": "{{ $ticket->sale_start_date ?? $event->start_date ?? '' }} {{ $event->start_time ?? '' }}"
                }@if(!$loop->last),@endif
            @endforeach
        @endif
    ]
}
</script>
@endsection