@extends('layouts.app')

@section('content')

<div class="container mt-5">
    <div class="row">
        <div class="col-md-5">
            @if ($product->image)
            <img src="{{ asset('storage/'.$product->image) }}"
                class="img-fluid rounded">
            @else
            <img src="https://via.placeholder.com/400*300" class="img-fluid rounded">
            @endif
        </div>

        <div class="col-md-7">
            <h2>{{ $product->name }}</h2>
            <p class="text-muted">{{ $product->category->name ?? 'uncategorized' }}</p>
            <p>{{ $product->description }}</p>
            <h4 class="text-success">${{ number_format($product->
            price,2) }}</h4>
            <form method="POST" action="{{ route('cart.add', $product->id) }}">
                @csrf
                <button type="submit" class="btn btn-primary mt-3">Add to cart</button>
            </form>

            <a href="{{ route('products.index') }}"
                class="btn btn-outline-secondery mt-3">Back to Home</a>
        </div>
    </div>
</div>

@endsection