<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
     <?php $__env->slot('header', null, []); ?> 
        <h2 class="font-bold text-2xl text-gray-800 leading-tight">
            <?php echo e(__('Kelola Kategori Keuangan')); ?>

        </h2>
     <?php $__env->endSlot(); ?>

    <div class="py-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">
            
            <!-- Success/Error Notifications -->
            <?php if(session('success')): ?>
                <div class="flex items-center gap-3 p-4 bg-emerald-50 border border-emerald-100 text-emerald-800 rounded-xl shadow-sm">
                    <i data-lucide="check-circle" class="w-5 h-5 text-emerald-600"></i>
                    <span class="text-sm font-semibold"><?php echo e(session('success')); ?></span>
                </div>
            <?php endif; ?>

            <?php if(session('error')): ?>
                <div class="flex items-center gap-3 p-4 bg-rose-50 border border-rose-100 text-rose-800 rounded-xl shadow-sm">
                    <i data-lucide="alert-circle" class="w-5 h-5 text-rose-600"></i>
                    <span class="text-sm font-semibold"><?php echo e(session('error')); ?></span>
                </div>
            <?php endif; ?>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- Form Tambah / Edit Kategori (Kolom Kiri 1/3) -->
                <div class="bg-white rounded-2xl shadow-sm border border-gray-150 p-6 self-start space-y-6">
                    <div>
                        <h3 id="form-title" class="text-lg font-bold text-gray-800">Tambah Kategori Baru</h3>
                        <p id="form-desc" class="text-xs text-gray-400 font-medium">Buat kategori baru untuk mengelompokkan pos keuangan keluarga Anda.</p>
                    </div>

                    <form id="category-form" action="<?php echo e(route('categories.store')); ?>" method="POST" class="space-y-4">
                        <?php echo csrf_field(); ?>
                        <div id="method-container"></div>

                        <!-- Nama Kategori -->
                        <div>
                            <label for="name" class="block text-sm font-semibold text-gray-700 mb-2">Nama Kategori</label>
                            <input type="text" name="name" id="name" required placeholder="Contoh: Asuransi" class="w-full rounded-xl border-gray-200 text-sm focus:border-emerald-500 focus:ring-emerald-500 <?php $__errorArgs = ['name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> border-red-300 <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>">
                            <?php $__errorArgs = ['name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                <p class="text-xs text-red-600 mt-1 font-semibold"><?php echo e($message); ?></p>
                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                        </div>

                        <!-- Tipe Kategori -->
                        <div>
                            <label for="type" class="block text-sm font-semibold text-gray-700 mb-2">Tipe</label>
                            <select name="type" id="type" required class="w-full rounded-xl border-gray-200 text-sm focus:border-emerald-500 focus:ring-emerald-500 <?php $__errorArgs = ['type'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> border-red-300 <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>">
                                <option value="pengeluaran">Pengeluaran</option>
                                <option value="pemasukan">Pemasukan</option>
                            </select>
                            <?php $__errorArgs = ['type'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                <p class="text-xs text-red-600 mt-1 font-semibold"><?php echo e($message); ?></p>
                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                        </div>

                        <!-- Pilihan Icon (Radio Grid) -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Pilih Ikon</label>
                            <?php
                                $icons = ['briefcase', 'store', 'trending-up', 'plus-circle', 'coffee', 'shopping-bag', 'car', 'zap', 'graduation-cap', 'heart', 'film', 'minus-circle'];
                            ?>
                            <div class="grid grid-cols-4 gap-2">
                                <?php $__currentLoopData = $icons; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $icon): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <label class="relative flex items-center justify-center p-3 border border-gray-200 rounded-xl cursor-pointer hover:bg-gray-50 focus-within:ring-2 focus-within:ring-emerald-500 transition">
                                        <input type="radio" name="icon" value="<?php echo e($icon); ?>" class="sr-only" required <?php echo e($loop->first ? 'checked' : ''); ?>>
                                        <div class="icon-preview text-gray-500">
                                            <i data-lucide="<?php echo e($icon); ?>" class="w-5 h-5"></i>
                                        </div>
                                    </label>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </div>
                        </div>

                        <!-- Pilihan Warna (Radio Grid) -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Pilih Warna Aksen</label>
                            <?php
                                $colors = [
                                    'emerald' => 'bg-emerald-500',
                                    'teal' => 'bg-teal-500',
                                    'cyan' => 'bg-cyan-500',
                                    'orange' => 'bg-orange-500',
                                    'pink' => 'bg-pink-500',
                                    'blue' => 'bg-blue-500',
                                    'yellow' => 'bg-yellow-500',
                                    'indigo' => 'bg-indigo-500',
                                    'red' => 'bg-red-500',
                                    'purple' => 'bg-purple-500',
                                    'slate' => 'bg-slate-500',
                                ];
                            ?>
                            <div class="grid grid-cols-6 gap-2">
                                <?php $__currentLoopData = $colors; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $colorName => $bgClass): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <label class="relative flex items-center justify-center p-1 rounded-full cursor-pointer transition ring-2 ring-transparent hover:ring-gray-300">
                                        <input type="radio" name="color" value="<?php echo e($colorName); ?>" class="sr-only" required <?php echo e($loop->first ? 'checked' : ''); ?>>
                                        <span class="w-6 h-6 rounded-full <?php echo e($bgClass); ?> block shadow-sm"></span>
                                    </label>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </div>
                        </div>

                        <!-- Tombol Submit & Cancel -->
                        <div class="flex flex-col gap-2 pt-4 border-t border-gray-100">
                            <button type="submit" id="submit-btn" class="w-full py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-semibold rounded-xl shadow-md transition duration-150 flex items-center justify-center gap-1.5">
                                <i data-lucide="plus" class="w-4 h-4"></i>
                                <span id="submit-btn-text">Tambah Kategori</span>
                            </button>
                            <button type="button" id="cancel-btn" onclick="resetForm()" class="hidden w-full py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-semibold rounded-xl transition duration-150">
                                Batal
                            </button>
                        </div>
                    </form>
                </div>

                <!-- Grid Kategori Terdaftar (Kolom Kanan 2/3) -->
                <div class="bg-white rounded-2xl shadow-sm border border-gray-150 p-6 lg:col-span-2 space-y-6">
                    <div>
                        <h3 class="text-lg font-bold text-gray-800">Daftar Kategori</h3>
                        <p class="text-xs text-gray-400 font-medium">Klik tombol edit untuk mengubah kategori, atau hapus kategori yang tidak digunakan.</p>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <!-- Pemasukan -->
                        <div class="space-y-3">
                            <h4 class="text-xs font-bold uppercase tracking-wider text-emerald-600 bg-emerald-50 px-3 py-1.5 rounded-lg flex items-center gap-1.5 self-start w-fit">
                                <i data-lucide="trending-up" class="w-4 h-4"></i>
                                Pemasukan
                            </h4>
                            
                            <div class="space-y-2">
                                <?php $__empty_1 = true; $__currentLoopData = $categories->where('type', 'pemasukan'); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                    <?php
                                        $bgColors = [
                                            'emerald' => 'bg-emerald-50 text-emerald-600',
                                            'teal' => 'bg-teal-50 text-teal-600',
                                            'cyan' => 'bg-cyan-50 text-cyan-600',
                                            'orange' => 'bg-orange-50 text-orange-600',
                                            'pink' => 'bg-pink-50 text-pink-600',
                                            'blue' => 'bg-blue-50 text-blue-600',
                                            'yellow' => 'bg-yellow-50 text-yellow-600',
                                            'indigo' => 'bg-indigo-50 text-indigo-600',
                                            'red' => 'bg-red-50 text-red-600',
                                            'purple' => 'bg-purple-50 text-purple-600',
                                            'slate' => 'bg-slate-50 text-slate-600',
                                        ];
                                        $colorClass = $bgColors[$cat->color] ?? 'bg-gray-50 text-gray-600';
                                    ?>
                                    <div class="flex items-center justify-between p-3.5 border border-gray-100 rounded-2xl hover:bg-gray-50 transition">
                                        <div class="flex items-center gap-3">
                                            <div class="p-2.5 rounded-xl <?php echo e($colorClass); ?>">
                                                <i data-lucide="<?php echo e($cat->icon); ?>" class="w-5 h-5"></i>
                                            </div>
                                            <span class="font-bold text-gray-800 text-sm"><?php echo e($cat->name); ?></span>
                                        </div>
                                        <div class="flex items-center gap-1">
                                            <button onclick="editCategory(<?php echo e(json_encode($cat)); ?>)" class="p-1.5 text-blue-600 hover:bg-blue-50 rounded-xl transition" title="Edit Kategori">
                                                <i data-lucide="edit-2" class="w-4 h-4"></i>
                                            </button>
                                            <form action="<?php echo e(route('categories.destroy', $cat->id)); ?>" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus kategori ini?')" class="inline">
                                                <?php echo csrf_field(); ?>
                                                <?php echo method_field('DELETE'); ?>
                                                <button type="submit" class="p-1.5 text-red-600 hover:bg-red-50 rounded-xl transition" title="Hapus Kategori">
                                                    <i data-lucide="trash-2" class="w-4 h-4"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                    <p class="text-sm text-gray-400 italic">Belum ada kategori pemasukan.</p>
                                <?php endif; ?>
                            </div>
                        </div>

                        <!-- Pengeluaran -->
                        <div class="space-y-3">
                            <h4 class="text-xs font-bold uppercase tracking-wider text-rose-600 bg-rose-50 px-3 py-1.5 rounded-lg flex items-center gap-1.5 self-start w-fit">
                                <i data-lucide="trending-down" class="w-4 h-4"></i>
                                Pengeluaran
                            </h4>
                            
                            <div class="space-y-2">
                                <?php $__empty_1 = true; $__currentLoopData = $categories->where('type', 'pengeluaran'); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                    <?php
                                        $bgColors = [
                                            'emerald' => 'bg-emerald-50 text-emerald-600',
                                            'teal' => 'bg-teal-50 text-teal-600',
                                            'cyan' => 'bg-cyan-50 text-cyan-600',
                                            'orange' => 'bg-orange-50 text-orange-600',
                                            'pink' => 'bg-pink-50 text-pink-600',
                                            'blue' => 'bg-blue-50 text-blue-600',
                                            'yellow' => 'bg-yellow-50 text-yellow-600',
                                            'indigo' => 'bg-indigo-50 text-indigo-600',
                                            'red' => 'bg-red-50 text-red-600',
                                            'purple' => 'bg-purple-50 text-purple-600',
                                            'slate' => 'bg-slate-50 text-slate-600',
                                        ];
                                        $colorClass = $bgColors[$cat->color] ?? 'bg-gray-50 text-gray-600';
                                    ?>
                                    <div class="flex items-center justify-between p-3.5 border border-gray-100 rounded-2xl hover:bg-gray-50 transition">
                                        <div class="flex items-center gap-3">
                                            <div class="p-2.5 rounded-xl <?php echo e($colorClass); ?>">
                                                <i data-lucide="<?php echo e($cat->icon); ?>" class="w-5 h-5"></i>
                                            </div>
                                            <span class="font-bold text-gray-800 text-sm"><?php echo e($cat->name); ?></span>
                                        </div>
                                        <div class="flex items-center gap-1">
                                            <button onclick="editCategory(<?php echo e(json_encode($cat)); ?>)" class="p-1.5 text-blue-600 hover:bg-blue-50 rounded-xl transition" title="Edit Kategori">
                                                <i data-lucide="edit-2" class="w-4 h-4"></i>
                                            </button>
                                            <form action="<?php echo e(route('categories.destroy', $cat->id)); ?>" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus kategori ini?')" class="inline">
                                                <?php echo csrf_field(); ?>
                                                <?php echo method_field('DELETE'); ?>
                                                <button type="submit" class="p-1.5 text-red-600 hover:bg-red-50 rounded-xl transition" title="Hapus Kategori">
                                                    <i data-lucide="trash-2" class="w-4 h-4"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                    <p class="text-sm text-gray-400 italic">Belum ada kategori pengeluaran.</p>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- Script Kategori Form Switcher -->
    <script>
        const storeAction = "<?php echo e(route('categories.store')); ?>";
        const formTitle = document.getElementById('form-title');
        const formDesc = document.getElementById('form-desc');
        const categoryForm = document.getElementById('category-form');
        const methodContainer = document.getElementById('method-container');
        const submitBtnText = document.getElementById('submit-btn-text');
        const cancelBtn = document.getElementById('cancel-btn');
        const nameInput = document.getElementById('name');
        const typeSelect = document.getElementById('type');

        // Style selected radio inputs
        function initRadioStyling() {
            document.querySelectorAll('input[type="radio"]').forEach(radio => {
                const parent = radio.parentElement;
                
                // Add click listener
                radio.addEventListener('change', function() {
                    const groupName = this.name;
                    document.querySelectorAll(`input[name="${groupName}"]`).forEach(sibling => {
                        const sibParent = sibling.parentElement;
                        sibParent.classList.remove('ring-emerald-500', 'border-emerald-500', 'bg-emerald-50');
                        if (groupName === 'color') {
                            sibParent.classList.remove('ring-emerald-500');
                            sibParent.classList.add('ring-transparent');
                        }
                    });

                    if (groupName === 'icon') {
                        parent.classList.add('ring-2', 'ring-emerald-500', 'border-emerald-500', 'bg-emerald-50');
                    } else if (groupName === 'color') {
                        parent.classList.remove('ring-transparent');
                        parent.classList.add('ring-emerald-500');
                    }
                });

                // Apply initial checked state styling
                if (radio.checked) {
                    if (radio.name === 'icon') {
                        parent.classList.add('ring-2', 'ring-emerald-500', 'border-emerald-500', 'bg-emerald-50');
                    } else if (radio.name === 'color') {
                        parent.classList.remove('ring-transparent');
                        parent.classList.add('ring-emerald-500');
                    }
                }
            });
        }

        document.addEventListener('DOMContentLoaded', initRadioStyling);

        function editCategory(category) {
            // Update Title & Desc
            formTitle.textContent = "Ubah Kategori";
            formDesc.textContent = "Ubah detail dari kategori " + category.name;
            
            // Update Form Action & Method
            categoryForm.action = "/categories/" + category.id;
            methodContainer.innerHTML = '<input type="hidden" name="_method" value="PUT">';
            
            // Populate Fields
            nameInput.value = category.name;
            typeSelect.value = category.type;

            // Check specific Radio Icon
            const iconRadio = document.querySelector(`input[name="icon"][value="${category.icon}"]`);
            if (iconRadio) {
                iconRadio.checked = true;
                // trigger change style
                iconRadio.dispatchEvent(new Event('change'));
            }

            // Check specific Radio Color
            const colorRadio = document.querySelector(`input[name="color"][value="${category.color}"]`);
            if (colorRadio) {
                colorRadio.checked = true;
                // trigger change style
                colorRadio.dispatchEvent(new Event('change'));
            }

            // Show Cancel button & change submit text
            submitBtnText.textContent = "Simpan Perubahan";
            cancelBtn.classList.remove('hidden');

            // Scroll to form (optional but helpful on mobile)
            categoryForm.scrollIntoView({ behavior: 'smooth' });
        }

        function resetForm() {
            formTitle.textContent = "Tambah Kategori Baru";
            formDesc.textContent = "Buat kategori baru untuk mengelompokkan pos keuangan keluarga Anda.";
            
            categoryForm.action = storeAction;
            methodContainer.innerHTML = '';
            
            nameInput.value = '';
            typeSelect.value = 'pengeluaran';

            // Select first icon & color by default
            const firstIcon = document.querySelector('input[name="icon"]');
            if (firstIcon) {
                firstIcon.checked = true;
                firstIcon.dispatchEvent(new Event('change'));
            }
            const firstColor = document.querySelector('input[name="color"]');
            if (firstColor) {
                firstColor.checked = true;
                firstColor.dispatchEvent(new Event('change'));
            }

            submitBtnText.textContent = "Tambah Kategori";
            cancelBtn.classList.add('hidden');
        }
    </script>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php /**PATH D:\Software\laragon\www\report-outincome\resources\views\categories\index.blade.php ENDPATH**/ ?>