@section('title')
{{ $product->title }} - Eat Your Favorite Foods
@stop

@section('keywords')
Food Store, Eat Your Favorite Foods
@stop

@section('description')
{{ $product->description }}
@stop

@section('image')
{{ asset('/storage/' . $product->image) }}
@stop

<div class="container" style="margin-bottom: 200px;">
    <div class="row justify-content-center mt-0">
        <div class="col-md-6">

            <div class="bg-white rounded-bottom-custom shadow-sm p-3 mb-5" :style="{ backgroundImage: `url({{ asset('storage/' . $product->image) }})`,height: '300px',backgroundSize: 'cover',backgroundPosition: 'center'}">
                <div class="d-flex justify-content-start">
                    <div>
                        <x-buttons.back />
                    </div>
                </div>
            </div>

            <div class="card border-0 shadow-lg rounded-4" style="margin-top:-70px;background:#fff1f2;">
                <div class="card-body mt-4">
                    <h4 class="fw-bold mb-2">{{ $product->title }}</h4>
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span class="fw-bold fs-5" style="color:#f43f5e;">
                            Rp {{ number_format($product->price) }}
                        </span>

                        <div class="d-flex align-items-center">
                            <i class="bi bi-star-fill me-1" style="color:#facc15;"></i>
                            <span class="fw-semibold">
                                {{ number_format($product->ratings_avg_rating, 1) }}
                            </span>
                            <span class="small text-muted ms-1">
                                ({{ $product->ratings_count }} reviews)
                            </span>
                        </div>
                    </div>

                    <!-- DESCRIPTION -->
                    <div class="mt-3">
                        <h6 class="fw-bold mb-2" style="color:#1f2937;">
                            Description
                        </h6>
                        <p class="text-muted small mb-0">
                            {!! $product->description !!}
                        </p>
                    </div>
                </div>
            </div>

            <h6 class="mt-4">
                <h6 class="fw-bold d-flex align-items-center mb-3" style="color:#f43f5e;">
                    <i class="bi bi-chat-left-text me-2"></i>
                    Rating & Reviews
                </h6>
            <div class="row mt-3">

                @foreach($product->ratings()->latest()->get() as $rating)
                <div class="col-6 mb-4">
                    <div class="card border-0 shadow-sm rounded h-100">
                        <div class="card-body">
                            <!-- Display Stars -->
                            <div class="d-flex justify-content-center mt-3">
                                @for ($i = 1; $i <= 5; $i++) <label for="star{{ $i }}-{{ $rating->id }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="cursor-pointer @if($rating->rating >= $i) text-warning @else text-secondary @endif" viewBox="0 0 20 20">
                                        <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
                                    </svg>
                                    </label>
                                    @endfor
                            </div>

                            <!-- Review text -->
                            <blockquote class="bsb-blockquote-icon mb-3 mt-4">
                                <p>{{ $rating->review }}</p>
                            </blockquote>

                            <!-- Customer Info -->
                            <figure class="d-flex align-items-center m-0 p-0">
                                <img class="img-fluid rounded-circle m-0 border border-3" width="50" loading="lazy" src="{{ asset('/storage/avatars/' . $rating->customer->image) }}" alt="{{ $rating->customer->name }}">
                                <figcaption class="ms-2 mt-1">
                                    <h6 class="mb-1">{{ $rating->customer->name }}</h6>
                                </figcaption>
                            </figure>
                        </div>
                    </div>
                </div>
                @endforeach

            </div>

            <!-- button add to cart -->
            <livewire:web.cart.btn-add-to-cart-full :product_id="$product->id" />

        </div>
    </div>
</div>