{{-- views/themes/default/product.blade.php --}}

@extends('themes.default.layout')

@section('title', $product->seo_title . ' - ' . $website->name)

@section('meta')
<meta name="description" content="{{ $product->seo_description }}">
@if($product->meta_keywords)
<meta name="keywords" content="{{ $product->meta_keywords }}">
@endif
@endsection

@section('content')
<!-- Breadcrumb -->
<section class="section" style="padding-top: 120px;">
    <div class="container">
        <nav aria-label="breadcrumb" class="mb-4">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="/" class="text-decoration-none">
                        <i class="bi bi-house me-1"></i>Home
                    </a>
                </li>
                <li class="breadcrumb-item">
                    <a href="/products" class="text-decoration-none">
                        Products
                    </a>
                </li>
                @if($product->categories->count() > 0)
                    @foreach($product->categories->take(1) as $category)
                        <li class="breadcrumb-item">
                            <a href="/products?category={{ $category->id }}" class="text-decoration-none">
                                {{ $category->name }}
                            </a>
                        </li>
                    @endforeach
                @endif
                <li class="breadcrumb-item active" aria-current="page">{{ $product->name }}</li>
            </ol>
        </nav>
    </div>
</section>

<!-- Product Details -->
<section class="section">
    <div class="container">
        <div class="row">
            <!-- Product Images -->
            <div class="col-lg-6 mb-4">
                <div class="product-gallery">
                    <div class="main-image mb-3">
                        <div class="bg-light rounded-3 d-flex align-items-center justify-content-center" style="height: 400px;">
                            @if($product->main_image)
                                <img src="{{ $product->main_image }}" class="img-fluid rounded-3" alt="{{ $product->name }}" id="mainImage" style="max-height: 100%; max-width: 100%; object-fit: contain;">
                            @else
                                <i class="bi bi-image display-1 text-muted"></i>
                            @endif
                        </div>
                    </div>

                    <!-- Thumbnail Images -->
                    @if($product->images && count($product->images) > 1)
                    <div class="thumbnail-images d-flex gap-2 flex-wrap">
                        @foreach($product->images as $index => $image)
                            <div class="thumbnail {{ $index === 0 ? 'active' : '' }}" onclick="changeImage('{{ $image }}')">
                                <img src="{{ $image }}" class="img-fluid rounded" alt="Thumbnail {{ $index + 1 }}" style="width: 80px; height: 80px; object-fit: cover; cursor: pointer;">
                            </div>
                        @endforeach
                    </div>
                    @endif
                </div>
            </div>

            <!-- Product Info -->
            <div class="col-lg-6">
                <div class="product-info">
                    <div class="mb-3">
                        <h1 class="mb-2">{{ $product->name }}</h1>
                        @if($product->sku)
                            <p class="text-muted mb-0">SKU: {{ $product->sku }}</p>
                        @endif
                    </div>

                    <!-- Categories -->
                    @if($product->categories->count() > 0)
                    <div class="mb-3">
                        @foreach($product->categories as $category)
                            <a href="/products?category={{ $category->id }}" class="badge bg-secondary text-decoration-none me-1">
                                {{ $category->name }}
                            </a>
                        @endforeach
                    </div>
                    @endif

                    <!-- Price -->
                    <div class="mb-4">
                        @if($product->sale_price)
                            <div class="d-flex align-items-center">
                                <span class="text-danger fw-bold fs-2 me-3">{{ $website->getCurrencySymbol() }} {{ number_format($product->sale_price, 2) }}</span>
                                <span class="text-muted text-decoration-line-through fs-5">{{ $website->getCurrencySymbol() }} {{ number_format($product->price, 2) }}</span>
                                <span class="badge bg-danger ms-3">Save {{ number_format((($product->price - $product->sale_price) / $product->price) * 100, 0) }}%</span>
                            </div>
                        @else
                            @if($product->has_variations)
                                <span class="fw-bold fs-2">{{ $website->getCurrencySymbol() }} {{ number_format($product->min_price, 2) }} - {{ $website->getCurrencySymbol() }} {{ number_format($product->max_price, 2) }}</span>
                            @else
                                <span class="fw-bold fs-2">{{ $website->getCurrencySymbol() }} {{ number_format($product->price, 2) }}</span>
                            @endif
                        @endif
                    </div>

                    <!-- Stock Status -->
                    <div class="mb-4">
                        @if($product->in_stock)
                            <span class="badge bg-success fs-6">
                                <i class="bi bi-check-circle me-1"></i>
                                In Stock ({{ $product->total_stock }} units available)
                            </span>
                        @else
                            <span class="badge bg-danger fs-6">
                                <i class="bi bi-x-circle me-1"></i>
                                Out of Stock
                            </span>
                        @endif
                    </div>

                    <!-- Product Variations -->
                    @if($product->has_variations && $product->variations->count() > 0)
                    <div class="mb-4">
                        <h5>Available Options</h5>
                        <div class="variations-list">
                            @foreach($product->variations as $variation)
                            <div class="variation-option mb-3 p-3 border rounded {{ $variation->stock_quantity > 0 ? '' : 'bg-light' }}">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <h6 class="mb-1">{{ $variation->variation_display }}</h6>
                                        @if($variation->stock_quantity > 0)
                                            <small class="text-success">{{ $variation->stock_quantity }} in stock</small>
                                        @else
                                            <small class="text-danger">Out of stock</small>
                                        @endif
                                    </div>
                                    <div class="text-end">
                                        <div class="fw-bold">{{ $website->getCurrencySymbol() }} {{ number_format($variation->final_price, 2) }}</div>
                                        @if($variation->price_adjustment != 0)
                                            <small class="text-muted">
                                                ({{ $variation->price_adjustment >= 0 ? '+' : '' }}{{ $website->getCurrencySymbol() }} {{ number_format($variation->price_adjustment, 2) }})
                                            </small>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endif

                    <!-- Description -->
                    @if($product->description)
                    <div class="mb-4">
                        <h5>Description</h5>
                        <p class="text-muted">{{ $product->description }}</p>
                    </div>
                    @endif

                    <!-- Physical Attributes -->
                    @if($product->weight || $product->dimensions)
                    <div class="mb-4">
                        <h5>Product Details</h5>
                        <ul class="list-unstyled">
                            @if($product->weight)
                                <li><i class="bi bi-box me-2 text-primary"></i><strong>Weight:</strong> {{ $product->weight }} kg</li>
                            @endif
                            @if($product->dimensions)
                                <li><i class="bi bi-rulers me-2 text-primary"></i><strong>Dimensions:</strong> 
                                    {{ $product->dimensions['length'] ?? '' }}cm × 
                                    {{ $product->dimensions['width'] ?? '' }}cm × 
                                    {{ $product->dimensions['height'] ?? '' }}cm
                                </li>
                            @endif
                        </ul>
                    </div>
                    @endif

                    <!-- Quantity and Add to Cart -->
                    @if($product->in_stock)
                    <div class="mb-4">
                        <form id="add-to-cart-form">
                            @csrf
                            <input type="hidden" name="product_id" value="{{ $product->id }}">
                            
                            <!-- Variation Selection -->
                            @if($product->has_variations && $product->variations->count() > 0)
                            <div class="mb-3">
                                <label for="product_variation_id" class="form-label">Choose Option</label>
                                <select class="form-select" id="product_variation_id" name="product_variation_id" required>
                                    <option value="">Select an option</option>
                                    @foreach($product->variations->where('stock_quantity', '>', 0) as $variation)
                                        <option value="{{ $variation->id }}"
                                                data-price="{{ $variation->final_price }}"
                                                data-stock="{{ $variation->stock_quantity }}">
                                            {{ $variation->variation_display }} - {{ $website->getCurrencySymbol() }} {{ number_format($variation->final_price, 2) }}
                                            ({{ $variation->stock_quantity }} available)
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            @endif

                            <div class="row align-items-center">
                                <div class="col-md-4">
                                    <label for="quantity" class="form-label">Quantity</label>
                                    <select class="form-select" id="quantity" name="quantity">
                                        @for($i = 1; $i <= min(10, $product->total_stock); $i++)
                                            <option value="{{ $i }}">{{ $i }}</option>
                                        @endfor
                                    </select>
                                </div>
                                <div class="col-md-8">
                                    <div class="d-grid gap-2">
                                        <button type="submit" class="btn btn-primary btn-lg" id="add-to-cart-btn">
                                            <i class="bi bi-cart-plus me-2"></i>Add to Cart
                                        </button>
                                        <button type="button" class="btn btn-outline-primary" onclick="buyNow()">
                                            <i class="bi bi-lightning me-2"></i>Buy Now
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    @else
                    <div class="mb-4">
                        <div class="alert alert-warning">
                            <i class="bi bi-exclamation-triangle me-2"></i>
                            This product is currently out of stock.
                        </div>
                    </div>
                    @endif

                    <!-- Product Meta -->
                    <div class="border-top pt-4">
                        <div class="row text-center">
                            <div class="col-4">
                                <i class="bi bi-truck display-6 text-primary"></i>
                                <p class="mb-0"><small>Free Shipping</small></p>
                            </div>
                            <div class="col-4">
                                <i class="bi bi-shield-check display-6 text-primary"></i>
                                <p class="mb-0"><small>Secure Payment</small></p>
                            </div>
                            <div class="col-4">
                                <i class="bi bi-arrow-clockwise display-6 text-primary"></i>
                                <p class="mb-0"><small>Easy Returns</small></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Product Details Tabs -->
<section class="section bg-light-custom">
    <div class="container">
        <ul class="nav nav-tabs" id="productTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="description-tab" data-bs-toggle="tab" data-bs-target="#description" type="button" role="tab">
                    Description
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="specifications-tab" data-bs-toggle="tab" data-bs-target="#specifications" type="button" role="tab">
                    Specifications
                </button>
            </li>
            @if($product->has_variations)
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="variations-tab" data-bs-toggle="tab" data-bs-target="#variations" type="button" role="tab">
                    Variations
                </button>
            </li>
            @endif
        </ul>

        <div class="tab-content" id="productTabsContent">
            <div class="tab-pane fade show active" id="description" role="tabpanel">
                <div class="p-4">
                    <h4>Product Description</h4>
                    <p>{{ $product->description ?: 'No detailed description available for this product.' }}</p>
                </div>
            </div>
            <div class="tab-pane fade" id="specifications" role="tabpanel">
                <div class="p-4">
                    <h4>Product Specifications</h4>
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table">
                                <tbody>
                                    <tr><td><strong>Brand:</strong></td><td>{{ $website->name }}</td></tr>
                                    <tr><td><strong>Product Name:</strong></td><td>{{ $product->name }}</td></tr>
                                    @if($product->sku)
                                        <tr><td><strong>SKU:</strong></td><td>{{ $product->sku }}</td></tr>
                                    @endif
                                    @if($product->weight)
                                        <tr><td><strong>Weight:</strong></td><td>{{ $product->weight }} kg</td></tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table">
                                <tbody>
                                    @if($product->dimensions)
                                        <tr><td><strong>Dimensions:</strong></td>
                                            <td>{{ $product->dimensions['length'] ?? '' }}cm × {{ $product->dimensions['width'] ?? '' }}cm × {{ $product->dimensions['height'] ?? '' }}cm</td>
                                        </tr>
                                    @endif
                                    @if($product->categories->count() > 0)
                                        <tr><td><strong>Categories:</strong></td><td>{{ $product->categories->pluck('name')->implode(', ') }}</td></tr>
                                    @endif
                                    <tr><td><strong>Status:</strong></td><td>{{ $product->in_stock ? 'In Stock' : 'Out of Stock' }}</td></tr>
                                    @if($product->has_variations)
                                        <tr><td><strong>Variations:</strong></td><td>{{ $product->variations->count() }} options available</td></tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            @if($product->has_variations)
            <div class="tab-pane fade" id="variations" role="tabpanel">
                <div class="p-4">
                    <h4>Product Variations</h4>
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Variation</th>
                                    <th>SKU</th>
                                    <th>Price</th>
                                    <th>Stock</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($product->variations as $variation)
                                <tr>
                                    <td>{{ $variation->variation_display }}</td>
                                    <td><code>{{ $variation->sku }}</code></td>
                                    <td>{{ $website->getCurrencySymbol() }} {{ number_format($variation->final_price, 2) }}</td>
                                    <td>{{ $variation->stock_quantity }} units</td>
                                    <td>
                                        @if($variation->stock_quantity > 0)
                                            <span class="badge bg-success">Available</span>
                                        @else
                                            <span class="badge bg-danger">Out of Stock</span>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
</section>

<!-- Related Products -->
@if(isset($relatedProducts) && $relatedProducts->count() > 0)
<section class="section">
    <div class="container">
        <h2 class="section-title">Related Products</h2>
        <div class="row">
            @foreach($relatedProducts as $relatedProduct)
            <div class="col-md-6 col-lg-3 mb-4">
                <div class="card product-card h-100">
                    <div class="card-img-top bg-light d-flex align-items-center justify-content-center" style="height: 200px;">
                        @if($relatedProduct->main_image)
                            <img src="{{ $relatedProduct->main_image }}" class="img-fluid" alt="{{ $relatedProduct->name }}" style="max-height: 100%; max-width: 100%; object-fit: contain;">
                        @else
                            <i class="bi bi-image display-1 text-muted"></i>
                        @endif
                    </div>
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title">{{ $relatedProduct->name }}</h5>
                        <p class="card-text flex-grow-1">{{ Str::limit($relatedProduct->description, 80) }}</p>
                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <div class="price">
                                @if($relatedProduct->sale_price)
                                    <span class="text-danger fw-bold">{{ $website->getCurrencySymbol() }} {{ number_format($relatedProduct->sale_price, 2) }}</span>
                                @else
                                    <span class="fw-bold">{{ $website->getCurrencySymbol() }} {{ number_format($relatedProduct->price, 2) }}</span>
                                @endif
                            </div>
                            <a href="/product/{{ $relatedProduct->slug }}" class="btn btn-outline-primary btn-sm">View</a>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

<style>
.thumbnail {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.thumbnail:hover,
.thumbnail.active {
    border-color: var(--primary-color, #007bff);
}

.thumbnail img {
    border-radius: 6px;
}

.variation-option {
    transition: all 0.3s ease;
}

.variation-option:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
</style>

<script>
function changeImage(src) {
    document.getElementById('mainImage').src = src;

    // Update active thumbnail
    document.querySelectorAll('.thumbnail').forEach(thumb => {
        thumb.classList.remove('active');
    });
    event.target.closest('.thumbnail').classList.add('active');
}

// Handle add to cart form submission
document.getElementById('add-to-cart-form').addEventListener('submit', function(e) {
    e.preventDefault();
    addToCart();
});

function addToCart() {
    const form = document.getElementById('add-to-cart-form');
    const formData = new FormData(form);
    const btn = document.getElementById('add-to-cart-btn');
    
    // Disable button and show loading
    btn.disabled = true;
    btn.innerHTML = '<i class="spinner-border spinner-border-sm me-2"></i>Adding...';
    
    fetch('/cart/add', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json',
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Show success message
            showToast('success', data.message);
            
            // Update cart count if there's a cart counter on the page
            updateCartCount(data.cart_count);
        } else {
            showToast('error', 'Failed to add product to cart');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('error', 'An error occurred while adding to cart');
    })
    .finally(() => {
        // Re-enable button
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-cart-plus me-2"></i>Add to Cart';
    });
}

function buyNow() {
    // First add to cart, then redirect to checkout
    const form = document.getElementById('add-to-cart-form');
    const formData = new FormData(form);
    
    fetch('/cart/add', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json',
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Redirect to checkout
            window.location.href = '/checkout';
        } else {
            showToast('error', 'Failed to add product to cart');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('error', 'An error occurred');
    });
}

function showToast(type, message) {
    // Create toast element
    const toast = document.createElement('div');
    toast.className = `alert alert-${type === 'success' ? 'success' : 'danger'} alert-dismissible fade show position-fixed`;
    toast.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
    toast.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    document.body.appendChild(toast);
    
    // Auto-remove after 5 seconds
    setTimeout(() => {
        if (toast.parentNode) {
            toast.parentNode.removeChild(toast);
        }
    }, 5000);
}

function updateCartCount(count) {
    // Update cart count in navigation if exists
    const cartCountElements = document.querySelectorAll('.cart-count');
    cartCountElements.forEach(element => {
        element.textContent = count;
        if (count > 0) {
            element.style.display = 'inline';
        } else {
            element.style.display = 'none';
        }
    });
}

// Update quantity options when variation is selected
document.addEventListener('DOMContentLoaded', function() {
    const variationSelect = document.getElementById('product_variation_id');
    const quantitySelect = document.getElementById('quantity');
    
    if (variationSelect) {
        variationSelect.addEventListener('change', function() {
            const selectedOption = this.options[this.selectedIndex];
            const stock = selectedOption.dataset.stock || {{ $product->total_stock }};
            
            // Update quantity options
            quantitySelect.innerHTML = '';
            const maxQty = Math.min(10, parseInt(stock));
            
            for (let i = 1; i <= maxQty; i++) {
                const option = document.createElement('option');
                option.value = i;
                option.textContent = i;
                quantitySelect.appendChild(option);
            }
        });
    }
});
</script>
@endsection