@extends('layouts.app')

@php
use Illuminate\Support\Facades\Storage;
@endphp

@section('content')
<div class="container py-5">
    <!-- Back Button -->
    <div class="mb-4">
        <a href="{{ url()->previous() }}" class="btn btn-light">
            <i class="fas fa-arrow-left mr-2"></i> Back to Products
        </a>
    </div>

    <div class="row">
        <!-- Product Image Gallery -->
        <div class="col-lg-6">
            <div class="product-gallery">
                <!-- Main Image -->
                <div class="main-image mb-3 bg-light rounded-lg overflow-hidden d-flex align-items-center justify-content-center" 
                     style="height: 500px;">
                    @if($product->image && Storage::disk('public')->exists('products/'.$product->image))
                        <img src="{{ Storage::url('products/'.$product->image) }}" 
                             class="img-fluid mw-100 mh-100 object-fit-cover" 
                             alt="{{ $product->name }}"
                             id="mainProductImage">
                    @else
                        <img src="{{ asset('images/placeholder.png') }}" 
                             class="img-fluid mw-100 mh-100 object-fit-cover" 
                             alt="{{ $product->name }}"
                             id="mainProductImage">
                    @endif
                </div>
                
                <!-- Thumbnails -->
                @if($product->images && json_decode($product->images))
                <div class="thumbnail-gallery d-flex flex-wrap gap-2">
                    @foreach(json_decode($product->images) as $image)
                        @if(Storage::disk('public')->exists('products/'.$image))
                        <div class="thumbnail-item border rounded p-1" style="width: 80px; height: 80px; cursor: pointer;">
                            <img src="{{ Storage::url('products/'.$image) }}" 
                                 class="img-fluid h-100 w-100 object-fit-cover" 
                                 alt="Thumbnail {{ $loop->index }}"
                                 onclick="changeMainImage(this)">
                        </div>
                        @endif
                    @endforeach
                </div>
                @endif
            </div>
        </div>
        
        <!-- Product Details -->
        <div class="col-lg-6">
            <div class="product-details p-4 bg-white rounded shadow-sm">
                <h1 class="product-title mb-3 font-weight-bold text-dark">{{ $product->name }}</h1>
                
                <!-- Rating and Reviews -->
                <div class="d-flex align-items-center mb-3">
                    <div class="rating-stars mr-2">
                        @for($i = 1; $i <= 5; $i++)
                            @if($i <= $product->rating)
                                <i class="fas fa-star text-warning"></i>
                            @else
                                <i class="far fa-star text-warning"></i>
                            @endif
                        @endfor
                    </div>
                    <span class="text-muted small">({{ $product->reviews_count }} reviews)</span>
                    <span class="mx-2">|</span>
                    <span class="text-success small">
                        <i class="fas fa-check-circle"></i> {{ $product->stock > 0 ? 'In Stock' : 'Out of Stock' }}
                    </span>
                </div>
                
                <!-- Price -->
                <div class="product-price mb-4">
                    @if($product->sale_price && $product->sale_price < $product->price)
                        <span class="original-price text-muted h5"><del>${{ number_format($product->price, 2) }}</del></span>
                        <span class="sale-price text-danger h2 font-weight-bold ml-2">${{ number_format($product->sale_price, 2) }}</span>
                        <span class="badge badge-danger ml-2 align-middle">Save {{ number_format(100 - ($product->sale_price/$product->price)*100, 0) }}%</span>
                    @else
                        <span class="regular-price h2 font-weight-bold">${{ number_format($product->price, 2) }}</span>
                    @endif
                </div>
                
                <!-- Short Description -->
                <div class="product-short-description mb-4 border-bottom pb-4">
                    <p class="text-muted lead">{{ $product->short_description }}</p>
                </div>
                
                <!-- Add to Cart -->
                <form action="{{ route('cart.add') }}" method="POST" class="mb-4">
                    @csrf
                    <input type="hidden" name="product_id" value="{{ $product->id }}">
                    
                    <div class="form-group row align-items-center">
                        <label for="quantity" class="col-sm-3 col-form-label font-weight-bold">Quantity:</label>
                        <div class="col-sm-4">
                            <div class="input-group">
                                <button type="button" class="btn btn-outline-secondary quantity-btn minus">-</button>
                                <input type="number" name="quantity" id="quantity" 
                                       class="form-control text-center border-left-0 border-right-0" 
                                       value="1" min="1" max="{{ $product->stock > 0 ? $product->stock : 10 }}">
                                <button type="button" class="btn btn-outline-secondary quantity-btn plus">+</button>
                            </div>
                        </div>
                        <div class="col-sm-5">
                            <span class="text-muted small">Available: {{ $product->stock }} items</span>
                        </div>
                    </div>
                    
                    <div class="d-flex gap-3 mt-4">
                        <button type="submit" class="btn btn-primary btn-lg flex-grow-1 py-3" 
                                {{ $product->stock <= 0 ? 'disabled' : '' }}>
                            <i class="fas fa-shopping-cart mr-2"></i> ADD TO CART
                        </button>
                        <button type="button" class="btn btn-outline-danger btn-lg py-3">
                            <i class="far fa-heart"></i>
                        </button>
                    </div>
                </form>
                
                <!-- Product Meta -->
                <div class="product-meta mt-4 pt-4 border-top">
                    <div class="d-flex flex-wrap gap-4">
                        <div class="meta-item">
                            <strong class="d-block">SKU:</strong>
                            <span class="text-muted">{{ $product->sku ?? 'N/A' }}</span>
                        </div>
                        <div class="meta-item">
                            <strong class="d-block">Category:</strong>
                            <a href="{{ route('products', ['category' => $product->category->slug ?? '']) }}" class="text-primary">
                                {{ $product->category->name ?? 'Uncategorized' }}
                            </a>
                        </div>
                        <div class="meta-item">
                            <strong class="d-block">Tags:</strong>
                            <div class="d-flex flex-wrap gap-1">
                                @if($product->tags)
                                    @foreach(explode(',', $product->tags) as $tag)
                                        <a href="{{ route('products.search', ['search' => trim($tag)]) }}" class="badge badge-light">{{ trim($tag) }}</a>
                                    @endforeach
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Product Tabs -->
    <div class="row mt-5">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0">
                    <ul class="nav nav-tabs card-header-tabs" id="productTabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="description-tab" data-toggle="tab" href="#description">
                                <i class="fas fa-file-alt mr-2"></i> Description
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="specifications-tab" data-toggle="tab" href="#specifications">
                                <i class="fas fa-list-ul mr-2"></i> Specifications
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="reviews-tab" data-toggle="tab" href="#reviews">
                                <i class="fas fa-star mr-2"></i> Reviews ({{ $product->reviews_count }})
                            </a>
                        </li>
                    </ul>
                </div>
                
                <div class="card-body">
                    <div class="tab-content" id="productTabsContent">
                        <div class="tab-pane fade show active" id="description">
                            <div class="product-description">
                                {!! $product->description !!}
                            </div>
                        </div>
                        
                        <div class="tab-pane fade" id="specifications">
                            <div class="table-responsive">
                                <table class="table">
                                    <tbody>
                                        @foreach($product->specifications ?? [] as $key => $value)
                                        <tr>
                                            <th width="30%" class="text-muted">{{ $key }}</th>
                                            <td>{{ $value }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        
                        <div class="tab-pane fade" id="reviews">
                            <div class="row">
                                <div class="col-md-6">
                                    <h5 class="mb-4">Write a Review</h5>
                                    <form>
                                        <div class="form-group">
                                            <label class="font-weight-bold">Your Rating</label>
                                            <div class="rating-input">
                                                @for($i = 1; $i <= 5; $i++)
                                                    <i class="far fa-star" data-value="{{ $i }}"></i>
                                                @endfor
                                                <input type="hidden" name="rating" id="ratingValue" value="0">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="font-weight-bold">Your Review</label>
                                            <textarea class="form-control" rows="4" placeholder="Share your experience..."></textarea>
                                        </div>
                                        <button type="submit" class="btn btn-primary px-4">Submit Review</button>
                                    </form>
                                </div>
                                <div class="col-md-6">
                                    <h5 class="mb-4">Customer Reviews</h5>
                                    @if(count($product->reviews ?? []) > 0)
                                        @foreach($product->reviews as $review)
                                        <div class="review-item border-bottom pb-3 mb-3">
                                            <div class="d-flex justify-content-between mb-2">
                                                <div>
                                                    <strong>{{ $review->user->name }}</strong>
                                                    <div class="stars small">
                                                        @for($i = 1; $i <= 5; $i++)
                                                            @if($i <= $review->rating)
                                                                <i class="fas fa-star text-warning"></i>
                                                            @else
                                                                <i class="far fa-star text-warning"></i>
                                                            @endif
                                                        @endfor
                                                    </div>
                                                </div>
                                                <small class="text-muted">{{ $review->created_at->format('M d, Y') }}</small>
                                            </div>
                                            <p class="mb-2">{{ $review->comment }}</p>
                                            @if($review->response)
                                                <div class="response bg-light p-3 rounded mt-2">
                                                    <strong class="d-block text-primary">Seller Response:</strong>
                                                    <p class="mb-0">{{ $review->response }}</p>
                                                </div>
                                            @endif
                                        </div>
                                        @endforeach
                                    @else
                                        <div class="alert alert-light">
                                            No reviews yet. Be the first to review!
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Related Products -->
    @if(isset($relatedProducts) && count($relatedProducts) > 0)
    <div class="row mt-5">
        <div class="col-12">
            <h3 class="mb-4 pb-2 border-bottom">You May Also Like</h3>
        </div>
        
        @foreach($relatedProducts as $relatedProduct)
        <div class="col-lg-3 col-md-4 col-6 mb-4">
            <div class="card product-card h-100 border-0 shadow-sm-hover">
                <div class="position-absolute top-0 start-0 p-2">
                    @if($relatedProduct->sale_price && $relatedProduct->sale_price < $relatedProduct->price)
                        <span class="badge bg-danger">Sale</span>
                    @endif
                    @if($relatedProduct->is_new)
                        <span class="badge bg-success">New</span>
                    @endif
                </div>
                <div class="product-card-img">
                    <a href="{{ route('products.show', $relatedProduct->slug) }}">
                        @if($relatedProduct->image && Storage::disk('public')->exists('products/'.$relatedProduct->image))
                            <img src="{{ Storage::url('products/'.$relatedProduct->image) }}" 
                                 class="card-img-top" 
                                 alt="{{ $relatedProduct->name }}"
                                 style="height: 200px; object-fit: cover;">
                        @else
                            <img src="{{ asset('images/placeholder.png') }}" 
                                 class="card-img-top" 
                                 alt="{{ $relatedProduct->name }}"
                                 style="height: 200px; object-fit: cover;">
                        @endif
                    </a>
                </div>
                <div class="card-body">
                    <h5 class="card-title">
                        <a href="{{ route('products.show', $relatedProduct->slug) }}" class="text-dark text-decoration-none">
                            {{ Str::limit($relatedProduct->name, 40) }}
                        </a>
                    </h5>
                    <div class="product-price mb-2">
                        @if($relatedProduct->sale_price && $relatedProduct->sale_price < $relatedProduct->price)
                            <span class="text-muted"><del>${{ number_format($relatedProduct->price, 2) }}</del></span>
                            <span class="text-danger fw-bold">${{ number_format($relatedProduct->sale_price, 2) }}</span>
                        @else
                            <span class="fw-bold">${{ number_format($relatedProduct->price, 2) }}</span>
                        @endif
                    </div>
                    <div class="product-rating small mb-2">
                        @for($i = 1; $i <= 5; $i++)
                            @if($i <= $relatedProduct->rating)
                                <i class="fas fa-star text-warning"></i>
                            @else
                                <i class="far fa-star text-warning"></i>
                            @endif
                        @endfor
                        <span class="text-muted small">({{ $relatedProduct->reviews_count }})</span>
                    </div>
                </div>
                <div class="card-footer bg-white border-0">
                    <a href="{{ route('products.show', $relatedProduct->slug) }}" class="btn btn-outline-primary w-100">
                        View Details
                    </a>
                </div>
            </div>
        </div>
        @endforeach
    </div>
    @endif
</div>

<style>
    /* Custom CSS */
    .product-gallery .main-image {
        background-color: #f9f9f9;
        border-radius: 8px;
    }
    
    .thumbnail-item {
        transition: all 0.3s ease;
        border: 1px solid #ddd;
    }
    
    .thumbnail-item:hover {
        border-color: #007bff;
        transform: scale(1.05);
    }
    
    .product-details {
        border-radius: 8px;
        box-shadow: 0 2px 15px rgba(0,0,0,0.05);
    }
    
    .product-title {
        font-size: 2rem;
        line-height: 1.2;
    }
    
    .quantity-btn {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .quantity-btn.minus {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    
    .quantity-btn.plus {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    
    #quantity {
        height: 40px;
        -moz-appearance: textfield;
    }
    
    #quantity::-webkit-outer-spin-button,
    #quantity::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    
    .nav-tabs .nav-link {
        color: #6c757d;
        font-weight: 500;
    }
    
    .nav-tabs .nav-link.active {
        color: #007bff;
        font-weight: 600;
    }
    
    .product-card {
        transition: all 0.3s ease;
        border-radius: 8px;
        overflow: hidden;
    }
    
    .product-card:hover {
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        transform: translateY(-5px);
    }
    
    .product-card-img {
        overflow: hidden;
    }
    
    .product-card-img img {
        transition: transform 0.5s ease;
    }
    
    .product-card:hover .product-card-img img {
        transform: scale(1.05);
    }
    
    .rating-input i {
        font-size: 1.5rem;
        color: #ddd;
        cursor: pointer;
        transition: color 0.2s;
    }
    
    .rating-input i:hover,
    .rating-input i.active {
        color: #ffc107;
    }
    
    .color-option {
        transition: all 0.3s;
        border: 2px solid transparent;
    }
    
    .color-option:hover {
        transform: scale(1.1);
        border-color: #000 !important;
    }
    
    @media (max-width: 768px) {
        .product-gallery .main-image {
            height: 350px;
        }
        
        .product-title {
            font-size: 1.5rem;
        }
    }
</style>

<script>
    // Change main image when thumbnail is clicked
    function changeMainImage(element) {
        document.getElementById('mainProductImage').src = element.src;
    }
    
    // Quantity buttons
    document.querySelector('.quantity-btn.minus').addEventListener('click', function() {
        const input = document.getElementById('quantity');
        if (parseInt(input.value) > parseInt(input.min)) {
            input.value = parseInt(input.value) - 1;
        }
    });
    
    document.querySelector('.quantity-btn.plus').addEventListener('click', function() {
        const input = document.getElementById('quantity');
        if (parseInt(input.value) < parseInt(input.max)) {
            input.value = parseInt(input.value) + 1;
        }
    });
    
    // Rating stars
    const stars = document.querySelectorAll('.rating-input i');
    stars.forEach(star => {
        star.addEventListener('click', function() {
            const value = this.getAttribute('data-value');
            document.getElementById('ratingValue').value = value;
            
            stars.forEach((s, index) => {
                if (index < value) {
                    s.classList.add('fas', 'active');
                    s.classList.remove('far');
                } else {
                    s.classList.add('far');
                    s.classList.remove('fas', 'active');
                }
            });
        });
        
        star.addEventListener('mouseover', function() {
            const value = this.getAttribute('data-value');
            
            stars.forEach((s, index) => {
                if (index < value) {
                    s.classList.add('fas');
                    s.classList.remove('far');
                } else {
                    s.classList.add('far');
                    s.classList.remove('fas');
                }
            });
        });
        
        star.addEventListener('mouseout', function() {
            const currentValue = document.getElementById('ratingValue').value;
            
            stars.forEach((s, index) => {
                if (index < currentValue) {
                    s.classList.add('fas', 'active');
                    s.classList.remove('far');
                } else {
                    s.classList.add('far');
                    s.classList.remove('fas', 'active');
                }
            });
        });
    });
</script>
@endsection