@extends('layouts.app')

@section('title', $product->name . ' - ' . config('app.name'))
@section('content')
<div class="container py-5">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('frontend.home') }}" class="text-decoration-none">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ route('user.products.index') }}" class="text-decoration-none">Products</a></li>
            <li class="breadcrumb-item"><a href="{{ route('frontend.category', $product->category) }}" class="text-decoration-none">{{ $product->category?->name }}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ $product->name }}</li>
        </ol>
    </nav>

    <div class="row">
        <!-- Product Image -->
        <div class="col-md-5 mb-4">
            <div class="card border-0 shadow-sm">
                <img src="{{ $product->image ? asset('storage/products/' . $product->image) : asset('uploads/no-image.png') }}" alt="{{ $product->name }}" class="card-img-top" style="height: 500px; object-fit: cover;">
            </div>
        </div>

        <!-- Product Details -->
        <div class="col-md-7">
            <!-- Heading & Brand -->
            <div class="mb-3">
                <p class="text-muted small mb-1">
                    <i class="bi bi-building"></i> {{ $product->brand?->name ?? 'Unknown Brand' }}
                </p>
                <h1 class="mb-2">{{ $product->name }}</h1>
                <p class="text-muted">SKU: <code>{{ $product->sku }}</code></p>
            </div>

            <!-- Rating Placeholder -->
            <div class="mb-4">
                <div class="d-flex align-items-center gap-2">
                    <div class="text-warning">
                        <i class="bi bi-star-fill"></i>
                        <i class="bi bi-star-fill"></i>
                        <i class="bi bi-star-fill"></i>
                        <i class="bi bi-star-fill"></i>
                        <i class="bi bi-star-half"></i>
                    </div>
                    <small class="text-muted">(42 reviews)</small>
                </div>
            </div>

            <!-- Price Section -->
            <div class="card bg-light border-0 mb-4 p-3">
                <h3 class="text-primary mb-0">{{ \App\Support\Currency::symbol() }}{{ number_format($product->price, 2) }}</h3>
                @if($product->isOnSale())
                    <small class="text-muted text-decoration-line-through">{{ \App\Support\Currency::symbol() }}{{ number_format($product->compare_at_price, 2) }}</small>
                    <span class="badge bg-danger">Save {{ $product->discount_percent }}%</span>
                @endif
            </div>

            <!-- Stock Status -->
            <div class="mb-4">
                @if($product->inventory && $product->inventory->quantity > 0)
                    <span class="badge bg-success p-2">
                        <i class="bi bi-check-circle"></i> In Stock
                    </span>
                    <small class="text-muted">{{ $product->inventory->quantity }} items available</small>
                @else
                    <span class="badge bg-danger p-2">
                        <i class="bi bi-x-circle"></i> Out of Stock
                    </span>
                @endif
            </div>

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

            <!-- Add to Cart Form -->
            @if($product->inventory && $product->inventory->quantity > 0)
                <form action="{{ route('cart.add') }}" method="POST" class="mb-4">
                    @csrf
                    <input type="hidden" name="product_id" value="{{ $product->id }}">
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="quantity" class="form-label">Quantity</label>
                            <input type="number" class="form-control" id="quantity" name="quantity" value="1" min="1" max="{{ $product->inventory->quantity }}" required>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary btn-lg w-100 mb-2">
                        <i class="bi bi-cart-plus"></i> Add to Cart
                    </button>
                </form>
            @else
                <button class="btn btn-danger btn-lg w-100 mb-2" disabled>
                    <i class="bi bi-x-circle"></i> Out of Stock
                </button>
            @endif

            <!-- Related Actions -->
            <div class="d-flex gap-2">
                <a href="{{ route('user.products.index') }}" class="btn btn-outline-secondary flex-grow-1">
                    <i class="bi bi-arrow-left"></i> Continue Shopping
                </a>
            </div>

            <!-- Product Meta -->
            <div class="card border-0 bg-light mt-4">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <small class="text-muted d-block">Category</small>
                            <p class="mb-0">
                                <a href="{{ route('frontend.category', $product->category) }}" class="text-decoration-none">
                                    {{ $product->category?->name }}
                                </a>
                            </p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <small class="text-muted d-block">Brand</small>
                            <p class="mb-0">
                                <a href="{{ route('frontend.brand', $product->brand) }}" class="text-decoration-none">
                                    {{ $product->brand?->name }}
                                </a>
                            </p>
                        </div>
                        <div class="col-md-6">
                            <small class="text-muted d-block">Product Code</small>
                            <p class="mb-0"><code>{{ $product->product_code ?? 'N/A' }}</code></p>
                        </div>
                        <div class="col-md-6">
                            <small class="text-muted d-block">Availability</small>
                            <p class="mb-0">{{ $product->created_at->format('M d, Y') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Related Products -->
    @if($relatedProducts->count() > 0)
        <div class="mt-6 pt-5 border-top">
            <h4 class="mb-4">Related Products</h4>
            <div class="row g-4">
                @foreach($relatedProducts->take(4) as $related)
                    <div class="col-md-6 col-lg-3">
                        <div class="card border-0 shadow-sm h-100">
                            <div class="position-relative overflow-hidden" style="height: 200px; background: #f5f5f5;">
                                <img src="{{ $related->image ? asset('storage/products/' . $related->image) : asset('uploads/no-image.png') }}" alt="{{ $related->name }}" class="w-100 h-100 object-fit-cover">
                            </div>
                            <div class="card-body">
                                <h6 class="card-title">
                                    <a href="{{ route('user.products.show', $related) }}" class="text-decoration-none text-dark">
                                        {{ Str::limit($related->name, 30) }}
                                    </a>
                                </h6>
                                <p class="h6 text-primary mb-0">{{ \App\Support\Currency::symbol() }}{{ number_format($related->price, 2) }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif
</div>

<style>
.object-fit-cover {
    object-fit: cover;
}
</style>
@endsection