@extends('layouts.app')

@section('content')
    {{-- Hero Section --}}
    <section class="hero-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 mb-4 mb-lg-0">
                    <h1 class="display-4 fw-bold mb-4">
                        {{ __('home_title') }}
                    </h1>
                    <p class="lead mb-4">
                        {{ __('home_description') }}
                    </p>
                    <div class="d-flex gap-3">
                        <a href="{{ route('products.index') }}" class="btn btn-light btn-lg">
                            <i class="fas fa-shopping-bag me-2"></i>
                            {{ __('shop_now') }}
                        </a>
                        <a href="{{ route('categories.index') }}" class="btn btn-outline-light btn-lg">
                            <i class="fas fa-th-large me-2"></i>
                            {{ __('Browse Categories') }}
                        </a>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="hero-image">
                        <img
                            src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80"
                            alt="Hero Image"
                            class="img-fluid rounded-3 shadow-lg">
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Features Section --}}
    <section class="py-5">
        <div class="container">
            <div class="row text-center">
                <div class="col-md-3 mb-4">
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-shipping-fast"></i>
                        </div>
                        <h5 class="mt-3">{{ __('Free Shipping') }}</h5>
                        <p class="text-muted">{{ __('On orders over $100') }}</p>
                    </div>
                </div>
                <div class="col-md-3 mb-4">
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-undo-alt"></i>
                        </div>
                        <h5 class="mt-3">{{ __('Easy Returns') }}</h5>
                        <p class="text-muted">{{ __('30 days return policy') }}</p>
                    </div>
                </div>
                <div class="col-md-3 mb-4">
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-lock"></i>
                        </div>
                        <h5 class="mt-3">{{ __('Secure Payment') }}</h5>
                        <p class="text-muted">{{ __('100% secure checkout') }}</p>
                    </div>
                </div>
                <div class="col-md-3 mb-4">
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-headset"></i>
                        </div>
                        <h5 class="mt-3">{{ __('24/7 Support') }}</h5>
                        <p class="text-muted">{{ __('Always here to help') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Categories Section --}}
    <section class="py-5 bg-white">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center mb-5">
                    <h2 class="display-6 fw-bold">{{ __('Shop by Category') }}</h2>
                    <p class="text-muted">{{ __('Find what you need in our categories') }}</p>
                </div>
            </div>
            <div class="row">
                @forelse($categories as $category)
                    <div class="col-lg-4 col-md-6 mb-4">
                        <div class="category-card h-100">
                            <div class="category-image-container">
                                <img
                                    src="{{ $category->image ? asset('storage/' . $category->image) : 'https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80' }}"
                                    alt="{{ $category->name }}"
                                    class="category-image">
                            </div>
                            <div class="card-body text-center">
                                <h5 class="card-title">{{ $category->name }}</h5>
                                <p class="card-text text-muted">{{ Str::limit($category->description, 100) }}</p>
                                <a href="{{ route('categories.show', $category->slug) }}"
                                   class="btn btn-primary-custom">
                                    {{ __('View Products') }}
                                    <i class="fas fa-arrow-{{ $isRtl ? 'left' : 'right' }} ms-2"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12 text-center">
                        <div class="empty-state">
                            <i class="fas fa-th-large fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">{{ __('No categories available') }}</h5>
                            <p class="text-muted">{{ __('Categories will be displayed here once added') }}</p>
                        </div>
                    </div>
                @endforelse
            </div>
        </div>
    </section>

    {{-- Featured Products Section --}}
    <section class="py-5">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center mb-5">
                    <h2 class="display-6 fw-bold">{{ __('Featured Products') }}</h2>
                    <p class="text-muted">{{ __('Check out our top picks') }}</p>
                </div>
            </div>
            <div class="row">
                @forelse($featuredProducts as $product)
                    <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
                        <div class="product-card h-100">
                            <div class="product-image-container position-relative">
                                <img
                                    src="{{ $product->images->first() ? asset('storage/' . $product->images->first()->image_path) : 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80' }}"
                                    alt="{{ $product->name }}"
                                    class="product-image">

                                {{-- Product Badge --}}
                                @if($product->is_featured)
                                    <span class="badge bg-warning position-absolute top-0 start-0 m-2">
                                        {{ __('Featured') }}
                                    </span>
                                @endif

                                {{-- Quick View Button --}}
                                <div class="product-overlay">
                                    <a href="{{ route('products.show', $product->slug) }}"
                                       class="btn btn-sm btn-outline-light">
                                        <i class="fas fa-eye me-1"></i>
                                        {{ __('Quick View') }}
                                    </a>
                                </div>
                            </div>
                            <div class="product-info">
                                <h6 class="product-title">
                                    <a href="{{ route('products.show', $product->slug) }}" class="text-decoration-none">
                                        {{ $product->name }}
                                    </a>
                                </h6>


                                <div class="product-price">

                                    @php
                                        $basePrice = $product->sale_price ?: $product->price;
                                        $vatAmount = $basePrice * ($product->tax_rate/100);
                                        $customerPrice = $basePrice + $vatAmount;
                                    @endphp

                                    @if( $product->sale_price > $product->regular_price)
                                        <span class="text-muted text-decoration-line-through me-2">
                                            &#65020;{{ number_format($product->price, 2) }}
                                        </span>
                                    <br>
                                        <span class="text-danger fw-bold">
                                          &#65020;{{ number_format($customerPrice, 2) }}
                                        </span>
                                    @else
                                        <span class="fw-bold">
                                           &#65020;{{ number_format($product->price+$vatAmount, 2) }}
                                        </span>
                                    @endif
                                </div>


{{--                                <div class="product-rating mb-2">--}}
{{--                                    @for($i = 1; $i <= 5; $i++)--}}
{{--                                        <i class="fas fa-star {{ $i <= 4 ? 'text-warning' : 'text-muted' }}"></i>--}}
{{--                                    @endfor--}}
{{--                                    <span class="text-muted ms-1">(4.0)</span>--}}
{{--                                </div>--}}
                                <!-- 1. Fix the button onclick in your index blade HTML: -->
                                <button class="btn btn-primary-custom w-100"
                                        onclick="addToCart('{{ $product->translate(app()->getLocale())->slug }}')"
                                    {{ $product->quantity <= 0 ? 'disabled' : '' }}>
                                    <i class="fas fa-shopping-cart me-2"></i>
                                    {{ __('Add to Cart') }}
                                </button>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12 text-center">
                        <div class="empty-state">
                            <i class="fas fa-box fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">{{ __('No featured products available') }}</h5>
                            <p class="text-muted">{{ __('Featured products will be displayed here') }}</p>
                        </div>
                    </div>
                @endforelse
            </div>

            @if($featuredProducts->isNotEmpty())
                <div class="text-center mt-4">
                    <a href="{{ route('products.index') }}" class="btn btn-outline-primary btn-lg">
                        {{ __('View all Products') }}
                        <i class="fas fa-arrow-{{ $isRtl ? 'left' : 'right' }} ms-2"></i>
                    </a>
                </div>
            @endif
        </div>
    </section>

    {{-- Newsletter Section --}}
    <section class="py-5 bg-primary text-white">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 mb-4 mb-lg-0">
                    <h3 class="fw-bold mb-2">{{ __('Stay Updated') }}</h3>
                    <p class="mb-0">{{ __('Subscribe to our newsletter and get 10% off your first order') }}</p>
                </div>
                <div class="col-lg-6">
                    <form class="newsletter-form">
                        <div class="input-group">
                            <input type="email" class="form-control form-control-lg"
                                   placeholder="{{ __('Enter your email') }}" required>
                            <button class="btn btn-light btn-lg" type="submit">
                                {{ __('Subscribe') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('styles')
    <style>
        .hero-section {
            background: linear-gradient(135deg, var(--primary-color) 0%, #1e40af 100%);
            color: white;
            padding: 4rem 0;
            margin-bottom: 0;
        }

        .hero-image img {
            border-radius: 1rem;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }

        .feature-item {
            padding: 2rem 1rem;
            border-radius: 1rem;
            transition: all 0.3s ease;
        }

        .feature-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .feature-icon {
            width: 80px;
            height: 80px;
            background: var(--primary-color);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            margin: 0 auto;
        }

        .category-card {
            border: none;
            border-radius: 1rem;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .category-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }

        .category-image-container {
            position: relative;
            overflow: hidden;
        }

        .category-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .category-card:hover .category-image {
            transform: scale(1.05);
        }

        .product-card {
            border: none;
            border-radius: 1rem;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }

        .product-image-container {
            position: relative;
            overflow: hidden;
        }

        .product-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .product-card:hover .product-image {
            transform: scale(1.05);
        }

        .product-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .product-card:hover .product-overlay {
            opacity: 1;
        }

        .product-info {
            padding: 1.5rem;
        }

        .product-title a {
            color: var(--dark-color);
            font-weight: 600;
            transition: color 0.3s ease;
        }

        .product-title a:hover {
            color: var(--primary-color);
        }

        .product-rating .fas {
            font-size: 0.875rem;
        }

        .newsletter-form .form-control {
            border: none;
            border-radius: 0.5rem 0 0 0.5rem;
        }

        .newsletter-form .btn {
            border-radius: 0 0.5rem 0.5rem 0;
        }

        .empty-state {
            padding: 3rem;
            color: #6b7280;
        }

        @media (max-width: 768px) {
            .hero-section {
                padding: 2rem 0;
            }

            .display-4 {
                font-size: 2rem;
            }

            .feature-item {
                padding: 1rem;
            }

            .feature-icon {
                width: 60px;
                height: 60px;
                font-size: 1.5rem;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        // 2. Fix the JavaScript function:
        function addToCart(productSlug) {
            fetch('/{{ app()->getLocale() }}/cart/add/' + productSlug, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({
                    quantity: 1
                })
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Update cart badge
                        const cartBadge = document.querySelector('.cart-badge');
                        if (cartBadge) {
                            cartBadge.textContent = parseInt(cartBadge.textContent) + 1;
                        }

                        // Show success message
                        showNotification('{{ __("Product added to cart!") }}', 'success');
                    } else {
                        showNotification('{{ __("Error adding product to cart") }}', 'error');
                    }
                })
                .catch(error => {
                    console.error('Error adding to cart:', error);
                    showNotification('{{ __("An error occurred. Please try again.") }}', 'error');
                });
        }

        function showNotification(message, type) {
            // Create notification element
            const notification = document.createElement('div');
            notification.className = `alert alert-${type === 'success' ? 'success' : 'danger'} position-fixed`;
            notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
            notification.innerHTML = `
            <div class="d-flex align-items-center">
                <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'} me-2"></i>
                ${message}
                <button type="button" class="btn-close ms-auto" onclick="this.parentElement.parentElement.remove()"></button>
            </div>
        `;

            document.body.appendChild(notification);

            // Auto remove after 3 seconds
            setTimeout(() => {
                if (notification.parentElement) {
                    notification.remove();
                }
            }, 3000);
        }

        // Newsletter form submission
        document.querySelector('.newsletter-form').addEventListener('submit', function (e) {
            e.preventDefault();
            const email = this.querySelector('input[type="email"]').value;

            // Here you would typically send the email to your backend
            showNotification('Thank you for subscribing!', 'success');
            this.reset();
        });
    </script>
@endpush