@php
    $background = $page->background ? "background-color: $page->background;" : '';
@endphp

<div class="py-12" style="{{ $background }}">
    <div class="max-w-7xl px-4 sm:px-6 lg:px-8 mx-auto">
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6 text-gray-900">
                <h1 class="text-3xl md:text-4xl font-bold mb-8 text-amber-900">{{ $page->title }}</h1>

                {{-- Hiển thị ảnh đại diện --}}
                @if($page->thumbnail)
                    <div class="mb-8">
                        <img src="{{ Storage::url($page->thumbnail) }}" alt="{{ $page->title }}" class="w-full h-auto rounded-lg shadow-md">
                    </div>
                @endif

                {{-- Kiểm tra nếu có nội dung HTML --}}
                @if($page->content)
                    <div class="prose max-w-none">
                        {!! $page->content !!}
                    </div>
                @endif

                {{-- Hiển thị PDF từ Heyzine với iframe --}}
                @if(isset($page->pdf) && $page->pdf)
                    <div class="my-8">
                        <iframe allowfullscreen="allowfullscreen" scrolling="no" class="fp-iframe" src="https://heyzine.com/flip-book/{{ $page->pdf }}.html" style="border: 1px solid lightgray; width: 100%; height: 400px;"></iframe>
                    </div>
                @endif
                
                @if(isset($page->pdf2) && $page->pdf2)
                    <div class="my-8">
                        <iframe allowfullscreen="allowfullscreen" scrolling="no" class="fp-iframe" src="https://heyzine.com/flip-book/{{ $page->pdf2 }}.html" style="border: 1px solid lightgray; width: 100%; height: 400px;"></iframe>
                    </div>
                @endif
                
                @if(isset($page->pdf3) && $page->pdf3)
                    <div class="my-8">
                        <iframe allowfullscreen="allowfullscreen" scrolling="no" class="fp-iframe" src="https://heyzine.com/flip-book/{{ $page->pdf3 }}.html" style="border: 1px solid lightgray; width: 100%; height: 400px;"></iframe>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>