@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 font-weight-bold mb-0">
                        <i class="fas fa-edit mr-2"></i>Edit Product
                    </h1>
                    <p class="text-muted mb-0">Update product information</p>
                </div>
                <div>
                    <a href="{{ route('inventory.products.index') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left mr-1"></i>Back to Products
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Main Form -->
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 py-3">
                    <h5 class="card-title mb-0 font-weight-bold">
                        <i class="fas fa-box mr-2"></i>Product Information
                    </h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('inventory.products.update', $product) }}" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="name" class="form-label font-weight-bold">
                                        <i class="fas fa-tag mr-1"></i>Product Name
                                    </label>
                                    <input type="text" 
                                           class="form-control @error('name') is-invalid @enderror" 
                                           id="product_name" name="name" value="{{ old('name', $product->name) }}" required
                                           placeholder="Type to search existing products...">
                                    <div id="product-suggestions" class="suggestions-dropdown"></div>
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="category_id" class="form-label font-weight-bold">
                                        <i class="fas fa-folder mr-1"></i>Category
                                    </label>
                                    <select class="form-control @error('category_id') is-invalid @enderror" 
                                            id="category_id" name="category_id">
                                        <option value="">Select Category</option>
                                        @foreach($categories as $category)
                                            <option value="{{ $category->id }}" {{ old('category_id', $product->category_id) == $category->id ? 'selected' : '' }}>
                                                {{ $category->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('category_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="supplier_id" class="form-label font-weight-bold">
                                        <i class="fas fa-truck mr-1"></i>Supplier
                                    </label>
                                    <select class="form-control @error('supplier_id') is-invalid @enderror" 
                                            id="supplier_id" name="supplier_id">
                                        <option value="">Select Supplier</option>
                                        @foreach($suppliers as $supplier)
                                            <option value="{{ $supplier->id }}" {{ old('supplier_id', $product->supplier_id) == $supplier->id ? 'selected' : '' }}>
                                                {{ $supplier->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('supplier_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="quantity" class="form-label font-weight-bold">
                                        <i class="fas fa-cubes mr-1"></i>Quantity
                                    </label>
                                    <input type="number" min="0" 
                                           class="form-control @error('quantity') is-invalid @enderror" 
                                           id="quantity" name="quantity" value="{{ old('quantity', $product->quantity) }}" required>
                                    @error('quantity')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="purchase_price" class="form-label font-weight-bold">
                                        <i class="fas fa-coins mr-1"></i>Purchase Price
                                    </label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">BDT</span>
                                        </div>
                                        <input type="number" step="0.01" min="0" 
                                               class="form-control @error('purchase_price') is-invalid @enderror" 
                                               id="purchase_price" name="purchase_price" value="{{ old('purchase_price', $product->purchase_price) }}"
                                               placeholder="0.00">
                                    </div>
                                    @error('purchase_price')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="sale_price" class="form-label font-weight-bold">
                                        <i class="fas fa-coins mr-1"></i>Sale Price
                                    </label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">BDT</span>
                                        </div>
                                        <input type="number" step="0.01" min="0" 
                                               class="form-control @error('sale_price') is-invalid @enderror" 
                                               id="sale_price" name="sale_price" value="{{ old('sale_price', $product->sale_price) }}"
                                               placeholder="0.00">
                                    </div>
                                    @error('sale_price')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="form-group mt-4">
                            <button type="submit" class="btn btn-primary btn-lg shadow">
                                <i class="fas fa-save mr-1"></i>Update Product
                            </button>
                            <a href="{{ route('inventory.products.index') }}" class="btn btn-outline-secondary btn-lg ml-2">
                                <i class="fas fa-times mr-1"></i>Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 py-3">
                    <h5 class="card-title mb-0 font-weight-bold">
                        <i class="fas fa-info-circle mr-2"></i>Product Details
                    </h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <small class="text-muted">Product ID</small>
                        <div>
                            <span class="badge badge-primary">{{ $product->id }}</span>
                        </div>
                    </div>

                    <div class="mb-3">
                        <small class="text-muted">Category</small>
                        <div>
                            @if($product->category)
                                <span class="badge badge-info">{{ $product->category->name }}</span>
                            @else
                                <span class="text-muted">No Category</span>
                            @endif
                        </div>
                    </div>

                    <div class="mb-3">
                        <small class="text-muted">Supplier</small>
                        <div>
                            @if($product->supplier)
                                <span class="badge badge-success">{{ $product->supplier->name }}</span>
                            @else
                                <span class="text-muted">No Supplier</span>
                            @endif
                        </div>
                    </div>

                    <div class="mb-3">
                        <small class="text-muted">Current Stock</small>
                        <div>
                            <span class="badge badge-primary">{{ $product->quantity }}</span>
                        </div>
                    </div>

                    <div class="mb-3">
                        <small class="text-muted">Created</small>
                        <div>
                            <small class="text-muted">{{ $product->created_at->format('M d, Y') }}</small>
                        </div>
                    </div>

                    <div class="mb-3">
                        <small class="text-muted">Last Updated</small>
                        <div>
                            <small class="text-muted">{{ $product->updated_at->format('M d, Y') }}</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="card border-0 shadow-sm mt-3">
                <div class="card-header bg-white border-0 py-3">
                    <h5 class="card-title mb-0 font-weight-bold">
                        <i class="fas fa-bolt mr-2"></i>Quick Actions
                    </h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('inventory.products.show', $product) }}" class="btn btn-outline-info">
                            <i class="fas fa-eye mr-1"></i>View Product
                        </a>
                        <a href="{{ route('inventory.products.index') }}" class="btn btn-outline-primary">
                            <i class="fas fa-list mr-1"></i>All Products
                        </a>
                        <a href="{{ route('inventory.products.create') }}" class="btn btn-outline-success">
                            <i class="fas fa-plus mr-1"></i>Add New Product
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Auto-search suggestions styling */
.suggestions-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ced4da;
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    display: none;
}

.suggestion-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid #f8f9fa;
    transition: background-color 0.15s ease-in-out;
}

.suggestion-item:hover {
    background-color: #f8f9fa;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item .product-name {
    font-weight: 500;
    color: #495057;
}

.suggestion-item .product-id {
    font-size: 0.875rem;
    color: #6c757d;
}

.form-group {
    position: relative;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const productNameInput = document.getElementById('product_name');
    const suggestionsDropdown = document.getElementById('product-suggestions');
    let searchTimeout;

    // Debounce search function
    function debounce(func, wait) {
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(searchTimeout);
                func(...args);
            };
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(later, wait);
        };
    }

    // Search for products
    function searchProducts(query) {
        if (query.length < 2) {
            suggestionsDropdown.style.display = 'none';
            return;
        }

        fetch(`/api/inventory/products/search?q=${encodeURIComponent(query)}`)
            .then(response => response.json())
            .then(products => {
                displaySuggestions(products);
            })
            .catch(error => {
                console.error('Error searching products:', error);
                suggestionsDropdown.style.display = 'none';
            });
    }

    // Display suggestions
    function displaySuggestions(products) {
        if (products.length === 0) {
            suggestionsDropdown.style.display = 'none';
            return;
        }

        suggestionsDropdown.innerHTML = '';
        
        products.forEach(product => {
            const suggestionItem = document.createElement('div');
            suggestionItem.className = 'suggestion-item';
            suggestionItem.innerHTML = `
                <div class="product-name">${product.name}</div>
                <div class="product-id">ID: ${product.id}</div>
            `;
            
            suggestionItem.addEventListener('click', function() {
                productNameInput.value = product.name;
                suggestionsDropdown.style.display = 'none';
            });
            
            suggestionsDropdown.appendChild(suggestionItem);
        });
        
        suggestionsDropdown.style.display = 'block';
    }

    // Debounced search function
    const debouncedSearch = debounce(searchProducts, 300);

    // Event listeners
    productNameInput.addEventListener('input', function() {
        const query = this.value.trim();
        debouncedSearch(query);
    });

    productNameInput.addEventListener('focus', function() {
        const query = this.value.trim();
        if (query.length >= 2) {
            debouncedSearch(query);
        }
    });

    // Hide suggestions when clicking outside
    document.addEventListener('click', function(event) {
        if (!productNameInput.contains(event.target) && !suggestionsDropdown.contains(event.target)) {
            suggestionsDropdown.style.display = 'none';
        }
    });

    // Hide suggestions on escape key
    productNameInput.addEventListener('keydown', function(event) {
        if (event.key === 'Escape') {
            suggestionsDropdown.style.display = 'none';
        }
    });
});
</script>
@endsection