<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Edit Kategori - Raja Futsal</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Inter', sans-serif;
        }

        .form-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .form-card:hover {
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }

        .input-focus:focus {
            border-color: #f97316;
            box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
        }

        .btn-primary {
            background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
        }

        .btn-secondary {
            transition: all 0.3s ease;
        }

        .btn-secondary:hover {
            background-color: #f3f4f6;
            transform: translateY(-2px);
        }

        .nav-link {
            transition: all 0.2s ease;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
        }

        .nav-link:hover {
            background-color: #fff7ed;
            color: #ea580c;
        }

        .active-nav {
            background-color: #fff7ed;
            color: #ea580c;
            font-weight: 600;
        }

        .badge-orange {
            background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
            color: white;
        }

        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4); }
            70% { box-shadow: 0 0 0 10px rgba(249, 115, 22, 0); }
            100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
        }
    </style>
</head>

<body class="bg-gray-50 min-h-screen">


    <!-- ========== KONTEN UTAMA ========== -->
    <div class="p-6">
        <!-- HEADER EDIT KATEGORI -->
        <div class="relative mb-8 bg-gradient-to-r from-orange-500 via-orange-600 to-orange-700 rounded-2xl p-6 text-white shadow-lg overflow-hidden w-full">
            <div class="absolute top-0 right-0 w-64 h-64 opacity-10">
                <i class="fas fa-tags text-8xl absolute top-10 right-10"></i>
                <i class="fas fa-edit text-7xl absolute bottom-0 right-32"></i>
                <i class="fas fa-folder-open text-6xl absolute top-20 right-48"></i>
            </div>
            <div class="relative flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <div>
                    <div class="flex items-center gap-3 mb-2">
                        <div class="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
                            <i class="fas fa-edit text-white text-2xl"></i>
                        </div>
                        <h2 class="text-2xl font-bold flex items-center gap-2">
                            Edit Kategori
                        </h2>
                    </div>
                    <p class="text-orange-100">Memperbarui informasi kategori <span class="font-semibold">{{ $kategori->nama }}</span></p>
                </div>
            </div>
        </div>

        <!-- FORM CARD -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- FORM -->
            <div class="lg:col-span-2">
                <div class="bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden form-card">
                    <!-- FORM HEADER -->
                    <div class="px-6 py-4 border-b border-gray-100 bg-gradient-to-r from-orange-50 to-white">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-edit text-orange-600"></i>
                            </div>
                            <div>
                                <h3 class="font-bold text-gray-800">Form Edit Kategori</h3>
                                <p class="text-sm text-gray-500">Perbarui informasi kategori di bawah ini</p>
                            </div>
                        </div>
                    </div>

                    <!-- FORM CONTENT -->
                    <div class="p-6">
                        <!-- ERROR MESSAGES -->
                        @if ($errors->any())
                            <div class="mb-6 p-4 bg-orange-50 border-l-4 border-orange-500 rounded-r-lg">
                                <div class="flex items-center">
                                    <i class="fas fa-exclamation-triangle text-orange-500 text-xl mr-3"></i>
                                    <div>
                                        <p class="font-medium text-orange-800">Perhatian!</p>
                                        <ul class="mt-2 text-orange-700 text-sm list-disc list-inside">
                                            @foreach ($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <!-- FORM -->
                        <form action="{{ route('kategori.update', $kategori->ID) }}" method="POST" class="space-y-6">
                            @csrf
                            @method('PUT')

                            <!-- NAMA KATEGORI FIELD -->
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">
                                    Nama Kategori
                                    <span class="text-red-500 ml-1">*</span>
                                </label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fas fa-folder text-gray-400"></i>
                                    </div>
                                    <input type="text"
                                           name="nama"
                                           required
                                           placeholder="Masukkan nama kategori"
                                           value="{{ old('nama', $kategori->nama) }}"
                                           class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent transition">
                                </div>
                                <p class="mt-2 text-xs text-gray-500">
                                    Nama saat ini: <span class="font-medium text-orange-600">{{ $kategori->nama }}</span>
                                </p>
                            </div>

                            <!-- FORM ACTIONS -->
                            <div class="pt-6 border-t border-gray-100">
                                <div class="flex flex-col sm:flex-row gap-3">
                                    <button type="submit"
                                            class="btn-primary text-white px-6 py-3 rounded-lg font-semibold flex items-center justify-center gap-2">
                                        <i class="fas fa-save"></i>
                                        Update Kategori
                                    </button>

                                    <a href="{{ route('kategori.index') }}"
                                       class="btn-secondary px-6 py-3 rounded-lg font-semibold border border-gray-300 text-gray-700 flex items-center justify-center gap-2">
                                        Batal
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- SIDEBAR INFO -->
            <div class="lg:col-span-1">
                <!-- INFO CARD -->
                <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6 mb-6">
                    <div class="flex items-center gap-3 mb-4">
                        <div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-info-circle text-orange-600"></i>
                        </div>
                        <h3 class="font-bold text-gray-800">Informasi Kategori</h3>
                    </div>
                    <div class="space-y-4">
                        <div>
                            <p class="text-sm text-gray-500 mb-1">ID Kategori</p>
                            <p class="font-medium text-gray-800">{{ $kategori->ID }}</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 mb-1">Nama Saat Ini</p>
                            <p class="font-medium text-orange-600 text-lg">{{ $kategori->nama }}</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 mb-1">Status</p>
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-orange-100 text-orange-800">
                                <i class="fas fa-check-circle mr-1"></i>
                                Aktif
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function toggleDropdown() {
            document.getElementById("dropdownMenu").classList.toggle("hidden");
        }

        // Klik luar dropdown → tutup
        window.addEventListener('click', function(e) {
            const dropdown = document.getElementById("dropdownMenu");

            if (!e.target.closest('.relative') && !dropdown.classList.contains('hidden')) {
                dropdown.classList.add("hidden");
            }
        });

        // Auto-focus pada input
        document.addEventListener('DOMContentLoaded', function() {
            const nameInput = document.querySelector('input[name="nama"]');
            if (nameInput) {
                nameInput.focus();
                nameInput.select();
            }
        });
    </script>
</body>
</html>
