@extends('layouts.app')

@section('title', 'Edit Komoditas')

@section('content')
<style>
    :root {
        --ink: #212B22;
        --ink-soft: #55604F;
        --paper: #F7F1E3;
        --paper-dark: #EDE1C1;
        --paper-line: #DECEA0;
        --leaf: #3E6B4B;
        --leaf-dark: #24402D;
        --chili: #BD3F0F;
        --turmeric: #D69A2D;
    }

    .pib-form-card {
        background: #FDFBF5;
        border: 1px solid var(--paper-line);
        border-radius: 20px;
        box-shadow: 0 8px 25px -10px rgba(33, 43, 34, 0.1);
    }
</style>

<div class="max-w-2xl mx-auto py-2">
    <div class="pib-form-card p-6 sm:p-8">
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-6 pb-4 border-b border-[#DECEA0]/60">
            <div>
                <span class="text-xs uppercase tracking-widest text-[#D69A2D] font-bold">Katalog Pasar</span>
                <h1 class="text-xl sm:text-2xl font-bold text-[#212B22] mt-0.5">✏️ Edit Komoditas Sayur</h1>
            </div>
            <a href="{{ route('admin.commodities.index') }}" 
               class="text-xs font-bold text-[#3E6B4B] hover:text-[#24402D] px-3.5 py-1.5 rounded-full border border-[#DECEA0] bg-[#FDFBF5] hover:bg-[#EDE1C1] transition self-start sm:self-auto">
                ← Kembali
            </a>
        </div>

        <form action="{{ route('admin.commodities.update', $commodity) }}" method="POST" class="space-y-4">
            @csrf
            @method('PUT')

            <div>
                <label class="block text-xs font-semibold text-[#212B22] uppercase tracking-wider mb-1.5">Nama Komoditas <span class="text-[#BD3F0F]">*</span></label>
                <input type="text"
                    name="nama_komoditas"
                    value="{{ old('nama_komoditas', $commodity->nama_komoditas) }}"
                    class="w-full bg-white border border-[#DECEA0] rounded-xl px-4 py-2.5 text-sm text-[#212B22] focus:outline-none focus:ring-2 focus:ring-[#3E6B4B] @error('nama_komoditas') border-[#BD3F0F] @enderror"
                    required>
                @error('nama_komoditas')
                <p class="text-[#BD3F0F] text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block text-xs font-semibold text-[#212B22] uppercase tracking-wider mb-1.5">Satuan Ukuran <span class="text-[#BD3F0F]">*</span></label>
                <select name="satuan" class="w-full bg-white border border-[#DECEA0] rounded-xl px-4 py-2.5 text-sm text-[#212B22] focus:outline-none focus:ring-2 focus:ring-[#3E6B4B] @error('satuan') border-[#BD3F0F] @enderror" required>
                    <option value="kg" {{ old('satuan', $commodity->satuan) == 'kg' ? 'selected' : '' }}>Kilogram (kg)</option>
                    <option value="gram" {{ old('satuan', $commodity->satuan) == 'gram' ? 'selected' : '' }}>Gram (gr)</option>
                    <option value="buah" {{ old('satuan', $commodity->satuan) == 'buah' ? 'selected' : '' }}>Buah</option>
                    <option value="ikat" {{ old('satuan', $commodity->satuan) == 'ikat' ? 'selected' : '' }}>Ikat</option>
                    <option value="liter" {{ old('satuan', $commodity->satuan) == 'liter' ? 'selected' : '' }}>Liter (L)</option>
                </select>
                @error('satuan')
                <p class="text-[#BD3F0F] text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mt-6 pt-4 border-t border-[#DECEA0]/60 flex items-center gap-3">
                <button type="submit" 
                        class="bg-[#D69A2D] hover:bg-[#b88322] text-[#212B22] px-6 py-2.5 rounded-full text-xs font-bold transition shadow-sm cursor-pointer flex items-center gap-1.5">
                    <span>💾</span> Simpan Perubahan
                </button>
                <a href="{{ route('admin.commodities.index') }}" 
                   class="bg-[#EDE1C1] hover:bg-[#DECEA0] text-[#212B22] px-5 py-2.5 rounded-full text-xs font-bold transition">
                    Batal
                </a>
            </div>
        </form>
    </div>
</div>
@endsection