@extends('layouts.app')

@section('title', 'Add Product')

@section('content')
<div class="container-fluid">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-white rounded-lg" style="background: linear-gradient(135deg, #2E4154 0%, #1a2a3a 100%);">
                    <div class="row align-items-center">
                        <div class="col-lg-8">
                            <div class="d-flex align-items-center mb-0">
                                <div class="mr-3">
                                    <i class="fas fa-plus-circle fa-3x text-warning"></i>
                                </div>
                                <div>
                                    <h1 class="h3 font-weight-bold mb-0">Add New Product</h1>
                                    <p class="mb-0 small opacity-75">Add a new product to your inventory</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 text-lg-right mt-0 mt-lg-0">
                            <div class="btn-group" role="group">
                                <a href="{{ route('inventory.products.index') }}" class="btn btn-light btn-lg shadow">
                                    <i class="fas fa-arrow-left mr-2"></i>Back to Products
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Product Form -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0">
                    <h6 class="mb-0 font-weight-bold">
                        <i class="fas fa-box mr-2"></i>Product Information
                    </h6>
                </div>
                <div class="card-body">
                    <form action="{{ route('inventory.products.store') }}" method="POST">
                        @csrf
                        
                        <div class="form-group">
                            <label for="name" class="form-label font-weight-bold">
                                <i class="fas fa-box mr-1"></i>Product Name <span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                   id="product_name" name="name" value="{{ old('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 class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="category_id" class="form-label font-weight-bold">
                                        <i class="fas fa-tag 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') == $category->id ? 'selected' : '' }}>
                                                {{ $category->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('category_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <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') == $supplier->id ? 'selected' : '' }}>
                                                {{ $supplier->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('supplier_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <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') }}"
                                               placeholder="0.00">
                                    </div>
                                    @error('purchase_price')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <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') }}"
                                               placeholder="0.00">
                                    </div>
                                    @error('sale_price')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="quantity" class="form-label font-weight-bold">
                                        <i class="fas fa-boxes mr-1"></i>Initial Quantity <span class="text-danger">*</span>
                                    </label>
                                    <input type="number" min="0" 
                                           class="form-control @error('quantity') is-invalid @enderror" 
                                           id="quantity" name="quantity" value="{{ old('quantity', 0) }}" required
                                           placeholder="0">
                                    @error('quantity')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="form-group text-right">
                            <button type="button" class="btn btn-secondary mr-2" onclick="window.history.back()">
                                Cancel
                            </button>
                            <button type="submit" class="btn btn-primary btn-lg shadow">
                                <i class="fas fa-save mr-2"></i>Save Product
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Quick Actions Sidebar -->
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm">
                <div class="card-header text-white border-0" style="background: linear-gradient(135deg, #2E4154 0%, #1a2a3a 100%);">
                    <h6 class="mb-0 font-weight-bold">
                        <i class="fas fa-bolt mr-2"></i>Quick Actions
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('inventory.categories.create') }}" class="btn btn-outline-info">
                            <i class="fas fa-plus mr-2"></i>Add New Category
                        </a>
                        <a href="{{ route('inventory.suppliers.create') }}" class="btn btn-outline-success">
                            <i class="fas fa-plus mr-2"></i>Add New Supplier
                        </a>
                        <a href="{{ route('inventory.products.index') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-list mr-2"></i>View All Products
                        </a>
                        <a href="{{ route('inventory.dashboard') }}" class="btn btn-outline-primary">
                            <i class="fas fa-tachometer-alt mr-2"></i>Dashboard
                        </a>
                    </div>
                </div>
            </div>

            <!-- Help Card -->
            <div class="card border-0 shadow-sm mt-3">
                <div class="card-header bg-light border-0">
                    <h6 class="mb-0 font-weight-bold">
                        <i class="fas fa-question-circle mr-2"></i>Help
                    </h6>
                </div>
                <div class="card-body">
                    <small class="text-muted">
                        <strong>Product Name:</strong> Enter a descriptive name for your product.<br><br>
                        <strong>Category:</strong> Select the appropriate category to organize your products.<br><br>
                        <strong>Supplier:</strong> Choose the supplier for this product.<br><br>
                        <strong>Prices:</strong> Set both purchase and sale prices for profit calculation.<br><br>
                        <strong>Quantity:</strong> Enter the initial stock quantity.
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.bg-gradient-primary {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
}

.card {
    transition: transform 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-2px);
}

.btn {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.shadow {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.form-control {
    border-radius: 8px;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: #2E4154;
    box-shadow: 0 0 0 0.2rem rgba(46, 65, 84, 0.25);
}

.input-group-text {
    background-color: #e9ecef;
    border-color: #ced4da;
}

/* Auto-search suggestions styling */
.suggestions-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid #2E4154;
    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: 600;
    color: #2E4154;
}

.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