@extends('supplier.layouts.app')

@section('title', 'Tambah Dagangan')

@section('sidebar_nav')
    @include('supplier.dashboard.sidebar')
@endsection

@section('content')
    <div class="max-w-2xl">
        <form action="{{ route('supplier.dagangan.store') }}" method="POST" class="space-y-6">
            @csrf
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md border border-gray-200 dark:border-gray-700 p-6 space-y-4">
                <div>
                    <label for="nama_produk" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Nama Produk <span class="text-red-500">*</span></label>
                    <input type="text" name="nama_produk" id="nama_produk" value="{{ old('nama_produk') }}" required class="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                    @error('nama_produk')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="kategori" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Kategori</label>
                    <input type="text" name="kategori" id="kategori" value="{{ old('kategori') }}" placeholder="Sayuran, Protein, dll" class="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                    @error('kategori')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label for="satuan" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Satuan <span class="text-red-500">*</span></label>
                        <select name="satuan" id="satuan" required class="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                            <option value="kg" {{ old('satuan') === 'kg' ? 'selected' : '' }}>kg</option>
                            <option value="gram" {{ old('satuan') === 'gram' ? 'selected' : '' }}>gram</option>
                            <option value="ons" {{ old('satuan') === 'ons' ? 'selected' : '' }}>ons</option>
                            <option value="liter" {{ old('satuan') === 'liter' ? 'selected' : '' }}>liter</option>
                            <option value="ml" {{ old('satuan') === 'ml' ? 'selected' : '' }}>ml</option>
                            <option value="pack" {{ old('satuan') === 'pack' ? 'selected' : '' }}>pack</option>
                            <option value="kotak" {{ old('satuan') === 'kotak' ? 'selected' : '' }}>kotak</option>
                            <option value="bungkus" {{ old('satuan') === 'bungkus' ? 'selected' : '' }}>bungkus</option>
                        </select>
                        @error('satuan')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label for="ukuran_kemasan" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Ukuran Kemasan</label>
                        <input type="number" name="ukuran_kemasan" id="ukuran_kemasan" value="{{ old('ukuran_kemasan', 1) }}" step="0.01" min="0.01" class="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                        @error('ukuran_kemasan')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
                <div>
                    <label for="harga_satuan" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Harga Satuan (Rp) <span class="text-red-500">*</span></label>
                    <input type="number" name="harga_satuan" id="harga_satuan" value="{{ old('harga_satuan') }}" required min="0" step="1" class="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                    @error('harga_satuan')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="deskripsi" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Deskripsi</label>
                    <textarea name="deskripsi" id="deskripsi" rows="3" class="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">{{ old('deskripsi') }}</textarea>
                    @error('deskripsi')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </div>
            </div>
            <div class="flex gap-3">
                <button type="submit" class="px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 font-medium">Simpan</button>
                <a href="{{ route('supplier.dagangan.index') }}" class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">Batal</a>
            </div>
        </form>
    </div>
@endsection