@extends('layouts.web')

@section('content')
@php
    $materialsList = $materials ?? collect();
    $participantCollection = $participants ?? collect();
    if ($participantCollection instanceof \Illuminate\Contracts\Pagination\Paginator) {
        $participantCollection = collect($participantCollection->items());
    } elseif (! $participantCollection instanceof \Illuminate\Support\Collection) {
        $participantCollection = collect(is_array($participantCollection) ? $participantCollection : []);
    }

    $activityDateLabel = $activity->date
        ? \Carbon\Carbon::parse($activity->date)->translatedFormat('d F Y')
        : 'Tanggal belum ditentukan';
    $rawTime = $activity->start_time ?? $activity->time ?? null;
    $activityTimeLabel = $rawTime
        ? (\Carbon\Carbon::hasFormat($rawTime, 'H:i:s') || \Carbon\Carbon::hasFormat($rawTime, 'H:i')
            ? \Carbon\Carbon::parse($rawTime)->format('H:i')
            : $rawTime)
        : 'Waktu belum ditentukan';
    $activityLocation = $activity->location ?? 'Lokasi belum ditentukan';
    $activityPriceLabel = ($activity->price ?? 0) > 0
        ? 'Rp ' . number_format($activity->price, 0, ',', '.')
        : 'Gratis';
    $participantCount = $participantCollection->count();
@endphp

<section class="relative overflow-hidden bg-gradient-to-r from-[#0f172a] via-[#1d4ed8] to-[#4338ca] text-white rounded-[32px] shadow-[0_20px_50px_rgba(15,23,42,0.35)] mx-4 md:mx-6 mt-6 mb-8">
  <div class="absolute inset-0 opacity-30 bg-[radial-gradient(circle_at_top,_rgba(255,255,255,0.5),_transparent_65%)]"></div>
  <div class="relative z-10 px-6 py-10 lg:px-10 lg:py-12 grid gap-8 lg:grid-cols-[1.4fr_1fr] max-w-7xl mx-auto w-full items-center">
    <div class="space-y-4">
      <p class="uppercase tracking-[0.6em] text-white/70 text-xs">Detail Kegiatan</p>
      <h1 class="text-3xl lg:text-4xl font-bold leading-tight">{{ $activity->name ?? 'Judul Aktivitas' }}</h1>
      <p class="text-base lg:text-lg text-white/80">
        {{ \Illuminate\Support\Str::limit(strip_tags($activity->excerpt ?? $activity->description ?? 'Belum ada deskripsi kegiatan.'), 240) }}
      </p>
      <div class="flex flex-wrap gap-3 pt-4">
        <div class="flex items-center gap-3 bg-white/10 border border-white/20 rounded-2xl px-4 py-2">
          <span class="inline-flex items-center justify-center w-10 h-10 rounded-2xl bg-white/15 border border-white/20">
            <i class="fas fa-calendar-day"></i>
          </span>
          <div>
            <p class="text-xs uppercase tracking-[0.4em] text-white/60">Tanggal</p>
            <p class="font-semibold">{{ $activityDateLabel }}</p>
          </div>
        </div>
        <div class="flex items-center gap-3 bg-white/10 border border-white/20 rounded-2xl px-4 py-2">
          <span class="inline-flex items-center justify-center w-10 h-10 rounded-2xl bg-white/15 border border-white/20">
            <i class="fas fa-clock"></i>
          </span>
          <div>
            <p class="text-xs uppercase tracking-[0.4em] text-white/60">Waktu</p>
            <p class="font-semibold">{{ $activityTimeLabel }}</p>
          </div>
        </div>
        <div class="flex items-center gap-3 bg-white/10 border border-white/20 rounded-2xl px-4 py-2">
          <span class="inline-flex items-center justify-center w-10 h-10 rounded-2xl bg-white/15 border border-white/20">
            <i class="fas fa-map-marker-alt"></i>
          </span>
          <div>
            <p class="text-xs uppercase tracking-[0.4em] text-white/60">Lokasi</p>
            <p class="font-semibold">{{ $activityLocation }}</p>
          </div>
        </div>
        <div class="flex items-center gap-3 bg-white/10 border border-white/20 rounded-2xl px-4 py-2">
          <span class="inline-flex items-center justify-center w-10 h-10 rounded-2xl bg-white/15 border border-white/20">
            <i class="fas fa-ticket-alt"></i>
          </span>
          <div>
            <p class="text-xs uppercase tracking-[0.4em] text-white/60">Biaya</p>
            <p class="font-semibold">{{ $activityPriceLabel }}</p>
          </div>
        </div>
      </div>
      @php
        $activityPrice = (int) ($activity->price ?? 0);
        $registrationStatus = (int) ($activity->pendaftaran ?? 1); // 0: Belum Dibuka, 1: Dibuka, 2: Ditutup
        // Default register target
        $registerTarget = [
            'type' => 'link',
            'url' => route('activity.enroll', $activity),
            'label' => 'Daftar Kegiatan',
        ];
        // Jika pendaftaran belum dibuka atau ditutup, nonaktifkan CTA
        if ($registrationStatus === 0) {
            $registerTarget = [
                'type' => 'disabled',
                'url' => null,
                'label' => 'Pendaftaran Belum Dibuka',
            ];
        } elseif ($registrationStatus === 2) {
            $registerTarget = [
                'type' => 'disabled',
                'url' => null,
                'label' => 'Pendaftaran Ditutup',
            ];
        } else {
            // Pendaftaran dibuka, sesuaikan dengan tipe pembayaran
            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 flex-wrap items-center gap-4 pt-2">
        <div class="text-sm text-white/80">
          <p class="uppercase text-xs tracking-[0.4em]">Peserta</p>
          <p class="text-lg font-semibold">{{ $participantCount }} Terdaftar</p>
        </div>
        <div>
          @if(isset($currentStatus) && $currentStatus === 'enrolled')
            <span class="inline-flex items-center gap-2 px-5 py-2 rounded-full bg-emerald-500 text-white font-semibold shadow shadow-emerald-500/40">
              <i class="fas fa-check-circle"></i> Status: Aktif
            </span>
          @elseif(isset($currentStatus) && $currentStatus === 'auto-pending')
            <a href="{{ route('midtrans.payment.create', $activity->id) }}"
               class="inline-flex items-center gap-2 px-5 py-2 rounded-full bg-amber-500 text-white font-semibold shadow shadow-amber-500/40 hover:bg-amber-600 transition"
               title="Selesaikan pembayaran otomatis">
              <i class="fas fa-credit-card"></i> Selesaikan Pembayaran
            </a>
          @elseif(isset($enrollmentStatus) && $enrollmentStatus === \App\Models\ActivityUser::STATUS_VERIFICATION)
            <span class="inline-flex items-center gap-2 px-5 py-2 rounded-full bg-amber-500 text-white font-semibold shadow shadow-amber-500/40">
              <i class="fas fa-hourglass-half"></i> Menunggu Verifikasi
            </span>
          @elseif(isset($enrollmentStatus) && $enrollmentStatus === \App\Models\ActivityUser::STATUS_REJECTED)
            <span class="inline-flex items-center gap-2 px-5 py-2 rounded-full bg-rose-500 text-white font-semibold shadow shadow-rose-500/40">
              <i class="fas fa-times-circle"></i> Pendaftaran Ditolak
            </span>
          @else
            @if($registerTarget['type'] === 'disabled')
              <span class="inline-flex items-center gap-2 px-5 py-2 rounded-full bg-gray-400 text-white font-semibold shadow"
                    title="{{ $registerTarget['label'] }}">
                <i class="fas fa-ban"></i> {{ $registerTarget['label'] }}
              </span>
            @endif
          @endif
        </div>
      </div>
    </div>
    <div class="rounded-3xl overflow-hidden border border-white/20 shadow-lg bg-white/5">
      @php
        // Gunakan hero default jika aktivitas belum punya gambar
        $defaultBanner = asset('assets/images/hero/defoult.webp');
        $rawBanner = $activity->image ?: ($activity->banner ?? null);

        // Nilai awal: selalu default
        $bannerPath = $defaultBanner;

        if (is_string($rawBanner) && trim($rawBanner) !== '') {
            // Jika URL absolut, pakai langsung
            if (\Illuminate\Support\Str::startsWith($rawBanner, ['http://', 'https://'])) {
                $bannerPath = $rawBanner;
            } else {
                // Normalisasi path relatif terhadap disk public
                $normalized = ltrim($rawBanner, '/');
                if (\Illuminate\Support\Str::startsWith($normalized, 'public/')) {
                    $normalized = \Illuminate\Support\Str::after($normalized, 'public/');
                }

                // Hanya gunakan jika file benar‑benar ada di storage/public
                if (\Illuminate\Support\Facades\Storage::disk('public')->exists($normalized)) {
                    $bannerPath = asset('storage/' . $normalized);
                }
            }
        }
      @endphp
      <img src="{{ $bannerPath }}"
           alt="Banner {{ $activity->name }}"
           onerror="this.onerror=null;this.src='{{ $defaultBanner }}';"
           class="block w-full h-auto object-cover">
    </div>
  </div>
@php
  $authUser = auth()->user();
  $profileIncomplete = $authUser && !empty($missingProfileFields ?? []);
@endphp

</section>
@php
  // Hak akses untuk melihat detail di bawah hero
  $authUser = auth()->user();
  $isSuperAdmin = $authUser && $authUser->role === 'superadmin';
  $isAdmin = $authUser && $authUser->role === 'admin';
  $isCreator = $authUser && $activity->user_id === $authUser->id;
  $isCommittee = $authUser && method_exists($activity, 'canManageRegistration') ? $activity->canManageRegistration($authUser->id) : false;
  $canAccessManagement = $isSuperAdmin || $isAdmin || $isCreator || $isCommittee;

  // Peserta yang boleh melihat detail: sudah terdaftar (registered/enrolled) ATAU pengelola (admin, superadmin, creator, panitia)
  $canViewDetails = auth()->check() && (
      ($isRegistered ?? false) ||
      ($isEnrolled ?? false) ||
      $canAccessManagement
  );
@endphp

@if($canViewDetails)
<div class="grid grid-cols-1 md:grid-cols-[65%_25%] items-start min-h-screen bg-[#fafafa] gap-6 px-[5%] w-full overflow-x-hidden">
  <!-- PANEL JADWAL (KIRI) -->
  <div class="w-full min-w-0 mt-0 space-y-6 left-column">
    <div class="w-full bg-transparent rounded-2xl p-4">
    <div class="bg-white rounded-2xl shadow-[0_15px_35px_rgba(15,23,42,0.08)] px-6 pt-6 pb-4 font-[Segoe UI,Arial,sans-serif] border border-gray-100 w-full">
      <h3 class="text-lg font-semibold text-gray-900 mb-1">Rangkaian Kegiatan</h3>
      <p class="text-xs uppercase tracking-[0.4em] text-gray-400 mb-4">Schedule Acara</p>

      @if(($activity->rundowns ?? collect())->count())
        <div class="overflow-x-auto rounded-2xl border border-gray-100">
          <table class="min-w-full text-sm text-gray-700">
            <thead class="bg-gray-50 text-xs uppercase tracking-widest text-gray-500 border-b">
              <tr>
                <th class="py-3 px-4 text-left w-12">No</th>
                <th class="py-3 px-4 text-left">Kegiatan</th>
                <th class="py-3 px-4 text-left w-40">Pembicara</th>
                <th class="py-3 px-4 text-left w-48 whitespace-nowrap">Penanggung Jawab</th>
                <th class="py-3 px-4 text-left w-32 whitespace-nowrap">Waktu</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
              @foreach(($activity->rundowns ?? collect())->sortBy('start_time') as $rundown)
                <tr class="hover:bg-indigo-50/30">
                  <td class="py-3 px-4 font-semibold text-indigo-600">{{ $loop->iteration }}</td>
                  <td class="py-3 px-4">
                    <p class="font-semibold text-gray-900">{{ $rundown->title ?? 'Agenda' }}</p>
                    @if($rundown->description)
                      <p class="text-xs text-gray-500">{{ $rundown->description }}</p>
                    @endif
                  </td>
                  <td class="py-3 px-4">
                    <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full bg-indigo-50 text-indigo-700 border border-indigo-100 text-xs">
                      <i class="fas fa-user-tie"></i>{{ $rundown->speaker ?? 'N/A' }}
                    </span>
                  </td>
                  <td class="py-3 px-4">
                <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full bg-emerald-50 text-emerald-700 border border-emerald-100 text-xs">
                      <i class="fas fa-user-shield"></i>{{ $rundown->pic ?? $rundown->location ?? 'N/A' }}
                    </span>
                  </td>
                  <td class="py-3 px-4 font-semibold text-gray-700 whitespace-nowrap">
                    {{ optional($rundown->start_time) ? \Carbon\Carbon::parse($rundown->start_time)->format('H:i') : '-' }}
                    -
                    {{ optional($rundown->end_time) ? \Carbon\Carbon::parse($rundown->end_time)->format('H:i') : '-' }}
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      @else
        <p class="text-sm text-gray-500">Belum ada jadwal kegiatan yang diinput.</p>
      @endif
    </div>

    <div class="bg-white rounded-2xl shadow-[0_12px_30px_rgba(15,23,42,0.06)] px-6 pt-6 pb-4 font-[Segoe UI,Arial,sans-serif] border border-gray-100 w-full">
      <div class="flex items-center justify-between mb-4">
        <div>
          <p class="text-xs uppercase tracking-[0.4em] text-gray-400 mb-1">Materi</p>
          <h3 class="text-lg font-semibold text-gray-900">Materi Acara</h3>
        </div>
        <span class="text-xs text-gray-400">{{ $materialsList->count() }} file</span>
      </div>
      @if(($materialsList ?? collect())->count())
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
          @foreach($materialsList as $material)
            @php
              $icon = 'fas fa-file text-gray-400';
              $previewHref = '';
              $downloadHref = '';
              $path = $material->file_path;
              if (method_exists($material, 'isImage') && $material->isImage()) $icon = 'fas fa-image text-blue-500';
              elseif ($material->file_type === 'pdf') $icon = 'fas fa-file-pdf text-red-500';
              elseif ($material->file_type === 'ppt') $icon = 'fas fa-file-powerpoint text-orange-500';
              elseif ($material->file_type === 'doc') $icon = 'fas fa-file-word text-blue-600';
              elseif (method_exists($material, 'isVideo') && $material->isVideo()) $icon = 'fas fa-file-video text-purple-500';
              elseif (method_exists($material, 'isAudio') && $material->isAudio()) $icon = 'fas fa-file-audio text-green-500';
              elseif ($material->file_type === 'link') $icon = 'fas fa-link text-blue-500';
              if ($material->file_type === 'link') {
                  $previewHref = $downloadHref = $path;
              } elseif (\Illuminate\Support\Facades\Route::has('activity.preparation.download-material')) {
                  $downloadHref = route('activity.preparation.download-material', [$activity->id, $material->id]);
                  $previewHref = $downloadHref;
              } elseif ($path) {
                  if (\Illuminate\Support\Str::startsWith($path, ['http://','https://'])) {
                      $previewHref = $downloadHref = $path;
                  } else {
                      $normalized = ltrim($path, '/');
                      if (\Illuminate\Support\Str::startsWith($normalized, 'public/')) {
                          $normalized = \Illuminate\Support\Str::after($normalized, 'public/');
                      }
                      $previewHref = $downloadHref = asset('storage/' . $normalized);
                  }
              }
            @endphp
            <div class="border border-gray-100 rounded-2xl px-4 py-3 flex flex-col justify-between gap-3 h-full">
              <div class="flex items-center gap-3">
                <span class="w-11 h-11 rounded-xl bg-gray-50 text-xl flex items-center justify-center border border-gray-100">
                  <i class="{{ $icon }}"></i>
                </span>
                <div>
                  <p class="text-sm font-semibold text-gray-900">{{ $material->title ?? $material->file_name ?? 'Materi' }}</p>
                  @if($material->description)
                    <p class="text-xs text-gray-500">{{ $material->description }}</p>
                  @endif
                </div>
              </div>
              <div class="flex gap-2">
                @if($previewHref)
                  <a href="{{ $previewHref }}" target="_blank"
                     class="inline-flex items-center px-3 py-2 rounded-full border border-indigo-200 text-indigo-600 text-xs font-semibold hover:bg-indigo-50 transition">
                    Pratinjau
                  </a>
                @endif
                @if($downloadHref)
                  <a href="{{ $downloadHref }}"
                     class="inline-flex items-center px-3 py-2 rounded-full bg-indigo-600 text-white text-xs font-semibold hover:bg-indigo-700 transition">
                    {{ $material->file_type === 'link' ? 'Buka' : 'Unduh' }}
                  </a>
                @endif
              </div>
            </div>
          @endforeach
        </div>
      @else
        <p class="text-sm text-gray-500">Belum ada materi yang diunggah.</p>
      @endif
    </div>

    <div class="bg-white rounded-2xl shadow-[0_12px_30px_rgba(15,23,42,0.06)] px-6 pt-6 pb-4 font-[Segoe UI,Arial,sans-serif] border border-gray-100 w-full">
      <div class="flex items-center justify-between mb-4 participants-header">
        <div>
          <p class="text-xs uppercase tracking-[0.4em] text-gray-400 mb-1">Peserta</p>
          <h3 class="text-lg font-semibold text-gray-900">Daftar Peserta</h3>
        </div>
        <div class="flex items-center gap-2 participants-header-right">
          <input id="participants-search" type="text" placeholder="Cari peserta..." class="border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
          <span id="participants-count" class="text-xs text-gray-400">{{ $participantCollection->count() }} terdaftar</span>
        </div>
      </div>
      <div id="participants-list-container" class="space-y-3" style="max-height: 520px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 4px;">
        <ul id="participants-list" class="space-y-3">
          @include('partials.participants_detail_list_items', ['participants' => $participantCollection, 'activity' => $activity, 'disable_click' => true])
        </ul>
      </div>
    </div>
    </div>
  </div>
  <!-- END PANEL JADWAL -->

  @php
    // Cek visibility untuk Certificate Download Card
    $certificateSettingsModel = \App\Models\CertificateSettings::where('activity_id', $activity->id)->first();
    $downloadCardVisible = true; // Default aktif
    if ($certificateSettingsModel && $certificateSettingsModel->print_settings) {
      $certPrintSettings = is_array($certificateSettingsModel->print_settings) ? $certificateSettingsModel->print_settings : [];
      if (isset($certPrintSettings['download_card_visible'])) {
        $downloadCardVisible = (bool)$certPrintSettings['download_card_visible'];
      }
    }
  @endphp
  
  <!-- Kolom kanan: Kartu ID + Banner Sertifikat -->
  <div class="mt-0 w-full md:w-full md:min-w-[320px] flex flex-col items-center gap-2 right-column">
    @php
      $cardSettingsModel = \App\Models\CardSettings::where('activity_id', $activity->id)->first();
      $cardIdVisible = $cardSettingsModel && isset($cardSettingsModel->print_settings['card_id_visible']) ? (bool)$cardSettingsModel->print_settings['card_id_visible'] : false;
    @endphp
    @if(auth()->check() && $cardIdVisible)
      @include('activity.printing.idcard', ['activity' => $activity, 'render_partial' => true])
    @endif
    @if(auth()->check())
      <div class="bg-transparent rounded-2xl p-3 inline-block flex-shrink-0">
        
        @php $hasMandiri = ($mandiriAttendances ?? collect())->count() > 0; @endphp
        @if($hasMandiri)
          <div class="mt-2 flex justify-center">
            <button type="button"
                    id="open-attendance-modal"
                    class="inline-flex items-center justify-center text-center rounded-full bg-emerald-600 text-white text-sm font-semibold px-4 py-2 shadow shadow-emerald-600/30 hover:bg-emerald-700 transition"
                    style="width:auto;">
              Absen
            </button>
          </div>
        @endif
        @if($canAccessManagement)
          <div class="mt-2 flex justify-center">
            <a id="activity-management-btn" href="{{ url('/activity/' . $activity->id . '/dashboard') }}"
               class="inline-flex items-center justify-center text-center rounded-full bg-[#bfa100] text-white text-sm font-semibold px-4 py-2 shadow shadow-[#bfa100]/30 hover:bg-[#a48a00] transition stack-btn"
               style="width:auto;">
              Manajemen Acara
            </a>
          </div>
        @endif
      </div>
    @endif

    @if(auth()->check() && $downloadCardVisible)
      <div id="certificate-download-card" class="w-full mt-4 p-4 flex flex-col items-center mx-auto" style="display: block !important; visibility: visible !important; opacity: 1 !important;">
        <div class="w-full rounded-2xl shadow-xl overflow-hidden relative" style="min-height: 300px; background-image: url('{{ asset('assets/images/certificate/default-certificate.png') }}'); background-size: cover; background-position: center; background-repeat: no-repeat;">
          <!-- Overlay untuk readability (sangat transparan tanpa blur) -->
          <div class="absolute inset-0 bg-white/10"></div>
          <div class="relative z-10 p-6 text-center">
            <div class="flex flex-col items-center justify-center">
              <div class="mb-3">
                <div class="flex justify-center mb-3">
                  <div class="w-14 h-14 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 flex items-center justify-center shadow-lg">
                    <i class="fas fa-certificate text-white text-xl"></i>
                  </div>
                </div>
                <p class="text-gray-600 text-xs uppercase tracking-wider mb-1 font-semibold drop-shadow-sm">SERTIFIKAT</p>
                <h3 class="text-xl font-bold text-gray-900 mb-2 drop-shadow-md">Unduh Sertifikat Anda</h3>
                <p class="text-gray-700 text-xs mb-4 drop-shadow-sm">Klik tombol di bawah untuk mengunduh sertifikat Anda</p>
              </div>
              <a href="{{ route('activity.download-certificate', ['id' => $activity->id]) }}"
                 class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-yellow-500 to-yellow-600 text-white font-bold rounded-xl shadow-lg hover:from-yellow-600 hover:to-yellow-700 transition-all duration-200 transform hover:scale-105 text-sm">
                <i class="fas fa-download"></i>
                <span>Download Sertifikat</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    @endif
    </div>

  </div>
  <!-- Menu Setting di samping dihapus -->
</div>

<!-- Modal Pengaturan Cetak dihapus -->
@endif

@if($profileIncomplete)
  <div class="px-4 md:px-6 w-full max-w-4xl mx-auto mt-6">
    <div class="bg-amber-50 border border-amber-200 text-amber-800 rounded-2xl px-5 py-4 text-sm flex flex-col gap-1">
      <div class="flex items-center gap-2">
        <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-amber-100 text-amber-700">
          <i class="fas fa-id-card"></i>
        </span>
        <div class="font-semibold">
          Untuk mengikuti kegiatan ini, profil Anda harus lengkap.
        </div>
      </div>
      <p class="text-xs sm:text-sm mt-1">
        Data profil digunakan untuk kebutuhan pembuatan ID Card dan administrasi peserta.
        Lengkapi data berikut sebelum mendaftar:
      </p>
      @if(!empty($missingProfileFields ?? []))
        <ul class="mt-1 ml-5 list-disc text-xs sm:text-sm">
          @foreach($missingProfileFields as $field)
            <li>{{ $field }}</li>
          @endforeach
        </ul>
      @endif
      <div class="mt-2">
        <a href="{{ route('profile.edit', $authUser) }}"
           class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-amber-500 text-white text-xs sm:text-sm font-semibold shadow hover:bg-amber-600 transition">
          <i class="fas fa-user-edit"></i>
          <span>Lengkapi Profil Sekarang</span>
        </a>
      </div>
    </div>
  </div>
@endif

<!-- Tambahkan hidden input untuk activity_id -->
<input type="hidden" id="activity-id" name="activity_id" value="{{ $activity->id }}">

<script>
document.addEventListener('DOMContentLoaded', function() {
const editableNodes = document.querySelectorAll('[contenteditable="true"]');
editableNodes.forEach(node => node.setAttribute('contenteditable', 'false'));
const globalToolbar = document.getElementById('editModeToolbar');
if (globalToolbar) { globalToolbar.style.display = 'none'; try { disableEditMode(); } catch($e) {} }
// (hapus) modal pengaturan cetak kartu ID
const attendanceModalBtn = document.getElementById('open-attendance-modal');
const attendanceModal = document.getElementById('attendance-modal');
const closeAttendanceModalBtn = document.getElementById('close-attendance-modal');
  if (attendanceModalBtn && attendanceModal) {
    attendanceModalBtn.addEventListener('click', () => attendanceModal.showModal());
  }
  if (attendanceModal && closeAttendanceModalBtn) {
    closeAttendanceModalBtn.addEventListener('click', () => attendanceModal.close());
  }

  document.querySelectorAll('.mandiri-start').forEach(btn => {
    btn.addEventListener('click', function() {
      const activityId = this.getAttribute('data-activity-id');
      const attendanceId = this.getAttribute('data-attendance-id');
      const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
      fetch('/attendance/mandiri', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
          'X-CSRF-TOKEN': csrf
        },
        body: JSON.stringify({ activity_id: activityId, attendance_id: attendanceId }),
        credentials: 'same-origin'
      })
      .then(res => res.json())
      .then(data => {
        if (data && data.success) {
          this.textContent = 'Sudah Absen';
          this.classList.remove('bg-emerald-600');
          this.classList.add('bg-gray-400');
          this.disabled = true;
        } else {
          alert(data.message || 'Gagal absen');
        }
      })
      .catch(err => { alert(err && err.message ? err.message : 'Gagal absen'); });
    });
  });

  // (hapus) tombol membuka modal pengaturan cetak kartu ID
// Toggle dropdown Profile
try {
  const profileToggle = document.getElementById('profile-toggle');
  const profileDropdown = document.getElementById('profile-dropdown');
  if (profileToggle && profileDropdown) {
    profileToggle.addEventListener('click', function(){
      const show = profileDropdown.style.display === 'none';
      profileDropdown.style.display = show ? 'block' : 'none';
      this.classList.toggle('open', show);
    });
  }
} catch($e) {}

// (hapus) toggle field profil ke elemen kartu ID

// (hapus) event penutup modal pengaturan cetak kartu ID
// Real-time search for participants
const searchInput = document.getElementById('participant-search');
const tableRows = document.querySelectorAll('#participant-table tbody tr');

if (searchInput) {
    searchInput.addEventListener('keyup', function() {
        const searchTerm = this.value.toLowerCase();

        tableRows.forEach(row => {
            // Lewati baris "Belum ada peserta"
            if (row.querySelectorAll('td').length > 1) {
                const rowText = row.textContent.toLowerCase();
                if (rowText.includes(searchTerm)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            }
        });
    });
}
// Fitur centang semua peserta
const selectAllCheckbox = document.getElementById('select-all-participants');
const participantCheckboxes = document.querySelectorAll('.participant-checkbox');

if (selectAllCheckbox) {
  selectAllCheckbox.addEventListener('change', function() {
    participantCheckboxes.forEach(checkbox => {
      checkbox.checked = this.checked;
    });
  });
}

// Preview PDF logic
const previewPdfBtn = document.getElementById('preview-pdf-btn');
// (hapus) fitur preview kartu ID

// Print selected cards logic (placeholder)
const printBtn = document.getElementById('print-selected-cards');
// (hapus) fitur cetak kartu ID
// Helper function to update style
function updateStyle(className, prop, value) {
  document.querySelectorAll(className).forEach(el => {
    el.style[prop] = value;
  });
}
// Helper function to get position (left, top) of an element
// (hapus) util getPosition untuk kartu ID
// Helper function to set position
// (hapus) util setPosition untuk kartu ID
// (hapus) util ensureInsideCard untuk kartu ID

// (hapus) util getInlineStyleText untuk kartu ID
// Helper function to set value if exists
// (hapus) util setValueIfExists untuk kartu ID
// (hapus) seluruh toolbar pengeditan teks untuk kartu ID
// (hapus) event textAlign & textColor untuk kartu ID
// (hapus) event toolbar teks untuk kartu ID

// DRAG & DROP SENSITIF DENGAN MOUSE EVENTS
// (hapus) fitur drag & drop elemen kartu ID

// (hapus) pengaturan ukuran/bentuk foto kartu ID




// Pengaturan background kartu pakai thumbnail gambar (Blade-generated)

// Toggle tampil/sembunyi panel setting pakai tombol di bawah kartu
// (hapus) toggle panel pengaturan kartu ID

// Tambah background custom (upload ke backend)
// (hapus) upload background kartu ID

// === SIMPAN SETTING KARTU KE DATABASE TANPA CSRF ===
// (hapus) penyimpanan pengaturan kartu ID

// (hapus) toggle izin kartu ID

// Setelah semua deklarasi variabel input (misal setelah const cardWidthCm, cardHeightCm, yellowCard, dsb)
// (hapus) penerapan pengaturan kartu ID dari server

// (hapus) penerapan pengaturan kartu ID dari localStorage dan print settings
}); // Akhir DOMContentLoaded
</script>

@php $hasMandiri = ($mandiriAttendances ?? collect())->count() > 0; @endphp
@if($hasMandiri)
  <dialog id="attendance-modal" class="mandiri-modal rounded-2xl border-0 p-0 shadow-2xl w-full md:max-w-lg">
    <div class="bg-white rounded-2xl">
      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
        <div>
          <p class="text-xs uppercase tracking-[0.4em] text-gray-400">Absen</p>
          <h3 class="text-lg font-semibold text-gray-900">Absen Aktif</h3>
        </div>
        <button type="button" id="close-attendance-modal" class="text-gray-500 hover:text-gray-800 text-2xl leading-none">&times;</button>
      </div>
      <div class="p-5 space-y-4">
        @foreach(($mandiriAttendances ?? collect()) as $attendance)
          @php
            $descSource = $attendance->description ?? '';
            $descArr = is_array($descSource) ? $descSource : json_decode($descSource, true);
            $instruction = '';
            if (is_array($descArr) && isset($descArr['instruction']) && is_string($descArr['instruction'])) {
              $instruction = trim($descArr['instruction']);
            } elseif (! is_array($descArr) && is_string($descSource) && $descSource !== '') {
              $instruction = trim($descSource);
            }
            $isAtt = $attendance->has_attended ?? false;
          @endphp
          <div class="border border-gray-100 rounded-2xl p-4 space-y-2">
            <div class="flex items-center justify-between gap-3">
              <div>
                <p class="text-sm font-semibold text-gray-900">{{ $attendance->name ?? 'Absen Mandiri' }}</p>
                <p class="text-xs text-gray-500">{{ $instruction }}</p>
              </div>
              @if(!$isAtt)
                <button data-attendance-id="{{ $attendance->id }}" data-activity-id="{{ $activity->id }}" class="mandiri-start inline-flex items-center px-3 py-2 rounded-full bg-emerald-600 text-white text-xs font-semibold hover:bg-emerald-700 transition">Absen Sekarang</button>
              @else
                <div class="inline-flex items-center px-3 py-2 rounded-full bg-gray-400 text-white text-xs font-semibold">Sudah Absen</div>
              @endif
            </div>
          </div>
        @endforeach
      </div>
    </div>
  </dialog>
@endif

</div>
@endsection

@push('styles')
<style>
.setting-panel {
  background: #fffbe7;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(191, 161, 0, 0.10), 0 1.5px 4px 0 rgba(255, 215, 0, 0.10);
  padding: 24px 24px 16px 24px;
  min-width: 270px;
  max-width: none;
  margin-top: 30px;
  font-family: 'Segoe UI', Arial, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 1.5px solid #ffe066;
  transition: box-shadow 0.2s;
}
.setting-compact > * + * { margin-top: 2px !important; }
.setting-panel h3 {
  font-size: 1.08rem;
  color: #bfa100;
  margin-bottom: 8px;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-align: left;
}
.setting-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 2px;
}
.setting-group label {
  font-size: 0.98rem;
  color: #bfa100;
  font-weight: 500;
  margin-bottom: 2px;
}
.setting-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}
.setting-row input[type="color"] {
  border: none;
  width: 28px;
  height: 28px;
  background: none;
  cursor: pointer;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(191, 161, 0, 0.08);
}
.setting-row select, .setting-row input[type="number"] {
  border-radius: 6px;
  border: 1px solid #ffe066;
  padding: 3px 7px;
  font-size: 0.97rem;
  background: #fff;
  transition: border 0.2s;
}
.setting-row select:focus, .setting-row input[type="number"]:focus {
  outline: none;
  border: 1.5px solid #bfa100;
}

.certificate-preview-card {
  width: 100%;
}
.certificate-card-frame {
  position: relative;
  width: 100%;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(15,23,42,0.15);
  background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0.95));
}
.certificate-card-inner {
  position: absolute;
  inset: 0;
  padding: 18px;
}
.certificate-card {
  width: 100%;
  height: 100%;
  border-radius: 28px;
  background: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.4),
    inset 0 0 40px rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.certificate-card-content {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 24px 24px 20px;
  box-sizing: border-box;
}
.certificate-text {
  color: #111827;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
}
.certificate-photo {
  position: absolute;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(15,23,42,0.2);
}
.certificate-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.certificate-photo-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.certificate-qr {
  position: absolute;
}
.certificate-qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.setting-compact > * + * { margin-top: 2px !important; }
.mandiri-modal::backdrop {
  background: rgba(15,23,42,0.4);
}
.mandiri-modal {
  border: none;
  padding: 0;
}
  .right-column { --certificate-extra: 20px; }
  #certificate-download-card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-left: auto; 
    margin-right: auto;
    box-sizing: border-box;
    width: calc(var(--card-width, 260px) + var(--certificate-extra, 0px));
  }
  #certificate-download-card > div { box-sizing: border-box; width: 100%; }
  #activity-management-btn { width: var(--card-width, 260px) !important; margin-left: auto; margin-right: auto; }
/* Participants list cards */
#participants-list { list-style: none; padding: 0; margin: 0; }
#participants-list > li { transition: box-shadow .15s ease, border-color .15s ease; }
#participants-list > li:hover { box-shadow: 0 8px 20px rgba(15,23,42,0.08); border-color: #c7d2fe; }
.status-badge { font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 999px; border: 1px solid transparent; }
.status-active { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.status-pending { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.status-rejected { background: #fef2f2; color: #991b1b; border-color: #fecaca; }

.right-column { align-self: flex-start; }
/* Baris kontainer 2 kolom: sejajarkan bagian atas antar kolom */
.flex.flex-col.md\:flex-row { align-items: flex-start; }

/* Fix untuk layout 2 kolom - sembunyikan kolom kanan jika kosong */
.right-column:empty {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  flex: 0 0 0 !important;
}

/* Pastikan left column menggunakan full width jika right column tidak ada atau hidden */
.left-column {
  transition: width 0.3s ease, max-width 0.3s ease, flex 0.3s ease;
}

/* Perbaiki layout untuk desktop - jika right column kosong atau hidden, left column full width */
@media (min-width: 768px) {
  .right-column:empty,
  .right-column[style*="display: none"],
  .right-column[style*="display:none"] {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    flex: 0 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Jika right column hidden, pastikan container dan left column menggunakan full width */
  .flex.flex-col.md\:flex-row .right-column:empty ~ .left-column,
  .flex.flex-col.md\:flex-row .right-column[style*="display: none"] ~ .left-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }
}

/* Mobile adjustments */
  @media (max-width: 640px) {
  .participants-header { align-items: flex-start; }
  .participants-header-right { flex-wrap: wrap; width: 100%; justify-content: flex-end; }
  #participants-search { flex: 1 1 100%; min-width: 0; }
  #participants-count { flex: 0 0 auto; margin-top: 6px; }
  .right-column { min-width: 0 !important; width: 100% !important; order: 1; }
  .left-column { order: 2; }
  /* (hapus) gaya pratinjau kartu ID */
  #activity-management-btn { width: min(92vw, 300px) !important; display: block; margin: 8px auto 0; font-size: 0.875rem; padding: 10px 16px; }
  #certificate-download-card { margin-top: 12px; display: flex; justify-content: center; }
  #certificate-download-card > div { width: min(92vw, 300px); }
  }
</style>
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Fix untuk layout: sembunyikan kolom kanan jika kosong atau tidak ada konten yang terlihat
  function checkAndHideEmptyRightColumn() {
    const rightColumn = document.querySelector('.right-column');
    if (!rightColumn) return;
    
    // Cek apakah kolom kanan kosong atau hanya berisi elemen yang hidden
    const visibleChildren = Array.from(rightColumn.children).filter(child => {
      const style = window.getComputedStyle(child);
      return style.display !== 'none' && style.visibility !== 'hidden' && style.opacity !== '0';
    });
    
    // Cek juga apakah ada konten yang terlihat di dalam child elements
    let hasVisibleContent = false;
    visibleChildren.forEach(child => {
      const textContent = child.textContent?.trim() || '';
      const hasImages = child.querySelectorAll('img:not([style*="display: none"]):not([style*="display:none"])').length > 0;
      const hasButtons = child.querySelectorAll('button:not([style*="display: none"]):not([style*="display:none"]), a:not([style*="display: none"]):not([style*="display:none"])').length > 0;
      const hasInputs = child.querySelectorAll('input:not([style*="display: none"]):not([style*="display:none"])').length > 0;
      if (textContent.length > 0 || hasImages || hasButtons || hasInputs) {
        hasVisibleContent = true;
      }
    });
    
    const leftColumn = document.querySelector('.left-column');
    const container = rightColumn.closest('.flex.flex-col.md\\:flex-row, [class*="flex-row"]');
    
    if (visibleChildren.length === 0 || !hasVisibleContent) {
      // Sembunyikan right column
      rightColumn.style.display = 'none';
      rightColumn.style.width = '0';
      rightColumn.style.minWidth = '0';
      rightColumn.style.flex = '0 0 0';
      rightColumn.style.margin = '0';
      rightColumn.style.padding = '0';
      
      // Pastikan left column menggunakan full width
      if (leftColumn) {
        leftColumn.style.width = '100%';
        leftColumn.style.maxWidth = '100%';
        leftColumn.style.flex = '1 1 100%';
      }
      
      // Ubah container menjadi single column jika di desktop
      if (container && window.innerWidth >= 768) {
        container.style.flexDirection = 'column';
      }
    } else {
      // Tampilkan right column jika ada konten
      rightColumn.style.display = '';
      rightColumn.style.width = '';
      rightColumn.style.minWidth = '';
      rightColumn.style.flex = '';
      rightColumn.style.margin = '';
      rightColumn.style.padding = '';
      
      // Reset left column
      if (leftColumn) {
        leftColumn.style.width = '';
        leftColumn.style.maxWidth = '';
        leftColumn.style.flex = '';
      }
      
      // Reset container
      if (container) {
        container.style.flexDirection = '';
      }
    }
  }
  
  // Jalankan saat DOM ready
  checkAndHideEmptyRightColumn();
  
  // Jalankan lagi setelah delay untuk memastikan semua konten sudah ter-render
  setTimeout(checkAndHideEmptyRightColumn, 100);
  setTimeout(checkAndHideEmptyRightColumn, 500);
  
  // Jalankan saat window resize
  window.addEventListener('resize', checkAndHideEmptyRightColumn);
  
  // Cek apakah ada parameter show_certificate di URL untuk auto-scroll
  const urlParams = new URLSearchParams(window.location.search);
  const showCertificate = urlParams.get('show_certificate');
  
  const certificateCard = document.getElementById('certificate-download-card');
  
  // Jika card ada dan parameter show_certificate=1, scroll ke card
  if (showCertificate === '1' && certificateCard) {
    setTimeout(function() {
      certificateCard.scrollIntoView({ 
        behavior: 'smooth', 
        block: 'center' 
      });
      
      // Tambahkan highlight effect
      certificateCard.style.transition = 'box-shadow 0.3s ease';
      certificateCard.style.boxShadow = '0 0 0 4px rgba(29, 78, 216, 0.3), 0 20px 25px -5px rgba(0, 0, 0, 0.1)';
      
      // Hapus highlight setelah 3 detik
      setTimeout(function() {
        certificateCard.style.boxShadow = '';
      }, 3000);
    }, 300);
  }
  function syncCertificateWidth(){
    const cert = document.getElementById('certificate-download-card');
    if (!cert) return;
    const w = Math.round(cert.getBoundingClientRect().width);
    const rightCol = document.querySelector('.right-column');
    if (rightCol) rightCol.style.setProperty('--card-width', w + 'px');
  }
  syncCertificateWidth();
  window.addEventListener('resize', syncCertificateWidth);
});

// Popup untuk error sertifikat (misal user bukan peserta aktif)
@if(session('certificate_error'))
  document.addEventListener('DOMContentLoaded', function() {
    const message = @json(session('certificate_error'));
    
    // Buat elemen overlay & modal sederhana
    const overlay = document.createElement('div');
    overlay.style.position = 'fixed';
    overlay.style.inset = '0';
    overlay.style.backgroundColor = 'rgba(15,23,42,0.55)';
    overlay.style.zIndex = '9999';
    overlay.style.display = 'flex';
    overlay.style.alignItems = 'center';
    overlay.style.justifyContent = 'center';
    
    const modal = document.createElement('div');
    modal.style.backgroundColor = '#ffffff';
    modal.style.borderRadius = '18px';
    modal.style.boxShadow = '0 20px 40px rgba(15,23,42,0.35)';
    modal.style.maxWidth = '520px';
    modal.style.width = '90%';
    modal.style.padding = '20px 24px';
    modal.style.fontFamily = 'system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif';
    
    modal.innerHTML = `
      <div style="display:flex; align-items:flex-start; gap:12px; margin-bottom:12px;">
        <div style="width:40px; height:40px; border-radius:999px; background:#fee2e2; display:flex; align-items:center; justify-content:center; color:#b91c1c;">
          <i class="fas fa-exclamation-circle"></i>
        </div>
        <div>
          <div style="font-weight:700; font-size:1rem; color:#111827; margin-bottom:4px;">
            Tidak dapat mengunduh sertifikat
          </div>
          <div style="font-size:0.85rem; color:#4b5563; line-height:1.5;">
            ${message}
          </div>
        </div>
      </div>
      <div style="display:flex; justify-content:flex-end; gap:8px; margin-top:16px;">
        <button id="cert-modal-close" style="padding:8px 16px; border-radius:999px; border:none; background:#1d4ed8; color:#fff; font-size:0.85rem; font-weight:600; cursor:pointer;">
          Mengerti
        </button>
      </div>
    `;
    
    overlay.appendChild(modal);
    document.body.appendChild(overlay);
    
    document.getElementById('cert-modal-close').addEventListener('click', function() {
      document.body.removeChild(overlay);
    });
  });
@endif
</script>
@endpush

@push('scripts')
<script>
(function(){
  const input = document.getElementById('participants-search');
  const list = document.getElementById('participants-list');
  const countEl = document.getElementById('participants-count');
  let t;
  function fetchParticipants(q){
    const url = `{{ route('activity.participants.search') }}?activity_id={{ $activity->id }}&search=${encodeURIComponent(q||'')}&context=detail`;
    fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }})
      .then(r=>r.json())
      .then(d=>{
        if (list && d && typeof d.html === 'string') list.innerHTML = d.html;
        if (countEl && d && typeof d.count !== 'undefined') countEl.textContent = d.count + ' terdaftar';
      })
      .catch(()=>{});
  }
  if (input) {
    input.addEventListener('input', function(){
      clearTimeout(t);
      const v = this.value || '';
      t = setTimeout(()=>fetchParticipants(v), 250);
    });
  }
})();
</script>
@endpush