@extends('layouts.admin')

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

@section('content')
<div class="max-w-2xl mx-auto space-y-6">

    <!-- Header -->
    <div>
        <h2 class="text-2xl font-bold text-gray-800">Edit Kategori</h2>
        <p class="text-gray-500 mt-1">Perbarui nama kategori</p>
    </div>

    <!-- Card/Form Container -->
    <div class="bg-white border border-gray-200 rounded-2xl shadow-sm p-6">

        <!-- Error Alert -->
        @if($errors->any())
            <div class="mb-4 px-4 py-3 bg-red-50 border border-red-200 text-red-700 rounded-xl">
                <ul class="list-disc list-inside text-sm space-y-1">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('kategoris.update', $kategori->id) }}" method="POST" class="space-y-5">
            @csrf
            @method('PUT')

            <!-- Input -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Nama Kategori
                </label>
                <input type="text"
                       name="nama"
                       value="{{ old('nama', $kategori->nama) }}"
                       class="w-full px-4 py-2.5 rounded-xl border border-gray-300 focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition"
                       required>
            </div>

            <!-- Actions -->
            <div class="flex items-center justify-between gap-3 pt-4 border-t border-gray-100">

                <a href="{{ route('kategoris.index') }}" 
                   class="px-4 py-2.5 text-gray-600 hover:text-gray-800 transition">
                    ← Kembali
                </a>

                <button type="submit" 
                        class="inline-flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-amber-400 to-amber-500 hover:from-amber-500 hover:to-amber-600 text-white font-medium rounded-xl shadow-lg shadow-amber-500/25 hover:shadow-amber-500/40 transition-all duration-200 transform hover:-translate-y-0.5">
                    <i class="bi bi-save"></i>
                    Update
                </button>

            </div>

        </form>

    </div>

</div>
@endsection