@extends('layouts.app')

@section('content')
    <div class="space-y-6">
        <div class="flex flex-wrap items-center justify-between gap-4">
            <div>
                <h2 class="text-2xl font-semibold text-slate-900">Tambah Pengeluaran</h2>
                <p class="text-sm text-slate-500">Catat pemakaian bahan baku keluar dari gudang.</p>
            </div>
            <x-button variant="ghost" href="{{ route('warehouse.out.index') }}">Kembali</x-button>
        </div>

        <x-card>
            <form method="post" action="{{ route('warehouse.out.store') }}" class="grid gap-4 md:grid-cols-2">
                @csrf
                <x-input name="tanggal" label="Tanggal" type="date" :value="old('tanggal', now()->format('Y-m-d'))" required />
                <x-select name="item_id" label="Item" required>
                    <option value="">Pilih item</option>
                    @foreach($items as $item)
                        <option value="{{ $item->id }}" {{ old('item_id') == $item->id ? 'selected' : '' }}>
                            {{ $item->nama }} ({{ $item->satuan }})
                        </option>
                    @endforeach
                </x-select>
                <x-input name="qty" label="Qty" type="number" step="0.01" min="0.01" required />
                <div class="md:col-span-2">
                    <label for="note" class="mb-2 block text-sm font-semibold text-slate-700">Catatan</label>
                    <textarea id="note" name="note" rows="3" class="block w-full rounded-lg border border-amber-100 px-3 py-2 text-sm text-slate-700 shadow-sm focus:border-amber-400 focus:ring-amber-200">{{ old('note') }}</textarea>
                    @error('note')
                        <p class="mt-1 text-xs text-rose-600">{{ $message }}</p>
                    @enderror
                </div>
                <div class="md:col-span-2 flex justify-end gap-3">
                    <x-button variant="ghost" href="{{ route('warehouse.out.index') }}">Batal</x-button>
                    <x-button type="submit">Simpan</x-button>
                </div>
            </form>
        </x-card>
    </div>
@endsection
