@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;
    }
    
    .btn-romantic:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(255, 107, 139, 0.4);
    }
    
    .logo-text {
        font-family: 'Playfair Display', serif;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
    }
    
    .hero-gradient {
        background: linear-gradient(45deg, rgba(255,107,139,0.8), rgba(255,71,87,0.9));
    }
    
    .heart-animate {
        animation: float 6s ease-in-out infinite;
    }
    
    @keyframes float {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-20px) rotate(5deg); }
    }
    
    .animate-fade-in-up {
        animation: fadeInUp 1s ease-out;
    }
    
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    /* Theme Selection */
    .theme-option {
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .theme-option:hover {
        transform: scale(1.05);
    }
    
    .theme-selected .theme-preview {
        box-shadow: 0 0 0 3px #ff6b8b;
    }
    
    .theme-preview {
        transition: all 0.3s ease;
        height: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    /* Book Card Styles */
    .book-card {
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }
    
    .book-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }
    
    .book-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #ff6b8b, #ff4757);
    }
    
    /* Image Display Styles */
    .image-container {
        position: relative;
        width: 100%;
        height: 150px;
        overflow: hidden;
        border-radius: 8px;
        background-color: #f8f9fa;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .stored-image {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    
    .image-placeholder {
        font-size: 2rem;
        color: #ff6b8b;
    }
    
    .image-preview-container {
        position: relative;
        margin-top: 1rem;
        width: 100%;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f8f9fa;
        border-radius: 8px;
    }
    
    .image-preview {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        border-radius: 8px;
    }
    
    /* Empty State Styles */
    .empty-state {
        padding: 2rem;
        text-align: center;
        background-color: #fff5f7;
        border-radius: 8px;
    }
    
    .empty-state i {
        font-size: 3rem;
        color: #ff6b8b;
        margin-bottom: 1rem;
    }
    
    /* Pages Section Styles */
    .pages-section {
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        margin-bottom: 2rem;
        padding: 1.5rem;
    }
    
    .pages-title {
        font-size: 1.75rem;
        font-weight: 700;
        color: #be185d;
        text-align: center;
        margin-bottom: 1.5rem;
        font-family: 'Playfair Display', serif;
    }
    
    .page-card {
        border: 2px solid #fbcfe8;
        border-radius: 8px;
        padding: 1rem;
        background-color: #fdf2f8;
        transition: all 0.3s ease;
        margin-bottom: 1rem;
    }
    
    .page-content {
        flex-grow: 1;
    }
    
    .page-number {
        font-size: 1.1rem;
        font-weight: 700;
        color: #be185d;
        margin-bottom: 0.5rem;
    }
    
    /* Form Styles */
    .form-textarea {
        width: 100%;
        padding: 0.75rem;
        border: 2px solid #fbcfe8;
        border-radius: 8px;
        background-color: #fdf2f8;
        resize: vertical;
        min-height: 120px;
    }
    
    .image-upload-container {
        border: 2px dashed #fbcfe8;
        border-radius: 8px;
        padding: 1rem;
        text-align: center;
        background-color: #fdf2f8;
    }
    
    /* Responsive Adjustments */
    @media (max-width: 1024px) {
        .hero-content h1 {
            font-size: 2.5rem;
        }
        
        .theme-preview {
            height: 80px;
        }
    }
    
    @media (max-width: 768px) {
        .hero-gradient {
            padding: 2rem;
        }
        
        .hero-content h1 {
            font-size: 2rem;
        }
        
        .hero-content p {
            font-size: 1rem;
        }
        
        .grid-cols-1 {
            grid-template-columns: 1fr;
        }
    }
    
    @media (max-width: 640px) {
        .hero-content {
            padding: 1rem;
        }
        
        .theme-preview {
            height: 70px;
            padding: 0.5rem;
        }
        
        .btn-romantic {
            padding: 0.75rem 1rem;
            font-size: 0.9rem;
        }
        
        .image-container,
        .image-preview-container {
            height: 120px;
        }
    }
</style>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Hero Section -->
    <div class="mb-8 relative overflow-hidden rounded-xl">
        <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 hero-content">
                <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>
            </div>
        </div>
    </div>

    <!-- Book Creation Form -->
    <div id="book-form" class="bg-white rounded-lg shadow-xl overflow-hidden mb-12 relative">
        <form action="@isset($book) {{ route('love-story.update', $book->id) }} @else {{ route('love-story.store') }} @endisset" method="POST" enctype="multipart/form-data" id="loveStoryForm">
            @csrf
            @isset($book) @method('PUT') @endisset
            
            <input type="hidden" name="session_id" value="{{ session()->getId() }}">
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 p-6">
                <!-- Left Column -->
                <div>
                    <div class="mb-6">
                        <label for="title" class="block text-pink-700 font-bold mb-2 text-lg">
                            <i class="fas fa-bookmark mr-2"></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:ring-pink-500 focus:border-pink-500">
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <div>
                            <label for="partner1_name" class="block text-pink-700 font-bold mb-2">
                                <i class="fas fa-user mr-2"></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:ring-pink-500 focus:border-pink-500">
                        </div>
                        
                        <div>
                            <label for="partner2_name" class="block text-pink-700 font-bold mb-2">
                                <i class="fas fa-heart mr-2"></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:ring-pink-500 focus:border-pink-500">
                        </div>
                    </div>
                    
                    <div class="mb-6">
                        <label class="block text-pink-700 font-bold mb-2">
                            <i class="fas fa-palette mr-2"></i>Book Theme
                        </label>
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                            <label class="theme-option @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">
                                    <i class="fas fa-book-open text-3xl text-pink-600 mb-2"></i>
                                    <span>Classic</span>
                                </div>
                            </label>
                            
                            <label class="theme-option @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">
                                    <i class="fas fa-scroll text-3xl text-amber-600 mb-2"></i>
                                    <span>Vintage</span>
                                </div>
                            </label>
                            
                            <label class="theme-option @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">
                                    <i class="fas fa-star text-3xl text-blue-600 mb-2"></i>
                                    <span>Modern</span>
                                </div>
                            </label>
                            
                            <label class="theme-option @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">
                                    <i class="fas fa-heart text-3xl text-red-600 mb-2"></i>
                                    <span>Romantic</span>
                                </div>
                            </label>
                        </div>
                    </div>
                </div>
                
                <!-- Right Column -->
                <div>
                    <div class="mb-6">
                        <label for="cover_image" class="block text-pink-700 font-bold mb-2 text-lg">
                            <i class="fas fa-image mr-2"></i>Cover Image
                        </label>
                        <div class="border-2 border-dashed border-pink-300 rounded-lg p-4 text-center">
                            <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">
                                <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="image-preview-container mt-4">
                                @isset($book)
                                    @if($book->cover_image)
                                        <img src="{{ asset($book->cover_image) }}" 
                                             alt="Current cover" class="image-preview">
                                    @else
                                        <div class="image-placeholder">
                                            <i class="fas fa-image"></i>
                                        </div>
                                    @endif
                                @else
                                    <div class="image-placeholder">
                                        <i class="fas fa-image"></i>
                                    </div>
                                @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">
                            <i class="fas fa-magic mr-2"></i> @isset($book) Update Love Story @else Create Love Story @endisset
                        </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-colors duration-300">
                                <i class="fas fa-book-open mr-2"></i> Preview Your Book
                            </a>
                        @endisset
                    </div>
                </div>
            </div>
        </form>
    </div>
    
    @if(isset($book) && request()->routeIs('love-story.show'))
        <!-- Pages Section - Only shown when viewing a specific book -->
        <div class="pages-section">
            <h2 class="pages-title">
                <i class="fas fa-book-open mr-2"></i>Your Love Story Pages
            </h2>
            
            @if($pages && count($pages) > 0)
                <div class="space-y-4">
                    @foreach($pages as $page)
                        <div class="page-card">
                            <div class="image-container">
                                @if($page->image)
                                    <img src="{{ asset($page->image) }}" 
                                         alt="Page {{ $page->page_number }}" class="stored-image">
                                @else
                                    <div class="image-placeholder">
                                        <i class="fas fa-image"></i>
                                    </div>
                                @endif
                            </div>
                            
                            <div class="page-content">
                                <h4 class="page-number">
                                    <i class="fas fa-file-alt mr-2"></i>Page {{ $page->page_number }}
                                </h4>
                                <p class="text-gray-700">{{ $page->content }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="empty-state">
                    <i class="fas fa-book-open"></i>
                    <h3 class="text-xl font-bold text-pink-700 mb-2">Your story is empty</h3>
                    <p class="text-gray-600">Add some pages to bring your love story to life</p>
                    <a href="{{ route('love-story.edit', $book->id) }}" class="btn-romantic inline-block mt-4 px-6 py-2 rounded-lg">
                        <i class="fas fa-plus mr-2"></i> Add Pages
                    </a>
                </div>
            @endif
        </div>
    @endif

    @if(isset($book) && request()->routeIs('love-story.edit'))
        <!-- Add Pages Form - Only shown when editing a specific book -->
        <div class="pages-section">
            <h2 class="pages-title">
                <i class="fas fa-plus-circle mr-2"></i>Add Pages to Your Love Story
            </h2>
            
            <form action="{{ route('love-story.add-page', $book->id) }}" method="POST" enctype="multipart/form-data" class="mb-6">
                @csrf
                
                <div class="mb-4">
                    <label for="page_content" class="block text-pink-700 font-bold mb-2">
                        <i class="fas fa-align-left mr-2"></i>Page Content
                    </label>
                    <textarea id="page_content" name="content" rows="6" required
                              class="form-textarea w-full"
                              placeholder="Write your love story here..."></textarea>
                </div>
                
                <div class="mb-4">
                    <label class="block text-pink-700 font-bold mb-2">
                        <i class="fas fa-camera mr-2"></i>Page Image (Optional)
                    </label>
                    <div class="image-upload-container">
                        <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">
                            <i class="fas fa-upload mr-2"></i> Upload Image
                        </button>
                        <p class="text-sm text-gray-500">JPEG or PNG, max 2MB</p>
                        <div id="page-image-preview" class="image-preview-container mt-4"></div>
                    </div>
                </div>
                
                <div class="text-center">
                    <button type="submit" class="btn-romantic px-8 py-3 rounded-lg font-bold">
                        <i class="fas fa-plus mr-2"></i> Add Page
                    </button>
                </div>
            </form>
            
            @if($pages && count($pages) > 0)
                <h3 class="pages-title" style="font-size: 1.5rem;">
                    <i class="fas fa-list-ol mr-2"></i>Your Book Pages ({{ count($pages) }})
                </h3>
                
                <div class="space-y-4">
                    @foreach($pages as $page)
                        <div class="page-card">
                            <div class="image-container">
                                @if($page->image)
                                    <img src="{{ asset($page->image) }}" 
                                         alt="Page {{ $page->page_number }}" class="stored-image">
                                @else
                                    <div class="image-placeholder">
                                        <i class="fas fa-image"></i>
                                    </div>
                                @endif
                            </div>
                            
                            <div class="page-content">
                                <h4 class="page-number">
                                    <i class="fas fa-file-alt mr-2"></i>Page {{ $page->page_number }}
                                </h4>
                                <p class="text-gray-700">{{ $page->content }}</p>
                            </div>
                            
                            <div class="mt-3 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">
                                        <i class="fas fa-trash mr-2"></i> Delete
                                    </button>
                                </form>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    @endif

    <!-- User's Created Books Section -->
   <div class="bg-white rounded-lg shadow-xl overflow-hidden p-6">
    <h2 class="text-3xl font-bold text-pink-700 mb-6 text-center logo-text">
        <i class="fas fa-heart mr-2"></i>Your Created Love Stories
    </h2>
    
    @php
        $userBooks = DB::select('SELECT * FROM love_story_books WHERE session_id = ? ORDER BY created_at DESC', [session()->getId()]);
    @endphp
    
    @if(count($userBooks) > 0)
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($userBooks as $userBook)
                <div class="book-card bg-white rounded-lg shadow-md overflow-hidden transform transition-all duration-300 hover:-translate-y-1 hover:shadow-lg">
                    <div class="h-48 overflow-hidden">
                        @if($userBook->cover_image)
                            <img src="{{ asset('storage/' . str_replace('public/', '', $userBook->cover_image)) }}" 
                                 alt="{{ $userBook->title }}" 
                                 class="w-full h-full object-cover transition-transform duration-500 hover:scale-105">
                        @else
                            <div class="bg-pink-100 h-full flex items-center justify-center">
                                <i class="fas fa-book-open text-5xl text-pink-500"></i>
                            </div>
                        @endif
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-pink-700 mb-2">{{ $userBook->title }}</h3>
                        <p class="text-gray-600 mb-4"><i class="fas fa-user-friends mr-1"></i> By {{ $userBook->partner1_name }} & {{ $userBook->partner2_name }}</p>
                        
                        <div class="flex space-x-2">
                            <a href="{{ route('love-story.show', $userBook->id) }}" class="btn-romantic px-3 py-1 rounded-lg text-sm">
                                <i class="fas fa-eye mr-1"></i> View
                            </a>
                            <a href="{{ route('love-story.edit', $userBook->id) }}" class="border border-pink-600 text-pink-600 px-3 py-1 rounded-lg text-sm hover:bg-pink-50 transition-colors duration-300">
                                <i class="fas fa-edit mr-1"></i> Edit
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @else
        <div class="empty-state">
            <i class="fas fa-book-open"></i>
            <h3 class="text-xl font-bold text-pink-700 mb-2">No love stories created yet</h3>
            <p class="text-gray-600">Create your first love story above</p>
        </div>
    @endif
</div>
<script>
    // Enhanced Image Preview Functionality
    document.getElementById('cover_image')?.addEventListener('change', function(e) {
        const file = e.target.files[0];
        const preview = document.getElementById('cover-preview');
        
        if (file) {
            if (file.size > 2 * 1024 * 1024) {
                alert('File size should be less than 2MB');
                this.value = '';
                return;
            }
            
            const reader = new FileReader();
            reader.onload = function(event) {
                preview.innerHTML = `
                    <img src="${event.target.result}" alt="Cover preview" class="image-preview">
                `;
            };
            reader.readAsDataURL(file);
        } else {
            preview.innerHTML = `
                <div class="image-placeholder">
                    <i class="fas fa-image"></i>
                </div>
            `;
        }
    });
    
    document.getElementById('page_image')?.addEventListener('change', function(e) {
        const file = e.target.files[0];
        const preview = document.getElementById('page-image-preview');
        
        if (file) {
            if (file.size > 2 * 1024 * 1024) {
                alert('File size should be less than 2MB');
                this.value = '';
                return;
            }
            
            const reader = new FileReader();
            reader.onload = function(event) {
                preview.innerHTML = `
                    <img src="${event.target.result}" alt="Page preview" class="image-preview">
                `;
            };
            reader.readAsDataURL(file);
        } else {
            preview.innerHTML = '';
        }
    });

    // Confetti effect on form submission
    document.querySelectorAll('form').forEach(form => {
        form.addEventListener('submit', function() {
            if (typeof confetti === 'function') {
                confetti({
                    particleCount: 150,
                    spread: 70,
                    origin: { y: 0.6 },
                    colors: ['#ff6b8b', '#ff8e9e', '#ff4757', '#ffffff'],
                    shapes: ['circle', 'heart']
                });
            }
        });
    });
    
    // Theme selection animation
    document.querySelectorAll('.theme-option').forEach(option => {
        option.addEventListener('click', function() {
            document.querySelectorAll('.theme-option').forEach(opt => {
                opt.classList.remove('theme-selected');
            });
            this.classList.add('theme-selected');
        });
    });
</script>
@endsection