@extends('layouts.app')

@section('content')
    @include('partials.header')

    <div class="lg:ml-64">
        @include('partials.topbar')

        <!-- Activation Section -->
        <section class="py-16 lg:py-24 bg-secondary/30 min-h-screen">
            <div class="max-w-lg mx-auto px-4 sm:px-6">

                <!-- Header -->
                <div class="text-center mb-10 scroll-reveal">
                    <div class="mb-3 animate-bounce flex justify-center" style="animation-duration:3s; filter: drop-shadow(0 0 20px rgba(245,197,24,0.3));">
                        <svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path d="M42.681 15.064c-.99-3.928-4.304-6.972-8.308-7.584c-4.381-.67-8.327 1.448-10.373 4.84c-2.047-3.392-5.993-5.51-10.376-4.84c-4.004.613-7.316 3.658-8.306 7.586a10.148 10.148 0 0 0 .369 6.19c2.517 7.242 11.418 15.007 15.816 18.512a3.999 3.999 0 0 0 4.994 0c4.398-3.505 13.299-11.27 15.816-18.511a10.14 10.14 0 0 0 .368-6.193Z" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </div>
                    <h2 class="text-3xl sm:text-4xl font-bold text-text mb-2" style="font-family: 'Love House', sans-serif;">Kích hoat 
                        <span class="locket-gold-text">
                            <span style="animation-delay: 0.1s">L</span><span style="animation-delay: 0.2s">o</span><span style="animation-delay: 0.3s">c</span><span style="animation-delay: 0.4s">k</span><span style="animation-delay: 0.5s">e</span><span style="animation-delay: 0.6s">t</span>
                            <span style="margin-right: 8px;"></span>
                            <span style="animation-delay: 0.7s">G</span><span style="animation-delay: 0.8s">o</span><span style="animation-delay: 0.9s">l</span><span style="animation-delay: 1.0s">d</span>
                        </span>
                    </h2>
                    <p class="text-text-muted text-sm"  style="font-family: 'Love House', sans-serif;">Kích hoạt Gold nhanh chóng & an toàn</p>
                </div>

                @auth
                @if(Auth::user()->current_plan || Auth::user()->is_admin || Auth::user()->is_staff)

                @php
                    $planId = Auth::user()->current_plan;
                    $dbPlan = DB::table('plans')->where('plan_id', $planId)->first();
                    $planName = $dbPlan ? $dbPlan->name : (Auth::user()->is_admin ? 'Admin System' : 'Staff VIP');
                    $planBadge = $dbPlan ? $dbPlan->badge_url : '/img/level/svip-10.gif';
                    $planDuration = $dbPlan ? $dbPlan->duration : 'Vĩnh viễn';
                    $expiryDate = Auth::user()->plan_expires_at ? \Carbon\Carbon::parse(Auth::user()->plan_expires_at)->format('d/m/Y H:i') : 'Vĩnh viễn';
                    $planFeatures = $dbPlan ? json_decode($dbPlan->features, true) : [
                        ['text' => 'Mở khóa Locket Gold', 'included' => true],
                        ['text' => 'Không quảng cáo', 'included' => true],
                        ['text' => 'Upload ảnh từ thư viện', 'included' => true],
                        ['text' => 'Quay video Locket 15s', 'included' => true],
                        ['text' => 'Huy hiệu Locket Gold', 'included' => true]
                    ];
                    $lockedUsername = Auth::user()->locket_username;
                    
                    // Kiểm tra xem có phải gói Android không
                    $isAndroid = ($planId === 'android premium' || (strpos(strtolower($planName), 'android') !== false));
                @endphp

                <!-- Active Plan Privileges Card -->
                <div class="bg-white rounded-2xl p-6 mb-4 hover:shadow-lg transition-all scroll-reveal" style="background: linear-gradient(135deg, rgba(139,92,246,0.04) 0%, rgba(236,72,153,0.04) 100%); border: 2px dashed rgba(168,85,247,0.3) !important;">
                    <div class="flex items-center gap-4 pb-4 border-b border-purple-100">
                        <div class="w-12 h-12 rounded-xl flex items-center justify-center shrink-0" style="background: linear-gradient(135deg, rgba(168,85,247,0.15), rgba(236,72,153,0.1)); border: 1px solid rgba(168,85,247,0.25);">
                            <img src="{{ $planBadge }}" alt="{{ $planName }}" class="w-8 h-8 object-contain">
                        </div>
                        <div>
                            <h3 class="text-sm font-extrabold text-purple-900" style="font-family: 'Love House', sans-serif;">{{ $planName }}</h3>
                            <p class="text-[11px] text-purple-700 font-bold">Hạn dùng: <span class="text-pink-600 font-extrabold">{{ $expiryDate }}</span></p>
                        </div>
                        <span class="ml-auto bg-green-500 text-white font-extrabold text-[9px] px-2.5 py-1 rounded-full uppercase tracking-wider">
                            Đang sử dụng
                        </span>
                    </div>
                    
                    <div class="mt-4">
                        <h4 class="text-xs font-bold text-gray-700 uppercase tracking-wider mb-2 flex items-center gap-1.5">
                            <svg class="w-3.5 h-3.5 text-purple-500" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg>
                            Quyền hạn của gói:
                        </h4>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-1.5">
                            @foreach($planFeatures as $feat)
                                <div class="flex items-center gap-2">
                                    @if(isset($feat['included']) && $feat['included'])
                                        <svg class="w-3.5 h-3.5 text-green-500 shrink-0" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                                        <span class="text-[11px] text-gray-700 font-semibold">{{ $feat['text'] }}</span>
                                    @else
                                        <svg class="w-3.5 h-3.5 text-gray-300 shrink-0" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                                        <span class="text-[11px] text-gray-400 line-through">{{ $feat['text'] }}</span>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                @if($isAndroid)
                <!-- Android DNS Card (Skip Activation) -->
                <div class="bg-white rounded-2xl shadow-md p-6 mb-4 hover:shadow-lg transition-all scroll-reveal" style="border: 2px dashed #f5c518 !important; background: linear-gradient(135deg, rgba(245,197,24,0.02) 0%, rgba(245,158,11,0.04) 100%);">
                    <div class="text-center mb-5">
                        <div class="w-16 h-16 bg-amber-500/10 text-amber-500 rounded-full flex items-center justify-center mx-auto mb-3">
                            <svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
                        </div>
                        <h3 class="text-lg font-black text-amber-700" style="font-family: 'Love House', sans-serif;">Gói Android (Không cần kích hoạt)</h3>
                        <p class="text-xs text-text-muted mt-1">Đối với dòng máy Android, bạn không cần thực hiện các bước kích hoạt tài khoản Locket Gold. Bạn chỉ cần tải và cài đặt file DNS Android bên dưới để sử dụng.</p>
                    </div>

                    <div class="dns-attention-box rounded-2xl p-5 text-left mb-4">
                        <div class="flex items-center gap-2 mb-2 pb-2 border-b border-red-100">
                            <span class="dns-badge bg-red-500 text-white font-extrabold text-[10px] px-2.5 py-1 rounded-full uppercase tracking-wider flex items-center gap-1">
                                ⚠️ HƯỚNG DẪN CÀI ĐẶT
                            </span>
                        </div>
                        <div class="space-y-3">
                            <div class="dns-step-item">
                                <div class="dns-step-num">1</div>
                                <div class="dns-step-text">Bấm nút <strong>"Tải file cấu hình DNS"</strong> màu xanh lá bên dưới để mở liên kết Drive.</div>
                            </div>
                            <div class="dns-step-item">
                                <div class="dns-step-num">2</div>
                                <div class="dns-step-text">Tải file về máy và cài đặt/làm theo hướng dẫn cấu hình DNS cho thiết bị Android của bạn.</div>
                            </div>
                        </div>
                    </div>

                    <a href="https://drive.google.com/file/d/1KBdZp9rOn4ZtVNYRyfyN4XxYR8Vz5zip/view?usp=drive_link" target="_blank"
                       class="flex items-center justify-center gap-2.5 w-full py-4 font-black text-sm rounded-xl border-2 border-dashed no-underline transition-all hover:bg-green-100/50 hover:scale-[1.02] duration-300" 
                       style="background: #f0fdf4; color: #16a34a; border-color: #bbf7d0;">
                        <svg class="w-5 h-5 animate-bounce" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> BẤM VÀO ĐÂY ĐỂ TẢI FILE DNS
                    </a>
                    
                    <a href="{{ url('/guide') }}" class="flex items-center justify-center gap-2 w-full mt-3 py-3.5 bg-amber-50 text-amber-700 hover:bg-amber-100 font-bold text-sm rounded-xl transition-all border-2 border-dashed border-amber-200 no-underline">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
                        Xem hướng dẫn chi tiết cho Android
                    </a>
                </div>
                @else

                @if(!$lockedUsername && !Auth::user()->is_admin && !Auth::user()->is_staff)
                {{-- First time: Set Locket username --}}
                <div class="bg-white rounded-2xl shadow-md p-6 mb-4 hover:shadow-lg transition-all scroll-reveal" id="setupCard">
                    <div class="text-center mb-4">
                        <div class="flex justify-center mb-2"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></div>
                        <h3 class="text-base font-bold text-text mb-1" style="font-family: 'Love House', sans-serif;">Liên kết tài khoản Locket</h3>
                        <p class="text-xs text-text-muted">Nhập username Locket của bạn. Sau khi liên kết sẽ <strong>không thể thay đổi</strong>.</p>
                    </div>
                    <label class="block text-xs font-semibold text-text-muted uppercase tracking-wider mb-2"><svg class="inline w-3.5 h-3.5 mr-1 -mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>Username Locket của bạn</label>
                    <div class="flex gap-2">
                        <input type="text" id="setupUsernameInput" placeholder="Nhập username Locket..." autocomplete="off"
                               class="flex-1 bg-secondary/50 border border-gray-200 rounded-xl px-4 py-3.5 text-text text-sm outline-none focus:border-accent focus:ring-2 focus:ring-accent/15 transition-all placeholder-gray-400 font-medium">
                        <button id="setupBtn" onclick="saveLocketUsername()"
                                class="px-5 py-3.5 bg-green-50 text-green-600 font-bold text-sm rounded-xl border-2 border-dashed border-green-200 hover:bg-green-100 transition-all disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer">
                            Xác nhận
                        </button>
                    </div>
                    <p class="text-[10px] text-red-400 mt-2"><svg class="inline w-3 h-3 mr-0.5 -mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>Mỗi tài khoản chỉ được liên kết 1 username Locket duy nhất</p>
                </div>
                @endif

                {{-- Input Card (locked or admin) --}}
                <div class="bg-white rounded-2xl shadow-md p-6 mb-4 hover:shadow-lg transition-all scroll-reveal {{ !$lockedUsername && !Auth::user()->is_admin && !Auth::user()->is_staff ? 'hidden' : '' }}" id="inputCard">
                    <label class="block text-xs font-semibold text-text-muted uppercase tracking-wider mb-2"><svg class="inline w-3.5 h-3.5 mr-1 -mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>Username Locket</label>
                    <div class="flex gap-2">
                        <input type="text" id="usernameInput" placeholder="Nhập username..." autocomplete="off"
                               value="{{ $lockedUsername ?? '' }}"
                               {{ $lockedUsername && !Auth::user()->is_admin && !Auth::user()->is_staff ? 'readonly' : '' }}
                               class="flex-1 bg-secondary/50 border border-gray-200 rounded-xl px-4 py-3.5 text-text text-sm outline-none focus:border-accent focus:ring-2 focus:ring-accent/15 transition-all placeholder-gray-400 font-medium {{ $lockedUsername && !Auth::user()->is_admin && !Auth::user()->is_staff ? 'opacity-60 cursor-not-allowed' : '' }}">
                        <button id="checkBtn" onclick="checkUser()"
                                class="px-5 py-3.5 bg-green-50 text-green-600 font-bold text-sm rounded-xl border-2 border-dashed border-green-200 hover:bg-green-100 transition-all active:translate-y-0 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none cursor-pointer">
                            Kiểm tra
                        </button>
                    </div>
                    @if($lockedUsername)
                    <p class="text-[10px] text-green-600 mt-2"><svg class="inline w-3 h-3 mr-0.5 -mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg> Đã liên kết với username: <strong>{{ $lockedUsername }}</strong></p>
                    @endif
                </div>

                <!-- User Info Card -->
                <div class="bg-white rounded-2xl shadow-md p-6 mb-4 hidden" id="userInfo" style="animation: acSlideIn 0.4s ease;">
                    <div class="flex flex-col items-center pb-4 border-b border-gray-100 mb-2">
                        <div class="w-16 h-16 rounded-full border-2 border-dashed border-accent/30 p-1 mb-2 bg-gray-50 flex items-center justify-center overflow-hidden">
                            <img id="displayAvatar" src="" referrerpolicy="no-referrer" class="w-full h-full rounded-full object-cover hidden" alt="Avatar">
                            <div id="avatarFallback" class="w-full h-full rounded-full bg-accent/10 flex items-center justify-center text-accent">
                                <svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"/></svg>
                            </div>
                        </div>
                    </div>
                    <div class="flex justify-between items-center py-3 border-b border-gray-100 w-full">
                        <span class="text-xs text-text-muted font-medium"><svg class="inline w-3.5 h-3.5 mr-1 -mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>Username</span>
                        <span class="text-sm font-semibold font-mono text-text" id="displayUsername">-</span>
                    </div>
                    <div class="flex justify-between items-center py-3" style="display:none;">
                        <span class="text-xs text-text-muted font-medium">🆔 UID</span>
                        <span class="text-[11px] font-semibold font-mono text-text" id="displayUid">-</span>
                    </div>
                    <div class="flex justify-between items-center py-3">
                        <span class="text-xs text-text-muted font-medium"><svg class="inline w-3.5 h-3.5 mr-1 -mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>Trạng thái</span>
                        <span id="displayStatus">-</span>
                    </div>
                    <div id="actionArea"></div>
                </div>

                <!-- Progress Steps -->
                <div class="bg-white rounded-2xl shadow-md p-6 mb-4 hidden" id="terminal" style="animation: acSlideIn 0.4s ease;">
                    <div class="flex items-center gap-2 mb-5">
                        <div class="w-8 h-8 rounded-full bg-accent/15 flex items-center justify-center">
                            <svg width="16" height="16" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path d="M42.681 15.064c-.99-3.928-4.304-6.972-8.308-7.584c-4.381-.67-8.327 1.448-10.373 4.84c-2.047-3.392-5.993-5.51-10.376-4.84c-4.004.613-7.316 3.658-8.306 7.586a10.148 10.148 0 0 0 .369 6.19c2.517 7.242 11.418 15.007 15.816 18.512a3.999 3.999 0 0 0 4.994 0c4.398-3.505 13.299-11.27 15.816-18.511a10.14 10.14 0 0 0 .368-6.193Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        </div>
                        <div>
                            <h3 class="text-sm font-bold text-text">Đang kích hoạt <span class="locket-gold-text">Gold</span></h3>
                            <p class="text-[10px] text-text-muted">Vui lòng chờ trong giây lát...</p>
                        </div>
                    </div>
                    <!-- Overall progress bar -->
                    <div class="flex items-center justify-between mb-2">
                        <span id="progressLabel" class="text-[11px] font-semibold text-text-muted">Chuẩn bị...</span>
                        <span id="progressPct" class="text-[11px] font-bold text-accent">0%</span>
                    </div>
                    <div class="w-full h-2.5 bg-gray-100 rounded-full mb-5 overflow-hidden">
                        <div id="overallProgress" class="h-full rounded-full progress-bar-animated" style="width:0%;background:linear-gradient(90deg,#f5c518,#f59e0b,#f5c518);background-size:200% 100%;transition:width 0.6s ease;"></div>
                    </div>
                    <div id="terminalBody" class="space-y-3"></div>
                </div>

                <!-- Result Card -->
                <div class="bg-white rounded-2xl shadow-md p-8 text-center hidden" id="resultCard" style="animation: acSlideIn 0.5s ease;">
                    <div class="text-5xl mb-3 flex justify-center" id="resultIcon"><svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11l3 3L22 4"/></svg></div>
                    <div class="text-xl font-bold text-text mb-2" id="resultTitle" style="font-family: 'Love House', sans-serif;">Thành công!</div>
                    <div class="text-text-muted text-sm" id="resultSub">Gold đã được kích hoạt</div>
                    <div id="dnsArea" class="mt-5"></div>
                </div>

                @endif
                @else
                <!-- Locked - No Plan -->
                <div class="bg-white rounded-2xl shadow-md p-10 text-center">
                    <div class="flex justify-center mb-4"><svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></div>
                    <h3 class="text-xl font-bold text-gray-900 mb-2">Bản dùng thử đã hết hạn</h3>
                    <p class="text-gray-500 text-sm mb-6">Bạn đã sử dụng bản dùng thử duy nhất. Vui lòng mua gói VIP để tiếp tục kích hoạt Locket Gold.</p>
                    <a href="{{ url('/pricing') }}" class="inline-flex items-center gap-2 px-6 py-3.5 bg-amber-400 hover:bg-amber-500 text-gray-900 font-bold text-sm rounded-xl transition-all shadow-lg shadow-amber-200 hover:-translate-y-0.5">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                        Nâng cấp gói VIP
                    </a>
                </div>
                @endif
                @else
                <!-- Not Logged In -->
                <div class="bg-white rounded-2xl shadow-md p-10 text-center">
                    <div class="flex justify-center mb-4"><svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 5-5 5 5 0 0 1 5 5"/><circle cx="12" cy="16" r="1"/></svg></div>
                    <h3 class="text-xl font-bold text-gray-900 mb-2">Vui lòng đăng nhập</h3>
                    <p class="text-gray-500 text-sm mb-6">Đăng nhập để sử dụng chức năng kích hoạt Gold</p>
                    <a href="{{ route('login') }}" class="inline-flex items-center gap-2 px-6 py-3.5 bg-accent hover:bg-accent-dark text-white font-bold text-sm rounded-xl transition-all shadow-lg shadow-accent/20 hover:-translate-y-0.5">
                        Đăng nhập
                    </a>
                </div>

                <!-- Custom small notification popup modal asking: Do you have an account yet? -->
                <div id="authCheckModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/55 backdrop-blur-sm transition-opacity duration-300">
                    <div class="bg-white rounded-3xl p-6 max-w-sm w-full text-center shadow-2xl transform transition-transform duration-300 scale-95 border border-gray-100" style="animation: modalPopUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;">
                        <!-- Icon -->
                        <div class="w-16 h-16 bg-accent/10 text-accent rounded-full flex items-center justify-center mx-auto mb-4 animate-pulse">
                            <svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                        </div>
                        
                        <h4 class="text-lg font-black text-gray-900 mb-2" style="font-family: 'Love House', sans-serif;">Bạn đã có tài khoản chưa? 🤔</h4>
                        <p class="text-xs text-gray-500 leading-relaxed mb-6">
                            Chào mừng bạn! Vui lòng chọn bên dưới để đăng nhập hoặc đăng ký tài khoản mới.
                        </p>
                        
                        <div class="space-y-2.5">
                            <a href="{{ route('login') }}" class="flex items-center justify-center w-full py-3.5 bg-accent hover:bg-accent-dark text-white font-bold text-sm rounded-xl shadow-lg shadow-accent/15 transition-all hover:-translate-y-0.5 no-underline">
                                Tôi đã có tài khoản (Đăng nhập)
                            </a>
                            <a href="{{ route('register') }}" class="flex items-center justify-center w-full py-3.5 bg-secondary text-text-muted hover:bg-gray-100 font-bold text-sm rounded-xl border border-gray-200 transition-all hover:-translate-y-0.5 no-underline">
                                Chưa có tài khoản (Đăng ký)
                            </a>
                        </div>
                    </div>
                </div>
                
                <style>
                    @keyframes modalPopUp {
                        from { opacity: 0; transform: scale(0.9); }
                        to { opacity: 1; transform: scale(1); }
                    }
                </style>
                @endauth
            </div>
        </section>

        @include('partials.footer')
    </div>

    <style>
        input[type="text"] {
            border-style: dashed !important;
            border-width: 2px !important;
        }
        #setupCard, #inputCard, #userInfo, #terminal, #resultCard {
            border: 2px dashed #e2e8f0 !important;
        }
        .locket-gold-text {
            font-family: 'Love House', sans-serif;
            color: #fbba00;
            font-weight: bold;
            letter-spacing: 0.5px;
            text-shadow: 2px 2px 0px rgba(139, 117, 0, 0.1), 0px 0px 8px rgba(251, 186, 0, 0.4);
            display: inline-flex;
        }
        .locket-gold-text span {
            display: inline-block;
            animation: letterJump 2s ease-in-out infinite;
        }
        @keyframes letterJump {
            0%, 20%, 100% { transform: translateY(0); }
            10% { transform: translateY(-10px); }
        }
        .ac-spinner {
            width: 18px; height: 18px;
            border: 2px solid transparent;
            border-top-color: currentColor;
            border-radius: 50%;
            animation: acSpin 0.6s linear infinite;
            display: inline-block;
        }
        @keyframes acSpin { to { transform: rotate(360deg); } }
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-6px); }
            40%, 80% { transform: translateX(6px); }
        }

        /* DNS Attention Box */
        .dns-attention-box {
            border: 2.5px dashed #ef4444 !important;
            background: #fdf2f2 !important;
            box-shadow: 0 10px 25px -5px rgba(239, 68, 68, 0.15), 0 8px 10px -6px rgba(239, 68, 68, 0.15);
            animation: pulseBorder 2.5s infinite;
            position: relative;
            overflow: hidden;
        }
        @keyframes pulseBorder {
            0%, 100% { border-color: #ef4444 !important; box-shadow: 0 0 12px rgba(239, 68, 68, 0.25); }
            50% { border-color: #f59e0b !important; box-shadow: 0 0 22px rgba(245, 158, 11, 0.45); }
        }
        .dns-badge {
            animation: pulseBadge 1.5s infinite;
        }
        @keyframes pulseBadge {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.05); opacity: 0.85; }
        }
        .dns-step-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-top: 12px;
            font-size: 13px;
        }
        .dns-step-num {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #fee2e2;
            color: #ef4444;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            flex-shrink: 0;
            margin-top: 2px;
            border: 1px solid #fca5a5;
        }
        .dns-step-text {
            color: #374151;
            line-height: 1.6;
            font-weight: 500;
        }
        .dns-step-text strong {
            color: #b91c1c;
            font-weight: 700;
        }

        /* Step items */
        .step-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 14px;
            border-radius: 12px;
            background: #f9fafb;
            border: 2px dashed #f3f4f6;
            transition: all 0.3s ease;
            max-height: 80px;
        }
        .step-item.step-active {
            background: #fffbeb;
            border-color: #fde68a;
        }
        .step-item.step-done {
            background: #f0fdf4;
            border-color: #bbf7d0;
        }
        .step-item.step-error {
            background: #fef2f2;
            border-color: #fecaca;
        }
        .step-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            flex-shrink: 0;
        }
        .step-active .step-icon { background: #fef3c7; color: #d97706; }
        .step-done .step-icon { background: #dcfce7; color: #16a34a; }
        .step-error .step-icon { background: #fee2e2; color: #ef4444; }
        .step-pending .step-icon { background: #f3f4f6; color: #9ca3af; }
        .step-text-main { font-size: 12px; font-weight: 600; color: #1f2937; }
        .step-text-sub { font-size: 10px; color: #9ca3af; margin-top: 1px; }

        /* Toast Notification */
        .toast-container {
            position: fixed;
            top: 24px;
            right: 24px;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            gap: 10px;
            pointer-events: none;
        }

        .toast {
            pointer-events: auto;
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 300px;
            max-width: 420px;
            padding: 14px 18px;
            border-radius: 14px;
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            font-weight: 500;
            line-height: 1.4;
            box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
            backdrop-filter: blur(12px);
            animation: toastIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
            transition: all 0.3s ease;
        }

        .toast.removing {
            animation: toastOut 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }

        .toast-icon {
            font-size: 20px;
            flex-shrink: 0;
        }

        .toast-content {
            flex: 1;
        }

        .toast-title {
            font-weight: 700;
            font-size: 13px;
            margin-bottom: 2px;
        }

        .toast-message {
            opacity: 0.85;
            font-size: 12px;
        }

        .toast-close {
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            background: rgba(0,0,0,0.08);
            border-radius: 8px;
            cursor: pointer;
            color: inherit;
            opacity: 0.5;
            font-size: 14px;
            transition: all 0.2s;
        }
        .toast-close:hover { opacity: 1; background: rgba(0,0,0,0.15); }

        .toast-progress {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 3px;
            border-radius: 0 0 14px 14px;
            animation: toastProgress linear forwards;
        }

        /* Toast Types */
        .toast-error {
            background: #fef2f2;
            border: 2px dashed #fecaca;
            color: #991b1b;
        }
        .toast-error .toast-progress { background: #ef4444; }

        .toast-success {
            background: #f0fdf4;
            border: 2px dashed #bbf7d0;
            color: #166534;
        }
        .toast-success .toast-progress { background: #22c55e; }

        .toast-warning {
            background: #fffbeb;
            border: 2px dashed #fde68a;
            color: #92400e;
        }
        .toast-warning .toast-progress { background: #f59e0b; }

                    .toast-info {
            background: #eff6ff;
            border: 1px solid #bfdbfe;
            color: #1e40af;
        }
        .toast-info .toast-progress { background: #3b82f6; }

        @keyframes acSlideIn {
            from { opacity: 0; transform: translateY(12px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes progressShimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        .progress-bar-animated {
            background: linear-gradient(90deg, #fbbf24, #fef3c7, #fbbf24);
            background-size: 200% 100%;
            animation: progressShimmer 2s linear infinite;
        }

        @keyframes toastIn {
            from { opacity: 0; transform: translateX(80px) scale(0.95); }
            to { opacity: 1; transform: translateX(0) scale(1); }
        }
        @keyframes toastOut {
            from { opacity: 1; transform: translateX(0) scale(1); }
            to { opacity: 0; transform: translateX(80px) scale(0.95); }
        }
        @keyframes toastProgress {
            from { width: 100%; }
            to { width: 0%; }
        }

        @media (max-width: 480px) {
            .toast-container { top: 12px; right: 12px; left: 12px; }
            .toast { min-width: unset; }
        }
    </style>

    <!-- Toast Container -->
    <div class="toast-container" id="toastContainer"></div>

    <script>
        const API_BASE = '{{ url("") }}';
        let currentUid = null;
        let currentUsername = null;
        let isActivating = false;
        let cooldownUntil = parseInt(localStorage.getItem('activate_cooldown') || '0');

        // Check and resume cooldown on load
        window.addEventListener('DOMContentLoaded', () => {
            const now = Date.now();
            if (cooldownUntil > now) {
                startCooldownTimer(Math.ceil((cooldownUntil - now) / 1000));
            }
        });

        function startCooldownTimer(seconds) {
            const checkBtn = document.getElementById('checkBtn');
            if (!checkBtn) return;
            
            checkBtn.disabled = true;
            checkBtn.classList.add('opacity-50', 'cursor-not-allowed');
            
            let cd = seconds;
            checkBtn.innerHTML = `Chờ ${cd}s`;
            
            const cdInterval = setInterval(() => {
                cd--;
                if (cd <= 0) {
                    clearInterval(cdInterval);
                    checkBtn.disabled = false;
                    checkBtn.classList.remove('opacity-50', 'cursor-not-allowed');
                    checkBtn.innerHTML = 'Kiểm tra';
                    cooldownUntil = 0;
                    localStorage.removeItem('activate_cooldown');
                } else {
                    checkBtn.innerHTML = `Chờ ${cd}s`;
                }
            }, 1000);
        }

        // Save Locket username (first time only)
        async function saveLocketUsername() {
            const input = document.getElementById('setupUsernameInput');
            const username = input.value.trim();
            if (!username) {
                toast('warning', 'Chưa nhập username', 'Vui lòng nhập username Locket của bạn.');
                input.focus();
                return;
            }

            const btn = document.getElementById('setupBtn');
            btn.disabled = true; btn.textContent = '...';

            try {
                // Verify username exists on Locket
                const res = await fetch(`${API_BASE}/api/resolve`, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({username: username})
                });
                const data = await res.json();

                if (!res.ok) {
                    toast('error', 'Username không tồn tại', data.error || 'Không tìm thấy username này trên Locket.');
                    btn.disabled = false; btn.textContent = 'Xác nhận';
                    return;
                }

                // Save to account
                const saveRes = await fetch(`${API_BASE}/api/save-locket-username`, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                    body: JSON.stringify({locket_username: data.username})
                });
                const saveData = await saveRes.json();

                if (saveData.success) {
                    toast('success', 'Liên kết thành công!', 'Username ' + data.username + ' đã được liên kết.');
                    // Show input card with locked username
                    document.getElementById('setupCard').style.display = 'none';
                    const inputCard = document.getElementById('inputCard');
                    inputCard.classList.remove('hidden');
                    const usernameInput = document.getElementById('usernameInput');
                    usernameInput.value = data.username;
                    usernameInput.readOnly = true;
                    usernameInput.classList.add('opacity-60', 'cursor-not-allowed');
                } else {
                    toast('error', 'Lỗi', saveData.message || 'Không thể lưu username.');
                }
            } catch (err) {
                toast('error', 'Lỗi kết nối', 'Không thể kết nối server.');
            }
            btn.disabled = false; btn.textContent = 'Xác nhận';
        }

        document.getElementById('usernameInput')?.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') checkUser();
        });
        document.getElementById('setupUsernameInput')?.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') saveLocketUsername();
        });

        async function checkUser() {
            // Cooldown check
            const now = Date.now();
            if (cooldownUntil > now) {
                const secs = Math.ceil((cooldownUntil - now) / 1000);
                toast('warning', 'Vui lòng chờ', `Thử lại sau ${secs} giây.`);
                return;
            }
            // Block during activation
            if (isActivating) return;

            const inputEl = document.getElementById('usernameInput');
            const input = inputEl.value.trim();

            // Validation
            if (!input) {
                toast('warning', 'Chưa nhập thông tin', 'Vui lòng nhập username hoặc link Locket.');
                inputEl.style.animation = 'shake 0.4s ease';
                setTimeout(() => inputEl.style.animation = '', 500);
                inputEl.focus();
                return;
            }

            const btn = document.getElementById('checkBtn');
            btn.disabled = true;
            btn.innerHTML = '<span class="ac-spinner"></span>';

            hideAll();

            try {
                const res = await fetch(`${API_BASE}/api/resolve`, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({username: input})
                });

                const data = await res.json();

                if (!res.ok) {
                    showError(data.error || 'Lỗi không xác định');
                    return;
                }

                currentUid = data.uid;
                currentUsername = data.username;

                const avatarEl = document.getElementById('displayAvatar');
                const fallbackEl = document.getElementById('avatarFallback');
                if (data.avatar) {
                    avatarEl.src = data.avatar;
                    avatarEl.classList.remove('hidden');
                    fallbackEl.classList.add('hidden');
                } else {
                    avatarEl.src = '';
                    avatarEl.classList.add('hidden');
                    fallbackEl.classList.remove('hidden');
                }

                document.getElementById('displayUsername').textContent = data.username;
                document.getElementById('displayUid').textContent = data.uid;

                const actionArea = document.getElementById('actionArea');

                 document.getElementById('displayStatus').innerHTML = data.is_gold 
                    ? '<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-accent/15 text-accent-dark border border-accent/30"><svg class="w-3.5 h-3.5" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M42.681 15.064c-.99-3.928-4.304-6.972-8.308-7.584c-4.381-.67-8.327 1.448-10.373 4.84c-2.047-3.392-5.993-5.51-10.376-4.84c-4.004.613-7.316 3.658-8.306 7.586a10.148 10.148 0 0 0 .369 6.19c2.517 7.242 11.418 15.007 15.816 18.512a3.999 3.999 0 0 0 4.994 0c4.398-3.505 13.299-11.27 15.816-18.511a10.14 10.14 0 0 0 .368-6.193Z"/></svg> Gold Active</span>'
                    : '<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-text-muted">Free</span>';

                actionArea.innerHTML = `
                    <button class="w-full mt-4 py-4 bg-green-50 text-green-600 font-bold text-base rounded-xl border-2 border-dashed border-green-200 hover:bg-green-100 transition-all active:translate-y-0 cursor-pointer" onclick="activateGold()">
                        <svg class="inline w-5 h-5 mr-1 -mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg> KÍCH HOẠT GOLD
                    </button>
                    ${data.is_gold ? `
                        <div class="dns-attention-box rounded-2xl p-5 mt-4 text-left">
                            <div class="flex items-center gap-2 mb-2 pb-2 border-b border-red-100">
                                <span class="dns-badge bg-red-500 text-white font-extrabold text-[10px] px-2.5 py-1 rounded-full uppercase tracking-wider flex items-center gap-1">
                                    ⚠️ BẮT BUỘC
                                </span>
                            </div>
                            <h4 class="text-sm font-extrabold text-red-700 mb-1">BẮT BUỘC PHẢI CÀI ĐẶT DNS!</h4>
                            <p class="text-[11px] text-gray-600 font-semibold leading-relaxed mb-3">
                                Locket quét định kỳ. Nếu không cài đặt DNS, Gold sẽ <span class="text-red-600 font-bold">bị thu hồi và mất tác dụng sau 2-5 phút</span>.
                            </p>
                            
                            <div class="space-y-2 mb-4">
                                <div class="dns-step-item">
                                    <div class="dns-step-num">1</div>
                                    <div class="dns-step-text">Bấm nút <strong>"Tải DNS Profile"</strong> màu xanh lá bên dưới để tải cấu hình.</div>
                                </div>
                                <div class="dns-step-item">
                                    <div class="dns-step-num">2</div>
                                    <div class="dns-step-text">Mở <strong>Cài đặt</strong> trên iPhone -> Chọn <strong>"Đã tải về hồ sơ"</strong> -> Chọn <strong>Cài đặt</strong> và xác nhận.</div>
                                </div>
                            </div>
                            
                            <a href="${API_BASE}/api/dns/${currentUid}/${currentUsername.replace(/\./g, '+')}"
                               class="flex items-center justify-center gap-2.5 w-full py-4 font-black text-sm rounded-xl border-2 border-dashed no-underline transition-all hover:bg-green-100/50 hover:scale-[1.02] duration-300" 
                               style="background: #f0fdf4; color: #16a34a; border-color: #bbf7d0;">
                                <svg class="w-5 h-5 animate-bounce" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> BẤM VÀO ĐÂY ĐỂ TẢI DNS PROFILE
                            </a>
                        </div>
                    ` : ''}
                    <a href="{{ url('/guide') }}" class="flex items-center justify-center gap-2 w-full mt-3 py-3.5 bg-amber-50 text-amber-700 hover:bg-amber-100 font-bold text-sm rounded-xl transition-all border-2 border-dashed border-amber-200 no-underline">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
                        Xem hướng dẫn chi tiết
                    </a>`;


                document.getElementById('userInfo').classList.remove('hidden');

            } catch (err) {
                showError('Lỗi kết nối server');
            } finally {
                btn.disabled = false;
                btn.innerHTML = 'Kiểm tra';
            }
        }

        async function activateGold() {
            if (!currentUid || isActivating) return;
            isActivating = true;

            // Disable check button
            const checkBtn = document.getElementById('checkBtn');
            if (checkBtn) {
                checkBtn.disabled = true;
                checkBtn.classList.add('opacity-50', 'cursor-not-allowed');
            }

            // Fade out userInfo card
            const userInfo = document.getElementById('userInfo');
            userInfo.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
            userInfo.style.opacity = '0';
            userInfo.style.transform = 'translateY(-10px)';
            await new Promise(r => setTimeout(r, 400));
            userInfo.style.display = 'none';

            const actionArea = document.getElementById('actionArea');
            actionArea.innerHTML = '';

            const terminal = document.getElementById('terminal');
            const terminalBody = document.getElementById('terminalBody');
            const progressBar = document.getElementById('overallProgress');
            terminal.classList.remove('hidden');

            // Define user-friendly steps with SVG icons
            const steps = [
                { icon: '<svg width="18" height="18" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke-width="3"><path d="M24 3c11.598 0 21 9.402 21 21s-9.402 21-21 21S3 35.598 3 24S12.402 3 24 3" fill="#8fbffa"/><path d="M27.505 25.194a6.6 6.6 0 1 0-7.008 0l-1.643 7.392c-.206.925.28 1.847 1.208 2.042c.913.192 2.225.372 3.938.372s3.026-.18 3.939-.372c.928-.195 1.414-1.117 1.208-2.042z" fill="#fff"/><path d="M24 3c11.598 0 21 9.402 21 21s-9.402 21-21 21S3 35.598 3 24S12.402 3 24 3" stroke="#2859c5" stroke-linecap="round" stroke-linejoin="round"/><path d="M27.505 25.194a6.6 6.6 0 1 0-7.008 0l-1.643 7.392c-.206.925.28 1.847 1.208 2.042c.913.192 2.225.372 3.938.372s3.026-.18 3.939-.372c.928-.195 1.414-1.117 1.208-2.042z" stroke="#2859c5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>', text: 'Xác thực tài khoản', sub: 'Kiểm tra thông tin người dùng' },
                { icon: '<svg width="18" height="18" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M32 22.4c-3.2 0-5.8 2.6-5.8 5.8c0 2.4 1.5 4.5 3.6 5.4v19.6c0 1.2 1 2.3 2.3 2.3c1.2 0 2.3-1 2.3-2.3V33.5c2.1-.9 3.6-2.9 3.6-5.4c-.2-3.1-2.8-5.7-6-5.7m0 4.5c.7 0 1.3.6 1.3 1.3s-.6 1.3-1.3 1.3s-1.3-.6-1.3-1.3s.6-1.3 1.3-1.3m-9.9.6c0-1.9.8-3.7 2.1-5c.9-.9.9-2.3 0-3.2s-2.3-.9-3.2 0c-2.2 2.2-3.4 5.1-3.4 8.2s1.2 6.1 3.4 8.3c.4.4 1 .7 1.6.7s1.1-.2 1.6-.7c.9-.9.9-2.3 0-3.2c-1.3-1.4-2.1-3.2-2.1-5.1m20.8-8.2c-.9-.9-2.3-.9-3.2 0s-.9 2.3 0 3.2c1.4 1.3 2.1 3.1 2.1 5s-.7 3.7-2.1 5.1c-.9.9-.9 2.3 0 3.2c.4.4 1 .7 1.6.7s1.2-.2 1.6-.7c2.2-2.2 3.4-5.2 3.4-8.3s-1.2-6-3.4-8.2" fill="currentColor"/><path d="M13.7 27.5c0-3.8 1.5-7.3 4.2-10c.9-.9.9-2.3 0-3.2s-2.3-.9-3.2 0c-3.6 3.5-5.5 8.2-5.5 13.2s2 9.7 5.5 13.2c.4.4 1 .7 1.6.7s1.2-.2 1.6-.7c.9-.9.9-2.3 0-3.2c-2.7-2.7-4.2-6.2-4.2-10m35.6-13.2c-.9-.9-2.3-.9-3.2 0s-.9 2.3 0 3.2c2.7 2.7 4.2 6.2 4.2 10s-1.5 7.3-4.2 10c-.9.9-.9 2.3 0 3.2c.4.4 1 .7 1.6.7s1.1-.2 1.6-.7c3.6-3.5 5.5-8.2 5.5-13.2s-2-9.7-5.5-13.2" fill="currentColor"/><path d="M5.3 27.5c0-5.7 2.2-11 6.3-15c.9-.9.9-2.3 0-3.2s-2.3-.9-3.2 0C3.5 14.2.8 20.6.8 27.5s2.7 13.3 7.6 18.2c.4.4 1 .7 1.6.7s1.2-.2 1.6-.7c.9-.9.9-2.3 0-3.2c-4.1-4-6.3-9.3-6.3-15M55.6 9.3c-.9-.9-2.3-.9-3.2 0s-.9 2.3 0 3.2c4.1 4 6.3 9.3 6.3 15s-2.2 11-6.3 15c-.9.9-.9 2.3 0 3.2c.4.4 1 .7 1.6.7s1.1-.2 1.6-.7c4.9-4.9 7.6-11.3 7.6-18.2c.1-6.9-2.7-13.3-7.6-18.2" fill="currentColor"/></svg>', text: 'Kết nối hệ thống', sub: 'Gửi yêu cầu kích hoạt' },
                { icon: '<svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M19.65 23a2.33 2.33 0 0 0-2.39-2.39h-.479c.01-.072 0-.405 0-.478c0-.908-1.003-1.434-1.912-1.434l-8.127-.01c-.907 0-1.912.525-1.912 1.434c0 .074-.01.407 0 .478h-.478a2.334 2.334 0 0 0-2.39 2.39z" fill="#e3e3e3"/><path d="m8.113 11.517l-.814.422a1.91 1.91 0 0 0-1.035 1.698v2.724a.478.478 0 0 0 .743.398l2.125-1.417" fill="#ff808c"/><path d="m8.113 11.517l-.814.422a1.91 1.91 0 0 0-1.035 1.698v2.724a.478.478 0 0 0 .743.398l2.125-1.417" stroke="#191919" stroke-linecap="round" stroke-linejoin="round"/><path d="m13.978 11.517l.815.422a1.91 1.91 0 0 1 1.032 1.698v2.724a.478.478 0 0 1-.743.398l-2.125-1.417" fill="#ff808c"/><path d="m13.978 11.517l.815.422a1.91 1.91 0 0 1 1.032 1.698v2.724a.478.478 0 0 1-.743.398l-2.125-1.417" stroke="#191919" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.957 19.166c0 1.339-1.912 2.39-1.912 2.39s-1.912-1.052-1.912-2.39s1.306-1.434 1.912-1.434s1.912.095 1.912 1.434" fill="#ffef5e" stroke="#191919" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.045 2.912v-.956M18.693 1v1.912m.957-.956h-1.912m4.781 7.649h-1.626a1.243 1.243 0 0 0-.691 2.282l1.76 1.172a1.243 1.243 0 0 1-.686 2.283H19.65m1.912-5.737v-.956m-.956 7.649v-.956M4.353 1.956H2.727a1.243 1.243 0 0 0-.688 2.282l1.759 1.173a1.243 1.243 0 0 1-.688 2.282H1.484m1.912-5.737V1M2.44 8.649v-.956" stroke="#191919" stroke-linecap="round" stroke-linejoin="round"/><path d="m13.914 5.303l-2.869-2.39l-2.868 2.39a2.85 2.85 0 0 0-.956 2.868l1.912 7.17h3.825l1.912-7.17a2.85 2.85 0 0 0-.956-2.868" fill="#e3e3e3"/><path d="M7.587 9.54c.159-.257.358-.486.59-.679a4.48 4.48 0 0 1 5.737 0c.232.193.431.422.59.679l.366-1.37a2.85 2.85 0 0 0-.956-2.867l-2.869-2.39l-2.868 2.39a2.85 2.85 0 0 0-.956 2.868z" fill="#fff"/><path d="m13.914 5.303l-2.869-2.39l-2.868 2.39a2.85 2.85 0 0 0-.956 2.868l1.912 7.17h3.825l1.912-7.17a2.85 2.85 0 0 0-.956-2.868" stroke="#191919" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.045 9.127a1.434 1.434 0 1 0 0-2.869a1.434 1.434 0 0 0 0 2.869" fill="#66e1ff" stroke="#191919" stroke-linecap="round" stroke-linejoin="round"/><path d="M6.742 18.688c-.907 0-1.912.527-1.912 1.434c0 .074-.01.406 0 .478h-.478a2.33 2.33 0 0 0-2.39 2.39m12.908-4.302c.907 0 1.911.527 1.911 1.434c0 .074.01.406 0 .478h.478a2.33 2.33 0 0 1 2.39 2.39" stroke="#191919" stroke-linecap="round" stroke-linejoin="round"/></g></svg>', text: 'Kích hoạt Gold', sub: 'Xác nhận quyền lợi Premium' },
                { icon: '<svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11.46 20.846A12 12 0 0 1 3.5 6A12 12 0 0 0 12 3a12 12 0 0 0 8.5 3a12 12 0 0 1-.09 7.06M15 19l2 2l4-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>', text: 'Thiết lập DNS bảo vệ', sub: 'Cấu hình hệ thống bảo mật' },
                { icon: '<svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11l3 3L22 4"/></g></svg>', text: 'Hoàn tất', sub: 'Kích hoạt thành công' }
            ];

            // Render pending steps
            terminalBody.innerHTML = steps.map((s, i) => `
                <div class="step-item step-pending" id="step-${i}">
                    <div class="step-icon">${s.icon}</div>
                    <div class="flex-1">
                        <div class="step-text-main">${s.text}</div>
                        <div class="step-text-sub">${s.sub}</div>
                    </div>
                    <div class="step-status" id="step-status-${i}"></div>
                </div>
            `).join('');

            progressBar.style.width = '0%';

            const progressLabel = document.getElementById('progressLabel');
            const progressPct = document.getElementById('progressPct');

            // Animate steps sequentially
            async function animateStep(index) {
                const el = document.getElementById('step-' + index);
                const statusEl = document.getElementById('step-status-' + index);
                if (!el) return;
                el.className = 'step-item step-active';
                statusEl.innerHTML = '<span class="ac-spinner" style="color:#f59e0b;width:16px;height:16px;"></span>';
                const pct = Math.round((index + 1) / steps.length * 80);
                progressBar.style.width = pct + '%';
                progressPct.textContent = pct + '%';
                progressLabel.textContent = steps[index].text + '...';
                await new Promise(r => setTimeout(r, 600 + Math.random() * 400));
            }

            function markStepDone(index) {
                const el = document.getElementById('step-' + index);
                const statusEl = document.getElementById('step-status-' + index);
                if (!el) return;
                el.className = 'step-item step-done';
                statusEl.innerHTML = '<span style="color:#16a34a;font-size:16px;">✓</span>';
                // Fade out after brief display
                setTimeout(() => {
                    el.style.transition = 'opacity 0.4s ease, max-height 0.4s ease, margin 0.4s ease, padding 0.4s ease';
                    el.style.opacity = '0';
                    el.style.maxHeight = '0';
                    el.style.marginBottom = '0';
                    el.style.padding = '0 14px';
                    el.style.overflow = 'hidden';
                    el.style.borderColor = 'transparent';
                }, 300);
            }

            function markStepError(index) {
                const el = document.getElementById('step-' + index);
                const statusEl = document.getElementById('step-status-' + index);
                if (!el) return;
                el.className = 'step-item step-error';
                statusEl.innerHTML = '<span style="color:#ef4444;font-size:16px;">✗</span>';
            }

            try {
                // Step 0 - Xác thực
                await animateStep(0);
                markStepDone(0);

                // Step 1 - Kết nối
                await animateStep(1);

                const res = await fetch(`${API_BASE}/api/activate`, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({uid: currentUid, username: currentUsername})
                });

                const data = await res.json();
                markStepDone(1);

                // Step 2 - Kích hoạt
                await animateStep(2);

                if (data.success) {
                    markStepDone(2);

                    // Step 3 - DNS
                    await animateStep(3);
                    markStepDone(3);

                    // Step 4 - Hoàn tất
                    await animateStep(4);
                    markStepDone(4);
                    progressBar.style.width = '100%';
                    progressPct.textContent = '100%';
                    progressLabel.textContent = 'Hoàn tất!';
                    progressBar.classList.remove('progress-bar-animated');
                    progressBar.style.background = 'linear-gradient(90deg, #16a34a, #22c55e)';

                    // Fade out progress card
                    terminal.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                    terminal.style.opacity = '0';
                    terminal.style.transform = 'translateY(-10px)';
                    await new Promise(r => setTimeout(r, 500));
                    terminal.style.display = 'none';

                    // Show result
                    const resultCard = document.getElementById('resultCard');
                    const dnsArea = document.getElementById('dnsArea');

                    document.getElementById('resultIcon').innerHTML = '<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11l3 3L22 4"/></svg>';
                    document.getElementById('resultTitle').textContent = 'Kích hoạt thành công!';
                    document.getElementById('resultSub').textContent = 'Locket Gold đã được kích hoạt';
                    document.getElementById('resultSub').className = 'locket-gold-text text-sm';

                    dnsArea.innerHTML = `
                        @if(Auth::check() && (Auth::user()->current_plan || Auth::user()->is_admin || Auth::user()->is_staff))
                        <div class="dns-attention-box rounded-2xl p-5 mt-4 text-left">
                            <div class="flex items-center gap-2 mb-2 pb-2 border-b border-red-100">
                                <span class="dns-badge bg-red-500 text-white font-extrabold text-[10px] px-2.5 py-1 rounded-full uppercase tracking-wider flex items-center gap-1">
                                    ⚠️ BẮT BUỘC / REQUIRED
                                </span>
                            </div>
                            <h4 class="text-sm font-extrabold text-red-700 mb-1">BẮT BUỘC PHẢI CÀI ĐẶT DNS!</h4>
                            <p class="text-[11px] text-gray-600 font-semibold leading-relaxed mb-3">
                                Locket quét định kỳ. Nếu không cài đặt DNS, Gold sẽ <span class="text-red-600 font-bold">bị thu hồi và mất tác dụng sau 2-5 phút</span>.
                            </p>
                            
                            <div class="space-y-2 mb-4">
                                <div class="dns-step-item">
                                    <div class="dns-step-num">1</div>
                                    <div class="dns-step-text">Bấm nút <strong>"Tải DNS Profile"</strong> màu xanh lá bên dưới để tải cấu hình.</div>
                                </div>
                                <div class="dns-step-item">
                                    <div class="dns-step-num">2</div>
                                    <div class="dns-step-text">Mở <strong>Cài đặt</strong> trên iPhone -> Chọn <strong>"Đã tải về hồ sơ"</strong> -> Chọn <strong>Cài đặt</strong> và xác nhận.</div>
                                </div>
                            </div>
                            
                            ${data.dns_pid ? `
                                <a href="${API_BASE}/api/dns/${data.dns_pid}/${currentUsername.replace(/\./g, '+')}"
                                   class="flex items-center justify-center gap-2.5 w-full py-4 font-black text-sm rounded-xl border-2 border-dashed no-underline transition-all hover:bg-green-100/50 hover:scale-[1.02] duration-300" 
                                   style="background: #f0fdf4; color: #16a34a; border-color: #bbf7d0;">
                                    <svg class="w-5 h-5 animate-bounce" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> BẤM VÀO ĐÂY ĐỂ TẢI DNS PROFILE
                                </a>` : ''}
                        </div>
                        @else
                        <div class="p-4 rounded-xl bg-amber-50 border border-amber-200 text-left">
                            <p class="text-amber-800 text-[11px] font-bold mb-1 flex items-center gap-1">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                                Lưu ý dùng thử
                            </p>
                            <p class="text-amber-700 text-[10px] leading-relaxed">
                                Gói dùng thử không hỗ trợ tải file DNS. Gold có thể bị mất sau 15-30 phút. Vui lòng nâng cấp gói VIP để giữ Gold vĩnh viễn.
                            </p>
                            <a href="/pricing" class="inline-block mt-2 text-[10px] font-bold text-amber-900 underline">Nâng cấp ngay &rarr;</a>
                        </div>
                        @endif`;

                    actionArea.innerHTML = `
                        <button onclick="showThankYou()" class="flex items-center justify-center gap-2 w-full mt-4 py-3.5 font-bold text-sm rounded-xl shadow-lg hover:-translate-y-0.5 transition-all cursor-pointer border-none" style="background:#fffdc4;color:#8b7500;box-shadow:0 4px 14px rgba(255,253,196,0.5);">
                            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11l3 3L22 4"/></svg> Đã hoàn thành
                        </button>
                    `;
                    resultCard.classList.remove('hidden');

                    // 60s cooldown
                    isActivating = false;
                    cooldownUntil = Date.now() + 60000;
                    localStorage.setItem('activate_cooldown', cooldownUntil);
                    startCooldownTimer(60);
                } else {
                    markStepError(2);
                    progressBar.style.width = '60%';
                    progressBar.style.background = 'linear-gradient(to right, #ef4444, #f87171)';

                    const resultCard = document.getElementById('resultCard');
                    const dnsArea = document.getElementById('dnsArea');
                    document.getElementById('resultIcon').innerHTML = '<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>';
                    document.getElementById('resultTitle').textContent = 'Kích hoạt thất bại';
                    document.getElementById('resultSub').textContent = data.message || 'Vui lòng thử lại sau';
                    dnsArea.innerHTML = `
                        <button class="w-full mt-3 py-4 bg-green-500 hover:bg-green-600 text-white font-semibold rounded-xl shadow-lg hover:-translate-y-0.5 transition-all cursor-pointer" onclick="activateGold()">
                            <svg class="inline w-4 h-4 mr-1 -mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg> Thử lại
                        </button>`;
                    actionArea.innerHTML = '';
                    resultCard.classList.remove('hidden');
                    isActivating = false;
                    if (checkBtn) {
                        checkBtn.disabled = false;
                        checkBtn.classList.remove('opacity-50', 'cursor-not-allowed');
                    }
                }

            } catch (err) {
                markStepError(1);
                progressBar.style.background = 'linear-gradient(to right, #ef4444, #f87171)';
                actionArea.innerHTML = `
                    <button class="w-full mt-4 py-4 bg-green-500 hover:bg-green-600 text-white font-semibold rounded-xl shadow-lg hover:-translate-y-0.5 transition-all cursor-pointer" onclick="activateGold()">
                        <svg class="inline w-4 h-4 mr-1 -mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg> Thử lại
                    </button>`;
                isActivating = false;
                if (checkBtn) {
                    checkBtn.disabled = false;
                    checkBtn.classList.remove('opacity-50', 'cursor-not-allowed');
                }
            }
        }

        function showError(msg) {
            toast('error', msg);
        }

        function hideAll() {
            const els = ['userInfo', 'terminal', 'resultCard'];
            els.forEach(id => {
                const el = document.getElementById(id);
                el.classList.add('hidden');
                el.style.display = '';
                el.style.opacity = '';
                el.style.transform = '';
                el.style.transition = '';
            });
        }

        // Toast system
        function toast(type, title, message = '', duration = 4000) {
            const icons = {
                success: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11l3 3L22 4"/></svg>',
                error: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>',
                warning: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',
                info: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>'
            };
            const container = document.getElementById('toastContainer');

            const el = document.createElement('div');
            el.className = `toast toast-${type}`;
            el.style.position = 'relative';
            el.innerHTML = `
                <span class="toast-icon">${icons[type] || icons.info}</span>
                <div class="toast-content">
                    <div class="toast-title">${title}</div>
                    ${message ? `<div class="toast-message">${message}</div>` : ''}
                </div>
                <button class="toast-close" onclick="removeToast(this.parentElement)">✕</button>
                <div class="toast-progress" style="animation-duration:${duration}ms"></div>
            `;

            container.appendChild(el);

            setTimeout(() => removeToast(el), duration);
        }

        function removeToast(el) {
            if (!el || el.classList.contains('removing')) return;
            el.classList.add('removing');
            setTimeout(() => el.remove(), 350);
        }
    </script>

    {{-- Thank You Modal --}}
    <div id="thankYouModal" style="display:none;position:fixed;inset:0;z-index:9999;align-items:center;justify-content:center;background:rgba(0,0,0,0.4);backdrop-filter:blur(4px);">
        <div style="background:#fff;border-radius:22px;max-width:400px;width:90%;padding:0;text-align:center;position:relative;box-shadow:0 20px 60px rgba(0,0,0,0.18);animation:thankIn 0.3s ease;overflow:visible;">
            <div style="position:absolute;top:-40px;left:50%;transform:translateX(-50%);z-index:1;">
                <img src="/bugcat.gif" alt="bugcat" style="width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,0.1));">
            </div>
            <div style="padding:50px 24px 24px;">
                {{-- Step 1: Stars --}}
                <div id="reviewStep1">
                    <div style="width:44px;height:44px;border-radius:14px;background:#dcfce7;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2.5"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11l3 3L22 4"/></svg></div>
                    <h2 style="font-size:18px;font-weight:800;color:#1a1a2e;margin-bottom:6px;">Cảm ơn bạn!</h2>
                    <p style="font-size:13px;color:#6b7280;line-height:1.6;margin-bottom:6px;">Kích hoạt Gold thành công!</p>
                    <p style="font-size:12px;color:#9ca3af;line-height:1.5;margin-bottom:16px;">Hãy để lại đánh giá để giúp chúng mình phát triển nhé</p>

                    <div id="starRating" style="display:flex;justify-content:center;gap:6px;margin-bottom:20px;">
                        <span class="star" data-v="1" onclick="rateStar(1)" style="font-size:28px;cursor:pointer;transition:transform 0.15s;color:#e5e7eb;">★</span>
                        <span class="star" data-v="2" onclick="rateStar(2)" style="font-size:28px;cursor:pointer;transition:transform 0.15s;color:#e5e7eb;">★</span>
                        <span class="star" data-v="3" onclick="rateStar(3)" style="font-size:28px;cursor:pointer;transition:transform 0.15s;color:#e5e7eb;">★</span>
                        <span class="star" data-v="4" onclick="rateStar(4)" style="font-size:28px;cursor:pointer;transition:transform 0.15s;color:#e5e7eb;">★</span>
                        <span class="star" data-v="5" onclick="rateStar(5)" style="font-size:28px;cursor:pointer;transition:transform 0.15s;color:#e5e7eb;">★</span>
                    </div>

                    <div style="display:flex;gap:8px;">
                        <button onclick="closeThankYou()" style="flex:1;padding:12px;border-radius:12px;border:1px solid #e7e5e4;background:#f5f5f4;color:#6b7280;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;font-family:inherit;">
                            Bỏ qua
                        </button>
                        <button onclick="goToReviewForm()" style="flex:1;padding:12px;border-radius:12px;border:none;background:#fffdc4;color:#8b7500;font-size:13px;font-weight:700;cursor:pointer;transition:all 0.2s;font-family:inherit;box-shadow:0 4px 14px rgba(255,253,196,0.5);display:flex;align-items:center;justify-content:center;gap:4px;"
                            onmouseenter="this.style.transform='translateY(-2px)'" onmouseleave="this.style.transform='translateY(0)'">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg> Đánh giá
                        </button>
                    </div>
                </div>

                {{-- Step 2: Review Form --}}
                <div id="reviewStep2" style="display:none;">
                    <h2 style="font-size:16px;font-weight:800;color:#1a1a2e;margin-bottom:4px;">Viết đánh giá</h2>
                    <div id="reviewStarsDisplay" style="display:flex;justify-content:center;gap:3px;margin-bottom:14px;font-size:18px;color:#f5c518;"></div>

                    <form id="reviewForm" enctype="multipart/form-data">
                        <input type="hidden" name="rating" id="reviewRatingInput" value="5">

                        <textarea name="content" id="reviewContent" rows="3" placeholder="Chia sẻ trải nghiệm của bạn..." style="width:100%;border:1px solid #e7e5e4;border-radius:12px;padding:12px;font-size:13px;font-family:inherit;resize:vertical;min-height:70px;outline:none;transition:border 0.2s;" onfocus="this.style.borderColor='#f5c518'" onblur="this.style.borderColor='#e7e5e4'"></textarea>

                        <label id="imageUploadArea" style="display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:10px;padding:16px;border:2px dashed #e5e7eb;border-radius:12px;cursor:pointer;transition:all 0.2s;" onmouseenter="this.style.borderColor='#f5c518';this.style.background='#fffef0'" onmouseleave="this.style.borderColor='#e5e7eb';this.style.background='transparent'">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg>
                            <span style="font-size:12px;color:#9ca3af;" id="imageLabel">Tải ảnh lên (tùy chọn)</span>
                            <input type="file" name="image" accept="image/*" style="display:none;" onchange="previewImage(this)">
                        </label>
                        <div id="imagePreview" style="display:none;margin-top:8px;position:relative;">
                            <img id="previewImg" style="width:100%;max-height:150px;object-fit:cover;border-radius:10px;">
                            <button type="button" onclick="removeImage()" style="position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,0.5);color:#fff;border:none;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;">&times;</button>
                        </div>

                        <div style="display:flex;gap:8px;margin-top:14px;">
                            <button type="button" onclick="backToStep1()" style="flex:1;padding:12px;border-radius:12px;border:1px solid #e7e5e4;background:#f5f5f4;color:#6b7280;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;">
                                Quay lại
                            </button>
                            <button type="submit" id="submitReviewBtn" style="flex:1;padding:12px;border-radius:12px;border:none;background:#fffdc4;color:#8b7500;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 4px 14px rgba(255,253,196,0.5);display:flex;align-items:center;justify-content:center;gap:4px;">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/></svg> Gửi đánh giá
                            </button>
                        </div>
                    </form>
                </div>

                {{-- Step 3: Success --}}
                <div id="reviewStep3" style="display:none;">
                    <div style="width:44px;height:44px;border-radius:14px;background:#dcfce7;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2.5"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11l3 3L22 4"/></svg></div>
                    <h2 style="font-size:18px;font-weight:800;color:#1a1a2e;margin-bottom:6px;">Đã gửi đánh giá!</h2>
                    <p style="font-size:13px;color:#6b7280;line-height:1.6;margin-bottom:20px;">Cảm ơn bạn đã chia sẻ trải nghiệm</p>
                    <button onclick="closeThankYou()" style="width:100%;padding:12px;border-radius:12px;border:none;background:#fffdc4;color:#8b7500;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;">
                        Đóng
                    </button>
                </div>
            </div>
        </div>
    </div>
    <style>
        @keyframes thankIn {
            from { opacity:0; transform:scale(0.88) translateY(14px); }
            to { opacity:1; transform:scale(1) translateY(0); }
        }
        #starRating .star:hover { transform:scale(1.25); }
    </style>
    <script>
        let selectedRating = 0;

        function showThankYou() {
            document.getElementById('reviewStep1').style.display = '';
            document.getElementById('reviewStep2').style.display = 'none';
            document.getElementById('reviewStep3').style.display = 'none';
            document.getElementById('thankYouModal').style.display = 'flex';
        }
        function closeThankYou() {
            document.getElementById('thankYouModal').style.display = 'none';
        }
        document.getElementById('thankYouModal').addEventListener('click', function(e) {
            if (e.target === this) closeThankYou();
        });

        function rateStar(n) {
            selectedRating = n;
            document.querySelectorAll('#starRating .star').forEach(s => {
                s.style.color = parseInt(s.dataset.v) <= n ? '#f5c518' : '#e5e7eb';
                s.style.transform = parseInt(s.dataset.v) <= n ? 'scale(1.15)' : 'scale(1)';
            });
        }

        function goToReviewForm() {
            if (!selectedRating) { rateStar(5); selectedRating = 5; }
            document.getElementById('reviewRatingInput').value = selectedRating;
            document.getElementById('reviewStarsDisplay').innerHTML = Array.from({length: 5}, (_, i) =>
                `<span style="color:${i < selectedRating ? '#f5c518' : '#e5e7eb'}">★</span>`
            ).join('');
            document.getElementById('reviewStep1').style.display = 'none';
            document.getElementById('reviewStep2').style.display = '';
        }

        function backToStep1() {
            document.getElementById('reviewStep2').style.display = 'none';
            document.getElementById('reviewStep1').style.display = '';
        }

        function previewImage(input) {
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = e => {
                    document.getElementById('previewImg').src = e.target.result;
                    document.getElementById('imagePreview').style.display = '';
                    document.getElementById('imageUploadArea').style.display = 'none';
                };
                reader.readAsDataURL(input.files[0]);
            }
        }

        function removeImage() {
            document.querySelector('#reviewForm input[name=image]').value = '';
            document.getElementById('imagePreview').style.display = 'none';
            document.getElementById('imageUploadArea').style.display = 'flex';
        }

        document.getElementById('reviewForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            const btn = document.getElementById('submitReviewBtn');
            btn.disabled = true;
            btn.innerHTML = 'Đang gửi...';

            const formData = new FormData(this);
            try {
                const res = await fetch('/review', {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content },
                    body: formData
                });
                const data = await res.json();
                if (data.success) {
                    document.getElementById('reviewStep2').style.display = 'none';
                    document.getElementById('reviewStep3').style.display = '';
                }
            } catch (err) {
                alert('Lỗi gửi đánh giá, vui lòng thử lại');
            }
            btn.disabled = false;
            btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/></svg> Gửi đánh giá';
        });
    </script>
@endsection