@extends('layouts.app')
@section('title', $yarn->name)
@section('breadcrumb')
    @include('components.breadcrumb', ['items' => ['Stock' => route('stock.index'), 'Yarns' => route('yarn.index'), $yarn->name => null]])
@endsection
@section('content')
<div class="max-w-4xl mx-auto space-y-6">
    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-slate-900 dark:text-white">{{ $yarn->name }}</h1>
            <p class="text-sm text-slate-500">{{ $yarn->code }} · {{ $yarn->category ?? 'N/A' }} · {{ $yarn->count ?? '—' }}</p>
        </div>
        <div class="flex gap-2">
            <x-button variant="outline" icon="edit-2" :href="route('yarn.edit', $yarn->id)">Edit</x-button>
            <form action="{{ route('yarn.destroy', $yarn->id) }}" method="POST" onsubmit="return confirm('Delete {{ $yarn->name }}?')">@csrf @method('DELETE')
                <x-button variant="danger" icon="trash-2" type="submit">Delete</x-button>
            </form>
        </div>
    </div>
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <x-stat-card title="Stock In" :value="$stockIn" prefix="" icon="package" iconBg="success" />
        <x-stat-card title="Stock Out" :value="$stockOut" prefix="" icon="trending-up" iconBg="danger" />
        <x-stat-card title="Current Balance" :value="$stockIn - $stockOut" prefix="" icon="scale" iconBg="primary" />
        <x-stat-card title="Avg Cost" :value="$avgCost" icon="circle-dollar-sign" iconBg="info" />
    </div>
    <x-card title="Yarn Details" icon="info">
        <dl class="grid grid-cols-2 gap-4 text-sm">
            <div><dt class="text-slate-500">Name</dt><dd class="font-semibold">{{ $yarn->name }}</dd></div>
            <div><dt class="text-slate-500">Code</dt><dd class="font-semibold">{{ $yarn->code }}</dd></div>
            <div><dt class="text-slate-500">Category</dt><dd class="font-semibold">{{ $yarn->category ?? '—' }}</dd></div>
            <div><dt class="text-slate-500">Count</dt><dd class="font-semibold">{{ $yarn->count ?? '—' }}</dd></div>
            <div><dt class="text-slate-500">Unit</dt><dd class="font-semibold">{{ $yarn->unit }}</dd></div>
            <div><dt class="text-slate-500">Reorder Level</dt><dd class="font-semibold">{{ number_format($yarn->reorder_level) }}</dd></div>
            <div><dt class="text-slate-500">Status</dt><dd><x-badge :variant="$yarn->is_active ? 'success' : 'gray'">{{ $yarn->is_active ? 'Active' : 'Inactive' }}</x-badge></dd></div>
            @if($yarn->description)
            <div class="col-span-2"><dt class="text-slate-500">Description</dt><dd class="font-semibold">{{ $yarn->description }}</dd></div>
            @endif
        </dl>
    </x-card>
</div>
@endsection
