@extends('layouts.app')

@section('title', 'Aktivasi & Publikasi Undangan - Janoer Koening')

@section('content')
<div class="py-12 bg-[#FAF7F0]">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <div class="text-center mb-8">
            <span class="text-xs uppercase tracking-widest text-deepsage font-bold">Langkah Terakhir</span>
            <h1 class="font-heading text-3xl sm:text-4xl font-bold text-charcoal mt-1">Aktivasi &amp; Publikasi Undangan</h1>
            <p class="text-xs sm:text-sm text-charcoal/70 mt-1 max-w-lg mx-auto">
                Selesaikan pembayaran untuk menghapus watermark pratinjau, mengaktifkan masa tayang, dan membuka fitur sebar undangan.
            </p>
        </div>

        @if(!$userInvitation)
            <div class="p-8 bg-white rounded-3xl border border-[#A8BBA6]/20 text-center shadow-sm">
                <p class="text-sm text-charcoal/70 mb-4">Anda belum memiliki draf undangan pernikahan.</p>
                <a href="{{ route('onboarding.create') }}" class="px-6 py-2.5 bg-deepsage text-ivory text-xs font-semibold rounded-full shadow hover:bg-opacity-90">Buat Undangan Dulu</a>
            </div>
        @else

        <form action="{{ route('checkout.process') }}" method="POST" class="space-y-6">
            @csrf
            <input type="hidden" name="invitation_id" value="{{ $userInvitation->id }}">
            <input type="hidden" id="selected_package_id" name="package_id" value="{{ $selectedPackage->id }}">

            <!-- KARTU RINGKASAN PEMBELIAN PAKET & TEMPLATE (AUTO-MATCHED) -->
            <div class="bg-white rounded-3xl border border-[#A8BBA6]/20 shadow-sm overflow-hidden">
                <!-- Header Undangan -->
                <div class="p-6 sm:p-7 border-b border-[#A8BBA6]/15 bg-[#FAF7F0]/60 flex flex-col sm:flex-row justify-between sm:items-center gap-4">
                    <div>
                        <span class="text-[10px] text-charcoal/50 uppercase tracking-wider font-extrabold block">Undangan yang Dipublikasikan:</span>
                        <h3 class="font-heading text-2xl font-bold text-charcoal mt-0.5">{{ $userInvitation->title }}</h3>
                        <div class="flex items-center gap-2 mt-1">
                            <span class="text-xs text-deepsage font-mono font-medium">{{ url('/u/' . $userInvitation->slug) }}</span>
                            <span class="text-charcoal/30">•</span>
                            <span class="text-xs text-charcoal/70 font-semibold">Tema: {{ $userInvitation->template->name ?? '-' }}</span>
                        </div>
                    </div>
                    <div class="sm:text-right">
                        <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-amber-50 text-amber-800 border border-amber-200/80 rounded-full text-xs font-bold">
                            <span class="w-2 h-2 rounded-full bg-amber-500 animate-pulse"></span>
                            Mode: {{ strtoupper($userInvitation->status) }}
                        </span>
                    </div>
                </div>

                <!-- Detail Paket Otomatis -->
                <div class="p-6 sm:p-7 space-y-6">
                    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 p-5 rounded-2xl bg-sage/5 border border-deepsage/20">
                        <div class="space-y-1">
                            <div class="flex items-center gap-2">
                                <span class="px-2.5 py-0.5 bg-brandgold text-charcoal text-[10px] font-extrabold uppercase rounded-md tracking-wider">
                                    {{ $selectedPackage->badge ?: ('Paket ' . ucfirst($selectedPackage->slug)) }}
                                </span>
                                <h4 class="font-heading text-2xl font-bold text-charcoal" id="display_package_name">
                                    Paket {{ $selectedPackage->name }}
                                </h4>
                            </div>
                            <p class="text-xs text-charcoal/70">
                                Disesuaikan secara otomatis dengan template <strong>{{ $userInvitation->template->name ?? '' }}</strong> (Tier {{ ucfirst($requiredTier) }}).
                            </p>
                            <div class="inline-flex items-center gap-2 text-xs font-semibold text-deepsage pt-1">
                                <i data-lucide="clock" class="w-3.5 h-3.5"></i>
                                <span>Masa Aktif Tayang: <strong id="display_package_days">{{ $selectedPackage->active_days }} Hari</strong></span>
                            </div>
                        </div>

                        <div class="sm:text-right">
                            <span class="text-xs text-charcoal/50 block">Biaya Aktivasi:</span>
                            <div class="text-2xl sm:text-3xl font-bold text-deepsage" id="display_package_price">
                                Rp {{ number_format($selectedPackage->price, 0, ',', '.') }}
                            </div>
                            @if($selectedPackage->original_price && $selectedPackage->original_price > $selectedPackage->price)
                                <div class="text-xs text-charcoal/40 line-through">
                                    Rp {{ number_format($selectedPackage->original_price, 0, ',', '.') }}
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- Fitur Utama yang Termasuk -->
                    <div>
                        <span class="text-xs font-bold text-charcoal uppercase tracking-wider block mb-3 text-charcoal/70">Fitur yang Langsung Aktif:</span>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2.5 text-xs text-charcoal/80">
                            <div class="flex items-center gap-2">
                                <i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-600 shrink-0"></i>
                                <span>Watermark demo dihapus 100%</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-600 shrink-0"></i>
                                <span>Maksimal {{ $selectedPackage->max_gallery_photos }} Foto Galeri Prewedding</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-600 shrink-0"></i>
                                <span>Buku Tamu Online &amp; RSVP Doa Tamu</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-600 shrink-0"></i>
                                <span>Amplop Digital &amp; Rekening Hadiah</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-600 shrink-0"></i>
                                <span>Navigasi Peta Google Maps &amp; Kalender</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-600 shrink-0"></i>
                                <span>Manajemen Tamu &amp; Broadcast WhatsApp</span>
                            </div>
                        </div>
                    </div>

                    <!-- Opsi Upgrade Paket Lebih Tinggi (Opsional / Terlipat) -->
                    @php
                        $tierRanks = ['simple' => 1, 'elegant' => 2, 'premium' => 3];
                        $currentRequiredRank = $tierRanks[$requiredTier] ?? 1;
                        $higherPackages = $packages->filter(fn($p) => ($tierRanks[$p->slug] ?? 1) > $currentRequiredRank);
                    @endphp

                    @if($higherPackages->count() > 0)
                        <div class="pt-4 border-t border-[#A8BBA6]/20">
                            <button type="button" 
                                    onclick="toggleUpgradeOptions()" 
                                    class="text-xs text-deepsage hover:text-[#3E5144] font-bold flex items-center gap-1.5 transition cursor-pointer">
                                <i data-lucide="chevron-right" id="upgradeChevron" class="w-4 h-4 transition-transform duration-200"></i>
                                <span>Ingin upgrade ke paket dengan fitur lebih lengkap? (Opsional)</span>
                            </button>

                            <div id="upgradeOptionsContainer" class="hidden mt-3 space-y-2.5">
                                @foreach($higherPackages as $hp)
                                    <label class="p-3.5 rounded-2xl border border-[#A8BBA6]/30 hover:border-deepsage bg-[#FAF7F0]/40 flex items-center justify-between cursor-pointer transition">
                                        <div class="flex items-center gap-3">
                                            <input type="radio" name="package_selection_radio" value="{{ $hp->id }}" data-name="{{ $hp->name }}" data-price="{{ (int) $hp->price }}" data-days="{{ $hp->active_days }}" class="accent-deepsage" onchange="switchSelectedPackage(this)">
                                            <div>
                                                <strong class="text-xs font-bold text-charcoal block">Paket {{ $hp->name }} ({{ $hp->active_days }} Hari)</strong>
                                                <span class="text-[11px] text-charcoal/60">{{ is_array($hp->features) ? implode(' • ', array_slice($hp->features, 0, 2)) : '' }}</span>
                                            </div>
                                        </div>
                                        <div class="text-right font-bold text-xs text-deepsage">
                                            Rp {{ number_format($hp->price, 0, ',', '.') }}
                                        </div>
                                    </label>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- VOUCHER / KUPON DISKON BOX INTERAKTIF -->
            <div class="bg-white p-6 sm:p-7 rounded-3xl border border-[#A8BBA6]/20 shadow-sm space-y-4">
                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                    <div>
                        <h4 class="font-heading text-xl font-bold text-charcoal flex items-center gap-2">
                            <i data-lucide="ticket" class="w-5 h-5 text-deepsage"></i>
                            Punya Kode Kupon / Voucher Diskon?
                        </h4>
                        <p class="text-xs text-charcoal/60 mt-0.5">Masukkan kode promo untuk mendapatkan potongan harga spesial.</p>
                    </div>

                    <div class="flex items-center max-w-sm w-full gap-2">
                        <div class="relative flex-grow">
                            <input type="text"
                                   id="promo_code_input"
                                   name="promo_code"
                                   placeholder="Contoh: NIKAHHEMAT"
                                   class="w-full px-4 py-2.5 uppercase font-mono text-xs rounded-xl border border-charcoal/20 focus:border-deepsage outline-none bg-[#FAF7F0]">
                        </div>
                        <button type="button"
                                id="btnApplyPromo"
                                onclick="applyPromoCode()"
                                class="px-5 py-2.5 bg-deepsage text-ivory text-xs font-semibold uppercase tracking-wider rounded-xl hover:bg-opacity-90 transition shrink-0 cursor-pointer">
                            Gunakan
                        </button>
                    </div>
                </div>

                <!-- Promo Feedback Message -->
                <div id="promo_alert" class="hidden p-3 rounded-xl text-xs flex items-center gap-2"></div>

                <!-- Live Price Breakdown -->
                <div class="pt-4 border-t border-[#A8BBA6]/20 flex flex-col sm:flex-row justify-between sm:items-center gap-3 text-xs sm:text-sm">
                    <div class="space-y-1 text-charcoal/70">
                        <div>Subtotal Paket: <strong id="lbl_subtotal" class="text-charcoal font-semibold">Rp {{ number_format($selectedPackage->price ?? 0, 0, ',', '.') }}</strong></div>
                        <div id="row_discount" class="hidden text-emerald-700">Potongan Kupon Promo: <strong id="lbl_discount" class="font-bold">- Rp 0</strong></div>
                    </div>
                    <div class="text-left sm:text-right">
                        <span class="text-xs text-charcoal/60 block">Total Pembayaran:</span>
                        <strong id="lbl_total_final" class="font-heading text-2xl sm:text-3xl font-bold text-deepsage">
                            Rp {{ number_format($selectedPackage->price ?? 0, 0, ',', '.') }}
                        </strong>
                    </div>
                </div>
            </div>

            <!-- Submit Button Direct to Online Payment (Snap) -->
            <div class="text-center pt-2">
                <button type="submit" class="w-full sm:w-auto px-10 py-4 bg-deepsage text-ivory font-bold text-sm uppercase tracking-widest rounded-full hover:bg-opacity-90 shadow-xl transition transform hover:-translate-y-0.5 cursor-pointer flex items-center justify-center gap-2 mx-auto">
                    <i data-lucide="shield-check" class="w-4 h-4 text-brandgold"></i>
                    <span>Lanjut ke Pembayaran Online (Snap) &rarr;</span>
                </button>
                <p class="text-[11px] text-charcoal/50 mt-2">Mendukung QRIS, GoPay, OVO, ShopeePay, Virtual Account Bank (BCA, Mandiri, BNI, BRI), &amp; Kartu Kredit.</p>
            </div>
        </form>

        <script>
            let currentPackagePrice = {{ $selectedPackage->price ?? 0 }};

            function toggleUpgradeOptions() {
                const container = document.getElementById('upgradeOptionsContainer');
                const chevron = document.getElementById('upgradeChevron');
                if (!container) return;
                const isHidden = container.classList.contains('hidden');
                if (isHidden) {
                    container.classList.remove('hidden');
                    if (chevron) chevron.classList.add('rotate-90');
                } else {
                    container.classList.add('hidden');
                    if (chevron) chevron.classList.remove('rotate-90');
                }
            }

            function switchSelectedPackage(radio) {
                const pkgId = radio.value;
                const pkgName = radio.getAttribute('data-name');
                const pkgPrice = parseInt(radio.getAttribute('data-price')) || 0;
                const pkgDays = radio.getAttribute('data-days');

                document.getElementById('selected_package_id').value = pkgId;
                document.getElementById('display_package_name').innerText = 'Paket ' + pkgName;
                document.getElementById('display_package_days').innerText = pkgDays + ' Hari';
                document.getElementById('display_package_price').innerText = 'Rp ' + pkgPrice.toLocaleString('id-ID');

                currentPackagePrice = pkgPrice;

                // Re-calculate promo if filled
                const promoInput = document.getElementById('promo_code_input').value.trim();
                if (promoInput) {
                    applyPromoCode();
                } else {
                    updatePriceDisplay(currentPackagePrice, 0);
                }
            }

            function updatePriceDisplay(subtotal, discount) {
                const finalAmount = Math.max(0, subtotal - discount);
                document.getElementById('lbl_subtotal').innerText = 'Rp ' + subtotal.toLocaleString('id-ID');
                
                const rowDiscount = document.getElementById('row_discount');
                if (discount > 0) {
                    rowDiscount.classList.remove('hidden');
                    document.getElementById('lbl_discount').innerText = '- Rp ' + discount.toLocaleString('id-ID');
                } else {
                    rowDiscount.classList.add('hidden');
                }

                document.getElementById('lbl_total_final').innerText = 'Rp ' + finalAmount.toLocaleString('id-ID');
            }

            function applyPromoCode() {
                const codeInput = document.getElementById('promo_code_input');
                const code = codeInput.value.trim().toUpperCase();
                const packageId = document.getElementById('selected_package_id').value;
                const alertBox = document.getElementById('promo_alert');
                const btn = document.getElementById('btnApplyPromo');

                if (!code) {
                    alertBox.className = 'p-3 rounded-xl text-xs flex items-center gap-2 bg-amber-50 text-amber-800 border border-amber-200';
                    alertBox.innerHTML = '<i data-lucide="alert-circle" class="w-4 h-4 shrink-0"></i><span>Silakan ketikkan kode kupon promo terlebih dahulu.</span>';
                    alertBox.classList.remove('hidden');
                    if (typeof lucide !== 'undefined') lucide.createIcons();
                    return;
                }

                btn.innerText = 'Memeriksa...';
                btn.disabled = true;

                fetch("{{ route('checkout.checkPromo') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        code: code,
                        package_id: packageId
                    })
                })
                .then(res => res.json().then(data => ({ status: res.status, body: data })))
                .then(({ status, body }) => {
                    btn.innerText = 'Gunakan';
                    btn.disabled = false;

                    if (status === 200 && body.valid) {
                        alertBox.className = 'p-3 rounded-xl text-xs flex items-center gap-2 bg-emerald-50 text-emerald-800 border border-emerald-200';
                        alertBox.innerHTML = '<i data-lucide="check-circle" class="w-4 h-4 shrink-0 text-emerald-600"></i><span>' + body.message + '</span>';
                        alertBox.classList.remove('hidden');

                        updatePriceDisplay(body.original_amount, body.discount_amount);
                    } else {
                        alertBox.className = 'p-3 rounded-xl text-xs flex items-center gap-2 bg-red-50 text-red-800 border border-red-200';
                        alertBox.innerHTML = '<i data-lucide="x-circle" class="w-4 h-4 shrink-0 text-red-600"></i><span>' + (body.message || 'Kupon tidak dapat digunakan') + '</span>';
                        alertBox.classList.remove('hidden');

                        updatePriceDisplay(currentPackagePrice, 0);
                    }
                    if (typeof lucide !== 'undefined') lucide.createIcons();
                })
                .catch(err => {
                    btn.innerText = 'Gunakan';
                    btn.disabled = false;
                    alertBox.className = 'p-3 rounded-xl text-xs flex items-center gap-2 bg-red-50 text-red-800 border border-red-200';
                    alertBox.innerHTML = '<i data-lucide="alert-triangle" class="w-4 h-4 shrink-0 text-red-600"></i><span>Terjadi kesalahan saat memeriksa kupon.</span>';
                    alertBox.classList.remove('hidden');
                    if (typeof lucide !== 'undefined') lucide.createIcons();
                });
            }
        </script>

        @endif

    </div>
</div>
@endsection