@extends('layouts.app')
@section('title', 'Products')
@section('breadcrumb')
<li class="breadcrumb-item active">Products</li>
@endsection
@section('content')
<div class="page-header">
    <div><h2 class="page-title">Products</h2><p class="page-subtitle">{{ $products->total() }} products {{ $lowStock > 0 ? "• {$lowStock} low stock" : '' }}</p></div>
    <div class="page-actions">
        @if($lowStock > 0)
        <a href="{{ route('products.index', ['stock' => 'low']) }}" class="btn btn-warning btn-cpos me-2">
            <i class="bi bi-exclamation-triangle me-1"></i>{{ $lowStock }} Low Stock
        </a>
        @endif
        <button type="button" class="btn btn-outline-primary btn-cpos me-2" data-bs-toggle="modal" data-bs-target="#importModal">
            <i class="bi bi-upload me-1"></i>Import
        </button>
        <a href="{{ route('products.create') }}" class="btn btn-primary btn-cpos">
            <i class="bi bi-plus-lg me-2"></i>Add Product
        </a>
    </div>
</div>

<!-- Search & Filters -->
<div class="card cpos-card mb-3">
    <div class="card-body py-3">
        <div class="row g-2 align-items-end">
            <div class="col-md-5">
                <div class="input-group">
                    <span class="input-group-text"><i class="bi bi-search"></i></span>
                    <input type="text" id="productSearch" class="form-control" placeholder="Search by name, SKU, barcode, price, category..." value="{{ request('search') }}" autofocus>
                    <button type="button" class="btn btn-outline-secondary" id="clearSearch" style="display: none;">
                        <i class="bi bi-x-lg"></i>
                    </button>
                </div>
                <small class="text-muted">Type to search instantly</small>
            </div>
            <div class="col-md-2">
                <select name="category" id="categoryFilter" class="form-select">
                    <option value="">All Categories</option>
                    @foreach($categories as $cat)
                    <option value="{{ $cat->id }}" {{ request('category') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <select name="status" id="statusFilter" class="form-select">
                    <option value="">All Status</option>
                    <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active</option>
                    <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                </select>
            </div>
            <div class="col-md-2">
                <select name="stock" id="stockFilter" class="form-select">
                    <option value="">All Stock</option>
                    <option value="low" {{ request('stock') === 'low' ? 'selected' : '' }}>Low Stock</option>
                </select>
            </div>
            <div class="col-md-1">
                <button type="button" class="btn btn-outline-secondary w-100" id="resetFilters" title="Reset filters">
                    <i class="bi bi-arrow-counterclockwise"></i>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Products Table -->
<div class="card cpos-card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-cpos mb-0" id="productsTable">
                <thead>
                    <tr>
                        <th>Product</th>
                        <th>Item Code</th>
                        <th>Category</th>
                        <th>Cost Price</th>
                        <th>Selling Price</th>
                        <th>Stock</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="productsBody">
                    @forelse($products as $product)
                    <tr data-product-id="{{ $product->id }}">
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <div class="product-thumb">
                                    @if($product->image)
                                        <img src="{{ asset(Str::startsWith($product->image, 'storage/') ? $product->image : 'storage/'.$product->image) }}" alt="{{ $product->name }}" class="thumb-img">
                                    @else
                                        <div class="thumb-placeholder"><i class="bi bi-box-seam"></i></div>
                                    @endif
                                </div>
                                <div>
                                    <div class="fw-600">{{ $product->name }}</div>
                                    <div class="text-muted small">{{ $product->unit }}</div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="fw-600 text-mono" style="color: var(--cp-primary);">{{ $product->sku ?? '-' }}</div>
                            @if($product->barcode)
                            <div class="text-muted text-mono small">{{ $product->barcode }}</div>
                            @endif
                        </td>
                        <td>{{ $product->category?->name ?? '—' }}</td>
                        <td>Rs. {{ number_format($product->cost_price, 2) }}</td>
                        <td class="fw-600">Rs. {{ number_format($product->selling_price, 2) }}</td>
                        <td>
                            <div class="stock-indicator {{ $product->isOutOfStock() ? 'stock-out' : ($product->isLowStock() ? 'stock-low' : 'stock-ok') }}">
                                <span class="stock-dot"></span>
                                {{ number_format($product->stock_quantity, 0) }} {{ $product->unit }}
                            </div>
                        </td>
                        <td>
                            <span class="badge {{ $product->is_active ? 'bg-success-soft text-success' : 'bg-danger-soft text-danger' }}">
                                {{ $product->is_active ? 'Active' : 'Inactive' }}
                            </span>
                        </td>
                        <td>
                            <div class="action-btns">
                                <a href="{{ route('products.edit', $product) }}" class="action-btn" title="Edit"><i class="bi bi-pencil"></i></a>
                                <button class="action-btn" title="Adjust Stock" onclick="openStockAdjust({{ $product->id }}, '{{ addslashes($product->name) }}', {{ $product->stock_quantity }})"><i class="bi bi-arrow-down-up"></i></button>
                                <form action="{{ route('products.destroy', $product) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete this product?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="action-btn action-btn-danger" title="Delete"><i class="bi bi-trash3"></i></button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr id="noProductsRow"><td colspan="8" class="text-center py-5 text-muted"><i class="bi bi-inbox fs-2 d-block mb-2"></i>No products found</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="p-3" id="paginationContainer">{{ $products->links() }}</div>
    </div>
</div>

<!-- Stock Adjust Modal -->
<div class="modal fade" id="stockAdjustModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content modal-cpos">
            <div class="modal-header modal-cpos-header">
                <h5 class="modal-title">Adjust Stock</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="stockAdjustForm" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3"><strong id="adjustProductName"></strong><br><small class="text-muted">Current Stock: <span id="adjustCurrentStock"></span></small></div>
                    <div class="mb-3">
                        <label class="form-label">Adjustment (+/-)</label>
                        <input type="number" name="quantity" class="form-control" placeholder="+10 or -5" required step="0.001">
                        <div class="form-text">Use + to add stock, - to remove stock.</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Type</label>
                        <select name="type" class="form-select">
                            <option value="adjustment">Manual Adjustment</option>
                            <option value="damage">Damage/Loss</option>
                            <option value="expired">Expired</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Notes</label>
                        <input type="text" name="notes" class="form-control" placeholder="Reason for adjustment">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Adjust Stock</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Import Modal -->
<div class="modal fade" id="importModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content modal-cpos">
            <div class="modal-header modal-cpos-header">
                <h5 class="modal-title"><i class="bi bi-upload me-2"></i>Import Products</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('products.import.process') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="alert alert-info mb-3">
                        <i class="bi bi-info-circle me-2"></i>
                        Upload a CSV or Excel file with product details.
                        <a href="{{ route('products.import.template') }}" class="alert-link">Download template</a>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Select File</label>
                        <input type="file" name="file" class="form-control" accept=".csv,.xlsx,.xls" required>
                        <div class="form-text">Supported formats: CSV, Excel (xlsx, xls). Max size: 10MB</div>
                    </div>

                    <div class="card bg-light">
                        <div class="card-body py-2 px-3">
                            <small class="fw-600 d-block mb-1">Required Columns:</small>
                            <small class="text-muted">name (or product_name), selling_price (or price)</small>
                            <br>
                            <small class="fw-600 d-block mb-1 mt-2">Optional Columns:</small>
                            <small class="text-muted">sku, barcode, category, cost_price, stock, unit, description</small>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-upload me-1"></i>Import Products
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Stock Adjust
function openStockAdjust(id, name, stock) {
    document.getElementById('adjustProductName').textContent = name;
    document.getElementById('adjustCurrentStock').textContent = stock;
    document.getElementById('stockAdjustForm').action = `/products/${id}/adjust-stock`;
    new bootstrap.Modal(document.getElementById('stockAdjustModal')).show();
}

document.getElementById('stockAdjustForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const form = e.target;
    const data = Object.fromEntries(new FormData(form));
    const res = await fetch(form.action, {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content},
        body: JSON.stringify(data)
    });
    const json = await res.json();
    if (json.success) { location.reload(); } else { alert(json.message); }
});

// Auto Search
let searchTimeout = null;
const searchInput = document.getElementById('productSearch');
const categoryFilter = document.getElementById('categoryFilter');
const statusFilter = document.getElementById('statusFilter');
const stockFilter = document.getElementById('stockFilter');
const clearSearchBtn = document.getElementById('clearSearch');
const productsBody = document.getElementById('productsBody');
const paginationContainer = document.getElementById('paginationContainer');

function performSearch() {
    const search = searchInput.value.trim();
    const category = categoryFilter.value;
    const status = statusFilter.value;
    const stock = stockFilter.value;

    // Show/hide clear button
    clearSearchBtn.style.display = search ? 'block' : 'none';

    // If all filters are empty and search is empty, reload page for pagination
    if (!search && !category && !status && !stock) {
        location.href = '{{ route("products.index") }}';
        return;
    }

    // Show loading
    productsBody.innerHTML = '<tr><td colspan="8" class="text-center py-4"><div class="spinner-border spinner-border-sm text-primary"></div> Searching...</td></tr>';

    // Fetch results
    const params = new URLSearchParams();
    if (search) params.append('q', search);
    if (category) params.append('category', category);
    if (status) params.append('status', status);
    if (stock) params.append('stock', stock);

    fetch('{{ route("products.search") }}?' + params.toString())
        .then(res => res.json())
        .then(data => {
            if (data.products.length === 0) {
                productsBody.innerHTML = '<tr><td colspan="8" class="text-center py-5 text-muted"><i class="bi bi-search fs-2 d-block mb-2"></i>No products match your search</td></tr>';
                paginationContainer.innerHTML = '';
                return;
            }

            let html = '';
            data.products.forEach(p => {
                const stockClass = p.is_out_of_stock ? 'stock-out' : (p.is_low_stock ? 'stock-low' : 'stock-ok');
                const statusBadge = p.is_active
                    ? '<span class="badge bg-success-soft text-success">Active</span>'
                    : '<span class="badge bg-danger-soft text-danger">Inactive</span>';
                const image = p.image
                    ? `<img src="${p.image}" alt="${p.name}" class="thumb-img">`
                    : '<div class="thumb-placeholder"><i class="bi bi-box-seam"></i></div>';

                html += `
                <tr data-product-id="${p.id}">
                    <td>
                        <div class="d-flex align-items-center gap-2">
                            <div class="product-thumb">${image}</div>
                            <div>
                                <div class="fw-600">${p.name}</div>
                                <div class="text-muted small">${p.unit}</div>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="fw-600 text-mono" style="color: var(--cp-primary);">${p.sku || '-'}</div>
                        ${p.barcode ? `<div class="text-muted text-mono small">${p.barcode}</div>` : ''}
                    </td>
                    <td>${p.category}</td>
                    <td>Rs. ${Number(p.cost_price).toLocaleString('en-US', {minimumFractionDigits: 2})}</td>
                    <td class="fw-600">Rs. ${Number(p.selling_price).toLocaleString('en-US', {minimumFractionDigits: 2})}</td>
                    <td>
                        <div class="stock-indicator ${stockClass}">
                            <span class="stock-dot"></span>
                            ${Math.floor(p.stock_quantity)} ${p.unit}
                        </div>
                    </td>
                    <td>${statusBadge}</td>
                    <td>
                        <div class="action-btns">
                            <a href="${p.edit_url}" class="action-btn" title="Edit"><i class="bi bi-pencil"></i></a>
                            <button class="action-btn" title="Adjust Stock" onclick="openStockAdjust(${p.id}, '${p.name.replace(/'/g, "\\'")}', ${p.stock_quantity})"><i class="bi bi-arrow-down-up"></i></button>
                            <form action="${p.delete_url}" method="POST" class="d-inline" onsubmit="return confirm('Delete this product?')">
                                <input type="hidden" name="_token" value="${document.querySelector('meta[name=csrf-token]').content}">
                                <input type="hidden" name="_method" value="DELETE">
                                <button type="submit" class="action-btn action-btn-danger" title="Delete"><i class="bi bi-trash3"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>`;
            });

            productsBody.innerHTML = html;
            paginationContainer.innerHTML = `<small class="text-muted">${data.count} product(s) found</small>`;
        })
        .catch(err => {
            console.error('Search error:', err);
            productsBody.innerHTML = '<tr><td colspan="8" class="text-center py-4 text-danger">Search failed. Please try again.</td></tr>';
        });
}

// Debounced search on input
searchInput.addEventListener('input', () => {
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(performSearch, 300);
});

// Immediate filter on select change
categoryFilter.addEventListener('change', performSearch);
statusFilter.addEventListener('change', performSearch);
stockFilter.addEventListener('change', performSearch);

// Clear search
clearSearchBtn.addEventListener('click', () => {
    searchInput.value = '';
    performSearch();
});

// Reset all filters
document.getElementById('resetFilters').addEventListener('click', () => {
    searchInput.value = '';
    categoryFilter.value = '';
    statusFilter.value = '';
    stockFilter.value = '';
    location.href = '{{ route("products.index") }}';
});

// Show clear button if search has value on page load
if (searchInput.value) {
    clearSearchBtn.style.display = 'block';
}
</script>
@endpush