@extends('layouts.web')

@section('content')
<section class="hero-news-section relative overflow-hidden">
  <div class="hero-gradient-bg"></div>
  <div class="hero-dots-pattern"></div>
  <div class="hero-circles">
    <div class="hero-circle hero-circle-1"></div>
    <div class="hero-circle hero-circle-2"></div>
    <div class="hero-circle hero-circle-3"></div>
  </div>
  @if(isset($activity))
  <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24 text-center">
    <h1 class="hero-news-title text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-3">{{ data_get($activity,'title') ?? data_get($activity,'name') ?? 'Judul Kegiatan' }}</h1>
    <p class="hero-news-subtitle text-lg md:text-xl text-white/90">{{ data_get($activity,'location') ?? '' }}</p>
    <div class="mt-4 flex flex-wrap items-center justify-center gap-3 text-white">
      @if(!empty($activity->date))
        <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/15 border border-white/20">
          <i class="far fa-calendar-alt"></i>
          <span>{{ $activity->date }}</span>
        </span>
      @endif
      @if(!empty($activity->location))
        <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/15 border border-white/20">
          <i class="fas fa-map-marker-alt"></i>
          <span>{{ $activity->location }}</span>
        </span>
      @endif
      @if(isset($activity->price))
        @if(($activity->price ?? 0) > 0)
          <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/15 border border-white/20">
            <i class="fas fa-tag"></i>
            <span>Rp {{ number_format($activity->price, 0, ',', '.') }}</span>
          </span>
        @else
          <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/15 border border-white/20">
            <i class="fas fa-gift"></i>
            <span>GRATIS</span>
          </span>
        @endif
      @endif
    </div>
    @if(!empty($activity->description))
      <p class="mt-4 text-base md:text-lg text-white/90 mx-auto max-w-3xl">{{ \Illuminate\Support\Str::limit(strip_tags($activity->description), 200) }}</p>
    @endif
  </div>
  @endif
  <div class="hero-rounded-bottom"></div>
</section>
@php
  $authUser = auth()->user();
  $profileIncomplete = $authUser && !empty($missingProfileFields ?? []);
  $profileComplete = $authUser && empty($missingProfileFields ?? []);
@endphp
<div class="container mx-auto px-4 my-6 activity-detail-page">
  <div class="grid grid-cols-12 gap-6">
    <!-- Kolom Kiri: Galeri + Rating & Komentar -->
    <div class="col-span-12 lg:col-span-8 flex flex-col space-y-5">
      <div id="detailCard" class="bg-white rounded-2xl shadow-md border border-gray-100">
        <div class="px-6 py-4 border-b flex items-center justify-between">
          <h5 class="m-0 font-bold text-gray-900">Galeri</h5>
          @if(isset($activity) && auth()->check() && $activity->canManageRegistration(auth()->id()))
            <button type="button" class="inline-flex items-center h-9 px-3 rounded-md bg-indigo-600 text-white hover:bg-indigo-700"
                    onclick="document.getElementById('galleryUploadForm')?.classList.toggle('hidden')">
              <i class="fas fa-plus mr-2"></i>Tambah Gambar
            </button>
          @endif
        </div>
        <div class="px-6 py-5">
          @if(isset($activity))
            @if(auth()->check() && $activity->canManageRegistration(auth()->id()))
              <form id="galleryUploadForm" data-upload-url="{{ route('gallery.store', ['activity' => $activity->id]) }}" method="POST" enctype="multipart/form-data" class="relative mb-4 rounded-md border border-indigo-200 bg-indigo-50 p-4 hidden">
                @csrf
                <div class="flex items-center gap-3">
                  <label class="inline-flex items-center gap-2 cursor-pointer">
                    <i class="fas fa-images text-indigo-600"></i>
                    <span class="font-semibold text-indigo-700">Pilih gambar</span>
                    <input id="galleryUploadInput" type="file" name="image[]" accept="image/*" multiple required class="ml-2">
                  </label>
                </div>
                <p class="mt-2 text-xs text-indigo-700">Anda dapat memilih beberapa file sekaligus (maks 10MB per gambar).</p>
                <div id="galleryPreviewGrid" class="grid grid-cols-2 md:grid-cols-4 gap-3 mt-3"></div>
                <button id="galleryUploadButton" type="button" class="absolute bottom-4 right-4 inline-flex items-center h-9 px-4 rounded-md bg-indigo-600 text-white hover:bg-indigo-700">
                  <i class="fas fa-upload mr-2"></i>Unggah
                </button>
              </form>
            @endif
            @if(isset($activity->galleries) && count($activity->galleries))
              <div class="relative">
                <div id="activityGalleryGrid" class="grid grid-rows-2 grid-flow-col auto-cols-[10rem] gap-3 overflow-x-auto pb-2 scroll-smooth">
                  @foreach($activity->galleries as $image)
                    <div class="gallery-item relative group w-40 h-28" data-gallery-id="{{ $image->id }}">
                      <img src="{{ asset('storage/activities/gallery/' . ($image->image ?? 'defoult.png')) }}" class="w-full h-full rounded-xl shadow-sm object-cover object-center bg-gray-100 transform transition-transform duration-300 group-hover:scale-105 cursor-zoom-in" alt="Galeri" onerror="this.src='{{ asset('assets/images/begron/defoult.png') }}'">
                      @if(auth()->check() && $activity->canManageRegistration(auth()->id()))
                        <button type="button"
                                class="gallery-delete-btn hidden absolute top-2 right-2 inline-flex items-center px-2 py-1 rounded-md bg-red-600/90 text-white text-xs shadow hover:bg-red-700"
                                data-delete-url="{{ route('gallery.destroy', ['activity' => $activity->id, 'gallery' => $image->id]) }}"
                                title="Hapus gambar">
                          <i class="fas fa-trash-alt mr-1"></i> Hapus
                        </button>
                      @endif
                    </div>
                  @endforeach
                </div>
                <button type="button" class="gallery-scroll-left hidden absolute left-2 top-1/2 -translate-y-1/2 inline-flex items-center justify-center w-9 h-9 rounded-full bg-white/80 hover:bg-white shadow" title="Geser kiri">
                  <i class="fas fa-chevron-left text-gray-700"></i>
                </button>
                <button type="button" class="gallery-scroll-right hidden absolute right-2 top-1/2 -translate-y-1/2 inline-flex items-center justify-center w-9 h-9 rounded-full bg-white/80 hover:bg-white shadow" title="Geser kanan">
                  <i class="fas fa-chevron-right text-gray-700"></i>
                </button>
              </div>
            @else
              <p class="text-gray-500 m-0">Belum ada foto galeri yang ditambahkan.</p>
            @endif
          @else
            <p class="text-muted m-0">Data kegiatan tidak tersedia.</p>
          @endif
        </div>
      </div>

      <!-- Item Kiri Baris 2: Rating & Komentar -->
      <div class="bg-white rounded-2xl shadow-md border border-gray-100 mt-5">
        <div class="px-6 py-4 border-b">
          <h5 class="m-0 font-bold text-gray-900">Rating & Komentar</h5>
        </div>
        <div class="px-6 py-5">
          @php
            $ratingsQuery = isset($activity)
              ? $activity->allComments()->whereNull('parent_id')->whereNotNull('rating')
              : collect([]);
            $averageRating = isset($activity) ? $activity->averageRating() : 0;
            $ratingCounts = [];
            for ($i = 1; $i <= 5; $i++) {
              $ratingCounts[$i] = isset($activity) ? (clone $ratingsQuery)->where('rating', $i)->count() : 0;
            }
            $totalRatings = array_sum($ratingCounts);
          @endphp

          <div class="px-4 py-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
              <div class="col-span-1 flex items-center gap-4">
                <div>
                  <div class="text-4xl font-bold text-gray-900">{{ number_format($averageRating, 1) }}</div>
                  <div class="text-gray-500 text-sm">Berdasarkan {{ $totalRatings }} rating</div>
                </div>
                <div class="flex text-amber-400 text-xl">
                  @for($i=1;$i<=5;$i++)
                    <i class="fas fa-star {{ $i <= round($averageRating) ? '' : 'text-gray-300' }}"></i>
                  @endfor
                </div>
              </div>
              <div class="col-span-2 space-y-2">
                @for($i=5; $i>=1; $i--)
                  @php
                    $count = $ratingCounts[$i] ?? 0;
                    $pct = $totalRatings > 0 ? round(($count / $totalRatings) * 100) : 0;
                  @endphp
                  <div class="flex items-center gap-3">
                    <div class="w-5 text-sm text-gray-600">{{ $i }}</div>
                    <div class="flex-1 h-2 bg-gray-200 rounded">
                      <div class="h-2 bg-amber-400 rounded" style="width: {{ $pct }}%"></div>
                    </div>
                    <div class="w-6 text-right text-xs text-gray-500">{{ $count }}</div>
                  </div>
                @endfor
              </div>
            </div>

            @auth
              <form action="{{ route('activity.comments.store', $activity) }}" method="POST" class="mb-4 js-reply-form">
                @csrf
                <div class="rounded-md border border-yellow-200 bg-yellow-50 p-4 mb-3">
                  <div class="font-semibold text-yellow-800 mb-2">Berikan Rating</div>
                  <div class="flex items-center gap-2" id="ratingSelector" data-current-rating="{{ $userRating ?? 0 }}" data-rate-url="{{ route('activity.rate', $activity) }}">
                    @for($i=1;$i<=5;$i++)
                      <button type="button" class="p-1" data-value="{{ $i }}">
                        <i class="fas fa-star text-xl"></i>
                      </button>
                    @endfor
                    <span id="ratingSavedMsg" class="ml-3 text-xs text-green-600 hidden">Tersimpan</span>
                  </div>
                  <div class="text-xs text-yellow-700 mt-1">Pilih rating untuk aktivitas ini</div>
                </div>

                <div class="rounded-md border border-blue-200 bg-blue-50 p-4">
                  <div class="font-semibold text-blue-800 mb-2">Tambah Komentar</div>
                  <textarea name="body" class="w-full border border-blue-200 rounded-md px-3 py-2 bg-white text-gray-900 placeholder-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500" rows="3" placeholder="Bagikan pendapat Anda tentang aktivitas ini..." required></textarea>
                  <div class="mt-3 flex">
                    <button type="submit" class="inline-flex items-center h-10 px-4 rounded-md bg-indigo-600 text-white hover:bg-indigo-700 transition">
                      <i class="fas fa-comment-dots mr-2"></i>Kirim Komentar
                    </button>
                  </div>
                </div>
              </form>
            @else
              <div class="space-y-3" id="guestCommentArea">
                <div class="rounded-md border border-yellow-200 bg-yellow-50 p-4">
                  <div class="font-semibold text-yellow-800 mb-2">Berikan Rating</div>
                  <div class="flex items-center gap-2 text-gray-300 guest-trigger" id="guestRatingStars">
                    @for($i=1;$i<=5;$i++)
                      <button type="button" class="p-1"><i class="fas fa-star text-xl"></i></button>
                    @endfor
                  </div>
                </div>
                <div class="rounded-md border border-blue-200 bg-blue-50 p-4">
                  <div class="font-semibold text-blue-800 mb-2">Tambah Komentar</div>
                  <textarea id="guestCommentTextarea" class="w-full border border-blue-200 rounded-md px-3 py-2 bg-white" rows="3" placeholder="Bagikan pendapat Anda..."></textarea>
                  <div class="mt-3">
                    <button type="button" id="guestSubmitBtn" class="inline-flex items-center h-10 px-4 rounded-md bg-indigo-600 text-white hover:bg-indigo-700 transition">
                      <i class="fas fa-paper-plane mr-2"></i>Kirim Komentar
                    </button>
                  </div>
                </div>
                <div id="guestIdentityModal" class="hidden fixed inset-0 z-50 flex items-center justify-center">
                  <div class="absolute inset-0 bg-black/40"></div>
                  <div class="relative bg-white rounded-lg shadow-lg w-full max-w-lg mx-4">
                    <div class="px-5 py-4 border-b flex items-center justify-between">
                      <h6 class="m-0 font-semibold">Lengkapi Identitas</h6>
                      <button type="button" class="p-1 text-gray-500 hover:text-gray-700" onclick="document.getElementById('guestIdentityModal').classList.add('hidden')"><i class="fas fa-times"></i></button>
                    </div>
                    <div class="px-5 py-5">
                      <p class="text-sm text-gray-600 mb-4">Masuk terlebih dahulu untuk memberi rating atau menulis komentar.</p>
                      <a href="{{ route('auth.google.login', ['redirect' => urlencode(request()->fullUrl() . '#comments')]) }}" class="w-full inline-flex items-center justify-center gap-2 h-11 px-4 rounded-md bg-white border border-gray-300 shadow-sm hover:bg-gray-50 transition text-gray-700">
                        <span class="inline-flex items-center justify-center w-5 h-5">
                          <i class="fab fa-google text-red-500"></i>
                        </span>
                        <span class="font-medium">Lanjutkan dengan Google</span>
                      </a>
                      <div class="mt-4 text-center">
                        <button type="button" class="inline-flex items-center h-9 px-3 rounded-md border text-gray-600 hover:bg-gray-50" onclick="document.getElementById('guestIdentityModal').classList.add('hidden')">Tutup</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            @endauth

            <hr class="my-4">

            <h6 class="font-semibold mb-3 text-gray-800">Semua Komentar</h6>
            <div class="space-y-3" id="comments">
              @forelse(($activity->comments ?? collect()) as $comment)
                @php $isRatingOnly = ($comment->rating ?? null) && empty(trim($comment->body ?? '')); @endphp
                @if($isRatingOnly)
                  @continue
                @endif
                @include('partials.activity_comment_item', ['comment' => $comment, 'activity' => $activity])
              @empty
                <div class="text-gray-500">Belum ada komentar.</div>
              @endforelse
            </div>
          </div>
        </div>
      </div>

    </div>

    <!-- Kolom Kanan: Daftar Peserta -->
    <div class="col-span-12 lg:col-span-4 min-h-0">
      <div id="participantsCard" class="bg-white rounded-2xl shadow-md border border-gray-100 flex flex-col h-full overflow-hidden">
        <div id="participantsHeader" class="px-6 py-4 border-b flex items-center justify-between">
          <h5 class="m-0 font-bold text-gray-900">Daftar Peserta</h5>
          @php
            $activityPrice = (int) ($activity->price ?? 0);
            $registrationStatus = (int) ($activity->pendaftaran ?? 1);
            $alreadyParticipant = (($currentStatus ?? null) === 'enrolled') || ($isJoined ?? false) || ((isset($enrollmentStatus) && $enrollmentStatus === \App\Models\ActivityUser::STATUS_ACTIVE));
            $registerTarget = [
              'type' => 'link',
              'url' => route('activity.enroll', $activity),
              'label' => 'Daftar Kegiatan',
            ];
            if ($registrationStatus === 0) {
              $registerTarget = ['type' => 'disabled', 'url' => null, 'label' => 'Pendaftaran Belum Dibuka'];
            } elseif ($registrationStatus === 2) {
              $registerTarget = ['type' => 'disabled', 'url' => null, 'label' => 'Pendaftaran Ditutup'];
            } else {
              if ($activityPrice > 0) {
                if (method_exists($activity, 'isAutomaticPayment') && $activity->isAutomaticPayment()) {
                  $registerTarget = ['type' => 'link', 'url' => route('midtrans.payment.create', $activity->id), 'label' => 'Daftar Kegiatan'];
                } else {
                  $registerTarget = ['type' => 'link', 'url' => route('payments.create', $activity->id), 'label' => 'Daftar Kegiatan'];
                }
              } else {
                $registerTarget = ['type' => 'form', 'url' => route('activity.enroll', $activity), 'label' => 'Daftar Kegiatan'];
              }
            }
          @endphp
          <div class="flex items-center">
            @php $hasPendingCTA = auth()->check() && !empty($showCompletePaymentCTA) && $showCompletePaymentCTA && !empty($completePaymentUrl); @endphp
            @if($hasPendingCTA)
              <a href="{{ $completePaymentUrl }}" class="inline-flex items-center gap-2 h-9 px-4 rounded-md bg-amber-500 text-white text-sm font-semibold hover:bg-amber-600">
                <i class="fas fa-credit-card"></i> {{ $completePaymentLabel ?? 'Selesaikan Pembayaran' }}
              </a>
            @elseif($alreadyParticipant)
              <a id="registerActionLink" href="{{ route('activity.show', $activity->id) }}" data-target="show" class="inline-flex items-center gap-2 h-9 px-4 rounded-md bg-emerald-600 text-white text-sm font-semibold hover:bg-emerald-700">
                <i class="fas fa-door-open"></i> Menuju Kegiatan
              </a>
            @elseif($registerTarget['type'] === 'disabled')
              <span class="inline-flex items-center gap-2 h-9 px-4 rounded-md bg-gray-300 text-gray-700 text-sm font-semibold" title="{{ $registerTarget['label'] }}">
                <i class="fas fa-ban"></i> {{ $registerTarget['label'] }}
              </span>
            @elseif($registerTarget['type'] === 'form')
              <form id="registerActionForm" action="{{ $registerTarget['url'] }}" method="POST">
                @csrf
                <button id="registerActionBtn" type="button" class="inline-flex items-center gap-2 h-9 px-4 rounded-md bg-indigo-600 text-white text-sm font-semibold hover:bg-indigo-700">
                  <i class="fas fa-user-plus"></i> Daftar Kegiatan
                </button>
              </form>
            @else
              <a id="registerActionLink" href="{{ $registerTarget['url'] }}" class="inline-flex items-center gap-2 h-9 px-4 rounded-md bg-indigo-600 text-white text-sm font-semibold hover:bg-indigo-700">
                <i class="fas fa-user-plus"></i> Daftar Kegiatan
              </a>
            @endif
          </div>
        </div>
        <div id="participantsBody" class="px-6 py-5 flex-1 flex flex-col min-h-0">
          @if(isset($participants))
            <div class="mb-3" data-edit-protected="true">
              <div class="search-field-wrap">
                <i class="fas fa-search search-icon" aria-hidden="true"></i>
                <input type="search" id="participantSearch" class="form-control search-input" placeholder="Cari peserta..." autocomplete="off" aria-label="Cari peserta">
              </div>
              <small id="participantsSearchInfo" class="text-gray-500"></small>
            </div>
            <div id="participantsScroll" class="flex-1 min-h-0 overflow-y-auto pr-1">
            <ul id="participantsList" class="list-unstyled m-0" data-edit-protected="true">
              @include('partials.participants_detail_list_items', ['participants' => $participants, 'activity' => $activity, 'disable_click' => true])
            </ul>
            </div>
          @else
            <p class="text-gray-500 m-0">Data peserta tidak tersedia.</p>
          @endif
        </div>
        
      </div>
    </div>

  </div>
</div>

<div id="profileIncompleteModal" class="fixed inset-0 bg-black/40 hidden z-50 items-center justify-center">
  <div class="relative bg-white rounded-lg shadow-lg w-full max-w-lg mx-4 profile-modal">
    <div class="px-5 py-4 border-b flex items-center justify-between modal-header-gradient">
      <h6 class="m-0 font-semibold inline-flex items-center gap-2"><i class="fas fa-id-card text-indigo-600"></i><span>Lengkapi Profil Anda</span></h6>
      <button type="button" id="profileIncompleteClose" class="p-1 text-gray-500 hover:text-gray-700"><i class="fas fa-times"></i></button>
    </div>
    <div class="px-5 py-5">
      <div class="rounded-md border border-amber-200 bg-amber-50 p-3 mb-3 inline-flex items-start gap-3">
        <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-amber-100 text-amber-700"><i class="fas fa-info"></i></span>
        <div class="text-sm text-amber-800">Untuk kebutuhan ID Card acara, Anda harus melengkapi profil untuk dapat mengikuti kegiatan ini.</div>
      </div>
      <p class="text-sm text-gray-700 mb-2">Data yang belum lengkap:</p>
      <ul id="missingProfileList" class="list-disc ml-5 text-sm text-gray-800"></ul>
      <div id="missingProfileChips" class="mt-2 flex flex-wrap gap-2"></div>
      <div class="mt-4 flex items-center gap-3">
        @if(auth()->check())
          <a href="{{ route('profile.edit', auth()->user()) }}" class="inline-flex items-center h-10 px-4 rounded-md bg-indigo-600 text-white hover:bg-indigo-700">
            <i class="fas fa-user-cog mr-2"></i> Buka Profil
          </a>
        @else
          <a href="{{ route('auth.login') }}" class="inline-flex items-center h-10 px-4 rounded-md bg-indigo-600 text-white hover:bg-indigo-700">Masuk</a>
        @endif
        <button type="button" id="profileIncompleteDismiss" class="inline-flex items-center h-10 px-4 rounded-md border text-gray-600 hover:bg-gray-50">Tutup</button>
      </div>
    </div>
  </div>
</div>

<!-- Blok Full Width: Galeri -->
    @push('scripts')
    <script>
      window.profileComplete = {{ ($profileComplete ?? false) ? 'true' : 'false' }};
      window.missingProfileFields = {!! json_encode($missingProfileFields ?? []) !!};
    </script>
    <script src="{{ asset('js/activity-detail.js') }}"></script>
    <script src="{{ asset('js/news-rating.js') }}"></script>
    <script src="{{ asset('js/news-guest-identity.js') }}"></script>
    <script src="{{ asset('js/activity-reply-toggle.js') }}"></script>
    <script>
      document.addEventListener('DOMContentLoaded', function(){
        document.querySelectorAll('.js-reply-toggle').forEach(function(btn){
          btn.addEventListener('click', function(){
            var bubble = btn.closest('.rounded-2xl');
            if (!bubble) return;
            var replyArea = bubble.querySelector('.reply-area');
            if (replyArea) { replyArea.classList.toggle('hidden'); }
            var replies = bubble.querySelector('.replies-area');
            if (replies && replies.classList.contains('hidden')) {
              replies.classList.remove('hidden');
              var toggleBtn = bubble.querySelector('.js-replies-toggle');
              if (toggleBtn) {
                var closeText = toggleBtn.getAttribute('data-close-text') || 'Tutup balasan';
                toggleBtn.textContent = closeText;
              }
            }
          });
        });
        document.querySelectorAll('.js-replies-toggle').forEach(function(btn){
          btn.addEventListener('click', function(){
            var bubble = btn.closest('.rounded-2xl');
            if (!bubble) return;
            var area = bubble.querySelector('.replies-area');
            if (!area) return;
            var openText = btn.getAttribute('data-open-text') || 'Tampilkan balasan';
            var closeText = btn.getAttribute('data-close-text') || 'Tutup balasan';
            var isHidden = area.classList.contains('hidden');
            if (isHidden) { area.classList.remove('hidden'); btn.textContent = closeText; }
            else { area.classList.add('hidden'); btn.textContent = openText; }
          });
        });
      });
    </script>
    <script>
      document.addEventListener('DOMContentLoaded', function(){
        document.querySelectorAll('.js-reply-form').forEach(function(f){
          f.addEventListener('submit', function(){
            try { sessionStorage.setItem('commentScrollY', String(window.scrollY)); } catch(e) {}
          });
        });
        try {
          var y = sessionStorage.getItem('commentScrollY');
          if (y) {
            window.scrollTo({ top: parseInt(y, 10) || 0, left: 0, behavior: 'auto' });
            sessionStorage.removeItem('commentScrollY');
          }
        } catch(e) {}
      });
    </script>
    <script>
    // Participant search configuration
    document.addEventListener('DOMContentLoaded', function() {
        const input = document.getElementById('participantSearch');
        if (input) {
            input.setAttribute('data-activity-id', '{{ isset($activity) ? (int) $activity->id : '' }}');
            input.setAttribute('data-search-url', '{{ route('activity.participants.search') }}');
        }
    });
    </script>
    <script src="{{ asset('js/activity-participant-search.js') }}"></script>
    @endpush
  
  <!-- Lightbox untuk tampilan besar gambar -->
  <div id="galleryLightbox" class="gallery-lightbox">
    <button id="galleryLightboxClose" type="button" class="lightbox-close">
      <i class="fas fa-times"></i>
    </button>
    <img id="galleryLightboxImg" src="" alt="Preview Gambar" />
  </div>
  
@push('styles')
<style>
  /* Modern visual enhancements scoped to activity detail page */
  .activity-detail-page .card {
    border-radius: 16px;
    border: 1px solid #eef2f7; /* soft border */
    box-shadow: 0 6px 24px rgba(17, 24, 39, 0.06); /* soft shadow */
    transition: box-shadow .2s ease, transform .2s ease;
  }
  .activity-detail-page .card:hover {
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.10);
  }
  .activity-detail-page .card-header {
    background: linear-gradient(180deg, #ffffff, #f9fafb);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    padding: 14px 18px;
  }
  .activity-detail-page .card-header h5 {
    letter-spacing: 0.2px;
  }
  .activity-detail-page .card-body {
    padding: 1.25rem 1.25rem;
  }

  /* Image presentation */
  .activity-detail-page .img-fluid.rounded {
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(17, 24, 39, 0.08);
    object-fit: cover;
    aspect-ratio: 16 / 9; /* keep modern ratio without changing container */
    background-color: #f3f4f6; /* gray-100 placeholder */
  }

  /* Table aesthetics */
  .activity-detail-page .table {
    border-collapse: separate;
    border-spacing: 0 8px; /* soft row spacing */
  }
  .activity-detail-page .table th,
  .activity-detail-page .table td {
    background: #ffffff;
    border: 1px solid #eef2f7;
    padding: .6rem .75rem;
    vertical-align: middle;
  }
  .activity-detail-page .table th {
    width: 40%;
    color: #6b7280; /* gray-500 */
    font-weight: 600;
    background: #f9fafb;
    vertical-align: top; /* pastikan konten kolom pertama di pojok kiri atas */
    text-align: left;
  }
  .activity-detail-page .table tr:hover th,
  .activity-detail-page .table tr:hover td {
    background: #f5f7ff; /* subtle hover */
  }

  /* Buttons refinement */
  .activity-detail-page .btn {
    border-radius: 10px;
    font-weight: 600;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease;
  }
  .activity-detail-page .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(17, 24, 39, 0.10);
  }
  .activity-detail-page .btn-primary {
    background: linear-gradient(180deg, #4f46e5, #4338ca);
    border-color: #4338ca;
  }
  .activity-detail-page .btn-outline-primary {
    border-color: #4f46e5;
    color: #4f46e5;
  }
  .activity-detail-page .btn-outline-primary:hover {
    background: #4f46e5;
    color: #ffffff;
  }

  /* Participant list items */
  .activity-detail-page .list-unstyled li {
    border: 1px solid transparent;
    border-radius: 10px;
    padding: .35rem .5rem;
    transition: background-color .12s ease, border-color .12s ease;
  }
  .activity-detail-page .list-unstyled li:hover {
    background-color: #f9fafb;
    border-color: #eef2f7;
  }
  .activity-detail-page .list-unstyled img.rounded-circle {
    box-shadow: 0 0 0 2px #e5e7eb; /* ring */
  }

  /* Status badge styles */
  .activity-detail-page .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 12px;
    line-height: 1.2;
    border: 1px solid transparent;
  }
  /* Pastikan avatar peserta tidak melebar */
  .activity-detail-page #participantsList img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    flex-shrink: 0;
  }
  .activity-detail-page .status-badge i { font-size: 8px; }
  .activity-detail-page .status-active {
    background-color: #dcfce7; /* green-100 */
    color: #166534; /* green-800 */
    border-color: #86efac; /* green-300 */
  }
  .activity-detail-page .status-pending {
    background-color: #fef3c7; /* amber-100 */
    color: #92400e; /* amber-800 */
    border-color: #fcd34d; /* amber-300 */
  }
  .activity-detail-page .status-rejected {
    background-color: #fee2e2; /* red-100 */
    color: #991b1b; /* red-800 */
    border-color: #fca5a5; /* red-300 */
  }
  .activity-detail-page .status-unknown {
    background-color: #e5e7eb; /* gray-200 */
    color: #374151; /* gray-700 */
    border-color: #d1d5db; /* gray-300 */
  }

  /* Search field styling */
  .activity-detail-page .search-field-wrap { position: relative; }
  .activity-detail-page .search-field-wrap .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af; /* gray-400 */
    font-size: 14px;
    pointer-events: none;
  }
  .activity-detail-page .search-field-wrap .search-input {
    padding-left: 36px; /* space for icon */
    height: 40px;
    border-radius: 10px;
    border: 1px solid #e5e7eb; /* gray-200 */
    box-shadow: 0 2px 8px rgba(17, 24, 39, 0.04);
    transition: box-shadow .12s ease, border-color .12s ease;
  }
  .activity-detail-page .search-field-wrap .search-input::placeholder { color: #9ca3af; }
  .activity-detail-page .search-field-wrap .search-input:focus {
    outline: none;
    border-color: #4f46e5; /* indigo-600 */
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
  }

  /* Tampilan percakapan komentar */
  .comment-bubble {
    background-color: #f9fafb; /* gray-50 */
    border: 1px solid #e5e7eb; /* gray-200 */
    border-radius: 8px;
    padding: 10px 12px;
  }
  .comment-children {
    border-left: 2px solid #e5e7eb; /* gray-200 */
    padding-left: 12px;
    margin-left: 6px;
  }
  .list-group-item {
    border: none;
    padding-left: 0;
    padding-right: 0;
  }
  .reply-summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    color: #2563eb; /* blue-600 */
  }
  .reply-summary:hover { color: #1d4ed8; /* blue-700 */ }
  /* Sembunyikan marker default dari <summary> */
  details .reply-summary::-webkit-details-marker { display: none; }
  details .reply-summary::marker { content: ''; }
  .profile-modal .modal-header-gradient { background: linear-gradient(180deg, #ffffff, #f9fafb); }
  .profile-modal .chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 9999px;
    font-size: 12px;
    line-height: 1;
    background-color: #eef2ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
  }
</style>
@endpush

@push('scripts')
<script>
    // Participant search configuration
    document.addEventListener('DOMContentLoaded', function() {
        const input = document.getElementById('participantSearch');
        if (input) {
            input.setAttribute('data-activity-id', '{{ isset($activity) ? (int) $activity->id : '' }}');
            input.setAttribute('data-search-url', '{{ route('activity.participants.search') }}');
        }
    });
</script>
<script src="{{ asset('js/news-rating.js') }}"></script>
<script src="{{ asset('js/news-guest-identity.js') }}"></script>
<script src="{{ asset('js/activity-reply-toggle.js') }}"></script>
<script src="{{ asset('js/activity-participant-search.js') }}"></script>
@endpush
@endsection