@extends('layouts.admin')

@section('title', 'Categories Management')

@section('content')
<div class="space-y-8" 
     x-data="{ addModalOpen: false, editModalOpen: false }"
     @open-edit-category.window="editModalOpen = true"
     @close-edit-category.window="editModalOpen = false">
    
    <!-- Page Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-black text-slate-900 tracking-tight">Categories Management</h1>
            <p class="text-xs text-gray-500 font-medium">Organize product categories, sub-categories, and descriptions.</p>
        </div>
        <button @click="addModalOpen = true; clearCategoryErrors('add');" 
                class="bg-amber-500 hover:bg-amber-600 text-slate-950 font-black px-4 py-2.5 rounded-xl text-xs flex items-center gap-2 shadow-md transition-colors">
            <i class="fa-solid fa-plus text-xs"></i>
            <span>Add New Category</span>
        </button>
    </div>

    <!-- Category Grid Container -->
    <div id="categories-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Dynamic Category Cards via JS -->
    </div>

    <!-- "ADD NEW CATEGORY" MODAL FORM -->
    <div x-show="addModalOpen" 
         x-transition 
         x-cloak 
         class="fixed inset-0 z-50 bg-slate-950/60 backdrop-blur-sm flex items-center justify-center p-4 overflow-y-auto">
        
        <div class="bg-white rounded-2xl shadow-2xl border border-gray-200 w-full max-w-lg overflow-hidden my-8" @click.outside="addModalOpen = false">
            
            <div class="bg-noko-navy text-white px-6 py-4 flex justify-between items-center">
                <h3 class="font-extrabold text-base tracking-wide">Add New Category</h3>
                <button @click="addModalOpen = false" class="text-slate-400 hover:text-white transition-colors">
                    <i class="fa-solid fa-xmark text-lg"></i>
                </button>
            </div>

            <!-- General Alert Error Banner -->
            <div id="add-cat-error-alert" class="hidden mx-6 mt-4 p-3 bg-red-50 border border-red-200 rounded-lg text-xs text-red-700 font-medium"></div>

            <form id="add-category-form" onsubmit="handleCreateCategory(event)" class="p-6 space-y-4 text-xs" enctype="multipart/form-data">
                @csrf

                <div class="space-y-4">
                    <!-- Category Name -->
                    <div class="space-y-1">
                        <label class="font-bold text-slate-800">Category Name *</label>
                        <input type="text" name="name" id="add-cat-name" required placeholder="e.g. Electronics, Handbags, Watches" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-noko-navy">
                        <span class="text-red-500 text-[11px] font-semibold mt-1 block error-msg" id="add-cat-error-name"></span>
                    </div>

                    <!-- Description -->
                    <div class="space-y-1">
                        <label class="font-bold text-slate-800">Description</label>
                        <textarea name="description" id="add-cat-description" rows="3" placeholder="Brief summary of items in this category..." 
                                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-noko-navy"></textarea>
                        <span class="text-red-500 text-[11px] font-semibold mt-1 block error-msg" id="add-cat-error-description"></span>
                    </div>

                    <!-- Sort Order -->
                    <div class="space-y-1">
                        <label class="font-bold text-slate-800">Sort Order</label>
                        <input type="number" name="sort_order" id="add-cat-sort" value="0" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-noko-navy">
                    </div>
                </div>

                <!-- Form Action Buttons -->
                <div class="pt-4 border-t border-gray-100 flex justify-end space-x-3">
                    <button type="button" @click="addModalOpen = false" 
                            class="px-4 py-2 border border-gray-300 rounded-lg font-bold text-gray-600 hover:bg-gray-50 transition-colors">
                        Cancel
                    </button>
                    <button type="submit" id="add-cat-submit-btn" 
                            class="px-5 py-2 bg-amber-500 hover:bg-amber-600 text-slate-950 font-black rounded-lg transition-colors shadow flex items-center gap-2">
                        <span>Save Category</span>
                    </button>
                </div>
            </form>

        </div>

    </div>

    <!-- "EDIT CATEGORY" MODAL FORM -->
    <div x-show="editModalOpen" 
         x-transition 
         x-cloak 
         class="fixed inset-0 z-50 bg-slate-950/60 backdrop-blur-sm flex items-center justify-center p-4 overflow-y-auto">
        
        <div class="bg-white rounded-2xl shadow-2xl border border-gray-200 w-full max-w-lg overflow-hidden my-8" @click.outside="editModalOpen = false">
            
            <div class="bg-noko-navy text-white px-6 py-4 flex justify-between items-center">
                <h3 class="font-extrabold text-base tracking-wide">Edit Category</h3>
                <button @click="editModalOpen = false" class="text-slate-400 hover:text-white transition-colors">
                    <i class="fa-solid fa-xmark text-lg"></i>
                </button>
            </div>

            <!-- General Alert Error Banner -->
            <div id="edit-cat-error-alert" class="hidden mx-6 mt-4 p-3 bg-red-50 border border-red-200 rounded-lg text-xs text-red-700 font-medium"></div>

            <form id="edit-category-form" onsubmit="handleUpdateCategory(event)" class="p-6 space-y-4 text-xs">
                @csrf
                <input type="hidden" name="_method" value="PUT">
                <input type="hidden" name="id" id="edit-cat-id">

                <div class="space-y-4">
                    <!-- Category Name -->
                    <div class="space-y-1">
                        <label class="font-bold text-slate-800">Category Name *</label>
                        <input type="text" name="name" id="edit-cat-name" required 
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-noko-navy">
                        <span class="text-red-500 text-[11px] font-semibold mt-1 block error-msg" id="edit-cat-error-name"></span>
                    </div>

                    <!-- Description -->
                    <div class="space-y-1">
                        <label class="font-bold text-slate-800">Description</label>
                        <textarea name="description" id="edit-cat-description" rows="3" 
                                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-noko-navy"></textarea>
                        <span class="text-red-500 text-[11px] font-semibold mt-1 block error-msg" id="edit-cat-error-description"></span>
                    </div>

                    <!-- Sort Order -->
                    <div class="space-y-1">
                        <label class="font-bold text-slate-800">Sort Order</label>
                        <input type="number" name="sort_order" id="edit-cat-sort" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-noko-navy">
                    </div>
                </div>

                <!-- Form Action Buttons -->
                <div class="pt-4 border-t border-gray-100 flex justify-end space-x-3">
                    <button type="button" @click="editModalOpen = false" 
                            class="px-4 py-2 border border-gray-300 rounded-lg font-bold text-gray-600 hover:bg-gray-50 transition-colors">
                        Cancel
                    </button>
                    <button type="submit" id="edit-cat-submit-btn" 
                            class="px-5 py-2 bg-amber-500 hover:bg-amber-600 text-slate-950 font-black rounded-lg transition-colors shadow flex items-center gap-2">
                        <span>Update Category</span>
                    </button>
                </div>
            </form>

        </div>

    </div>

</div>

@push('scripts')
<script>
    let allCategories = [];

    document.addEventListener('DOMContentLoaded', () => {
        fetchCategories();
    });

    async function fetchCategories() {
        try {
            const response = await fetch('/api/admin/categories', {
                headers: { 
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                credentials: 'same-origin'
            });
            if (!response.ok) return;

            allCategories = await response.json();
            renderCategories(allCategories);

        } catch (err) {
            console.error('Error fetching categories:', err);
        }
    }

    function renderCategories(categories) {
        const container = document.getElementById('categories-container');
        if (!container) return;

        if (categories.length === 0) {
            container.innerHTML = `<div class="col-span-full py-12 text-center text-gray-400 font-medium bg-white rounded-2xl border border-gray-200">No categories found. Click 'Add New Category' to create one.</div>`;
            return;
        }

        container.innerHTML = categories.map(cat => {
            const productCount = cat.products_count !== undefined ? cat.products_count : 0;
            const desc = cat.description || 'No description provided.';
            
            return `
                <div class="p-5 border border-gray-200 rounded-2xl bg-white space-y-4 shadow-sm hover:shadow-md transition-shadow relative flex flex-col justify-between">
                    <div class="space-y-2">
                        <div class="flex justify-between items-start gap-2">
                            <div class="flex items-center space-x-2">
                                <div class="w-8 h-8 rounded-lg bg-amber-500/10 text-amber-600 flex items-center justify-center font-bold">
                                    <i class="fa-solid fa-folder text-sm"></i>
                                </div>
                                <div>
                                    <h3 class="font-extrabold text-slate-900 text-base leading-tight">${cat.name}</h3>
                                    <span class="text-[10px] text-gray-400 font-mono">${cat.slug || ''}</span>
                                </div>
                            </div>
                            <span class="bg-amber-500/15 text-amber-800 font-extrabold px-2.5 py-0.5 rounded-full text-[11px] flex-shrink-0">
                                ${productCount} Products
                            </span>
                        </div>
                        <p class="text-xs text-gray-600 leading-relaxed pt-1">${desc}</p>
                    </div>

                    <div class="pt-3 border-t border-gray-100 flex items-center justify-end space-x-2">
                        <button onclick="openEditCategoryModal(${cat.id})" 
                                class="bg-slate-100 hover:bg-slate-200 text-slate-800 px-3 py-1.5 rounded-lg text-xs font-bold transition-colors">
                            <i class="fa-solid fa-pen-to-square text-[10px] mr-1"></i> Edit
                        </button>
                        <button onclick="deleteCategory(${cat.id})" 
                                class="bg-red-50 hover:bg-red-100 text-red-600 px-3 py-1.5 rounded-lg text-xs font-bold transition-colors">
                            <i class="fa-solid fa-trash text-[10px] mr-1"></i> Delete
                        </button>
                    </div>
                </div>
            `;
        }).join('');
    }

    function clearCategoryErrors(prefix = 'add') {
        document.querySelectorAll('.error-msg').forEach(el => el.textContent = '');
        const alertBox = document.getElementById(`${prefix}-cat-error-alert`);
        if (alertBox) {
            alertBox.textContent = '';
            alertBox.classList.add('hidden');
        }
    }

    async function handleCreateCategory(e) {
        e.preventDefault();
        clearCategoryErrors('add');

        const form = e.target;
        const formData = new FormData(form);

        const submitBtn = document.getElementById('add-cat-submit-btn');
        if (submitBtn) {
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Saving...';
        }

        try {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            
            const res = await fetch('/api/admin/categories', {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrfToken || ''
                },
                credentials: 'same-origin',
                body: formData
            });

            const data = await res.json();

            if (res.ok) {
                alert('Category created successfully!');
                form.reset();
                
                // Close Alpine modal
                if (window.Alpine) {
                    const el = document.querySelector('[x-data]');
                    if (el && el._x_dataStack) {
                        el._x_dataStack[0].addModalOpen = false;
                    }
                }

                await fetchCategories();

            } else if (res.status === 422) {
                if (data.errors) {
                    for (const [field, messages] of Object.entries(data.errors)) {
                        const errorEl = document.getElementById(`add-cat-error-${field}`);
                        if (errorEl) errorEl.textContent = messages.join(' ');
                    }
                }
                const alertBox = document.getElementById('add-cat-error-alert');
                if (alertBox) {
                    alertBox.textContent = data.message || 'Please check the form for validation errors.';
                    alertBox.classList.remove('hidden');
                }
            } else {
                const alertBox = document.getElementById('add-cat-error-alert');
                if (alertBox) {
                    alertBox.textContent = data.message || 'An error occurred while creating the category.';
                    alertBox.classList.remove('hidden');
                }
            }

        } catch (err) {
            console.error('API Error:', err);
        } finally {
            if (submitBtn) {
                submitBtn.disabled = false;
                submitBtn.innerHTML = '<span>Save Category</span>';
            }
        }
    }

    function openEditCategoryModal(id) {
        clearCategoryErrors('edit');
        const cat = allCategories.find(c => Number(c.id) === Number(id));
        if (!cat) return;

        document.getElementById('edit-cat-id').value = cat.id;
        document.getElementById('edit-cat-name').value = cat.name || '';
        document.getElementById('edit-cat-description').value = cat.description || '';
        document.getElementById('edit-cat-sort').value = cat.sort_order || 0;

        window.dispatchEvent(new CustomEvent('open-edit-category'));
    }

    async function handleUpdateCategory(e) {
        e.preventDefault();
        clearCategoryErrors('edit');

        const form = e.target;
        const id = document.getElementById('edit-cat-id').value;
        const formData = new FormData(form);

        const submitBtn = document.getElementById('edit-cat-submit-btn');
        if (submitBtn) {
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Updating...';
        }

        try {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            
            const res = await fetch(`/api/admin/categories/${id}`, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrfToken || ''
                },
                credentials: 'same-origin',
                body: formData
            });

            const data = await res.json();

            if (res.ok) {
                alert('Category updated successfully!');
                window.dispatchEvent(new CustomEvent('close-edit-category'));
                await fetchCategories();

            } else if (res.status === 422) {
                if (data.errors) {
                    for (const [field, messages] of Object.entries(data.errors)) {
                        const errorEl = document.getElementById(`edit-cat-error-${field}`);
                        if (errorEl) errorEl.textContent = messages.join(' ');
                    }
                }
                const alertBox = document.getElementById('edit-cat-error-alert');
                if (alertBox) {
                    alertBox.textContent = data.message || 'Please check the form for validation errors.';
                    alertBox.classList.remove('hidden');
                }
            } else {
                const alertBox = document.getElementById('edit-cat-error-alert');
                if (alertBox) {
                    alertBox.textContent = data.message || 'An error occurred while updating the category.';
                    alertBox.classList.remove('hidden');
                }
            }

        } catch (err) {
            console.error('API Error:', err);
        } finally {
            if (submitBtn) {
                submitBtn.disabled = false;
                submitBtn.innerHTML = '<span>Update Category</span>';
            }
        }
    }

    async function deleteCategory(id) {
        if (!confirm('Are you sure you want to delete this category?')) return;
        
        try {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            const res = await fetch(`/api/admin/categories/${id}`, {
                method: 'DELETE',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrfToken || ''
                },
                credentials: 'same-origin'
            });

            const data = await res.json();

            if (res.ok) {
                alert('Category deleted successfully.');
                await fetchCategories();
            } else {
                alert(data.message || 'Failed to delete category.');
            }
        } catch (err) {
            console.error('Delete error:', err);
        }
    }
</script>
@endpush
@endsection