<x-app-layout>
    @section('title', 'Edit Kategori')

    <div class="space-y-6">
        <nav class="flex" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 md:space-x-3">
                <li><a href="{{ route('kategori.index') }}" class="text-[#7A7FAE] hover:text-[#4A538F]">Kategori</a></li>
                <li>
                    <div class="flex items-center">
                        <svg class="w-4 h-4 text-[#7A7FAE]" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                        </svg>
                        <span class="ml-1 text-[#2F347A] font-medium">Edit Kategori</span>
                    </div>
                </li>
            </ol>
        </nav>

        <x-card class="p-6">
            <form method="POST" action="{{ route('kategori.update', $kategori) }}">
                @csrf
                @method('PUT')
                <x-form-input name="nama" label="Nama Kategori" :value="$kategori->nama" :error="$errors->first('nama')" required />
                <x-form-textarea name="keterangan" label="Keterangan" :value="$kategori->keterangan" :error="$errors->first('keterangan')" rows="3" />
                
                <div class="flex justify-end gap-4 pt-4 border-t border-[#E5E7F2]">
                    <x-btn type="secondary" href="{{ route('kategori.index') }}">Batal</x-btn>
                    <x-btn type="primary">Simpan Perubahan</x-btn>
                </div>
            </form>
        </x-card>
    </div>
</x-app-layout>
