@extends('layouts.web.index')

@section('content')
@include('layouts.web.header')

<div class="page-content bg-white">
    <!-- inner page banner -->
    <div class="dz-bnr-inr overlay-secondary-dark dz-bnr-inr-sm" style="background-image:url({{ asset('images/background/bg3.jpg') }});">
        <div class="container">
            <div class="dz-bnr-inr-entry">
                <h1>{{ $book->title }}</h1>
                <nav aria-label="breadcrumb" class="breadcrumb-row">
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('books.index') }}">Books</a></li>
                        <li class="breadcrumb-item">{{ $book->title }}</li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    <!-- inner page banner End-->

    <!-- Book Detail content -->
    <section class="content-inner-1 shop-account">
        <div class="container">
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show mt-4" role="alert">
                    <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            @if(session('error'))
                <div class="alert alert-danger alert-dismissible fade show mt-4" role="alert">
                    <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

<style>
/* Modern Book Detail Page Styles */
.book-hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 60px 0;
    color: white;
}

.book-hero h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.book-hero p {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 0;
}

.book-detail-container {
    margin-top: -30px;
    position: relative;
    z-index: 10;
}

.book-main {
    background: white;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin-bottom: 30px;
}

.book-showcase {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    margin-bottom: 40px;
}

.book-cover-large {
    position: relative;
}

.book-cover-large img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
}

.book-cover-large:hover img {
    transform: scale(1.02);
}

.book-badge-large {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #e74c3c;
    color: white;
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}

.book-info {
    padding: 20px 0;
}

.book-title-large {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 15px;
    line-height: 1.2;
}

.book-author-large {
    font-size: 1.3rem;
    color: #6c757d;
    margin-bottom: 25px;
    font-weight: 500;
}

.book-price-large {
    margin-bottom: 30px;
}

.price-current-large {
    font-size: 2.5rem;
    font-weight: 700;
    color: #667eea;
}

.price-original-large {
    font-size: 1.5rem;
    color: #6c757d;
    text-decoration: line-through;
    margin-left: 15px;
}

.book-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
    padding: 25px;
    background: #f8f9fa;
    border-radius: 12px;
}

.meta-item {
    display: flex;
    flex-direction: column;
}

.meta-label {
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 500;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.meta-value {
    font-size: 1.1rem;
    color: #2c3e50;
    font-weight: 600;
}

.book-actions-large {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}

.add-to-cart-large {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 18px 40px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    cursor: pointer;
    flex: 1;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.add-to-cart-large:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.wishlist-btn-large {
    background: white;
    color: #667eea;
    border: 2px solid #667eea;
    padding: 18px 30px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    cursor: pointer;
    flex: 1;
}

.wishlist-btn-large:hover {
    background: #667eea;
    color: white;
    transform: translateY(-3px);
}

.book-description-section {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 12px;
    margin-bottom: 30px;
}

.description-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 20px;
}

.description-content {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #495057;
}

.sidebar {
    position: sticky;
    top: 20px;
}

.info-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin-bottom: 30px;
}

.card-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f8f9fa;
}

.info-list {
    list-style: none;
    padding: 0;
}

.info-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f8f9fa;
}

.info-list li:last-child {
    border-bottom: none;
}

.info-label {
    color: #6c757d;
    font-weight: 500;
}

.info-value {
    color: #2c3e50;
    font-weight: 600;
}

.info-value.success {
    color: #28a745;
}

.related-books {
    display: grid;
    gap: 20px;
}

.related-book {
    display: flex;
    gap: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.related-book:hover {
    background: #e9ecef;
    transform: translateY(-2px);
}

.related-book-image {
    width: 80px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.related-book-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-book-info h6 {
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
}

.related-book-info h6 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.related-book-info h6 a:hover {
    color: #667eea;
}

.related-book-author {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.related-book-price {
    font-weight: 700;
    color: #667eea;
}

@media (max-width: 768px) {
    .book-hero h1 {
        font-size: 2.2rem;
    }
    
    .book-showcase {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .book-title-large {
        font-size: 2rem;
    }
    
    .book-meta {
        grid-template-columns: 1fr;
    }
    
    .book-actions-large {
        flex-direction: column;
    }
    
    .related-book {
        flex-direction: column;
        text-align: center;
    }
    
    .related-book-image {
        width: 120px;
        height: 150px;
        margin: 0 auto;
    }
}
</style>

<div class="book-hero">
    <div class="container">
        <h1>{{ $book->title }}</h1>
        <p>by {{ $book->author }}</p>
    </div>
</div>

<div class="container book-detail-container">
    <div class="row">
        <div class="col-lg-8">
            <div class="book-main">
                <div class="book-showcase">
                    <div class="book-cover-large">
                        <img src="{{ $book->cover_image ?: asset('images/books/small/pic1.jpg') }}" alt="{{ $book->title }}">
                        @if($book->is_on_sale)
                        <div class="book-badge-large">Sale</div>
                        @endif
                    </div>
                    <div class="book-info">
                        <h1 class="book-title-large">{{ $book->title }}</h1>
                        <p class="book-author-large">by {{ $book->author }}</p>
                        
                        <div class="book-price-large">
                            @if($book->is_on_sale)
                            <span class="price-current-large">₹{{ number_format($book->sale_price, 2) }}</span>
                            <span class="price-original-large">₹{{ number_format($book->price, 2) }}</span>
                            @else
                            <span class="price-current-large">₹{{ number_format($book->price, 2) }}</span>
                            @endif
                        </div>

                        <div class="book-meta">
                            <div class="meta-item">
                                <span class="meta-label">Category</span>
                                <span class="meta-value">{{ $book->category->name }}</span>
                            </div>
                            <div class="meta-item">
                                <span class="meta-label">Language</span>
                                <span class="meta-value">{{ $book->language }}</span>
                            </div>
                            <div class="meta-item">
                                <span class="meta-label">Pages</span>
                                <span class="meta-value">{{ $book->pages ?? 'N/A' }}</span>
                            </div>
                            <div class="meta-item">
                                <span class="meta-label">Publisher</span>
                                <span class="meta-value">{{ $book->publisher ?? 'N/A' }}</span>
                            </div>
                            <div class="meta-item">
                                <span class="meta-label">ISBN</span>
                                <span class="meta-value">{{ $book->isbn ?? 'N/A' }}</span>
                            </div>
                            <div class="meta-item">
                                <span class="meta-label">Published</span>
                                <span class="meta-value">{{ $book->publication_date ? $book->publication_date->format('M Y') : 'N/A' }}</span>
                            </div>
                        </div>

                        <div class="book-actions-large">
                            <button class="add-to-cart-large" onclick="addToCart({{ $book->id }})">
                                <i class="fas fa-shopping-cart"></i> Add to Cart
                            </button>
                            <button class="wishlist-btn-large" onclick="alert('Wishlist feature coming soon!')">
                                <i class="fas fa-heart"></i> Wishlist
                            </button>
                        </div>
                    </div>
                </div>

                <div class="book-description-section">
                    <h3 class="description-title">Description</h3>
                    <div class="description-content">
                        {!! nl2br(e($book->description)) !!}
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="sidebar">
                @if(isset($hasPurchased) && $hasPurchased)
                <div class="info-card mb-4">
                    <h4 class="card-title text-success">
                        <i class="fas fa-check-circle me-2"></i>You Own This Book
                    </h4>
                    <p class="text-muted mb-3">You have purchased this book. You can now access the PDF.</p>
                    @if($book->pdf_file)
                    <a href="{{ route('books.download', $book->slug) }}" class="btn btn-success w-100" target="_blank">
                        <i class="fas fa-file-pdf me-2"></i>View/Download PDF
                    </a>
                    @else
                    <div class="alert alert-warning mb-0">
                        <small>PDF file not available for this book.</small>
                    </div>
                    @endif
                </div>
                @else
                <div class="info-card mb-4" style="border: 2px solid #667eea;">
                    <h4 class="card-title text-primary">
                        <i class="fas fa-lock me-2"></i>Purchase Required
                    </h4>
                    <p class="text-muted mb-3">You need to purchase this book to access the PDF content.</p>
                    <button class="btn btn-primary w-100" onclick="addToCart({{ $book->id }})">
                        <i class="fas fa-shopping-cart me-2"></i>Add to Cart to Purchase
                    </button>
                </div>
                @endif

                <div class="info-card">
                    <h4 class="card-title">Book Information</h4>
                    <ul class="info-list">
                        <li>
                            <span class="info-label">Format</span>
                            <span class="info-value">PDF Digital</span>
                        </li>
                        <li>
                            <span class="info-label">Delivery</span>
                            <span class="info-value success">Instant via Email</span>
                        </li>
                        <li>
                            <span class="info-label">File Size</span>
                            <span class="info-value">Optimized</span>
                        </li>
                        <li>
                            <span class="info-label">Compatibility</span>
                            <span class="info-value">All PDF Readers</span>
                        </li>
                        <li>
                            <span class="info-label">License</span>
                            <span class="info-value">Personal Use</span>
                        </li>
                    </ul>
                </div>

                @if($relatedBooks->count() > 0)
                <div class="info-card">
                    <h4 class="card-title">Related Books</h4>
                    <div class="related-books">
                        @foreach($relatedBooks as $relatedBook)
                        <div class="related-book">
                            <div class="related-book-image">
                                <img src="{{ $relatedBook->cover_image ?: asset('images/books/small/pic1.jpg') }}" alt="{{ $relatedBook->title }}">
                            </div>
                            <div class="related-book-info">
                                <h6><a href="{{ route('books.show', $relatedBook->slug) }}">{{ $relatedBook->title }}</a></h6>
                                <p class="related-book-author">by {{ $relatedBook->author }}</p>
                                <div class="related-book-price">
                                    @if($relatedBook->is_on_sale)
                                    ₹{{ number_format($relatedBook->sale_price, 2) }}
                                    @else
                                    ₹{{ number_format($relatedBook->price, 2) }}
                                    @endif
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

@include('layouts.web.footer')

<script>
function addToCart(bookId) {
    fetch('{{ route("cart.add") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            book_id: bookId,
            quantity: 1
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            document.getElementById('cart-count').textContent = data.cart_count;
            showNotification('Book added to cart successfully!', 'success');
        } else {
            showNotification('Error adding book to cart', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showNotification('Error adding book to cart', 'error');
    });
}

function showNotification(message, type) {
    const notification = document.createElement('div');
    notification.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        background: ${type === 'success' ? '#28a745' : '#dc3545'};
        color: white;
        padding: 15px 25px;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        z-index: 9999;
        font-weight: 500;
        transform: translateX(100%);
        transition: transform 0.3s ease;
    `;
    notification.textContent = message;
    
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.style.transform = 'translateX(0)';
    }, 100);
    
    setTimeout(() => {
        notification.style.transform = 'translateX(100%)';
        setTimeout(() => {
            document.body.removeChild(notification);
        }, 300);
    }, 3000);
}
</script>
@endsection