<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Edit Kategori - Glow Beauty</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&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Poppins', '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: #f472b6;
            box-shadow: 0 0 0 3px rgba(244, 114, 182, 0.1);
        }

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

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(244, 114, 182, 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: #fef2f8;
            color: #ec489a;
        }

        .active-nav {
            background-color: #fef2f8;
            color: #ec489a;
            font-weight: 600;
        }

        .badge-pink {
            background: linear-gradient(135deg, #f9a8d4 0%, #f472b6 100%);
            color: white;
        }

        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(244, 114, 182, 0.4); }
            70% { box-shadow: 0 0 0 10px rgba(244, 114, 182, 0); }
            100% { box-shadow: 0 0 0 0 rgba(244, 114, 182, 0); }
        }
        
        .bg-gradient-pink {
            background: linear-gradient(135deg, #fdf2f8 0%, #fff1f3 100%);
        }
        
        .border-pink-light {
            border-color: #fbcfe8;
        }
    </style>
</head>

<body class="bg-gradient-pink min-h-screen">


    <!-- ========== KONTEN UTAMA ========== -->
    <div class="p-6">
        <!-- HEADER EDIT KATEGORI -->
        <div class="relative mb-8 bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 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-pink-100">Memperbarui informasi kategori skincare <span class="font-semibold"><?php echo e($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-pink-100 overflow-hidden form-card">
                    <!-- FORM HEADER -->
                    <div class="px-6 py-4 border-b border-pink-100 bg-gradient-to-r from-pink-50 to-white">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-pink-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-edit text-pink-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 skincare di bawah ini</p>
                            </div>
                        </div>
                    </div>

                    <!-- FORM CONTENT -->
                    <div class="p-6">
                        <!-- ERROR MESSAGES -->
                        <?php if($errors->any()): ?>
                            <div class="mb-6 p-4 bg-pink-50 border-l-4 border-pink-500 rounded-r-lg">
                                <div class="flex items-center">
                                    <i class="fas fa-exclamation-triangle text-pink-500 text-xl mr-3"></i>
                                    <div>
                                        <p class="font-medium text-pink-800">Perhatian!</p>
                                        <ul class="mt-2 text-pink-700 text-sm list-disc list-inside">
                                            <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                <li><?php echo e($error); ?></li>
                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        <?php endif; ?>

                        <!-- FORM -->
                        <form action="<?php echo e(route('kategori.update', $kategori->ID)); ?>" method="POST" class="space-y-6">
                            <?php echo csrf_field(); ?>
                            <?php echo method_field('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-pink-400"></i>
                                    </div>
                                    <input type="text"
                                           name="nama"
                                           required
                                           placeholder="Masukkan nama kategori skincare"
                                           value="<?php echo e(old('nama', $kategori->nama)); ?>"
                                           class="w-full pl-10 pr-4 py-3 border border-pink-200 rounded-lg input-focus focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent transition">
                                </div>
                                <p class="mt-2 text-xs text-gray-500">
                                    Nama saat ini: <span class="font-medium text-pink-600"><?php echo e($kategori->nama); ?></span>
                                </p>
                                <p class="mt-1 text-xs text-pink-400">
                                    <i class="fas fa-info-circle mr-1"></i>
                                    Contoh: Face Wash, Moisturizer, Serum, Sunscreen, dll.
                                </p>
                            </div>

                            <!-- FORM ACTIONS -->
                            <div class="pt-6 border-t border-pink-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="<?php echo e(route('kategori.index')); ?>"
                                       class="btn-secondary px-6 py-3 rounded-lg font-semibold border border-pink-200 text-gray-700 flex items-center justify-center gap-2 hover:bg-pink-50 transition">
                                        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-pink-100 p-6 mb-6">
                    <div class="flex items-center gap-3 mb-4">
                        <div class="w-10 h-10 bg-pink-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-info-circle text-pink-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"><?php echo e($kategori->ID); ?></p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 mb-1">Nama Saat Ini</p>
                            <p class="font-medium text-pink-600 text-lg"><?php echo e($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-pink-100 text-pink-800">
                                <i class="fas fa-check-circle mr-1"></i>
                                Aktif
                            </span>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 mb-1">Tanggal Dibuat</p>
                            <p class="text-sm text-gray-600"><?php echo e(\Carbon\Carbon::parse($kategori->created_at)->format('d M Y H:i')); ?></p>
                        </div>
                    </div>
                </div>
                
                <!-- TIPS CARD -->
                <div class="bg-pink-50 rounded-xl border border-pink-200 p-5">
                    <div class="flex items-center gap-2 mb-3">
                        <i class="fas fa-lightbulb text-pink-500"></i>
                        <h4 class="font-semibold text-gray-800 text-sm">Tips Mengedit Kategori</h4>
                    </div>
                    <ul class="space-y-2 text-xs text-gray-600">
                        <li class="flex gap-2">
                            <i class="fas fa-check-circle text-pink-400 mt-0.5"></i>
                            Pastikan nama kategori masih relevan dengan produk
                        </li>
                        <li class="flex gap-2">
                            <i class="fas fa-check-circle text-pink-400 mt-0.5"></i>
                            Perubahan nama akan mempengaruhi semua produk terkait
                        </li>
                        <li class="flex gap-2">
                            <i class="fas fa-check-circle text-pink-400 mt-0.5"></i>
                            Gunakan nama yang mudah dipahami pelanggan
                        </li>
                    </ul>
                </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 && !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><?php /**PATH C:\laragon\www\ecommerce\resources\views/kategori/edit.blade.php ENDPATH**/ ?>