<?php $__env->startSection('content'); ?>

<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <!-- Back Button -->
        <div class="mb-6">
            <a href="<?php echo e(route('admin.dashboard')); ?>" class="text-[#d4af37] hover:text-[#e8c547] flex items-center gap-2 font-bold">
                ← <?php echo e(app()->getLocale() == 'ar' ? 'العودة' : 'Back'); ?>

            </a>
        </div>

        <div class="bg-[#111] border border-gray-800 rounded-2xl shadow-2xl overflow-hidden">
            <!-- Header -->
            <div class="bg-gradient-to-r from-[#d4af37] to-[#8b7500] px-8 py-6">
                <div class="flex items-center justify-between <?php echo e(app()->getLocale() == 'ar' ? 'flex-row-reverse' : ''); ?>">
                    <div class="<?php echo e(app()->getLocale() == 'ar' ? 'text-right' : 'text-left'); ?>">
                        <h2 class="text-3xl font-bold text-white">
                            <?php echo e(app()->getLocale() == 'ar' ? '📂 أنواع المصروفات' : '📂 Expense Categories'); ?>

                        </h2>
                        <p class="text-white/70 text-sm mt-1">
                            <?php echo e(app()->getLocale() == 'ar' ? 'إدارة فئات المصروفات المختلفة' : 'Manage expense types'); ?>

                        </p>
                    </div>
                    <button onclick="openAddCategoryModal()" class="px-6 py-2.5 bg-[#d4af37] text-black font-bold rounded-lg hover:bg-[#e8c547] transition text-sm <?php echo e(app()->getLocale() == 'ar' ? 'ml-8' : 'mr-8'); ?>">
                        <?php echo e(app()->getLocale() == 'ar' ? '➕ إضافة فئة جديدة' : '➕ Add Category'); ?>

                    </button>
                </div>
            </div>

            <!-- Categories Table -->
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-black/50 border-b border-gray-700">
                        <tr>
                            <th class="px-8 py-4 text-left text-xs font-bold text-[#d4af37] uppercase"><?php echo e(app()->getLocale() == 'ar' ? 'الفئة' : 'Category'); ?></th>
                            <th class="px-8 py-4 text-left text-xs font-bold text-[#d4af37] uppercase"><?php echo e(app()->getLocale() == 'ar' ? 'النوع' : 'Type'); ?></th>
                            <th class="px-8 py-4 text-left text-xs font-bold text-[#d4af37] uppercase"><?php echo e(app()->getLocale() == 'ar' ? 'الحالة' : 'Status'); ?></th>
                            <th class="px-8 py-4 text-center text-xs font-bold text-[#d4af37] uppercase"><?php echo e(app()->getLocale() == 'ar' ? 'الإجراءات' : 'Actions'); ?></th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-800">
                        <?php $__empty_1 = true; $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                            <tr class="hover:bg-black/30 transition">
                                <td class="px-8 py-4">
                                    <div class="font-bold text-white">
                                        <?php echo e(app()->getLocale() == 'ar' ? $category->name_ar : $category->name_en); ?>

                                    </div>
                                </td>
                                <td class="px-8 py-4">
                                    <span class="text-xs px-3 py-1 rounded-full
                                        <?php echo e($category->type == 'vehicle' ? 'bg-blue-500/20 text-blue-400' : ($category->type == 'contract' ? 'bg-green-500/20 text-green-400' : 'bg-purple-500/20 text-purple-400')); ?>">
                                        <?php echo e($category->type); ?>

                                    </span>
                                </td>
                                <td class="px-8 py-4">
                                    <span class="text-xs px-3 py-1 rounded-full
                                        <?php echo e($category->is_active ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'); ?>">
                                        <?php echo e($category->is_active ? (app()->getLocale() == 'ar' ? '✓ نشط' : '✓ Active') : (app()->getLocale() == 'ar' ? '✕ معطل' : '✕ Inactive')); ?>

                                    </span>
                                </td>
                                <td class="px-8 py-4 text-center space-x-2">
                                    <button onclick="openEditCategoryModal(<?php echo e($category->id); ?>, '<?php echo e($category->name_ar); ?>', '<?php echo e($category->name_en); ?>', '<?php echo e($category->type); ?>', <?php echo e($category->is_active ? 'true' : 'false'); ?>)" class="text-blue-400 hover:text-blue-300 text-sm font-bold">
                                        <?php echo e(app()->getLocale() == 'ar' ? '✏️ تعديل' : '✏️ Edit'); ?>

                                    </button>
                                    <form action="<?php echo e(route('admin.expense-categories.destroy', $category->id)); ?>" method="POST" class="inline">
                                        <?php echo csrf_field(); ?> <?php echo method_field('DELETE'); ?>
                                        <button type="submit" class="text-red-400 hover:text-red-300 text-sm font-bold" onclick="return confirm('<?php echo e(app()->getLocale() == 'ar' ? 'هل تريد حذف هذه الفئة؟' : 'Are you sure?'); ?>')">
                                            <?php echo e(app()->getLocale() == 'ar' ? '🗑️ حذف' : '🗑️ Delete'); ?>

                                        </button>
                                    </form>
                                </td>
                            </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                            <tr>
                                <td colspan="4" class="px-8 py-8 text-center text-gray-400">
                                    <?php echo e(app()->getLocale() == 'ar' ? 'لا توجد فئات' : 'No categories found'); ?>

                                </td>
                            </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Add Category Modal -->
<div id="addCategoryModal" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
    <div class="bg-[#111] border-2 border-[#d4af37] rounded-2xl p-6 shadow-2xl" style="width: 850px; max-width: 100%;">
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-xl font-bold text-[#d4af37]">
                <?php echo e(app()->getLocale() == 'ar' ? '➕ إضافة فئة جديدة' : '➕ Add New Category'); ?>

            </h2>
            <button onclick="closeAddCategoryModal()" class="text-gray-400 hover:text-white text-2xl">×</button>
        </div>

        <form id="addCategoryForm" action="<?php echo e(route('admin.expense-categories.store')); ?>" method="POST" class="space-y-4">
            <?php echo csrf_field(); ?>
            <div>
                <label class="block text-sm text-gray-400 mb-2"><?php echo e(app()->getLocale() == 'ar' ? 'الاسم (عربي)' : 'Name (Arabic)'); ?> *</label>
                <input type="text" name="name_ar" required class="w-full bg-black border border-gray-700 rounded-lg px-4 py-2 text-white focus:border-[#d4af37] outline-none">
            </div>
            <div>
                <label class="block text-sm text-gray-400 mb-2"><?php echo e(app()->getLocale() == 'ar' ? 'الاسم (إنجليزي)' : 'Name (English)'); ?> *</label>
                <input type="text" name="name_en" required class="w-full bg-black border border-gray-700 rounded-lg px-4 py-2 text-white focus:border-[#d4af37] outline-none">
            </div>
            <div>
                <label class="block text-sm text-gray-400 mb-2"><?php echo e(app()->getLocale() == 'ar' ? 'النوع' : 'Type'); ?> *</label>
                <select name="type" required class="w-full bg-black border border-gray-700 rounded-lg px-4 py-2 text-white focus:border-[#d4af37] outline-none">
                    <option value=""><?php echo e(app()->getLocale() == 'ar' ? 'اختر النوع' : 'Select Type'); ?></option>
                    <option value="vehicle"><?php echo e(app()->getLocale() == 'ar' ? 'مصروفات السيارة' : 'Vehicle'); ?></option>
                    <option value="contract"><?php echo e(app()->getLocale() == 'ar' ? 'مصروفات العقد' : 'Contract'); ?></option>
                    <option value="general"><?php echo e(app()->getLocale() == 'ar' ? 'مصروفات عامة' : 'General'); ?></option>
                </select>
            </div>
            <div class="flex items-center">
                <input type="checkbox" name="is_active" value="1" checked class="w-4 h-4 text-[#d4af37] rounded">
                <label class="ml-2 text-sm text-gray-400"><?php echo e(app()->getLocale() == 'ar' ? 'نشط' : 'Active'); ?></label>
            </div>
            <div class="flex gap-2 pt-4">
                <button type="submit" class="flex-1 px-4 py-2 bg-[#d4af37] text-black font-bold rounded-lg hover:bg-[#e8c547] transition">
                    <?php echo e(app()->getLocale() == 'ar' ? '✅ إضافة' : '✅ Add'); ?>

                </button>
                <button type="button" onclick="closeAddCategoryModal()" class="flex-1 px-4 py-2 bg-gray-700 text-white font-bold rounded-lg hover:bg-gray-600 transition">
                    <?php echo e(app()->getLocale() == 'ar' ? '❌ إلغاء' : '❌ Cancel'); ?>

                </button>
            </div>
        </form>
    </div>
</div>

<!-- Edit Category Modal -->
<div id="editCategoryModal" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
    <div class="bg-[#111] border-2 border-[#d4af37] rounded-2xl p-6 shadow-2xl" style="width: 850px; max-width: 100%;">
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-xl font-bold text-[#d4af37]">
                <?php echo e(app()->getLocale() == 'ar' ? '✏️ تعديل الفئة' : '✏️ Edit Category'); ?>

            </h2>
            <button onclick="closeEditCategoryModal()" class="text-gray-400 hover:text-white text-2xl">×</button>
        </div>

        <form id="editCategoryForm" method="POST" class="space-y-4">
            <?php echo csrf_field(); ?>
            <?php echo method_field('PATCH'); ?>
            <div>
                <label class="block text-sm text-gray-400 mb-2"><?php echo e(app()->getLocale() == 'ar' ? 'الاسم (عربي)' : 'Name (Arabic)'); ?> *</label>
                <input type="text" name="name_ar" id="edit_name_ar" required class="w-full bg-black border border-gray-700 rounded-lg px-4 py-2 text-white focus:border-[#d4af37] outline-none">
            </div>
            <div>
                <label class="block text-sm text-gray-400 mb-2"><?php echo e(app()->getLocale() == 'ar' ? 'الاسم (إنجليزي)' : 'Name (English)'); ?> *</label>
                <input type="text" name="name_en" id="edit_name_en" required class="w-full bg-black border border-gray-700 rounded-lg px-4 py-2 text-white focus:border-[#d4af37] outline-none">
            </div>
            <div>
                <label class="block text-sm text-gray-400 mb-2"><?php echo e(app()->getLocale() == 'ar' ? 'النوع' : 'Type'); ?> *</label>
                <select name="type" id="edit_type" required class="w-full bg-black border border-gray-700 rounded-lg px-4 py-2 text-white focus:border-[#d4af37] outline-none">
                    <option value="vehicle"><?php echo e(app()->getLocale() == 'ar' ? 'مصروفات السيارة' : 'Vehicle'); ?></option>
                    <option value="contract"><?php echo e(app()->getLocale() == 'ar' ? 'مصروفات العقد' : 'Contract'); ?></option>
                    <option value="general"><?php echo e(app()->getLocale() == 'ar' ? 'مصروفات عامة' : 'General'); ?></option>
                </select>
            </div>
            <div class="flex items-center">
                <input type="checkbox" name="is_active" id="edit_is_active" value="1" class="w-4 h-4 text-[#d4af37] rounded">
                <label class="ml-2 text-sm text-gray-400"><?php echo e(app()->getLocale() == 'ar' ? 'نشط' : 'Active'); ?></label>
            </div>
            <div class="flex gap-2 pt-4">
                <button type="submit" class="flex-1 px-4 py-2 bg-[#d4af37] text-black font-bold rounded-lg hover:bg-[#e8c547] transition">
                    <?php echo e(app()->getLocale() == 'ar' ? '✅ تحديث' : '✅ Update'); ?>

                </button>
                <button type="button" onclick="closeEditCategoryModal()" class="flex-1 px-4 py-2 bg-gray-700 text-white font-bold rounded-lg hover:bg-gray-600 transition">
                    <?php echo e(app()->getLocale() == 'ar' ? '❌ إلغاء' : '❌ Cancel'); ?>

                </button>
            </div>
        </form>
    </div>
</div>

<script>
function openAddCategoryModal() {
    document.getElementById('addCategoryModal').classList.remove('hidden');
}

function closeAddCategoryModal() {
    document.getElementById('addCategoryModal').classList.add('hidden');
}

function openEditCategoryModal(id, name_ar, name_en, type, is_active) {
    document.getElementById('edit_name_ar').value = name_ar;
    document.getElementById('edit_name_en').value = name_en;
    document.getElementById('edit_type').value = type;
    document.getElementById('edit_is_active').checked = is_active;
    
    const form = document.getElementById('editCategoryForm');
    form.action = `/admin/expense-categories/${id}`;
    
    document.getElementById('editCategoryModal').classList.remove('hidden');
}

function closeEditCategoryModal() {
    document.getElementById('editCategoryModal').classList.add('hidden');
}

document.getElementById('addCategoryModal')?.addEventListener('click', function(e) {
    if (e.target === this) closeAddCategoryModal();
});

document.getElementById('editCategoryModal')?.addEventListener('click', function(e) {
    if (e.target === this) closeEditCategoryModal();
});
</script>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\xampp\htdocs\tq cars\resources\views/admin/rentals/expenses/categories/index.blade.php ENDPATH**/ ?>