@extends('layouts.app')

@section('content')
<style>
    /* Base Styles */
    .btn-romantic {
        background: linear-gradient(135deg, #ff6b8b, #ff4757);
        color: white;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        font-weight: 600;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        display: inline-flex;
        align-items: center;
    }
    
    .btn-romantic:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(255, 107, 139, 0.3);
    }
    
    .logo-text {
        font-family: 'Playfair Display', serif;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    }
    
    /* Book Layout Styles */
    .book-container {
        perspective: 1500px;
    }
    
    .book-cover {
        background: linear-gradient(145deg, #fff5f7, #ffffff);
        border-radius: 8px;
        box-shadow: 
            0 10px 25px -5px rgba(0, 0, 0, 0.1),
            0 10px 10px -5px rgba(0, 0, 0, 0.04);
        transition: all 0.5s ease;
    }
    
    .book-cover:hover {
        transform: translateY(-5px) rotateY(5deg);
        box-shadow: 
            0 20px 50px -10px rgba(0, 0, 0, 0.2),
            0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
    
    /* Floating Hearts Animation */
    @keyframes float {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-20px) rotate(5deg); }
    }
    
    .floating-heart {
        position: absolute;
        animation: float 6s ease-in-out infinite;
        opacity: 0.7;
        z-index: 0;
    }
    
    /* Download Button Styles */
    .btn-download {
        background: linear-gradient(135deg, #4f6bff, #3b56d6);
        color: white;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        font-weight: 600;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        display: inline-flex;
        align-items: center;
        position: relative;
        overflow: hidden;
    }
    
    .btn-download:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(79, 107, 255, 0.3);
        background: linear-gradient(135deg, #3b56d6, #4f6bff);
    }
    
    /* Page Content Styles */
    .page-content-card {
        background: white;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }
    
    .page-content-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    }
    
    .page-number-badge {
        background: linear-gradient(135deg, #ff9a9e, #fad0c4);
        color: white;
        font-weight: bold;
    }
</style>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Floating Hearts Background -->
    <div class="fixed inset-0 overflow-hidden pointer-events-none z-0">
        @for($i = 0; $i < 15; $i++)
            <div class="floating-heart" style="
                top: {{ rand(5, 95) }}%;
                left: {{ rand(5, 95) }}%;
                animation-delay: {{ rand(0, 5) }}s;
                font-size: {{ rand(16, 32) }}px;
                color: rgba(255,107,139,{{ rand(30, 70) / 100 }});
            ">
                ❤️
            </div>
        @endfor
    </div>

    <!-- Main Book Container -->
    <div class="book-container relative z-10">
        <!-- Book Cover Section -->
        <div class="book-cover mb-12 transform transition duration-500">
            <div class="p-6 md:p-8">
                <div class="flex flex-col md:flex-row items-center">
                    <div class="md:w-1/3 mb-6 md:mb-0">
                        @if($book->cover_image)
                            <img src="{{ asset('storage/love-story-covers/' . basename($book->cover_image)) }}" 
                                 alt="Book Cover" 
                                 class="w-full rounded-lg shadow-lg transform transition duration-500 hover:scale-105">
                        @else
                            <div class="bg-gradient-to-br from-pink-100 to-pink-200 h-64 flex items-center justify-center rounded-lg shadow-inner">
                                <i class="fas fa-book-open text-6xl text-pink-500 opacity-75"></i>
                            </div>
                        @endif
                    </div>
                    <div class="md:w-2/3 md:pl-8">
                        <h1 class="text-3xl md:text-4xl font-bold text-pink-700 mb-2 logo-text">
                            {{ $book->title }}
                        </h1>
                        <p class="text-xl text-gray-600 mb-4">
                            A love story by {{ $book->partner1_name }} & {{ $book->partner2_name }}
                        </p>

                        <div class="flex flex-wrap gap-4 mt-6">
                            <a href="{{ route('love-story.edit', $book->id) }}" 
                               class="btn-romantic">
                                <i class="fas fa-edit mr-2"></i> Edit Book
                            </a>
                            <a href="{{ route('love-story.create') }}" 
                               class="border-2 border-pink-600 text-pink-600 px-6 py-3 rounded-lg hover:bg-pink-50 transition-colors duration-300">
                                <i class="fas fa-plus mr-2"></i> Create New
                            </a>
                            <a href="{{ route('love-story.download', $book->id) }}" 
                               class="btn-download" 
                               id="downloadBtn">
                                <i class="fas fa-download mr-2"></i> Download PDF Book
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Book Pages Content -->
        @if($pages && count($pages) > 0)
            <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8">
                <div class="p-6 md:p-8">
                    <h2 class="text-2xl md:text-3xl font-bold text-pink-700 mb-8 text-center logo-text">
                        <i class="fas fa-book-open mr-2"></i> Your Love Story
                    </h2>

                    <div class="space-y-8">
                        @foreach($pages as $index => $page)
                            <div class="page-content-card p-6">
                                <div class="flex justify-between items-center mb-4">
                                    <span class="page-number-badge px-3 py-1 rounded-full text-sm">
                                        Page {{ $page->page_number }}
                                    </span>
                                    <span class="text-gray-400 text-sm">{{ $index + 1 }} of {{ count($pages) }}</span>
                                </div>
                                
                                @if($page->image)
                                    <div class="text-center my-6">
                                        <img src="{{ asset('storage/love-story-pages/' . basename($page->image)) }}" 
                                             alt="Page {{ $page->page_number }}" 
                                             class="w-full max-w-lg mx-auto rounded-lg shadow-md">
                                    </div>
                                @endif
                                
                                <div class="text-gray-700 leading-relaxed">
                                    {!! nl2br(e($page->content)) !!}
                                </div>
                                
                                <div class="flex justify-end mt-4">
                                    <span class="text-pink-400 text-2xl">❤️</span>
                                    <span class="text-pink-300 text-2xl mx-2">✨</span>
                                    <span class="text-pink-400 text-2xl">❤️</span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @else
            <div class="bg-white rounded-xl shadow-lg p-8 text-center">
                <div class="text-6xl text-pink-400 mb-4">📖</div>
                <h3 class="text-2xl font-bold text-pink-700 mb-2">Your story is empty</h3>
                <p class="text-gray-600 mb-6">Add some pages to bring your love story to life</p>
                <a href="{{ route('love-story.edit', $book->id) }}" 
                   class="btn-romantic inline-block px-6 py-3">
                    <i class="fas fa-plus mr-2"></i> Add Pages
                </a>
            </div>
        @endif
    </div>
</div>

<!-- Floating hearts animation -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const hearts = ['❤️', '💖', '💕', '✨', '🌸', '💘'];
        const container = document.querySelector('.fixed.inset-0');
        
        for (let i = 0; i < 10; i++) {
            const heart = document.createElement('div');
            heart.className = 'floating-heart';
            heart.innerHTML = hearts[Math.floor(Math.random() * hearts.length)];
            heart.style.left = `${Math.random() * 100}%`;
            heart.style.top = `${Math.random() * 100}%`;
            heart.style.fontSize = `${Math.random() * 20 + 16}px`;
            heart.style.animationDelay = `${Math.random() * 5}s`;
            heart.style.opacity = Math.random() * 0.5 + 0.3;
            container.appendChild(heart);
        }
    });
</script>
@endsection