@extends('layouts.app')

@section('title', $product->name)

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="page-title mb-0">{{ $product->name }}</h1>
    <div>
        <a href="{{ route('products.edit', $product) }}" class="btn btn-primary me-1">Edit</a>
        <a href="{{ route('products.index') }}" class="btn btn-outline-secondary">Back</a>
    </div>
</div>

@if($product->image_url)
    <div class="card mb-4">
        <div class="card-body">
            <img src="{{ $product->image_url }}" alt="{{ $product->name }}" style="max-width: 200px; max-height: 200px; object-fit: contain;">
        </div>
    </div>
@endif
<div class="card">
    <div class="card-body">
        <dl class="row mb-0">
            <dt class="col-sm-3 text-muted">Category</dt>
            <dd class="col-sm-9">{{ $product->category_name }}</dd>
            <dt class="col-sm-3 text-muted">Size</dt>
            <dd class="col-sm-9">{{ $product->size ?? '—' }}</dd>
            <dt class="col-sm-3 text-muted">Color</dt>
            <dd class="col-sm-9">{{ $product->color ?? '—' }}</dd>
            <dt class="col-sm-3 text-muted">Barcode</dt>
            <dd class="col-sm-9">
                @if($product->barcode)
                    <div class="d-flex align-items-center gap-3 flex-wrap">
                        <img src="{{ route('products.barcode', $product) }}" alt="Barcode {{ $product->barcode }}" class="barcode-img" style="max-height: 60px; width: auto;">
                        <span class="text-break">{{ $product->barcode }}</span>
                        <a href="{{ route('products.barcode', $product) }}" download="barcode-{{ $product->id }}.svg" class="btn btn-sm btn-outline-primary">Download SVG</a>
                    </div>
                @else
                    —
                @endif
            </dd>
            <dt class="col-sm-3 text-muted">Purchase Price</dt>
            <dd class="col-sm-9">{{ number_format($product->purchase_price, 2) }}</dd>
            <dt class="col-sm-3 text-muted">Selling Price</dt>
            <dd class="col-sm-9">{{ number_format($product->selling_price, 2) }}</dd>
            <dt class="col-sm-3 text-muted">Quantity</dt>
            <dd class="col-sm-9">{{ $product->quantity }}</dd>
        </dl>
    </div>
</div>
@endsection