@extends('layouts.app')

@section('title', $product->name . ' — ' . ($settings['site_name'] ?? 'H&H Creations'))

@section('content')
<div class="container py-5">
    <div class="row g-5 align-items-start">
        <div class="col-md-6">
            <img src="{{ $product->image_url }}" alt="{{ $product->name }}" class="img-fluid w-100" style="border-radius:2px; background-color:#e5ddcb;">
        </div>
        <div class="col-md-6">
            <h1 class="h2 mb-3">{{ $product->name }}</h1>
            <p class="fs-4 mb-4">Rs {{ number_format($product->price, 2) }}</p>
            <p class="text-muted mb-4">{{ $product->description }}</p>

            @if($product->stock > 0)
                <form action="{{ route('cart.add', $product) }}" method="POST" class="d-flex gap-2 align-items-center">
                    @csrf
                    <input type="number" name="quantity" value="1" min="1" max="{{ $product->stock }}" class="form-control" style="width:90px;">
                    <button class="btn btn-dark px-4 py-2">Add to Cart</button>
                </form>
                <p class="small text-muted mt-3">{{ $product->stock }} in stock</p>
            @else
                <button class="btn btn-secondary px-4 py-2" disabled>Out of Stock</button>
            @endif

            <a href="{{ route('home') }}" class="d-block mt-4 small text-muted">&larr; Back to shop</a>
        </div>
    </div>
</div>
@endsection