@extends('layouts.web.index')

@php
use Illuminate\Support\Str;
@endphp

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

<div class="page-content bg-white">
    <!-- Hero Banner Section -->
    <section class="hero-banner" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 80px 0; margin-bottom: 60px;">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="hero-content text-white">
                        <h6 class="hero-subtitle mb-3" style="font-size: 16px; font-weight: 600; letter-spacing: 2px; opacity: 0.9;">BOKIFA BOOKSTORE</h6>
                        <h1 class="hero-title mb-4" style="font-size: 48px; font-weight: 700; line-height: 1.2;">All books at least 50% off list prices every day</h1>
                        <p class="hero-description mb-4" style="font-size: 18px; opacity: 0.95; line-height: 1.6;">Discover thousands of books across all genres. From bestsellers to hidden gems, find your next great read at unbeatable prices.</p>
                        <div class="hero-buttons">
                            <a href="{{ route('books.index') }}" class="btn btn-light btn-lg me-3" style="padding: 14px 32px; font-weight: 600; border-radius: 8px;">
                                Shop Now <i class="fas fa-arrow-right ms-2"></i>
                            </a>
                            <a href="{{ route('books.index') }}?sort=featured" class="btn btn-outline-light btn-lg" style="padding: 14px 32px; font-weight: 600; border-radius: 8px;">
                                Featured Books
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 text-center">
                    @if(isset($data['featuredBooks']) && $data['featuredBooks']->count() > 0)
                        <div class="hero-book-image">
                            <img src="{{ $data['featuredBooks'][0]->cover_image ?: asset('images/books/small/pic1.jpg') }}" 
                                 alt="{{ $data['featuredBooks'][0]->title }}" 
                                 style="max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.3);">
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="stats-section py-5" style="background: #f8f9fa;">
        <div class="container">
            <div class="row text-center">
                <div class="col-lg-3 col-md-6 mb-4 mb-lg-0">
                    <div class="stat-item">
                        <h2 class="stat-number mb-2" style="font-size: 42px; font-weight: 700; color: #667eea;">{{ \App\Models\Book::where('is_active', true)->count() }}</h2>
                        <p class="stat-label mb-0" style="font-size: 16px; color: #666;">Total Books</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 mb-4 mb-lg-0">
                    <div class="stat-item">
                        <h2 class="stat-number mb-2" style="font-size: 42px; font-weight: 700; color: #667eea;">{{ \App\Models\BookCategory::where('is_active', true)->count() }}</h2>
                        <p class="stat-label mb-0" style="font-size: 16px; color: #666;">Categories</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 mb-4 mb-lg-0">
                    <div class="stat-item">
                        <h2 class="stat-number mb-2" style="font-size: 42px; font-weight: 700; color: #667eea;">{{ \App\Models\Book::where('is_active', true)->whereNotNull('sale_price')->whereColumn('sale_price', '<', 'price')->count() }}</h2>
                        <p class="stat-label mb-0" style="font-size: 16px; color: #666;">Books on Sale</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="stat-item">
                        <h2 class="stat-number mb-2" style="font-size: 42px; font-weight: 700; color: #667eea;">97%</h2>
                        <p class="stat-label mb-0" style="font-size: 16px; color: #666;">Happy Customers</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Top Categories Section -->
    @if(isset($data['categories']) && $data['categories']->count() > 0)
    <section class="categories-section py-5">
        <div class="container">
            <div class="section-header text-center mb-5">
                <h2 class="section-title mb-3" style="font-size: 36px; font-weight: 700; color: #333;">Top Categories</h2>
                <p class="section-subtitle" style="font-size: 16px; color: #666;">Browse books by category</p>
            </div>
            <div class="row">
                @foreach($data['categories']->take(8) as $category)
                <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
                    <a href="{{ route('books.category', $category->slug) }}" class="category-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm" style="border-radius: 12px; transition: transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden;">
                            <div class="card-body text-center p-4">
                                <div class="category-icon mb-3" style="width: 80px; height: 80px; margin: 0 auto; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                                    <i class="fas fa-book" style="font-size: 32px; color: white;"></i>
                                </div>
                                <h5 class="category-name mb-2" style="font-size: 18px; font-weight: 600; color: #333;">{{ $category->name }}</h5>
                                <p class="category-count mb-0" style="font-size: 14px; color: #999;">
                                    {{ \App\Models\Book::where('category_id', $category->id)->where('is_active', true)->count() }} Books
                                </p>
                            </div>
                        </div>
                    </a>
                </div>
                @endforeach
            </div>
            <div class="text-center mt-4">
                <a href="{{ route('books.index') }}" class="btn btn-outline-primary btn-lg" style="padding: 12px 32px; border-radius: 8px; font-weight: 600;">
                    Browse All Categories
                </a>
            </div>
        </div>
    </section>
    @endif

    <!-- Featured Books Section -->
    @if(isset($data['featuredBooks']) && $data['featuredBooks']->count() > 0)
    <section class="featured-books-section py-5" style="background: #f8f9fa;">
        <div class="container">
            <div class="section-header d-flex justify-content-between align-items-center mb-5">
                <div>
                    <h2 class="section-title mb-2" style="font-size: 36px; font-weight: 700; color: #333;">This Week's Highlights</h2>
                    <p class="section-subtitle mb-0" style="font-size: 16px; color: #666;">Featured books you'll love</p>
                </div>
                <a href="{{ route('books.index') }}?sort=featured" class="btn btn-link text-decoration-none" style="font-weight: 600; color: #667eea;">
                    Browse All <i class="fas fa-arrow-right ms-2"></i>
                </a>
            </div>
            <div class="row">
                @foreach($data['featuredBooks']->take(6) as $book)
                <div class="col-lg-2 col-md-4 col-sm-6 mb-4">
                    <div class="book-card h-100">
                        <div class="book-image-wrapper position-relative mb-3" style="border-radius: 8px; overflow: hidden; background: #f0f0f0;">
                            <a href="{{ route('books.show', $book->slug) }}">
                                <img src="{{ $book->cover_image ?: asset('images/books/small/pic1.jpg') }}" 
                                     alt="{{ $book->title }}" 
                                     class="img-fluid w-100"
                                     style="height: 280px; object-fit: cover; transition: transform 0.3s ease;">
                            </a>
                            @if($book->is_on_sale)
                            <span class="badge bg-danger position-absolute top-0 end-0 m-2" style="font-size: 11px; padding: 6px 10px;">
                                {{ round((($book->price - $book->sale_price) / $book->price) * 100) }}% OFF
                            </span>
                            @endif
                            @if($book->is_featured)
                            <span class="badge bg-primary position-absolute top-0 start-0 m-2" style="font-size: 11px; padding: 6px 10px;">Featured</span>
                            @endif
                        </div>
                        <div class="book-info">
                            <h6 class="book-title mb-2" style="font-size: 14px; font-weight: 600; color: #333; line-height: 1.4; min-height: 40px;">
                                <a href="{{ route('books.show', $book->slug) }}" class="text-decoration-none text-dark">
                                    {{ Str::limit($book->title, 50) }}
                                </a>
                            </h6>
                            <p class="book-author mb-2" style="font-size: 12px; color: #999;">by {{ $book->author }}</p>
                            <div class="book-rating mb-2">
                                <div class="stars" style="color: #ffc107;">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="far fa-star"></i>
                                </div>
                                <small class="text-muted ms-1" style="font-size: 11px;">(4.0)</small>
                            </div>
                            <div class="book-price d-flex align-items-center justify-content-between">
                                <div>
                                    @if($book->is_on_sale)
                                        <span class="price-current fw-bold" style="font-size: 18px; color: #667eea;">₹{{ number_format($book->sale_price, 2) }}</span>
                                        <span class="price-original text-muted text-decoration-line-through ms-2" style="font-size: 14px;">₹{{ number_format($book->price, 2) }}</span>
                                    @else
                                        <span class="price-current fw-bold" style="font-size: 18px; color: #667eea;">₹{{ number_format($book->price, 2) }}</span>
                                    @endif
                                </div>
                                <button class="btn btn-sm btn-primary" onclick="addToCart({{ $book->id }})" style="border-radius: 6px; padding: 6px 12px;">
                                    <i class="fas fa-shopping-cart"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    <!-- Bestsellers Section -->
    @if(isset($data['bestsellers']) && $data['bestsellers']->count() > 0)
    <section class="bestsellers-section py-5">
        <div class="container">
            <div class="section-header d-flex justify-content-between align-items-center mb-5">
                <div>
                    <h2 class="section-title mb-2" style="font-size: 36px; font-weight: 700; color: #333;">Current Bestselling Books</h2>
                    <p class="section-subtitle mb-0" style="font-size: 16px; color: #666;">Most popular books this month</p>
                </div>
                <a href="{{ route('books.index') }}" class="btn btn-link text-decoration-none" style="font-weight: 600; color: #667eea;">
                    Browse All <i class="fas fa-arrow-right ms-2"></i>
                </a>
            </div>
            <div class="row">
                @foreach($data['bestsellers']->take(6) as $book)
                <div class="col-lg-2 col-md-4 col-sm-6 mb-4">
                    <div class="book-card h-100">
                        <div class="book-image-wrapper position-relative mb-3" style="border-radius: 8px; overflow: hidden; background: #f0f0f0;">
                            <a href="{{ route('books.show', $book->slug) }}">
                                <img src="{{ $book->cover_image ?: asset('images/books/small/pic1.jpg') }}" 
                                     alt="{{ $book->title }}" 
                                     class="img-fluid w-100"
                                     style="height: 280px; object-fit: cover; transition: transform 0.3s ease;">
                            </a>
                            @if($book->is_on_sale)
                            <span class="badge bg-danger position-absolute top-0 end-0 m-2" style="font-size: 11px; padding: 6px 10px;">
                                {{ round((($book->price - $book->sale_price) / $book->price) * 100) }}% OFF
                            </span>
                            @endif
                        </div>
                        <div class="book-info">
                            <h6 class="book-title mb-2" style="font-size: 14px; font-weight: 600; color: #333; line-height: 1.4; min-height: 40px;">
                                <a href="{{ route('books.show', $book->slug) }}" class="text-decoration-none text-dark">
                                    {{ Str::limit($book->title, 50) }}
                                </a>
                            </h6>
                            <p class="book-author mb-2" style="font-size: 12px; color: #999;">by {{ $book->author }}</p>
                            <div class="book-rating mb-2">
                                <div class="stars" style="color: #ffc107;">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="far fa-star"></i>
                                </div>
                                <small class="text-muted ms-1" style="font-size: 11px;">(4.0)</small>
                            </div>
                            <div class="book-price d-flex align-items-center justify-content-between">
                                <div>
                                    @if($book->is_on_sale)
                                        <span class="price-current fw-bold" style="font-size: 18px; color: #667eea;">₹{{ number_format($book->sale_price, 2) }}</span>
                                        <span class="price-original text-muted text-decoration-line-through ms-2" style="font-size: 14px;">₹{{ number_format($book->price, 2) }}</span>
                                    @else
                                        <span class="price-current fw-bold" style="font-size: 18px; color: #667eea;">₹{{ number_format($book->price, 2) }}</span>
                                    @endif
                                </div>
                                <button class="btn btn-sm btn-primary" onclick="addToCart({{ $book->id }})" style="border-radius: 6px; padding: 6px 12px;">
                                    <i class="fas fa-shopping-cart"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    <!-- Half Price Books Section -->
    @if(isset($data['saleBooks']) && $data['saleBooks']->count() > 0)
    <section class="sale-books-section py-5" style="background: #f8f9fa;">
        <div class="container">
            <div class="section-header d-flex justify-content-between align-items-center mb-5">
                <div>
                    <h2 class="section-title mb-2" style="font-size: 36px; font-weight: 700; color: #333;">Half Price Books</h2>
                    <p class="section-subtitle mb-0" style="font-size: 16px; color: #666;">Limited time offers - don't miss out!</p>
                </div>
                <a href="{{ route('books.index') }}?sort=price_low" class="btn btn-link text-decoration-none" style="font-weight: 600; color: #667eea;">
                    Browse All <i class="fas fa-arrow-right ms-2"></i>
                </a>
            </div>
            <div class="row">
                @foreach($data['saleBooks']->take(6) as $book)
                <div class="col-lg-2 col-md-4 col-sm-6 mb-4">
                    <div class="book-card h-100">
                        <div class="book-image-wrapper position-relative mb-3" style="border-radius: 8px; overflow: hidden; background: #f0f0f0;">
                            <a href="{{ route('books.show', $book->slug) }}">
                                <img src="{{ $book->cover_image ?: asset('images/books/small/pic1.jpg') }}" 
                                     alt="{{ $book->title }}" 
                                     class="img-fluid w-100"
                                     style="height: 280px; object-fit: cover; transition: transform 0.3s ease;">
                            </a>
                            <span class="badge bg-danger position-absolute top-0 end-0 m-2" style="font-size: 11px; padding: 6px 10px;">
                                {{ round((($book->price - $book->sale_price) / $book->price) * 100) }}% OFF
                            </span>
                        </div>
                        <div class="book-info">
                            <h6 class="book-title mb-2" style="font-size: 14px; font-weight: 600; color: #333; line-height: 1.4; min-height: 40px;">
                                <a href="{{ route('books.show', $book->slug) }}" class="text-decoration-none text-dark">
                                    {{ Str::limit($book->title, 50) }}
                                </a>
                            </h6>
                            <p class="book-author mb-2" style="font-size: 12px; color: #999;">by {{ $book->author }}</p>
                            <div class="book-rating mb-2">
                                <div class="stars" style="color: #ffc107;">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="far fa-star"></i>
                                </div>
                                <small class="text-muted ms-1" style="font-size: 11px;">(4.0)</small>
                            </div>
                            <div class="book-price d-flex align-items-center justify-content-between">
                                <div>
                                    <span class="price-current fw-bold" style="font-size: 18px; color: #667eea;">${{ number_format($book->sale_price, 2) }}</span>
                                    <span class="price-original text-muted text-decoration-line-through ms-2" style="font-size: 14px;">${{ number_format($book->price, 2) }}</span>
                                </div>
                                <button class="btn btn-sm btn-primary" onclick="addToCart({{ $book->id }})" style="border-radius: 6px; padding: 6px 12px;">
                                    <i class="fas fa-shopping-cart"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    <!-- Features Section -->
    <section class="features-section py-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="feature-item text-center">
                        <div class="feature-icon mb-3" style="width: 80px; height: 80px; margin: 0 auto; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-shipping-fast" style="font-size: 32px; color: white;"></i>
                        </div>
                        <h5 class="feature-title mb-2" style="font-size: 18px; font-weight: 600; color: #333;">Fast Delivery</h5>
                        <p class="feature-text mb-0" style="font-size: 14px; color: #666;">Free standard delivery on all orders</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="feature-item text-center">
                        <div class="feature-icon mb-3" style="width: 80px; height: 80px; margin: 0 auto; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-tags" style="font-size: 32px; color: white;"></i>
                        </div>
                        <h5 class="feature-title mb-2" style="font-size: 18px; font-weight: 600; color: #333;">Best Prices & Offers</h5>
                        <p class="feature-text mb-0" style="font-size: 14px; color: #666;">Multiple gift options available</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="feature-item text-center">
                        <div class="feature-icon mb-3" style="width: 80px; height: 80px; margin: 0 auto; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-gift" style="font-size: 32px; color: white;"></i>
                        </div>
                        <h5 class="feature-title mb-2" style="font-size: 18px; font-weight: 600; color: #333;">Great Daily Deal</h5>
                        <p class="feature-text mb-0" style="font-size: 14px; color: #666;">Orders $50 or more</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="feature-item text-center">
                        <div class="feature-icon mb-3" style="width: 80px; height: 80px; margin: 0 auto; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-store" style="font-size: 32px; color: white;"></i>
                        </div>
                        <h5 class="feature-title mb-2" style="font-size: 18px; font-weight: 600; color: #333;">Click & Collect</h5>
                        <p class="feature-text mb-0" style="font-size: 14px; color: #666;">Check your local stores now</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

@include('layouts.web.footer')

<style>
    .category-card:hover .card {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    }

    .book-card:hover .book-image-wrapper img {
        transform: scale(1.05);
    }

    .book-card {
        transition: transform 0.3s ease;
    }

    .book-card:hover {
        transform: translateY(-5px);
    }

    @media (max-width: 768px) {
        .hero-title {
            font-size: 32px !important;
        }

        .section-title {
            font-size: 28px !important;
        }
    }
</style>

<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) {
                    const cartCountElement = document.getElementById('cart-count');
                    if (cartCountElement) {
                        cartCountElement.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