@extends('layouts.admin')

@section('title', 'Products')

@section('page-title', 'Products')

@section('breadcrumbs')
    <span class="text-primary font-medium">Products</span>
@endsection

@section('content')
<div class="max-w-[1400px] mx-auto">
    <!-- Header Section -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
        <h1 class="text-2xl font-bold text-gray-900">Products & Services</h1>
        <div class="flex items-center gap-3">
            <a href="{{ route('admin.products.create') }}" class="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium shadow-lg shadow-primary/30 hover:bg-blue-600 transition-colors">
                <span class="material-symbols-outlined text-lg">add</span>
                <span>New Product</span>
            </a>
            <select id="perPageSelect" class="px-3 py-2 text-sm border border-gray-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-1 focus:ring-primary">
                <option value="10">10 / page</option>
                <option value="25">25 / page</option>
                <option value="50">50 / page</option>
                <option value="100">100 / page</option>
            </select>
        </div>
    </div>

    <!-- Filter Tabs -->
    <div class="flex gap-2 mb-4 overflow-x-auto">
        <button onclick="filterByType('all')" id="tab-all" class="px-4 py-2 rounded-lg text-sm font-medium bg-primary text-white transition-colors">All</button>
        <button onclick="filterByType('product')" id="tab-product" class="px-4 py-2 rounded-lg text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">Products</button>
        <button onclick="filterByType('service')" id="tab-service" class="px-4 py-2 rounded-lg text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">Services</button>
    </div>

    <!-- Search Bar -->
    <div class="mb-4">
        <div class="relative max-w-md">
            <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">search</span>
            <input type="text" id="searchInput" placeholder="Search products..." class="w-full h-10 pl-10 pr-4 rounded-lg border border-gray-200 bg-white text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary">
        </div>
    </div>

    <!-- Loading Indicator -->
    <div id="loadingIndicator" class="hidden text-center py-8">
        <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
        <p class="mt-2 text-gray-600">Loading...</p>
    </div>

    <!-- Products Table -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">#</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">IMAGE</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">NAME</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">CODE</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">TYPE</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">CATEGORY</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">PRICE</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">STOCK</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">STATUS</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500 text-right">ACTIONS</th>
                    </tr>
                </thead>
                <tbody id="productsTableBody" class="divide-y divide-gray-100">
                    <!-- Products will be loaded here via AJAX -->
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div id="paginationContainer" class="px-6 py-4 border-t border-gray-200">
            <!-- Pagination will be loaded here via AJAX -->
        </div>
    </div>
</div>

@push('scripts')
<script>
    const baseUrl = '{{ url("admin/products") }}';

    let currentType = 'all';
    let currentPage = 1;
    let currentSearch = '';
    let currentPerPage = 10;

    // Initialize on page load
    document.addEventListener('DOMContentLoaded', function() {
        loadProducts();
        
        // Search with debounce
        let searchTimeout;
        document.getElementById('searchInput').addEventListener('input', function(e) {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(function() {
                currentSearch = e.target.value;
                currentPage = 1;
                loadProducts();
            }, 500);
        });

        // Per page change
        document.getElementById('perPageSelect').addEventListener('change', function(e) {
            currentPerPage = parseInt(e.target.value);
            currentPage = 1;
            loadProducts();
        });
    });

    // Filter by type
    function filterByType(type) {
        currentType = type;
        currentPage = 1;
        
        // Update tab styles
        document.querySelectorAll('[id^="tab-"]').forEach(btn => {
            btn.classList.remove('bg-primary', 'text-white');
            btn.classList.add('bg-gray-100', 'text-gray-700');
        });
        
        const activeTab = document.getElementById('tab-' + type);
        if (activeTab) {
            activeTab.classList.remove('bg-gray-100', 'text-gray-700');
            activeTab.classList.add('bg-primary', 'text-white');
        }
        
        loadProducts();
    }

    // Load products via AJAX
    function loadProducts() {
        const loadingIndicator = document.getElementById('loadingIndicator');
        const tableBody = document.getElementById('productsTableBody');
        
        loadingIndicator.classList.remove('hidden');
        tableBody.innerHTML = '';

        const params = new URLSearchParams({
            ajax: 1,
            type: currentType,
            page: currentPage,
            per_page: currentPerPage,
        });

        if (currentSearch) {
            params.append('search', currentSearch);
        }

        fetch('{{ route("admin.products.index") }}?' + params.toString(), {
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            loadingIndicator.classList.add('hidden');
            
            if (data.products && data.products.length > 0) {
                let html = '';
                const startIndex = (data.pagination.current_page - 1) * data.pagination.per_page;
                
                data.products.forEach((product, index) => {
                    html += `
                    <tr class="hover:bg-gray-50/50 transition-colors">
                        <td class="py-4 px-6 text-sm text-gray-600">${startIndex + index + 1}</td>
                        <td class="py-4 px-6">
                            ${product.image ? 
                                `<img src="${product.image}" alt="${product.name}" class="w-12 h-12 rounded-lg object-cover">` :
                                `<div class="w-12 h-12 rounded-lg bg-gray-200 flex items-center justify-center">
                                <span class="material-symbols-outlined text-gray-400">inventory_2</span>
                                </div>`
                            }
                        </td>
                        <td class="py-4 px-6">
                            <div>
                                <p class="text-sm font-medium text-gray-900">${product.name}</p>
                                ${product.brand ? `<p class="text-xs text-gray-500">${product.brand}</p>` : ''}
                            </div>
                        </td>
                        <td class="py-4 px-6">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded bg-gray-100 text-gray-800 font-mono text-xs">
                                ${product.code || '-'}
                            </span>
                        </td>
                        <td class="py-4 px-6">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${product.type === 'service' ? 'bg-purple-100 text-purple-800' : 'bg-blue-100 text-blue-800'}">
                                ${product.type ? product.type.charAt(0).toUpperCase() + product.type.slice(1) : 'Product'}
                            </span>
                        </td>
                        <td class="py-4 px-6 text-sm text-gray-600">${product.category || '-'}</td>
                        <td class="py-4 px-6 text-sm font-medium text-gray-900">${product.selling_price}</td>
                        <td class="py-4 px-6">
                            ${product.type === 'service' ? 
                                '<span class="text-sm text-gray-500">N/A</span>' :
                                `<span class="text-sm font-medium ${product.stock <= 0 ? 'text-red-600' : (product.stock <= product.alert_quantity ? 'text-yellow-600' : 'text-green-600')}">
                                    ${product.stock}
                                </span>`
                            }
                        </td>
                        <td class="py-4 px-6">
                            <button onclick="toggleStatus(${product.id}, ${product.status ? 'false' : 'true'}, this)" 
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium transition-colors ${product.status ? 'bg-green-100 text-green-800 hover:bg-green-200' : 'bg-red-100 text-red-800 hover:bg-red-200'} cursor-pointer">
                                ${product.status ? 'Active' : 'Inactive'}
                            </button>
                        </td>
                        <td class="py-4 px-6 text-right">
                            <div class="flex items-center justify-end gap-2">
                                <a href="${baseUrl}/${product.id}" class="p-2 text-gray-500 hover:text-primary hover:bg-gray-100 rounded-lg transition-colors" title="View">
                                    <span class="material-symbols-outlined text-lg">visibility</span>
                                </a>
                                <a href="${baseUrl}/${product.id}/edit" class="p-2 text-gray-500 hover:text-primary hover:bg-gray-100 rounded-lg transition-colors" title="Edit">
                                    <span class="material-symbols-outlined text-lg">edit</span>
                                </a>
                                <button onclick="deleteProduct(${product.id})" class="p-2 text-gray-500 hover:text-red-500 hover:bg-gray-100 rounded-lg transition-colors">
                                    <span class="material-symbols-outlined text-lg">delete</span>
                                </button>
                            </div>
                        </td>
                    </tr>
                    `;
                });
                
                tableBody.innerHTML = html;
                renderPagination(data.pagination);
            } else {
                tableBody.innerHTML = `
                    <tr>
                        <td colspan="10" class="py-12 px-6 text-center text-gray-500">
                            <span class="material-symbols-outlined text-4xl mb-2 block">inventory_2</span>
                            <p>No products found</p>
                        </td>
                    </tr>
                `;
                document.getElementById('paginationContainer').innerHTML = '';
            }
        })
        .catch(error => {
            loadingIndicator.classList.add('hidden');
            console.error('Error loading products:', error);
            tableBody.innerHTML = `
                <tr>
                    <td colspan="10" class="py-12 px-6 text-center text-red-500">
                        <p>Error loading products. Please try again.</p>
                    </td>
                </tr>
            `;
        });
    }

    // Render pagination
    function renderPagination(pagination) {
        const container = document.getElementById('paginationContainer');
        
        if (pagination.last_page <= 1) {
            container.innerHTML = '';
            return;
        }

        let html = '<div class="flex items-center justify-between">';
        html += `<div class="text-sm text-gray-700">Showing ${pagination.from} to ${pagination.to} of ${pagination.total} results</div>`;
        html += '<div class="flex items-center gap-2">';

        // Previous button
        if (pagination.current_page > 1) {
            html += `<button onclick="goToPage(${pagination.current_page - 1})" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">Previous</button>`;
        }

        // Page numbers
        for (let i = 1; i <= pagination.last_page; i++) {
            if (i === 1 || i === pagination.last_page || (i >= pagination.current_page - 2 && i <= pagination.current_page + 2)) {
                html += `<button onclick="goToPage(${i})" class="px-3 py-2 text-sm border rounded-lg transition-colors ${
                    i === pagination.current_page 
                        ? 'bg-primary text-white border-primary' 
                        : 'border-gray-300 hover:bg-gray-50'
                }">${i}</button>`;
            } else if (i === pagination.current_page - 3 || i === pagination.current_page + 3) {
                html += '<span class="px-2 text-gray-500">...</span>';
            }
        }

        // Next button
        if (pagination.current_page < pagination.last_page) {
            html += `<button onclick="goToPage(${pagination.current_page + 1})" class="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">Next</button>`;
        }

        html += '</div></div>';
        container.innerHTML = html;
    }

    // Go to specific page
    function goToPage(page) {
        currentPage = page;
        loadProducts();
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }    // Toggle product status
    function toggleStatus(id, newStatus, button) {
        const originalHTML = button.innerHTML;
        button.disabled = true;
        button.innerHTML = '<span class="material-symbols-outlined text-xs animate-spin">hourglass_empty</span>';

        fetch(`${baseUrl}/${id}/status`, {
            method: 'PATCH',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ status: newStatus }),
            credentials: 'same-origin'
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                // Reload products to reflect the change
                loadProducts();
            } else {
                throw new Error(data.message || 'Failed to update status');
            }
        })
        .catch(error => {
            console.error('Error updating status:', error);
            alert('Error updating status: ' + error.message);
            button.disabled = false;
            button.innerHTML = originalHTML;
        });
    }

    // Delete product
    function deleteProduct(id) {
        if (!confirm('Are you sure you want to delete this product? This action cannot be undone.')) {
            return;
        }

        const deleteBtn = event.target.closest('button');
        const originalHTML = deleteBtn.innerHTML;
        deleteBtn.disabled = true;
        deleteBtn.innerHTML = '<span class="material-symbols-outlined text-lg animate-spin">hourglass_empty</span>';

        fetch(`${baseUrl}/${id}`, {
            method: 'DELETE',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            },
            credentials: 'same-origin'
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                loadProducts();
                alert('Product deleted successfully!');
            } else {
                throw new Error(data.message || 'Failed to delete product');
            }
        })
        .catch(error => {
            console.error('Error deleting product:', error);
            alert('Error deleting product: ' + error.message);
            deleteBtn.disabled = false;
            deleteBtn.innerHTML = originalHTML;
        });
    }
</script>
@endpush
@endsection