@extends('layouts.app')

@section('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="{{ route('admin.dashboard') }}" class="text-[#d4af37] hover:text-[#e8c547] flex items-center gap-2 font-bold">
                ← {{ 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 {{ app()->getLocale() == 'ar' ? 'flex-row-reverse' : '' }}">
                    <div class="{{ app()->getLocale() == 'ar' ? 'text-right' : 'text-left' }}">
                        <h2 class="text-3xl font-bold text-white">
                            {{ app()->getLocale() == 'ar' ? '📂 أنواع المصروفات' : '📂 Expense Categories' }}
                        </h2>
                        <p class="text-white/70 text-sm mt-1">
                            {{ 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 {{ app()->getLocale() == 'ar' ? 'ml-8' : 'mr-8' }}">
                        {{ 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">{{ app()->getLocale() == 'ar' ? 'الفئة' : 'Category' }}</th>
                            <th class="px-8 py-4 text-left text-xs font-bold text-[#d4af37] uppercase">{{ app()->getLocale() == 'ar' ? 'النوع' : 'Type' }}</th>
                            <th class="px-8 py-4 text-left text-xs font-bold text-[#d4af37] uppercase">{{ app()->getLocale() == 'ar' ? 'الحالة' : 'Status' }}</th>
                            <th class="px-8 py-4 text-center text-xs font-bold text-[#d4af37] uppercase">{{ app()->getLocale() == 'ar' ? 'الإجراءات' : 'Actions' }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-800">
                        @forelse($categories as $category)
                            <tr class="hover:bg-black/30 transition">
                                <td class="px-8 py-4">
                                    <div class="font-bold text-white">
                                        {{ 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
                                        {{ $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') }}">
                                        {{ $category->type }}
                                    </span>
                                </td>
                                <td class="px-8 py-4">
                                    <span class="text-xs px-3 py-1 rounded-full
                                        {{ $category->is_active ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400' }}">
                                        {{ $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({{ $category->id }}, '{{ $category->name_ar }}', '{{ $category->name_en }}', '{{ $category->type }}', {{ $category->is_active ? 'true' : 'false' }})" class="text-blue-400 hover:text-blue-300 text-sm font-bold">
                                        {{ app()->getLocale() == 'ar' ? '✏️ تعديل' : '✏️ Edit' }}
                                    </button>
                                    <form action="{{ route('admin.expense-categories.destroy', $category->id) }}" method="POST" class="inline">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="text-red-400 hover:text-red-300 text-sm font-bold" onclick="return confirm('{{ app()->getLocale() == 'ar' ? 'هل تريد حذف هذه الفئة؟' : 'Are you sure?' }}')">
                                            {{ app()->getLocale() == 'ar' ? '🗑️ حذف' : '🗑️ Delete' }}
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="px-8 py-8 text-center text-gray-400">
                                    {{ app()->getLocale() == 'ar' ? 'لا توجد فئات' : 'No categories found' }}
                                </td>
                            </tr>
                        @endforelse
                    </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]">
                {{ 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="{{ route('admin.expense-categories.store') }}" method="POST" class="space-y-4">
            @csrf
            <div>
                <label class="block text-sm text-gray-400 mb-2">{{ 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">{{ 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">{{ 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="">{{ app()->getLocale() == 'ar' ? 'اختر النوع' : 'Select Type' }}</option>
                    <option value="vehicle">{{ app()->getLocale() == 'ar' ? 'مصروفات السيارة' : 'Vehicle' }}</option>
                    <option value="contract">{{ app()->getLocale() == 'ar' ? 'مصروفات العقد' : 'Contract' }}</option>
                    <option value="general">{{ 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">{{ 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">
                    {{ 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">
                    {{ 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]">
                {{ 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">
            @csrf
            @method('PATCH')
            <div>
                <label class="block text-sm text-gray-400 mb-2">{{ 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">{{ 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">{{ 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">{{ app()->getLocale() == 'ar' ? 'مصروفات السيارة' : 'Vehicle' }}</option>
                    <option value="contract">{{ app()->getLocale() == 'ar' ? 'مصروفات العقد' : 'Contract' }}</option>
                    <option value="general">{{ 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">{{ 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">
                    {{ 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">
                    {{ 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>

@endsection