@extends('layouts.app')
@section('title', 'Units & Sub-units')
@section('content')
<div class="space-y-6">
    <div><h1 class="text-xl font-bold">Units &amp; Sub-units</h1><p class="text-sm text-ink-muted mt-1">Define base units and conversion factors. Example: 1 kg = 1,000 g.</p></div>
    <div class="card card-pad">
        <h2 class="font-semibold mb-4">Add unit or sub-unit</h2>
        <form method="POST" action="{{ route('settings.units.store') }}" class="grid sm:grid-cols-2 lg:grid-cols-4 gap-3">
            @csrf
            <div><label class="field-label">Name</label><input name="name" class="input" placeholder="Kilogram" required></div>
            <div><label class="field-label">Abbreviation</label><input name="abbreviation" class="input" placeholder="kg" required></div>
            <div><label class="field-label">Base unit (leave blank for base)</label><select name="base_unit_id" class="input"><option value="">This is a base unit</option>@foreach($baseUnits as $base)<option value="{{ $base->id }}">{{ $base->name }} ({{ $base->abbreviation }})</option>@endforeach</select></div>
            <div><label class="field-label">Conversion factor</label><input type="number" name="conversion_factor" step="0.0001" min="0.0001" value="1" class="input" required><p class="text-xs text-ink-muted mt-1">For kg based on g, enter 1000.</p></div>
            <div class="sm:col-span-2 lg:col-span-4"><button class="btn-primary">Add unit</button></div>
        </form>
    </div>
    <div class="card overflow-x-auto">
        <table class="data-table"><thead><tr><th>Name</th><th>Abbreviation</th><th>Base unit</th><th>Conversion factor</th><th></th></tr></thead><tbody>
        @forelse($units as $unit)
            <tr><td colspan="5">
                <form method="POST" action="{{ route('settings.units.update', $unit) }}" class="grid sm:grid-cols-2 lg:grid-cols-5 gap-2 items-center">
                    @csrf @method('PUT')
                    <input name="name" value="{{ $unit->name }}" class="input" required>
                    <input name="abbreviation" value="{{ $unit->abbreviation }}" class="input" required>
                    <select name="base_unit_id" class="input"><option value="">Base unit</option>@foreach($baseUnits as $base)@if($base->id !== $unit->id)<option value="{{ $base->id }}" @selected($unit->base_unit_id === $base->id)>{{ $base->name }} ({{ $base->abbreviation }})</option>@endif @endforeach</select>
                    <input type="number" name="conversion_factor" value="{{ $unit->conversion_factor }}" step="0.0001" min="0.0001" class="input" required>
                    <div class="flex gap-2"><button class="btn-secondary btn-sm">Save</button><button form="delete-unit-{{ $unit->id }}" class="btn-ghost btn-sm text-danger" onclick="return confirm('Delete this unit?')">Delete</button></div>
                </form>
                <form id="delete-unit-{{ $unit->id }}" method="POST" action="{{ route('settings.units.destroy', $unit) }}" class="hidden">@csrf @method('DELETE')</form>
                <p class="text-xs text-ink-muted mt-1">{{ $unit->baseUnit ? 'Sub-unit of '.$unit->baseUnit->name : 'Base unit' }}</p>
            </td></tr>
        @empty <tr><td colspan="5" class="text-center py-8 text-ink-muted">No units configured.</td></tr> @endforelse
        </tbody></table>
    </div>
</div>
@endsection