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

@section('title', $venue->title)
@section('meta_title', $venue->title)
@section('meta_description', $venue->short_desc)
@section('meta_url', url()->current())

@php $venue_images = json_decode($venue->images); @endphp
@if (!empty($venue_images))
    @section('meta_image', url(getStorageImage($venue_images[0])))
@endif

@section('content')
<section class="cover-img-bg" style="background-image: url({{ getStorageImage(json_decode($venue->images, true)[0]) }});">
    <div class="pb-lg-11 py-2 mt-7 cover-img-bg-2">
    @if(!empty(json_decode($venue->images, true)))
    <div class="container-fluid p-0 position-relative">
        <div style="background-image: url({{ getStorageImage(json_decode($venue->images, true)[0]) }}); height: 50vh; background-size: cover; background-position: center; position: relative;">
            <div class="overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);"></div>
            <img class="d-none" src="{{ getStorageImage(json_decode($venue->images, true)[0]) }}" alt="{{ $venue->title }}" />
            <div class="position-absolute bottom-0 start-0 z-3 text-start p-5 text-white">
                <h1 class="display-4 fw-bold text-shadow">{{ $venue->title }}</h1>
                @if($venue->address || $venue->city || $venue->state || !empty($venue->country['country_name']))
                    <p class="lead fw-semibold">
                        @if($venue->address) {{ $venue->address }} @endif
                        @if($venue->city) {{ ', '.$venue->city }} @endif
                        @if($venue->state) {{ ', '.$venue->state }} @endif
                        @if($venue->zipcode) {{ ', '.$venue->zipcode }} @endif
                        @if(!empty($venue->country['country_name'])) {{ ', '.$venue->country['country_name'] }} @endif
                    </p>
                @endif
            </div>
        </div>
    </div>
    @endif

    <div class="container py-5">
        <div class="row">
            <div class="col-12 z-3">
                <div class="venue-page-detail-card border-0 mb-5">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-12 z-3">
                                @component('eventmie::skeleton.event') @endcomponent
                                <router-view
                                    :date_format="{{ json_encode(
                                        [
                                            'vue_date_format' => format_js_date(),
                                            'vue_time_format' => format_js_time(),
                                        ],
                                        JSON_HEX_APOS,
                                    ) }}">
                                </router-view>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- About Section -->
                <div class="card shadow-sm border-0 mb-5">
                    <div class="card-header bg-light border-0 py-4">
                        <div class="d-flex align-items-center">
                            <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                <i class="fas fa-info-circle text-white"></i>
                            </div>
                            <h4 class="mb-0 fw-semibold text-dark">@lang('eventmie-pro::em.about')</h4>
                        </div>
                    </div>
                    <div class="card-body p-4">
                        <div class="fs-5 lh-base text-muted">{!! $venue->description !!}</div>
                    </div>
                </div>

                <!-- Location Section -->
                <div class="card shadow-sm border-0 mb-5">
                    <div class="card-header bg-light border-0 py-4">
                        <div class="d-flex align-items-center">
                            <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                <i class="fas fa-map-marked-alt text-white"></i>
                            </div>
                            <h4 class="mb-0 fw-semibold text-dark">@lang('eventmie-pro::em.location')</h4>
                        </div>
                    </div>
                    <div class="card-body p-4">
                        @if($venue->address || $venue->city || $venue->state || !empty($venue->country['country_name']))
                            <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($venue->address) {{ $venue->address }} @endif
                                        @if($venue->city) {{ ', '.$venue->city }} @endif
                                        @if($venue->state) {{ ', '.$venue->state }} @endif
                                        @if($venue->zipcode) {{ ', '.$venue->zipcode }} @endif
                                        @if(!empty($venue->country['country_name'])) {{ ', '.$venue->country['country_name'] }} @endif
                                    </div>
                                </div>
                            </div>
                        @endif
                        <div class="rounded overflow-hidden shadow-sm">
                            <div id="venue_map" class="w-100" style="height: 450px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</section>

<!-- Gallery Section -->
@if(!empty(json_decode($venue->images, true)))
<div class="venue-gallery-masonry">
    @foreach(json_decode($venue->images, true) as $val)
    <div class="venue-gallery-item">
        <a href="{{ getStorageImage($val) }}" class="d-block">
            <img src="{{ getStorageImage($val) }}"
                 class="venue-image-popup-trigger"
                 alt="{{ $venue->title }}"
                 loading="lazy"
                 data-img="{{ getStorageImage($val) }}" />
        </a>
    </div>
    @endforeach
</div>
@endif
<div id="venue-image-modal" class="venue-image-modal" style="display:none;">
  <span class="venue-image-modal-close" id="venue-image-modal-close">&times;</span>
  <img class="venue-image-modal-content" id="venue-image-modal-img" />
</div>

@endsection

@section('javascript')
    @Vite('resources/js/vendor/eventmie-pro/events_listing/index.js')
    <script src="https://maps.googleapis.com/maps/api/js?key={{ setting('apps.google_map_key') }}&callback=initMap&v=weekly&libraries=marker&loading=async" defer></script>
    <script>
        try {
            function initMap() {
            const myLatLng = { 
                lat: {{ $venue->glat }}, 
                lng: {{ $venue->glong }}
            };
            const map = new google.maps.Map(document.getElementById("venue_map"), {
                zoom: 18,
                center: myLatLng,
                mapId: {!!  json_encode(setting('apps.google_map_key')) !!},
            });
            new google.maps.marker.AdvancedMarkerElement({
                position: myLatLng,
                map,
                title: {!! setting('site.site_name') ? json_encode(setting('site.site_name')) : json_encode(config('app.name')) !!},
            });
        }
        window.initMap = initMap;
        } catch(e) {
            console.log(e, 'error');
        }
    </script>
    <script>
        var path = {!! json_encode($path, JSON_HEX_TAG) !!};
        var venue_path = {!! json_encode($venue_path, JSON_HEX_TAG) !!};
        var events_slider = false;
        var venue_id = {!! json_encode($venue->id, JSON_HEX_TAG) !!};
    </script>
    
<script>
function setupVenueImageModal() {
  var modal = document.getElementById('venue-image-modal');
  var modalImg = document.getElementById('venue-image-modal-img');
  var closeBtn = document.getElementById('venue-image-modal-close');
  if (!modal || !modalImg || !closeBtn) return;

  document.querySelectorAll('.venue-image-popup-trigger').forEach(function(img) {
    img.addEventListener('click', function(e) {
      e.preventDefault();
      modal.style.display = 'flex';
      modalImg.src = this.getAttribute('data-img');
      document.body.style.overflow = 'hidden';
    });
  });

  closeBtn.onclick = function() {
    modal.style.display = 'none';
    document.body.style.overflow = '';
  };

  modal.onclick = function(e) {
    if (e.target === modal) {
      modal.style.display = 'none';
      document.body.style.overflow = '';
    }
  };
}
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', setupVenueImageModal);
} else {
  setupVenueImageModal();
}
</script>
@endsection