@php
    $bride = $invitation->bride ?? [
        'name' => 'Citra Maharani',
        'nickname' => 'Citra',
        'parents' => 'Bapak Nama Ayah & Ibu Nama Ibu',
        'photo' => $invitation->bride_photo_url ?? ($invitation->bride_photo ?? asset('templates/vip/exclusive03/images/bride.jpg')),
        'instagram' => $invitation->bride_instagram ?? '@citramaharani',
    ];
    $groom = $invitation->groom ?? [
        'name' => 'Adit Pratama',
        'nickname' => 'Adit',
        'parents' => 'Bapak Nama Ayah & Ibu Nama Ibu',
        'photo' => $invitation->groom_photo_url ?? ($invitation->groom_photo ?? asset('templates/vip/exclusive03/images/groom.jpg')),
        'instagram' => $invitation->groom_instagram ?? '@aditpratama',
    ];
    $coverPhoto = $invitation->cover_photo ?? ($invitation->hero_photo_url ?? asset('templates/vip/exclusive03/images/cover.jpg'));

    $events = $invitation->events ?? [
        [
            'title' => 'Akad Nikah',
            'date' => '2026-12-20',
            'start_time' => '08:00',
            'end_time' => '10:00',
            'timezone' => 'WIB',
            'venue' => 'Gedung Serbaguna Melati',
            'address' => 'Jakarta',
            'maps_url' => 'https://maps.google.com',
        ],
        [
            'title' => 'Resepsi Pernikahan',
            'date' => '2026-12-20',
            'start_time' => '11:00',
            'end_time' => '14:00',
            'timezone' => 'WIB',
            'venue' => 'Gedung Serbaguna Melati',
            'address' => 'Jakarta',
            'maps_url' => 'https://maps.google.com',
        ],
    ];
    $primaryEvent = $events[0] ?? null;
    $eventDate = $primaryEvent['date'] ?? '2026-12-20';
    $eventTime = $primaryEvent['start_time'] ?? '08:00';
    $carbonDate = \Carbon\Carbon::parse($eventDate);
    $formattedDate = $carbonDate->locale('id')->isoFormat('dddd, D MMMM Y');

    $galleries = $invitation->gallery ?? ($invitation->gallery_photos ?? [
        asset('templates/vip/exclusive03/images/gallery-01.jpg'),
        asset('templates/vip/exclusive03/images/gallery-02.jpg'),
        asset('templates/vip/exclusive03/images/gallery-03.jpg'),
        asset('templates/vip/exclusive03/images/gallery-04.jpg'),
        asset('templates/vip/exclusive03/images/gallery-05.jpg'),
        asset('templates/vip/exclusive03/images/gallery-06.jpg'),
    ]);

    $rawBankAccounts = !empty($invitation->bank_accounts) ? $invitation->bank_accounts : (!empty($invitation->gifts) ? $invitation->gifts : null);
    if (empty($rawBankAccounts) && !empty($invitation->bank_name)) {
        $rawBankAccounts = [
            [
                'bank_name' => $invitation->bank_name,
                'bank' => $invitation->bank_name,
                'account_number' => $invitation->bank_account ?? '',
                'number' => $invitation->bank_account ?? '',
                'account_holder' => $invitation->bank_holder ?? 'Mempelai',
                'name' => $invitation->bank_holder ?? 'Mempelai',
            ]
        ];
    }
    $gifts = !empty($rawBankAccounts) ? $rawBankAccounts : [
        [
            'bank_name' => 'BCA',
            'bank' => 'BCA',
            'account_number' => '1234567890',
            'number' => '1234567890',
            'account_holder' => 'Adit Pratama',
            'name' => 'Adit Pratama',
        ],
        [
            'bank_name' => 'MANDIRI',
            'bank' => 'MANDIRI',
            'account_number' => '9876543210',
            'number' => '9876543210',
            'account_holder' => 'Citra Maharani',
            'name' => 'Citra Maharani',
        ],
    ];
    $hasGifts = !empty($gifts) || !empty($invitation->qris_image_url) || !empty($invitation->qris_image);

    $stories = $invitation->stories ?? [
        [
            'year' => '2018',
            'title' => 'First Chapter',
            'story' => 'Berawal dari sebuah pertemuan sederhana yang menjadi awal cerita panjang kami.',
        ],
        [
            'year' => '2020',
            'title' => 'Growing Together',
            'story' => 'Kami belajar mengenal, memahami, dan tumbuh bersama mengarungi waktu.',
        ],
        [
            'year' => '2024',
            'title' => 'The Promise',
            'story' => 'Dengan keyakinan yang semakin kuat, kami memutuskan melangkah bersama menuju masa depan.',
        ],
        [
            'year' => '2026',
            'title' => 'Forever Starts Here',
            'story' => 'Dua perjalanan dipertemukan menjadi satu ikatan suci yang penuh berkah.',
        ],
        [
            'year' => '2026',
            'title' => 'Hari Bahagia',
            'story' => 'Dengan memohon ridho Illahi dan restu keluarga besar, kami memulai babak baru pernikahan.',
        ],
    ];

    $defaultQuoteText = 'Dan di antara tanda-tanda kekuasaan-Nya ialah Dia menciptakan untukmu pasangan hidup dari jenismu sendiri supaya kamu mendapat ketenangan hati dan dijadikan-Nya kasih sayang di antara kamu.';
    $defaultQuoteSource = 'QS. Ar-Rum : 21';
    $quoteText = !empty($invitation->quote) ? $invitation->quote : $defaultQuoteText;
    $quoteSource = !empty($invitation->quote_author) ? $invitation->quote_author : $defaultQuoteSource;

    $wishes = $invitation->wishes ?? [
        (object)[
            'name' => 'Keluarga Besar',
            'attendance' => 'hadir',
            'message' => 'Selamat menempuh hidup baru Adit & Citra! Semoga menjadi keluarga yang sakinah, mawaddah, warahmah.',
            'created_at' => now()->subHours(2),
        ],
        (object)[
            'name' => 'Bagus & Rina',
            'attendance' => 'hadir',
            'message' => 'Barakallah Adit & Citra. Semoga senantiasa rukun dan bahagia selalu hingga akhir hayat.',
            'created_at' => now()->subDay(),
        ]
    ];

    $isDemoMode = request()->routeIs('template.demo') || request()->is('demo/*') || !empty($invitation->is_demo);
    $liveUrl = $isDemoMode 
        ? route('template.demo.live', $template->slug ?? 'exclusive03') 
        : (!empty($invitation->slug) ? route('invitation.live', $invitation->slug) : '#');
    if ($guestName ?? null) {
        $liveUrl .= (str_contains($liveUrl, '?') ? '&' : '?') . 'to=' . urlencode($guestName);
    }
@endphp
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="theme-color" content="#203b31">
  <title>{{ $groom['nickname'] ?? 'Adit' }} &amp; {{ $bride['nickname'] ?? 'Citra' }} — Janoer Koening</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Sans:wght@400;500;600&family=Italianno&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="{{ asset('templates/vip/exclusive03/css/style.css') }}">
  <style>
    .gift-box-wrapper.hidden {
      display: none !important;
    }
  </style>
</head>
<body class="locked">
  @include('templates.partials.preview-banner')

  <!-- COVER SECTION -->
  <section class="cover" id="cover">
    <div class="cover-inner">
      <p class="eyebrow">THE WEDDING OF</p>
      <div class="monogram">{{ substr($groom['nickname'] ?? 'A', 0, 1) }} <i>&amp;</i> {{ substr($bride['nickname'] ?? 'C', 0, 1) }}</div>
      <div class="photo-frame"><img src="{{ $coverPhoto }}" alt="{{ $groom['nickname'] ?? 'Adit' }} &amp; {{ $bride['nickname'] ?? 'Citra' }}"></div>
      <div class="script">{{ $groom['nickname'] ?? 'Adit' }} &amp; {{ $bride['nickname'] ?? 'Citra' }}</div>
      <p class="date">{{ $carbonDate->format('d · m · Y') }}</p>
      <p class="guest">Kepada Yth.<br><b>{{ $guestName ?? 'Bapak/Ibu/Saudara/i' }}</b></p>
      <button class="btn gold" id="open" type="button">Buka Undangan</button>
      <small>Janoer Koening</small>
    </div>
  </section>

  <!-- Audio Player -->
  @if(!empty($invitation->audio_url))
  <audio id="music" loop preload="auto"><source src="{{ $invitation->audio_url }}" type="audio/mpeg"></audio>
  <button class="music" id="musicBtn" type="button" aria-label="Toggle Musik">♫</button>
  @endif

  <main id="main">
    <!-- INTRO & COUNTDOWN -->
    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('countdown'))
    <section class="section intro">
      <div class="wrap narrow">
        <p class="eyebrow goldtxt">A MOMENT TO REMEMBER</p>
        <h1>Menuju Hari Bahagia</h1>
        <p>Dengan penuh syukur, kami mengundang Anda untuk menjadi bagian dari hari istimewa kami.</p>
        <div class="countdown" data-date="{{ $eventDate }}T{{ $eventTime }}:00+07:00">
          <b><strong id="d">00</strong>Hari</b>
          <b><strong id="h">00</strong>Jam</b>
          <b><strong id="m">00</strong>Menit</b>
          <b><strong id="s">00</strong>Detik</b>
        </div>
      </div>
    </section>
    @endif

    <!-- QUOTE -->
    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('quote'))
    <section class="section quote">
      <div class="wrap narrow">
        <span class="orn">❦</span>
        <p class="arabic">وَمِنْ آيَاتِهِ أَنْ خَلَقَ لَكُم مِّنْ أَنفُسِكُمْ أَزْوَاجًا لِّتَسْكُنُوا إِلَيْهَا وَجَعَلَ بَيْنَكُم مَّوَدَّةً وَرَحْمَةً</p>
        <p>“{{ $quoteText }}”</p>
        <small>{{ $quoteSource }}</small>
      </div>
    </section>
    @endif

    <!-- COUPLE -->
    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('couple'))
    <section class="section couple">
      <div class="wrap">
        <p class="eyebrow goldtxt">THE BRIDE &amp; GROOM</p>
        <h1>Two Souls, One Story</h1>
        <div class="couples">
          <article>
            <img src="{{ $groom['photo'] }}" alt="{{ $groom['name'] }}">
            <small>THE GROOM</small>
            <h2>{{ $groom['name'] }}</h2>
            <p>Putra dari<br><b>{{ $groom['parents'] }}</b></p>
            @if(!empty($groom['instagram']))
            <p style="margin-top:8px;"><a href="https://instagram.com/{{ ltrim($groom['instagram'], '@') }}" target="_blank" style="color:var(--goldtxt);font-weight:600;font-size:13px;border-bottom:none;">{{ $groom['instagram'] }}</a></p>
            @endif
          </article>
          <div class="and">&amp;</div>
          <article>
            <img src="{{ $bride['photo'] }}" alt="{{ $bride['name'] }}">
            <small>THE BRIDE</small>
            <h2>{{ $bride['name'] }}</h2>
            <p>Putri dari<br><b>{{ $bride['parents'] }}</b></p>
            @if(!empty($bride['instagram']))
            <p style="margin-top:8px;"><a href="https://instagram.com/{{ ltrim($bride['instagram'], '@') }}" target="_blank" style="color:var(--goldtxt);font-weight:600;font-size:13px;border-bottom:none;">{{ $bride['instagram'] }}</a></p>
            @endif
          </article>
        </div>
      </div>
    </section>
    @endif

    <!-- EVENTS -->
    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('event'))
    <section class="section events">
      <div class="wrap">
        <p class="eyebrow goldtxt">SAVE THE DATE</p>
        <h1>A Day to Celebrate</h1>
        <div class="cards">
          @foreach($events as $index => $ev)
          @php
            $evDate = \Carbon\Carbon::parse($ev['date'] ?? $eventDate);
            $roman = ['Ⅰ', 'Ⅱ', 'Ⅲ', 'Ⅳ'][$index] ?? ($index + 1);
          @endphp
          <article class="{{ $index % 2 == 1 ? 'dark' : '' }}">
            <span>{{ $roman }}</span>
            <small>{{ strtoupper($ev['title'] ?? 'Acara') }}</small>
            <h2>{{ $evDate->locale('id')->isoFormat('dddd, D MMMM Y') }}</h2>
            <b>{{ $ev['start_time'] ?? '' }} – {{ $ev['end_time'] ?? 'selesai' }} {{ $ev['timezone'] ?? 'WIB' }}</b>
            <p>{{ $ev['venue'] ?? '' }}<br>{{ $ev['address'] ?? '' }}</p>
            @if(!empty($ev['maps_url']))
            <a href="{{ $ev['maps_url'] }}" target="_blank" rel="noopener">Lihat Lokasi ↗</a>
            @endif
          </article>
          @endforeach
        </div>
      </div>
    </section>
    @endif

    <!-- STORY -->
    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('story'))
    @if(!empty($stories) && count($stories) > 0)
    <section class="section story">
      <div class="wrap narrow">
        <p class="eyebrow goldtxt">OUR JOURNEY</p>
        <h1>Kisah Cinta Kami</h1>
        <div class="timeline">
          @foreach($stories as $st)
          <div>
            <time>{{ $st['year'] ?? '' }}</time>
            <article>
              <h2>{{ $st['title'] ?? '' }}</h2>
              <p>{{ $st['story'] ?? ($st['description'] ?? '') }}</p>
            </article>
          </div>
          @endforeach
        </div>
      </div>
    </section>
    @endif
    @endif

    <!-- GALLERY -->
    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('gallery'))
    @if(!empty($galleries) && count($galleries) > 0)
    <section class="section gallery">
      <div class="wrap">
        <p class="eyebrow">OUR MOMENTS</p>
        <h1>A Collection of Us</h1>
        <div class="grid">
          @foreach($galleries as $index => $img)
          <button type="button"><img src="{{ $img }}" alt="Momen {{ $index + 1 }}"></button>
          @endforeach
        </div>
      </div>
    </section>
    @endif
    @endif

    <!-- LIVE STREAMING BANNER -->
    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('streaming'))
    <section class="section stream">
      <div class="wrap narrow">
        <p class="eyebrow goldtxt">WATCH US LIVE</p>
        <h1>Saksikan Hari Bahagia Kami</h1>
        <div class="streambox">
          <div>
            <span>● LIVE STREAMING</span>
            <h2>{{ $groom['nickname'] ?? 'Adit' }} &amp; {{ $bride['nickname'] ?? 'Citra' }}</h2>
            <p>{{ $carbonDate->locale('id')->isoFormat('dddd, D MMMM Y') }}</p>
            <a class="btn gold" href="{{ $liveUrl }}">Tonton Live</a>
          </div>
        </div>
        <a class="back" href="{{ $liveUrl }}">Buka halaman Live Streaming ↗</a>
      </div>
    </section>
    @endif

    <!-- GIFT SECTION DENGAN ACCORDION BUTTON -->
    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('gift'))
    @if($hasGifts)
    <section class="section gift">
      <div class="wrap narrow">
        <p class="eyebrow goldtxt">A TOKEN OF LOVE</p>
        <h1>Tanda Kasih</h1>
        <p>Doa dan kehadiran Anda adalah hadiah terindah. Bila berkenan memberi tanda kasih, silakan klik tombol di bawah:</p>
        
        <div style="text-align:center; margin: 24px 0 16px;">
          <button type="button" class="btn gold" onclick="toggleGiftAccordion(this)">
            <span class="gift-btn-label">Kirim Hadiah / Buka Rekening</span>
          </button>
        </div>

        <div id="gift-accordion-content" class="gift-box-wrapper hidden" style="margin-top:24px;">
          <div class="cards">
            @foreach($gifts as $i => $gift)
            <article>
              <small>{{ $gift['bank_name'] ?? $gift['bank'] ?? 'Bank' }}</small>
              <h2>{{ $gift['account_holder'] ?? $gift['name'] ?? '-' }}</h2>
              <code>{{ $gift['account_number'] ?? $gift['number'] ?? '-' }}</code>
              <button type="button" class="copy" data-copy="{{ $gift['account_number'] ?? $gift['number'] ?? '-' }}">Salin Rekening</button>
            </article>
            @endforeach
          </div>

          @if(!empty($invitation->address) || !empty($invitation->gift_address))
          <div style="margin-top:24px; padding:20px; background:#fffdf9; border:1px solid #203b3120; text-align:center;">
            <small style="color:#b4975a; letter-spacing:0.2em; text-transform:uppercase;">KIRIM HADIAH FISIK</small>
            <p style="margin:8px 0 14px; color:#776e68;">{{ $invitation->gift_address ?? $invitation->address }}</p>
            <button type="button" class="copy" data-copy="{{ $invitation->gift_address ?? $invitation->address }}">Salin Alamat</button>
          </div>
          @endif
        </div>
      </div>
    </section>
    @endif
    @endif

    <!-- RSVP & UCAPAN -->
    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('wishes'))
    <section class="section rsvp">
      <div class="wrap narrow">
        <p class="eyebrow goldtxt">YOUR PRESENCE MEANS A LOT</p>
        <h1>RSVP &amp; Ucapan</h1>

        @if(session('wish_success'))
        <div style="background:#e8f5e9; border:1px solid #81c784; color:#2e7d32; padding:12px; margin-bottom:15px; text-align:center;">
          {{ session('wish_success') }}
        </div>
        @endif
        @if(session('wish_error'))
        <div style="background:#ffebee; border:1px solid #e57373; color:#c62828; padding:12px; margin-bottom:15px; text-align:center;">
          {{ session('wish_error') }}
        </div>
        @endif

        <form id="rsvpForm" method="POST" action="{{ !empty($invitation->slug) ? route('invitation.wish', $invitation->slug) : '#' }}">
          @csrf
          <input name="name" value="{{ $guestName ?? '' }}" required placeholder="Nama Anda">
          <select name="attendance" required>
            <option value="hadir">Hadir</option>
            <option value="tidak_hadir">Tidak dapat hadir</option>
            <option value="ragu">Masih ragu</option>
          </select>
          <textarea name="message" required rows="4" placeholder="Tulis ucapan & doa..."></textarea>
          <button type="submit" class="btn darkbtn">Kirim Ucapan</button>
        </form>

        <div id="wishes">
          @foreach($wishes as $w)
          <div class="wish">
            <b>{{ $w->name }} · {{ ucfirst($w->attendance ?? 'hadir') }}</b>
            {{ $w->message }}
          </div>
          @endforeach
        </div>
      </div>
    </section>
    @endif

    <!-- FOOTER WITH JANOER KOENING BRANDING -->
    <footer>
      <div class="monogram">{{ substr($groom['nickname'] ?? 'A', 0, 1) }} <i>&amp;</i> {{ substr($bride['nickname'] ?? 'C', 0, 1) }}</div>
      <div class="script">{{ $groom['nickname'] ?? 'Adit' }} &amp; {{ $bride['nickname'] ?? 'Citra' }}</div>
      <p>{{ $carbonDate->format('d · m · Y') }}</p>
      <hr>

      <!-- LOGO & BRANDING LINK JANOER KOENING -->
      <a href="http://janoerkoening.com" target="_blank" rel="noopener noreferrer" style="display:inline-block; text-decoration:none;">
        <img src="{{ asset('assets/brand/logo.png') }}" alt="Janoer Koening" style="height:32px; width:auto; margin:0 auto; opacity:0.9;">
      </a>
      <br>
      <b>Janoer Koening</b><br>
      <span>Merangkai Kisah, Mengundang Bahagia.</span>
      <small style="display:block; margin-top:20px; color:#ffffff66;">Member of Exploore ID</small>
    </footer>
  </main>

  <div class="lightbox" id="lb"><button type="button">×</button><img></div>
  <div class="toast" id="toast">Tersalin ✓</div>

  <script>
    const $ = s => document.querySelector(s);
    document.addEventListener("DOMContentLoaded", () => {
      const cover = $("#cover"), main = $("#main"), music = $("#music"), mb = $("#musicBtn");
      
      const openBtn = $("#open");
      if (openBtn) {
        openBtn.onclick = async () => {
          cover.style.display = "none";
          main.style.display = "block";
          document.body.classList.remove("locked");
          if (music) {
            try { await music.play(); if (mb) mb.textContent = "◉"; } catch(e) {}
          }
        };
      }

      if (mb && music) {
        mb.onclick = async () => {
          if (music.paused) {
            try { await music.play(); mb.textContent = "◉"; } catch(e) {}
          } else {
            music.pause();
            mb.textContent = "♫";
          }
        };
      }

      // Countdown
      const cd = $(".countdown");
      if (cd) {
        const t = new Date(cd.dataset.date).getTime();
        setInterval(() => {
          let x = Math.max(0, t - Date.now());
          const dEl = $("#d"), hEl = $("#h"), mEl = $("#m"), sEl = $("#s");
          if (dEl) dEl.textContent = Math.floor(x / 86400000);
          if (hEl) hEl.textContent = Math.floor(x % 86400000 / 3600000);
          if (mEl) mEl.textContent = Math.floor(x % 3600000 / 60000);
          if (sEl) sEl.textContent = Math.floor(x % 60000 / 1000);
        }, 1000);
      }

      // Copy buttons
      const toast = $("#toast");
      document.querySelectorAll(".copy").forEach(b => b.onclick = async () => {
        try {
          await navigator.clipboard.writeText(b.dataset.copy);
        } catch(e) {
          let x = document.createElement("textarea");
          x.value = b.dataset.copy;
          document.body.appendChild(x);
          x.select();
          document.execCommand("copy");
          x.remove();
        }
        if (toast) {
          toast.textContent = "Nomor berhasil disalin ✓";
          toast.classList.add("show");
          setTimeout(() => toast.classList.remove("show"), 1600);
        }
      });

      // Lightbox gallery
      const lb = $("#lb");
      if (lb) {
        document.querySelectorAll(".grid button").forEach(b => b.onclick = () => {
          lb.querySelector("img").src = b.querySelector("img").src;
          lb.classList.add("show");
        });
        lb.onclick = e => {
          if (e.target === lb || e.target.tagName === "BUTTON") lb.classList.remove("show");
        };
      }
    });

    // Toggle Gift Accordion
    function toggleGiftAccordion(btn) {
      const content = document.getElementById('gift-accordion-content');
      if (content) {
        content.classList.toggle('hidden');
        const label = btn.querySelector('.gift-btn-label');
        if (label) {
          label.textContent = content.classList.contains('hidden') 
            ? 'Kirim Hadiah / Buka Rekening' 
            : 'Tutup Rekening';
        }
      }
    }
  </script>
</body>
</html>