@extends('layouts.admin')

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

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

    <!-- Header -->
    <div>
        <h2 class="text-2xl font-bold text-gray-800">Tambah Kategori</h2>
        <p class="text-gray-500 mt-1">Tambahkan kategori baru untuk produk Anda</p>
    </div>

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

        <form action="{{ route('kategoris.store') }}" method="POST" class="space-y-5">
            @csrf

            <!-- Input -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Nama Kategori
                </label>
                <input type="text" 
                       name="nama" 
                       placeholder="Masukkan nama kategori"
                       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-emerald-500 to-teal-600 hover:from-emerald-600 hover:to-teal-700 text-white font-medium rounded-xl shadow-lg shadow-emerald-500/25 hover:shadow-emerald-500/40 transition-all duration-200 transform hover:-translate-y-0.5">
                    <i class="bi bi-save"></i>
                    Simpan
                </button>
            </div>

        </form>

    </div>

</div>
@endsection