@extends('frontend.layouts.app')
@section('title', $product->name)
@section('content')
<section style="padding-top:40px;">
    <div class="container grid grid-2" style="align-items:start;">
        <div class="card" style="overflow:hidden; padding:0;">
            <img src="{{ $product->image ? asset('storage/'.$product->image) : 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=800' }}" style="width:100%; height:420px; object-fit:cover;">
            @if($product->images->count())
            <div style="display:flex; gap:10px; padding:14px; overflow-x:auto;">
                @foreach($product->images as $img)
                    <img src="{{ asset('storage/'.$img->image) }}" style="width:70px; height:70px; object-fit:cover; border-radius:10px;">
                @endforeach
            </div>
            @endif
        </div>
        <div>
            <span class="badge" style="position:static; background:var(--accent); color:var(--primary); display:inline-block; margin-bottom:12px;">{{ $product->category->name ?? '' }}</span>
            <h1 style="font-size:2rem; margin-bottom:10px;">{{ $product->name }}</h1>
            <div style="margin-bottom:16px;">
                @if($product->discount_price)<span class="price-old" style="font-size:1.1rem;">{{ $siteSettings['currency'] }}{{ number_format($product->regular_price,2) }}</span>@endif
                <span class="price-new" style="font-size:1.6rem;">{{ $siteSettings['currency'] }}{{ number_format($product->finalPrice(),2) }}</span>
            </div>
            <p style="opacity:0.75; line-height:1.8; margin-bottom:20px;">{{ $product->description }}</p>
            @if($product->ingredients)
            <h4 style="margin-bottom:8px;">Ingredients</h4>
            <p style="opacity:0.65; margin-bottom:20px;">{{ $product->ingredients }}</p>
            @endif
            <span class="badge" style="position:static; display:inline-block; {{ $product->stock_quantity > 0 ? 'background:#DEF7E7;color:#157A45;' : 'background:#FDE2E1;color:#C0362C;' }}">
                {{ $product->stock_quantity > 0 ? 'Available' : 'Currently Unavailable' }}
            </span>
        </div>
    </div>

    @if($related->count())
    <div class="container" style="margin-top:60px;">
        <div class="section-title"><h2>You Might Also <span>Like</span></h2></div>
        <div class="grid grid-4">
            @foreach($related as $r)
                <a href="{{ route('product.show', $r) }}" class="card product-card hover-lift">
                    <img src="{{ $r->image ? asset('storage/'.$r->image) : 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=500' }}">
                    <div style="padding:16px;"><h4>{{ $r->name }}</h4><span class="price-new">{{ $siteSettings['currency'] }}{{ number_format($r->finalPrice(),2) }}</span></div>
                </a>
            @endforeach
        </div>
    </div>
    @endif
</section>
@endsection