@extends('layouts.admin')

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

@section('content')
<div class="space-y-8" 
     x-data="{ addModalOpen: false, editModalOpen: false, selectedProductId: null }" 
     @open-edit-modal.window="editModalOpen = true"
     @close-edit-modal.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">Products Management</h1>
            <p class="text-xs text-gray-500 font-medium">Manage catalog items, pricing, inventory stock, and details.</p>
        </div>
        <div class="flex items-center space-x-3">
            <button @click="addModalOpen = true; clearFormErrors('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 Product</span>
            </button>
        </div>
    </div>

    <!-- PRODUCT LIST TABLE CONTAINER -->
    <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden space-y-4">
        
        <!-- Table Header Filter & Search Bar -->
        <div class="p-5 border-b border-gray-100 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div class="flex items-center space-x-3 w-full md:w-auto">
                <div class="relative w-full md:w-64">
                    <span class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                        <i class="fa-solid fa-magnifying-glass text-xs"></i>
                    </span>
                    <input type="text" 
                           id="product-search-input" 
                           placeholder="Search products by title or SKU..." 
                           oninput="filterProducts()" 
                           class="w-full pl-9 pr-4 py-2 text-xs bg-slate-50 border border-gray-200 rounded-lg focus:outline-none focus:border-noko-navy focus:bg-white" />
                </div>
            </div>

            <div class="flex items-center space-x-3 text-xs">
                <span class="text-gray-500 font-medium">Filter:</span>
                <select id="status-filter" onchange="filterProducts()" class="border border-gray-200 rounded-lg px-3 py-1.5 font-semibold text-slate-800 bg-white">
                    <option value="">All Statuses</option>
                    <option value="published">Published</option>
                    <option value="draft">Draft</option>
                </select>
            </div>
        </div>

        <!-- Products Table -->
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs">
                <thead class="bg-slate-50 text-slate-500 font-bold uppercase tracking-wider border-b border-gray-200">
                    <tr>
                        <th class="py-3.5 px-6">Image</th>
                        <th class="py-3.5 px-6">Product Name</th>
                        <th class="py-3.5 px-6">Category</th>
                        <th class="py-3.5 px-6">Price</th>
                        <th class="py-3.5 px-6">Stock</th>
                        <th class="py-3.5 px-6">Status</th>
                        <th class="py-3.5 px-6 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 font-medium text-slate-800" id="products-tbody">
                    <!-- Dynamic Product Rows via JS -->
                </tbody>
            </table>
        </div>

    </div>

    <!-- "ADD NEW PRODUCT" 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-2xl 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 Product</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-general-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-product-form" onsubmit="handleCreateProduct(event)" class="p-6 space-y-4 text-xs" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="status" value="published">

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    
                    <!-- Product Title -->
                    <div class="space-y-1 md:col-span-2">
                        <label class="font-bold text-slate-800">Product Name / Title *</label>
                        <input type="text" name="title" id="add-title" required placeholder="e.g. Sony WH-1000XM5 Wireless Headphones" 
                               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-error-title"></span>
                    </div>

                    <!-- Category -->
                    <div class="space-y-1">
                        <label class="font-bold text-slate-800">Category *</label>
                        <select name="category_id" id="add-category_id" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-noko-navy bg-white category-select">
                            <option value="">Select Category...</option>
                        </select>
                        <span class="text-red-500 text-[11px] font-semibold mt-1 block error-msg" id="add-error-category_id"></span>
                    </div>

                    <!-- SKU -->
                    <div class="space-y-1">
                        <label class="font-bold text-slate-800">SKU Code *</label>
                        <input type="text" name="sku" id="add-sku" required placeholder="e.g. SONY-WH1000XM5" 
                               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-error-sku"></span>
                    </div>

                    <!-- Price (LKR) -->
                    <div class="space-y-1">
                        <label class="font-bold text-slate-800">Selling Price (LKR) *</label>
                        <input type="number" step="0.01" name="price" id="add-price" required placeholder="88750" 
                               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-error-price"></span>
                    </div>

                    <!-- Stock Quantity -->
                    <div class="space-y-1">
                        <label class="font-bold text-slate-800">Stock Quantity *</label>
                        <input type="number" name="stock" id="add-stock" required placeholder="15" 
                               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-error-stock"></span>
                    </div>

                    <!-- Image Upload -->
                    <div class="space-y-1 md:col-span-2">
                        <label class="font-bold text-slate-800">Product Image Upload</label>
                        <input type="file" name="images[]" id="add-images" accept="image/*" multiple
                               class="w-full text-xs text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-xs file:font-bold file:bg-slate-100 file:text-noko-navy hover:file:bg-slate-200">
                        <span class="text-red-500 text-[11px] font-semibold mt-1 block error-msg" id="add-error-images"></span>
                    </div>

                    <!-- Description -->
                    <div class="space-y-1 md:col-span-2">
                        <label class="font-bold text-slate-800">Description</label>
                        <textarea name="description" id="add-description" rows="2" placeholder="Detailed product description..." 
                                  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-error-description"></span>
                    </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-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 Product</span>
                    </button>
                </div>
            </form>

        </div>

    </div>

    <!-- "EDIT PRODUCT" 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-2xl 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 Product</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-general-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-product-form" onsubmit="handleUpdateProduct(event)" class="p-6 space-y-4 text-xs" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="_method" value="PUT">
                <input type="hidden" name="id" id="edit-id">

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    
                    <!-- Product Title -->
                    <div class="space-y-1 md:col-span-2">
                        <label class="font-bold text-slate-800">Product Name / Title *</label>
                        <input type="text" name="title" id="edit-title" 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-error-title"></span>
                    </div>

                    <!-- Category -->
                    <div class="space-y-1">
                        <label class="font-bold text-slate-800">Category *</label>
                        <select name="category_id" id="edit-category_id" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-noko-navy bg-white category-select">
                            <option value="">Select Category...</option>
                        </select>
                        <span class="text-red-500 text-[11px] font-semibold mt-1 block error-msg" id="edit-error-category_id"></span>
                    </div>

                    <!-- Status -->
                    <div class="space-y-1">
                        <label class="font-bold text-slate-800">Status *</label>
                        <select name="status" id="edit-status" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-noko-navy bg-white">
                            <option value="published">Published</option>
                            <option value="draft">Draft</option>
                            <option value="archived">Archived</option>
                        </select>
                        <span class="text-red-500 text-[11px] font-semibold mt-1 block error-msg" id="edit-error-status"></span>
                    </div>

                    <!-- Price (LKR) -->
                    <div class="space-y-1">
                        <label class="font-bold text-slate-800">Selling Price (LKR) *</label>
                        <input type="number" step="0.01" name="price" id="edit-price" 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-error-price"></span>
                    </div>

                    <!-- Stock Quantity -->
                    <div class="space-y-1">
                        <label class="font-bold text-slate-800">Stock Quantity *</label>
                        <input type="number" name="stock" id="edit-stock" 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-error-stock"></span>
                    </div>

                    <!-- New Image Upload (Optional) -->
                    <div class="space-y-1 md:col-span-2">
                        <label class="font-bold text-slate-800">Add New Images (Optional)</label>
                        <input type="file" name="images[]" id="edit-images" accept="image/*" multiple
                               class="w-full text-xs text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-xs file:font-bold file:bg-slate-100 file:text-noko-navy hover:file:bg-slate-200">
                        <span class="text-red-500 text-[11px] font-semibold mt-1 block error-msg" id="edit-error-images"></span>
                    </div>

                    <!-- Description -->
                    <div class="space-y-1 md:col-span-2">
                        <label class="font-bold text-slate-800">Description</label>
                        <textarea name="description" id="edit-description" rows="2" 
                                  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-error-description"></span>
                    </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-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 Product</span>
                    </button>
                </div>
            </form>

        </div>

    </div>

</div>

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

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

    async function fetchCategories() {
        try {
            const response = await fetch('/api/categories', {
                headers: { 'Accept': 'application/json' }
            });
            if (!response.ok) return;

            const data = await response.json();
            const categories = data.data || data || [];
            
            document.querySelectorAll('.category-select').forEach(select => {
                select.innerHTML = '<option value="">Select Category...</option>' + 
                    categories.map(c => `<option value="${c.id}">${c.name}</option>`).join('');
            });
        } catch (err) {
            console.log('Error fetching categories:', err);
        }
    }

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

            const data = await response.json();
            allProducts = data.data || data || [];
            renderProducts(allProducts);

        } catch (err) {
            console.log('Error fetching products:', err);
        }
    }

    function renderProducts(products) {
        const tbody = document.getElementById('products-tbody');
        if (!tbody) return;

        if (products.length === 0) {
            tbody.innerHTML = `<tr><td colspan="7" class="py-8 text-center text-gray-400 font-medium">No products found.</td></tr>`;
            return;
        }

        tbody.innerHTML = products.map(prod => {
            let imgSrc = 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?q=80&w=200&auto=format&fit=crop';
            
            if (prod.images && prod.images.length > 0) {
                const primaryImg = prod.images.find(i => i.is_primary) || prod.images[prod.images.length - 1];
                if (primaryImg && primaryImg.path) {
                    imgSrc = '/storage/' + primaryImg.path;
                }
            } else if (prod.primary_image && prod.primary_image.path) {
                imgSrc = '/storage/' + prod.primary_image.path;
            }

            const catName = prod.category ? prod.category.name : 'General';
            const stockBadge = prod.stock > 5 
                ? `<span class="bg-emerald-100 text-emerald-800 font-bold px-2 py-0.5 rounded text-[10px]">${prod.stock} units</span>`
                : `<span class="bg-amber-100 text-amber-800 font-bold px-2 py-0.5 rounded text-[10px]">${prod.stock} units (Low)</span>`;
            
            return `
                <tr class="hover:bg-slate-50 transition-colors">
                    <td class="py-3 px-6">
                        <div class="w-12 h-12 rounded-lg bg-slate-100 border border-gray-200 overflow-hidden flex items-center justify-center">
                            <img src="${imgSrc}" class="max-h-full max-w-full object-contain" onError="this.src='https://images.unsplash.com/photo-1505740420928-5e560c06d30e?q=80&w=200&auto=format&fit=crop'">
                        </div>
                    </td>
                    <td class="py-3 px-6">
                        <div class="font-bold text-slate-900">${prod.title}</div>
                        <div class="text-[10px] text-gray-400 font-mono">SKU: ${prod.sku || 'N/A'}</div>
                    </td>
                    <td class="py-3 px-6 font-semibold text-slate-700">${catName}</td>
                    <td class="py-3 px-6 font-extrabold text-slate-900">LKR ${Number(prod.price).toLocaleString()}</td>
                    <td class="py-3 px-6">${stockBadge}</td>
                    <td class="py-3 px-6">
                        <span class="bg-emerald-100 text-emerald-800 font-extrabold px-2 py-0.5 rounded-full text-[10px]">${(prod.status || 'published').toUpperCase()}</span>
                    </td>
                    <td class="py-3 px-6 text-right space-x-2">
                        <button onclick="openEditModal(${prod.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">Edit</button>
                        <button onclick="deleteProduct(${prod.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">Delete</button>
                    </td>
                </tr>
            `;
        }).join('');
    }

    function filterProducts() {
        const query = (document.getElementById('product-search-input')?.value || '').toLowerCase();
        const status = document.getElementById('status-filter')?.value || '';

        const filtered = allProducts.filter(p => {
            const matchesSearch = p.title.toLowerCase().includes(query) || (p.sku && p.sku.toLowerCase().includes(query));
            const matchesStatus = !status || p.status === status;
            return matchesSearch && matchesStatus;
        });

        renderProducts(filtered);
    }

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

    async function handleCreateProduct(e) {
        e.preventDefault();
        clearFormErrors('add');

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

        const submitBtn = document.getElementById('add-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/products', {
                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('Product 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 fetchProducts();

            } else if (res.status === 422) {
                if (data.errors) {
                    for (const [field, messages] of Object.entries(data.errors)) {
                        const errorEl = document.getElementById(`add-error-${field}`);
                        if (errorEl) errorEl.textContent = messages.join(' ');
                    }
                }
                const alertBox = document.getElementById('add-general-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-general-error-alert');
                if (alertBox) {
                    alertBox.textContent = data.message || 'An error occurred while saving the product.';
                    alertBox.classList.remove('hidden');
                }
            }

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

    function openEditModal(id) {
        clearFormErrors('edit');
        const prod = allProducts.find(p => Number(p.id) === Number(id));
        if (!prod) {
            console.error('Product not found for id:', id);
            return;
        }

        document.getElementById('edit-id').value = prod.id;
        document.getElementById('edit-title').value = prod.title || '';
        document.getElementById('edit-category_id').value = prod.category_id || '';
        document.getElementById('edit-status').value = prod.status || 'published';
        document.getElementById('edit-price').value = prod.price || '';
        document.getElementById('edit-stock').value = prod.stock || '';
        document.getElementById('edit-description').value = prod.description || prod.short_description || '';

        // Dispatch custom Alpine event to open edit modal reliably
        window.dispatchEvent(new CustomEvent('open-edit-modal'));
    }

    async function handleUpdateProduct(e) {
        e.preventDefault();
        clearFormErrors('edit');

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

        const submitBtn = document.getElementById('edit-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/products/${id}`, {
                method: 'POST', // With _method: PUT inside FormData
                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('Product updated successfully!');
                
                // Close Alpine modal via custom event
                window.dispatchEvent(new CustomEvent('close-edit-modal'));

                await fetchProducts();

            } else if (res.status === 422) {
                if (data.errors) {
                    for (const [field, messages] of Object.entries(data.errors)) {
                        const errorEl = document.getElementById(`edit-error-${field}`);
                        if (errorEl) errorEl.textContent = messages.join(' ');
                    }
                }
                const alertBox = document.getElementById('edit-general-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-general-error-alert');
                if (alertBox) {
                    alertBox.textContent = data.message || 'An error occurred while updating the product.';
                    alertBox.classList.remove('hidden');
                }
            }

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

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

            if (res.ok) {
                alert('Product deleted successfully.');
                await fetchProducts();
            } else {
                alert('Failed to delete product.');
            }
        } catch (err) {
            console.error('Delete error:', err);
        }
    }
</script>
@endpush
@endsection