@extends('layouts.app')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Hero Section with Floating Hearts -->
    <div class="mb-8 relative overflow-hidden">
        <div class="absolute inset-0 hero-gradient opacity-95 z-10"></div>
        <div class="absolute inset-0 z-0">
            @for($i = 0; $i < 15; $i++)
                <div class="absolute heart-animate" style="
                    top: {{ rand(5, 95) }}%;
                    left: {{ rand(5, 95) }}%;
                    animation-delay: {{ rand(0, 5) }}s;
                    font-size: {{ rand(12, 24) }}px;
                    opacity: {{ rand(50, 80) / 100 }};
                    color: rgba(255,255,255,0.7);
                ">
                    <i class="fas fa-heart"></i>
                </div>
            @endfor
        </div>
        <div class="relative h-96 rounded-lg overflow-hidden shadow-xl z-20">
            <div class="relative h-full flex items-center justify-center text-center px-4">
                <div class="animate-fade-in-up">
                    <h1 class="text-4xl md:text-5xl font-bold text-white mb-4 logo-text">
                        @isset($book) Edit Your Love Story @else Create Your Love Story @endisset
                    </h1>
                    <p class="text-xl text-white mb-6">Capture your unique journey together in a beautiful keepsake book</p>
                    <div class="flex justify-center space-x-4">
                        <a href="#book-form" class="btn-romantic px-8 py-3 rounded-full font-bold transform hover:scale-105 transition-transform">
                            Get Started <i class="fas fa-arrow-right ml-2 animate-pulse"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Book Creation Form with Floating Elements -->
    <div id="book-form" class="bg-white rounded-lg shadow-xl overflow-hidden mb-12 relative">
        <!-- Floating decorative elements -->
        <div class="absolute -top-6 -left-6 text-pink-300 text-5xl opacity-20">
            <i class="fas fa-heart animate-float"></i>
        </div>
        <div class="absolute -bottom-4 -right-4 text-pink-200 text-6xl opacity-20">
            <i class="fas fa-book-open animate-float-reverse"></i>
        </div>
        
        <form action="@isset($book) {{ route('love-story.update', $book->id) }} @else {{ route('love-story.store') }} @endisset" method="POST" enctype="multipart/form-data">
            @csrf
            @isset($book) @method('PUT') @endisset
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 p-6 relative z-10">
                <!-- Left Column -->
                <div>
                    <div class="mb-6 transform transition hover:-translate-y-1">
                        <label for="title" class="block text-pink-700 font-bold mb-2 text-lg flex items-center">
                            <i class="fas fa-pen-fancy mr-2 text-pink-500"></i> Book Title
                        </label>
                        <input type="text" id="title" name="title" required
                               value="{{ $book->title ?? old('title') }}"
                               class="w-full px-4 py-3 border-2 border-pink-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent transition-all hover:border-pink-300">
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <div class="transform transition hover:-translate-y-1">
                            <label for="partner1_name" class="block text-pink-700 font-bold mb-2 flex items-center">
                                <i class="fas fa-user mr-2 text-pink-500"></i> Your Name
                            </label>
                            <input type="text" id="partner1_name" name="partner1_name" required
                                   value="{{ $book->partner1_name ?? old('partner1_name') }}"
                                   class="w-full px-4 py-3 border-2 border-pink-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent transition-all hover:border-pink-300">
                        </div>
                        
                        <div class="transform transition hover:-translate-y-1">
                            <label for="partner2_name" class="block text-pink-700 font-bold mb-2 flex items-center">
                                <i class="fas fa-heart mr-2 text-pink-500"></i> Partner's Name
                            </label>
                            <input type="text" id="partner2_name" name="partner2_name" required
                                   value="{{ $book->partner2_name ?? old('partner2_name') }}"
                                   class="w-full px-4 py-3 border-2 border-pink-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent transition-all hover:border-pink-300">
                        </div>
                    </div>
                    
                    <div class="mb-6">
                        <label for="theme" class="block text-pink-700 font-bold mb-2 flex items-center">
                            <i class="fas fa-palette mr-2 text-pink-500"></i> Book Theme
                        </label>
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                            <label class="theme-option transform transition hover:scale-105 @if(($book->theme ?? old('theme')) == 'classic') theme-selected @endif">
                                <input type="radio" name="theme" value="classic" class="hidden" 
                                       @checked(($book->theme ?? old('theme')) == 'classic') required>
                                <div class="theme-preview bg-gradient-to-br from-pink-100 to-pink-200 p-4 rounded-lg text-center border-2 border-transparent hover:border-pink-300">
                                    <i class="fas fa-book-open text-3xl text-pink-600 mb-2 animate-bounce"></i>
                                    <span>Classic</span>
                                </div>
                            </label>
                            
                            <label class="theme-option transform transition hover:scale-105 @if(($book->theme ?? old('theme')) == 'vintage') theme-selected @endif">
                                <input type="radio" name="theme" value="vintage" class="hidden"
                                       @checked(($book->theme ?? old('theme')) == 'vintage')>
                                <div class="theme-preview bg-gradient-to-br from-amber-100 to-amber-200 p-4 rounded-lg text-center border-2 border-transparent hover:border-amber-300">
                                    <i class="fas fa-scroll text-3xl text-amber-600 mb-2 animate-bounce"></i>
                                    <span>Vintage</span>
                                </div>
                            </label>
                            
                            <label class="theme-option transform transition hover:scale-105 @if(($book->theme ?? old('theme')) == 'modern') theme-selected @endif">
                                <input type="radio" name="theme" value="modern" class="hidden"
                                       @checked(($book->theme ?? old('theme')) == 'modern')>
                                <div class="theme-preview bg-gradient-to-br from-blue-100 to-blue-200 p-4 rounded-lg text-center border-2 border-transparent hover:border-blue-300">
                                    <i class="fas fa-star text-3xl text-blue-600 mb-2 animate-spin" style="animation-duration: 3s"></i>
                                    <span>Modern</span>
                                </div>
                            </label>
                            
                            <label class="theme-option transform transition hover:scale-105 @if(($book->theme ?? old('theme')) == 'romantic') theme-selected @endif">
                                <input type="radio" name="theme" value="romantic" class="hidden"
                                       @checked(($book->theme ?? old('theme')) == 'romantic')>
                                <div class="theme-preview bg-gradient-to-br from-red-100 to-red-200 p-4 rounded-lg text-center border-2 border-transparent hover:border-red-300">
                                    <i class="fas fa-heart text-3xl text-red-600 mb-2 animate-pulse"></i>
                                    <span>Romantic</span>
                                </div>
                            </label>
                        </div>
                    </div>
                </div>
                
                <!-- Right Column -->
                <div>
                    <div class="mb-6 transform transition hover:-translate-y-1">
                        <label for="cover_image" class="block text-pink-700 font-bold mb-2 text-lg flex items-center">
                            <i class="fas fa-image mr-2 text-pink-500"></i> Cover Image
                        </label>
                        <div class="border-2 border-dashed border-pink-300 rounded-lg p-4 text-center transition-all hover:border-pink-400 hover:shadow-md">
                            <div class="mb-4">
                                <i class="fas fa-camera text-3xl text-pink-400 animate-bounce" style="animation-delay: 0.3s"></i>
                            </div>
                            <input type="file" id="cover_image" name="cover_image" accept="image/*" class="hidden">
                            <button type="button" onclick="document.getElementById('cover_image').click()" 
                                    class="btn-romantic px-4 py-2 rounded-lg font-medium mb-2 transform hover:scale-105 transition-transform">
                                <i class="fas fa-upload mr-2"></i> Upload Cover
                            </button>
                            <p class="text-sm text-gray-500">JPEG or PNG, max 2MB</p>
                            <div id="cover-preview" class="mt-4">
                                @isset($book)
                                    @if($book->cover_image)
                                        <img src="{{ asset('storage/' . $book->cover_image) }}" alt="Current cover" class="h-40 mx-auto rounded-lg shadow-md transform transition hover:scale-105">
                                    @endif
                                @endisset
                            </div>
                        </div>
                    </div>
                    
                    <div class="text-center">
                        <button type="submit" class="btn-romantic px-8 py-4 rounded-lg font-bold text-lg w-full transform hover:scale-105 transition-transform relative overflow-hidden group">
                            <span class="relative z-10 flex items-center justify-center">
                                <i class="fas fa-heart mr-2 animate-pulse"></i>
                                @isset($book) Update Love Story @else Create Love Story @endisset
                            </span>
                            <span class="absolute inset-0 bg-pink-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg"></span>
                        </button>
                        
                        @isset($book)
                            <a href="{{ route('love-story.show', $book->id) }}" 
                               class="block mt-4 border-2 border-pink-600 text-pink-600 px-8 py-3 rounded-lg font-bold hover:bg-pink-50 transition-all transform hover:-translate-y-1">
                                <i class="fas fa-book-open mr-2"></i> Preview Your Book
                            </a>
                        @endisset
                    </div>
                </div>
            </div>
        </form>
    </div>
    
    @isset($book)
        <!-- Pages Section with Floating Elements -->
        <div class="bg-white rounded-lg shadow-xl overflow-hidden p-6 mb-12 relative">
            <div class="absolute -top-4 -right-4 text-pink-200 text-5xl opacity-20">
                <i class="fas fa-pencil-alt animate-float"></i>
            </div>
            
            <h2 class="text-3xl font-bold text-pink-700 mb-6 text-center logo-text flex items-center justify-center">
                <i class="fas fa-plus-circle mr-3 text-pink-500 animate-spin" style="animation-duration: 4s"></i>
                Add Pages to Your Love Story
                <i class="fas fa-heart ml-3 text-pink-500 animate-pulse"></i>
            </h2>
            
            <form action="{{ route('love-story.add-page', $book->id) }}" method="POST" enctype="multipart/form-data" class="mb-8">
                @csrf
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="transform transition hover:-translate-y-1">
                        <label for="page_content" class="block text-pink-700 font-bold mb-2 flex items-center">
                            <i class="fas fa-align-left mr-2 text-pink-500"></i> Page Content
                        </label>
                        <textarea id="page_content" name="content" rows="6" required
                                  class="w-full px-4 py-3 border-2 border-pink-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent transition-all hover:border-pink-300"
                                  placeholder="Write your love story here..."></textarea>
                    </div>
                    
                    <div class="transform transition hover:-translate-y-1">
                        <label for="page_image" class="block text-pink-700 font-bold mb-2 flex items-center">
                            <i class="fas fa-image mr-2 text-pink-500"></i> Page Image (Optional)
                        </label>
                        <div class="border-2 border-dashed border-pink-300 rounded-lg p-4 h-full flex flex-col justify-center transition-all hover:border-pink-400 hover:shadow-md">
                            <div class="mb-4 text-center">
                                <i class="fas fa-image text-3xl text-pink-400 animate-bounce" style="animation-delay: 0.5s"></i>
                            </div>
                            <input type="file" id="page_image" name="image" accept="image/*" class="hidden">
                            <button type="button" onclick="document.getElementById('page_image').click()" 
                                    class="btn-romantic px-4 py-2 rounded-lg font-medium mb-2 mx-auto transform hover:scale-105 transition-transform">
                                <i class="fas fa-upload mr-2"></i> Upload Image
                            </button>
                            <p class="text-sm text-gray-500 text-center">JPEG or PNG, max 2MB</p>
                            <div id="page-image-preview" class="mt-4"></div>
                        </div>
                    </div>
                </div>
                
                <div class="text-center mt-6">
                    <button type="submit" class="btn-romantic px-8 py-3 rounded-lg font-bold transform hover:scale-105 transition-transform relative overflow-hidden group">
                        <span class="relative z-10 flex items-center justify-center">
                            <i class="fas fa-plus mr-2 animate-pulse"></i> Add Page
                        </span>
                        <span class="absolute inset-0 bg-pink-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg"></span>
                    </button>
                </div>
            </form>
            
            @if($pages->count() > 0)
                <h3 class="text-2xl font-bold text-pink-700 mb-6 text-center logo-text flex items-center justify-center">
                    <i class="fas fa-bookmark mr-3 text-pink-500 animate-bounce"></i>
                    Your Book Pages ({{ $pages->count() }})
                    <i class="fas fa-bookmark ml-3 text-pink-500 animate-bounce" style="animation-delay: 0.3s"></i>
                </h3>
                
                <div class="space-y-6">
                    @foreach($pages as $page)
                        <div class="border-2 border-pink-100 rounded-lg p-4 flex flex-col md:flex-row items-start bg-pink-50 transform transition hover:scale-[1.01] relative overflow-hidden">
                            <div class="absolute -left-2 -top-2 text-pink-200 text-3xl opacity-30">
                                <i class="fas fa-quote-left"></i>
                            </div>
                            <div class="md:w-1/4 mb-4 md:mb-0 md:mr-6">
                                @if($page->image)
                                    <img src="{{ asset('storage/' . $page->image) }}" alt="Page {{ $page->page_number }}" 
                                         class="w-full h-48 object-cover rounded-lg shadow-md transform transition hover:scale-105">
                                @else
                                    <div class="w-full h-48 bg-pink-100 rounded-lg flex items-center justify-center text-pink-400 transform transition hover:scale-105">
                                        <i class="fas fa-image text-5xl animate-pulse"></i>
                                    </div>
                                @endif
                            </div>
                            
                            <div class="flex-grow md:w-2/4">
                                <h4 class="font-bold text-lg text-pink-700 mb-2 flex items-center">
                                    <i class="fas fa-file-alt mr-2 text-pink-500"></i> Page {{ $page->page_number }}
                                </h4>
                                <p class="text-gray-700">{{ $page->content }}</p>
                            </div>
                            
                            <div class="mt-4 md:mt-0 md:w-1/4 text-right">
                                <form action="{{ route('love-story.delete-page', $page->id) }}" method="POST">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" 
                                            class="text-white bg-red-500 hover:bg-red-600 px-4 py-2 rounded-lg font-medium transition-all transform hover:scale-105 relative overflow-hidden group">
                                        <span class="relative z-10 flex items-center justify-center">
                                            <i class="fas fa-trash mr-2"></i> Delete
                                        </span>
                                        <span class="absolute inset-0 bg-red-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg"></span>
                                    </button>
                                </form>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="text-center py-12 bg-pink-50 rounded-lg transform transition hover:scale-[1.01]">
                    <i class="fas fa-book-open text-5xl text-pink-400 mb-4 animate-bounce"></i>
                    <h3 class="text-xl font-bold text-pink-700 mb-2">Your love story is waiting to be written</h3>
                    <p class="text-gray-600">Add your first page above to begin your journey</p>
                </div>
            @endif
        </div>
    @endisset
    
    <!-- Inspiration Section with Animated Icons -->
    <div class="romantic-section rounded-lg p-6 mb-12 relative overflow-hidden">
        <div class="absolute inset-0 opacity-10">
            @for($i = 0; $i < 8; $i++)
                <div class="absolute" style="
                    top: {{ rand(5, 95) }}%;
                    left: {{ rand(5, 95) }}%;
                    animation: float {{ rand(6, 12) }}s ease-in-out infinite;
                    font-size: {{ rand(20, 40) }}px;
                    color: rgba(255,107,139,0.3);
                ">
                    <i class="fas fa-heart"></i>
                </div>
            @endfor
        </div>
        
        <h2 class="text-3xl font-bold text-pink-700 mb-6 text-center logo-text relative z-10">
            <i class="fas fa-lightbulb mr-3 text-yellow-400 animate-pulse"></i>
            Love Story Inspiration
            <i class="fas fa-lightbulb ml-3 text-yellow-400 animate-pulse" style="animation-delay: 0.5s"></i>
        </h2>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 relative z-10">
            <div class="bg-white p-6 rounded-lg shadow-md transform transition hover:-translate-y-2 hover:shadow-lg">
                <div class="text-pink-600 text-3xl mb-4 animate-bounce" style="animation-delay: 0.2s">
                    <i class="fas fa-calendar-heart"></i>
                </div>
                <h3 class="font-bold text-xl mb-2">First Meeting</h3>
                <p class="text-gray-600 mb-3">Describe how you first met and your initial impressions.</p>
                <div class="text-pink-500 text-sm flex items-center">
                    <i class="fas fa-arrow-right mr-1 animate-horizontal"></i>
                    <span>Try writing about the first thing you noticed</span>
                </div>
            </div>
            
            <div class="bg-white p-6 rounded-lg shadow-md transform transition hover:-translate-y-2 hover:shadow-lg">
                <div class="text-pink-600 text-3xl mb-4 animate-bounce" style="animation-delay: 0.4s">
                    <i class="fas fa-heartbeat"></i>
                </div>
                <h3 class="font-bold text-xl mb-2">Special Moments</h3>
                <p class="text-gray-600 mb-3">Highlight memorable dates, trips, or milestones.</p>
                <div class="text-pink-500 text-sm flex items-center">
                    <i class="fas fa-arrow-right mr-1 animate-horizontal"></i>
                    <span>Include photos from special occasions</span>
                </div>
            </div>
            
            <div class="bg-white p-6 rounded-lg shadow-md transform transition hover:-translate-y-2 hover:shadow-lg">
                <div class="text-pink-600 text-3xl mb-4 animate-bounce" style="animation-delay: 0.6s">
                    <i class="fas fa-ring"></i>
                </div>
                <h3 class="font-bold text-xl mb-2">Future Dreams</h3>
                <p class="text-gray-600 mb-3">Share your hopes and dreams for the future together.</p>
                <div class="text-pink-500 text-sm flex items-center">
                    <i class="fas fa-arrow-right mr-1 animate-horizontal"></i>
                    <span>What adventures do you want to share?</span>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    @keyframes float {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-20px) rotate(5deg); }
    }
    
    @keyframes float-reverse {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-20px) rotate(-5deg); }
    }
    
    @keyframes heart-beat {
        0% { transform: scale(1); }
        25% { transform: scale(1.1); }
        50% { transform: scale(1); }
        75% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }
    
    @keyframes animate-horizontal {
        0%, 100% { transform: translateX(0); }
        50% { transform: translateX(5px); }
    }
    
    @keyframes animate-fade-in-up {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .heart-animate {
        animation: float 6s ease-in-out infinite;
    }
    
    .animate-float {
        animation: float 8s ease-in-out infinite;
    }
    
    .animate-float-reverse {
        animation: float-reverse 8s ease-in-out infinite;
    }
    
    .animate-pulse {
        animation: heart-beat 1.5s infinite;
    }
    
    .animate-horizontal {
        animation: animate-horizontal 2s infinite;
    }
    
    .animate-fade-in-up {
        animation: animate-fade-in-up 1s ease-out;
    }
    
    .theme-option {
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .theme-option:hover .theme-preview {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(255, 107, 139, 0.2);
    }
    
    .theme-selected .theme-preview {
        border: 3px solid #ff6b8b !important;
        box-shadow: 0 5px 15px rgba(255, 107, 139, 0.3);
    }
    
    .btn-romantic {
        background-color: #ff6b8b;
        color: white;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }
    
    .btn-romantic:hover {
        background-color: #ff4757;
        transform: translateY(-2px);
    }
    
    /* Mobile styles */
    @media (max-width: 640px) {
        .theme-preview {
            padding: 1.5rem 0.5rem;
        }
        
        #cover-preview img {
            height: 30vh;
            width: auto;
            max-width: 100%;
        }
        
        .polaroid {
            transform: none !important;
        }
        
        .polaroid:hover {
            transform: scale(1.03) !important;
        }
        
        .hero-gradient {
            background: linear-gradient(135deg, #ff6b8b 0%, #ff8e9e 100%);
        }
    }
</style>

<script>
    // Enhanced image preview with animation
    document.getElementById('cover_image')?.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(event) {
                const preview = document.getElementById('cover-preview');
                preview.innerHTML = `
                    <div class="relative">
                        <img src="${event.target.result}" alt="Cover preview" 
                             class="h-40 mx-auto rounded-lg shadow-md transform transition hover:scale-105">
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
                            <span class="bg-pink-600 text-white px-2 py-1 rounded-full text-xs">Click to change</span>
                        </div>
                    </div>
                `;
            };
            reader.readAsDataURL(file);
        }
    });
    
    document.getElementById('page_image')?.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(event) {
                const preview = document.getElementById('page-image-preview');
                preview.innerHTML = `
                    <div class="relative">
                        <img src="${event.target.result}" alt="Page preview" 
                             class="h-40 mx-auto rounded-lg shadow-md transform transition hover:scale-105">
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
                            <span class="bg-pink-600 text-white px-2 py-1 rounded-full text-xs">Click to change</span>
                        </div>
                    </div>
                `;
            };
            reader.readAsDataURL(file);
        }
    });

    // Add confetti effect on form submission
    document.querySelector('form')?.addEventListener('submit', function() {
        if (typeof confetti === 'function') {
            confetti({
                particleCount: 100,
                spread: 70,
                origin: { y: 0.6 },
                colors: ['#ff6b8b', '#ff8e9e', '#ff4757']
            });
        }
    });
</script>

<!-- Add confetti library for celebration effect -->
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js"></script>
@endsection