@extends('layouts.app')

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

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

        <section class="py-16 lg:py-24 min-h-screen" style="background: linear-gradient(145deg, #1a1a2e 0%, #252540 100%);">
            <div class="max-w-4xl mx-auto px-4 sm:px-6">

                <!-- Header with Animated Icon -->
                <div class="text-center mb-10">
                    <div class="mb-6 flex justify-center">
                        <div class="relative w-28 h-28 rounded-2xl overflow-hidden flex items-center justify-center" style="background: linear-gradient(135deg, rgba(236,72,153,0.2) 0%, rgba(212,175,55,0.2) 100%); border: 2px solid rgba(212,175,55,0.3);">
                            <svg class="w-14 h-14 animate-bounce" viewBox="0 0 24 24" fill="none" stroke="#d4af37" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                <path 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>
                            <div class="absolute inset-0 rounded-2xl" style="box-shadow: 0 0 30px rgba(212,175,55,0.3);"></div>
                        </div>
                    </div>
                    <h2 class="text-2xl sm:text-3xl font-bold mb-3" style="color: #fff;">Hướng dẫn <span class="gradient-text">kích hoạt Gold</span></h2>
                    <p class="text-sm" style="color: #9ca3af;">Làm theo các bước đơn giản bên dưới</p>
                </div>

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

                @php
                    $user = Auth::user();
                    $userPlan = $user->current_plan;
                    $videoUrl = null;
                    $videoType = null;
                    
                    if ($userPlan) {
                        $videoUrl = \DB::table('settings')->where('key', 'guide_video_url_' . $userPlan)->value('value');
                        $videoType = \DB::table('settings')->where('key', 'guide_video_type_' . $userPlan)->value('value');
                    }
                    
                    if (!$videoUrl) {
                        $videoUrl = \DB::table('settings')->where('key', 'guide_video_url')->value('value') ?? '/huong-dan/video-huong-dan.mp4';
                        $videoType = \DB::table('settings')->where('key', 'guide_video_type')->value('value') ?? 'file';
                    }
                    
                    $steps = \DB::table('guide_steps')->orderBy('order', 'asc')->get();
                @endphp

                <!-- Video Toggle Button -->
                <div class="text-center mb-8">
                    <button onclick="toggleVideo()" class="inline-flex items-center gap-2 px-6 py-3 font-bold text-sm rounded-2xl transition-all cursor-pointer"
                            style="background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%); color: #fff; box-shadow: 0 4px 15px rgba(236,72,153,0.3);"
                            onmouseover="this.style.boxShadow='0 8px 25px rgba(236,72,153,0.4)';"
                            onmouseout="this.style.boxShadow='0 4px 15px rgba(236,72,153,0.3)';">
                        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="5 3 19 12 5 21 5 3"/></svg>
                        Ấn vào đây để xem video hướng dẫn
                    </button>
                </div>

                <!-- Video (Hidden by default) -->
                <div id="videoContainer" class="rounded-2xl overflow-hidden mb-8 hidden" style="background: #1a1a2e; border: 1px solid rgba(212,175,55,0.2);">
                    <div class="p-4">
                        <div class="relative rounded-xl overflow-hidden bg-black aspect-video">
                            @if(($videoType == 'embed' || $videoType == 'url') && (Str::contains($videoUrl, 'youtube') || Str::contains($videoUrl, 'drive.google') || Str::contains($videoUrl, 'youtu.be') || Str::contains($videoUrl, 'embed')))
                                <iframe src="{{ $videoUrl }}" style="width: 100%; height: 100%; border: none;" allowfullscreen allow="autoplay"></iframe>
                            @else
                                <video id="guideVideo" controls class="w-full h-full" preload="metadata">
                                    <source src="{{ $videoUrl }}" type="video/mp4">
                                </video>
                            @endif
                        </div>
                    </div>
                </div>

                <script>
                    function toggleVideo() {
                        const container = document.getElementById('videoContainer');
                        const video = document.getElementById('guideVideo');
                        if (container.classList.contains('hidden')) {
                            container.classList.remove('hidden');
                            container.style.animation = 'acSlideIn 0.4s ease';
                            video.play();
                        } else {
                            container.classList.add('hidden');
                            video.pause();
                        }
                    }
                </script>

                <!-- Steps Grid -->
                <div class="grid sm:grid-cols-2 gap-4 mb-10">
                    @foreach($steps as $i => $step)
                    @php $step = (array)$step; @endphp
                    <div class="rounded-2xl overflow-hidden border" style="background: rgba(255,255,255,0.03); border-color: rgba(212,175,55,0.15); animation-delay: {{ $i * 0.05 }}s">
                        <div class="p-4">
                            <div class="flex items-start gap-2.5 mb-3">
                                <div class="w-7 h-7 rounded-lg flex items-center justify-center shrink-0 font-bold text-[11px]"
                                    style="background: linear-gradient(135deg, #d4af37, #f5d67a); color: #0f0f1a;">
                                    {{ $i + 1 }}
                                </div>
                                <div class="flex-1 min-w-0">
                                    <h3 class="text-[13px] font-bold mb-0.5 leading-tight" style="color: #fff;">{{ $step['title'] }}</h3>
                                    <p class="text-[11px] leading-relaxed line-clamp-2" style="color: #9ca3af;">{!! $step['description'] !!}</p>
                                </div>
                            </div>
                            <div class="rounded-xl overflow-hidden aspect-[4/3] flex items-center justify-center" style="background: rgba(0,0,0,0.3);">
                                @if(Str::startsWith($step['image'], 'http'))
                                    <img src="{{ $step['image'] }}" alt="Bước {{ $i + 1 }}" class="w-full h-full object-cover" loading="lazy">
                                @else
                                    <img src="/huong-dan/{{ $step['image'] }}" alt="Bước {{ $i + 1 }}" class="w-full h-full object-cover" loading="lazy">
                                @endif
                            </div>
                            @if(!empty($step['important_note']))
                            <div class="mt-2 px-2 py-1.5 rounded-lg" style="background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2);">
                                <p class="text-[10px] font-medium flex items-center gap-1" style="color: #ef4444;">
                                    <svg class="w-3 h-3 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><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>
                                    {{ $step['important_note'] }}
                                </p>
                            </div>
                            @endif
                        </div>
                    </div>
                    @endforeach
                </div>

                <!-- FAQ Section -->
                <div class="mt-10 mb-6">
                    <h3 class="text-lg font-bold mb-4 flex items-center gap-2" style="color: #fff;">
                        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="#d4af37" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
                        Câu hỏi thường gặp
                    </h3>
                    <div class="space-y-3" id="faqList">
                        @php
                        $faqs = [
                            ['Gold có thời hạn bao lâu?', 'Gold được kích hoạt 30 ngày mỗi lần. Bạn có thể gia hạn bằng cách kích hoạt lại khi hết hạn.'],
                            ['Tại sao cần cài DNS?', 'DNS Profile giúp duy trì trạng thái Gold ổn định. Nếu không cài, Gold có thể mất sau khi khởi động lại ứng dụng.'],
                            ['Kích hoạt bị lỗi?', 'Kiểm tra kết nối mạng và thử lại sau 30 giây. Nếu vẫn lỗi, liên hệ đội ngũ hỗ trợ.'],
                            ['Có hỗ trợ Android không?', 'Có! Với Android, bạn sử dụng Private DNS thay vì tải Profile.'],
                        ];
                        @endphp
                        @foreach($faqs as $faq)
                        <div class="rounded-xl overflow-hidden" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(212,175,55,0.15);">
                            <button onclick="toggleFaq(this)" class="w-full flex items-center justify-between px-5 py-4 text-left cursor-pointer bg-transparent border-0">
                                <span class="text-sm font-semibold" style="color: #fff;">{{ $faq[0] }}</span>
                                <svg class="w-4 h-4 shrink-0 transition-transform duration-300 faq-arrow" viewBox="0 0 24 24" fill="none" stroke="#d4af37" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
                            </button>
                            <div class="faq-answer" style="max-height:0;overflow:hidden;transition:max-height 0.3s ease;">
                                <div class="px-5 pb-4">
                                    <p class="text-sm leading-relaxed" style="color: #9ca3af;">{{ $faq[1] }}</p>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>

                <!-- Success Banner -->
                <div class="mb-6">
                    <div class="rounded-2xl p-6 text-center" style="background: linear-gradient(135deg, rgba(34,197,94,0.15) 0%, rgba(22,163,74,0.15) 100%); border: 1px solid rgba(34,197,94,0.3);">
                        <div class="mb-3 flex justify-center">
                            <div class="w-14 h-14 rounded-full flex items-center justify-center" style="background: rgba(34,197,94,0.2);">
                                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#22c55e" 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 11 3 3L22 4"/></svg>
                            </div>
                        </div>
                        <h3 class="text-lg font-bold mb-1" style="color: #22c55e;">Xong rồi!</h3>
                        <p class="text-sm" style="color: #9ca3af;">Bạn đã có thể sử dụng Locket Gold vĩnh viễn.</p>
                    </div>
                </div>

                <!-- Contact CTA -->
                <div class="rounded-2xl p-6 text-center" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(212,175,55,0.15);">
                    <p class="text-sm mb-3" style="color: #9ca3af;">Vẫn cần trợ giúp?</p>
                    <a href="/contact" class="inline-flex items-center gap-2 px-5 py-3 font-semibold text-sm rounded-xl transition-all no-underline"
                       style="background: linear-gradient(135deg, #d4af37 0%, #f5d67a 100%); color: #0f0f1a; box-shadow: 0 4px 15px rgba(212,175,55,0.3);"
                       onmouseover="this.style.boxShadow='0 8px 25px rgba(212,175,55,0.4)';"
                       onmouseout="this.style.boxShadow='0 4px 15px rgba(212,175,55,0.3)';">
                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                        Liên hệ hỗ trợ
                    </a>
                </div>

                @else
                <!-- No Plan -->
                <div class="rounded-2xl p-10 text-center" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(212,175,55,0.15);">
                    <div class="flex justify-center mb-4">
                        <div class="w-16 h-16 rounded-2xl flex items-center justify-center" style="background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.2);">
                            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ef4444" 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>
                    </div>
                    <h3 class="text-xl font-bold mb-2" style="color: #fff;">Nội dung bị khóa</h3>
                    <p class="text-sm mb-6" style="color: #9ca3af;">Bạn cần mua gói VIP để xem hướng dẫn kích hoạt Locket Gold.</p>
                    <a href="{{ url('/pricing') }}" class="inline-flex items-center gap-2 px-6 py-3.5 font-bold text-sm rounded-xl transition-all no-underline"
                       style="background: linear-gradient(135deg, #d4af37 0%, #f5d67a 100%); color: #0f0f1a; box-shadow: 0 4px 15px rgba(212,175,55,0.3);"
                       onmouseover="this.style.boxShadow='0 8px 25px rgba(212,175,55,0.4)';"
                       onmouseout="this.style.boxShadow='0 4px 15px rgba(212,175,55,0.3)';">
                        <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>
                        Mua gói ngay
                    </a>
                </div>
                @endif
                @else
                <!-- Not Logged In -->
                <div class="rounded-2xl p-10 text-center" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(212,175,55,0.15);">
                    <div class="flex justify-center mb-4">
                        <div class="w-16 h-16 rounded-2xl flex items-center justify-center" style="background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.2);">
                            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#6366f1" 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>
                    </div>
                    <h3 class="text-xl font-bold mb-2" style="color: #fff;">Vui lòng đăng nhập</h3>
                    <p class="text-sm mb-6" style="color: #9ca3af;">Đăng nhập để xem hướng dẫn kích hoạt Gold.</p>
                    <a href="{{ route('login') }}" class="inline-flex items-center gap-2 px-6 py-3.5 font-bold text-sm rounded-xl transition-all no-underline"
                       style="background: linear-gradient(135deg, #d4af37 0%, #f5d67a 100%); color: #0f0f1a; box-shadow: 0 4px 15px rgba(212,175,55,0.3);"
                       onmouseover="this.style.boxShadow='0 8px 25px rgba(212,175,55,0.4)';"
                       onmouseout="this.style.boxShadow='0 4px 15px rgba(212,175,55,0.3)';">
                        <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="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
                        Đăng nhập
                    </a>
                </div>
                @endauth

            </div>
        </section>
    </div>

    <style>
        .faq-arrow.open { transform: rotate(180deg); }
    </style>

    <script>
        function toggleFaq(btn) {
            const answer = btn.nextElementSibling;
            const arrow = btn.querySelector('.faq-arrow');
            const isOpen = answer.style.maxHeight && answer.style.maxHeight !== '0px';
            document.querySelectorAll('.faq-answer').forEach(a => { a.style.maxHeight = '0px'; });
            document.querySelectorAll('.faq-arrow').forEach(a => a.classList.remove('open'));
            if (!isOpen) {
                answer.style.maxHeight = answer.scrollHeight + 'px';
                arrow.classList.add('open');
            }
        }
    </script>
@endsection