@extends('layouts.app')

@section('content')
    <div class="container py-4">
        <div class="row">
            <div class="col-md-5">
                {{-- Fixed path to include 'storage/' --}}
                <img src="{{ asset('storage/uploads/' . $product->thumbnail) }}" class="img-fluid rounded shadow-sm border"
                    alt="{{ $product->name }}" style="height:auto; object-fit:cover;">
            </div>

            {{-- Product Details --}}
            <div class="col-md-7">
                <h1 class="fw-bold">{{ $product->name }}</h1>

                <p class="text-muted mb-2">
                    Category: {{ $product->category->name ?? 'General' }}
                </p>

                <h3 class="text-primary mb-3">
                    ₹{{ number_format($product->price, 2) }}
                </h3>

                <div class="mb-4">
                    <h5>Description</h5>
                    <p class="text-secondary">{{ $product->description }}</p>
                </div>

                {{-- Action Buttons --}}
                <div class="d-flex gap-3">
                    {{-- Add to Cart Button using your JS function --}}
                    <button onclick="addToCart({{ $product->id }})" class="btn btn-success btn-lg px-5 fw-bold">
                        <i class="bi bi-cart-plus me-2"></i> Add to Cart
                    </button>

                    {{-- Wishlist Toggle --}}
                    <button onclick="toggleWishlist({{ $product->id }}, this)" class="btn btn-outline-secondary btn-lg">
                        <i class="bi bi-heart-fill"></i>
                    </button>
                </div>
            </div>

        </div>

        @if ($relatedProducts->count() > 0)
            <div class="container mt-5">
                <h4 class="mb-4">Related Products</h4>
                <div class="owl-carousel owl-theme" id="related-slider">
                    @foreach ($relatedProducts as $item)
                        <div class="item">
                            <div class="card h-100 shadow-sm border-0 m-1">
                                <a href="{{ url('product/' . $item->slug) }}" class="text-decoration-none text-dark">
                                    <img src="{{ asset('storage/' . $item->thumbnail) }}" class="card-img-top"
                                        style="height:150px; object-fit:cover;">
                                    <div class="card-body p-2">
                                        <h6 class="text-truncate mb-1" style="font-size: 14px;">{{ $item->name }}</h6>
                                        <p class="text-primary fw-bold mb-0">₹{{ number_format($item->price) }}</p>
                                    </div>
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
        
    </div>

    <script>
        $(document).ready(function() {
            $("#related-slider").owlCarousel({
                margin: 15,
                nav: true,
                dots: false,
                responsive: {
                    0: {
                        items: 2
                    }, // Mobile
                    768: {
                        items: 3
                    }, // Tablet
                    1000: {
                        items: 5
                    } // Desktop
                }
            });
        });
    </script>
@endsection