@extends('layouts.app')
@section('title', 'Tambah Produk')

@section('content')
<div class="max-w-2xl">
    <form action="{{ route('products.store') }}" method="POST" class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 space-y-4">
        @csrf
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">Nama Produk *</label>
            <input type="text" name="nama" value="{{ old('nama') }}" required class="w-full rounded-lg border-slate-300 px-3 py-2 border">
        </div>
        <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Kategori</label>
                <input type="text" name="kategori" value="{{ old('kategori') }}" class="w-full rounded-lg border-slate-300 px-3 py-2 border">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Harga Default *</label>
                <input type="number" step="0.01" name="harga_default" value="{{ old('harga_default', 0) }}" required class="w-full rounded-lg border-slate-300 px-3 py-2 border">
            </div>
        </div>
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">Keterangan</label>
            <textarea name="keterangan" rows="2" class="w-full rounded-lg border-slate-300 px-3 py-2 border">{{ old('keterangan') }}</textarea>
        </div>
        <label class="flex items-center gap-2 text-sm">
            <input type="checkbox" name="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }} class="rounded border-slate-300">
            <span>Aktif</span>
        </label>
        <div class="flex gap-2 pt-2">
            <button class="bg-[#1e6fbf] hover:bg-[#14538f] text-white font-semibold px-4 py-2 rounded-lg">Simpan</button>
            <a href="{{ route('products.index') }}" class="bg-slate-200 hover:bg-slate-300 px-4 py-2 rounded-lg">Batal</a>
        </div>
    </form>
</div>
@endsection