@extends('layouts.bootstrap')

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

@section('content')
<div class="container-fluid">
    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <h5><i class="bi bi-exclamation-triangle me-2"></i>Error!</h5>
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h4 class="mb-0">
                                <i class="bi bi-plus-circle me-2"></i>Add Product to Tender
                            </h4>
                            <p class="text-muted mb-0">{{ $tender->name }} ({{ $tender->reference_number }})</p>
                        </div>
                        <a href="{{ route('tenders.show', $tender) }}" class="btn btn-outline-secondary">
                            <i class="bi bi-arrow-left me-1"></i>Back to Tender
                        </a>
                    </div>
                </div>

                <div class="card-body">
                    <form action="{{ route('tender-products.store', $tender) }}" method="POST">
                        @csrf

                        <!-- Product Selection Method -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="card bg-light">
                                    <div class="card-body">
                                        <h6 class="card-title">Product Selection Method</h6>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="selection_method" 
                                                   id="new_product" value="new" checked>
                                            <label class="form-check-label" for="new_product">
                                                Create New Product
                                            </label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="selection_method" 
                                                   id="existing_product" value="existing">
                                            <label class="form-check-label" for="existing_product">
                                                Link to Existing Product
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Existing Product Selection -->
                        <div id="existing_product_section" class="row mb-3" style="display: none;">
                            <div class="col-md-12">
                                <label for="product_id" class="form-label">Select Existing Product</label>
                                <select class="form-select @error('product_id') is-invalid @enderror" 
                                        id="product_id" name="product_id">
                                    <option value="">Choose an existing product...</option>
                                    @foreach($products as $product)
                                        <option value="{{ $product->id }}" 
                                                data-name="{{ $product->name }}"
                                                data-description="{{ $product->description }}"
                                                data-country="{{ $product->country_of_origin }}"
                                                data-category="{{ $product->category_id }}"
                                                data-subcategory="{{ $product->subcategory_id }}"
                                                data-price="{{ $product->price_bdt }}"
                                                data-unit="{{ $product->measurement_unit }}"
                                                {{ old('product_id') == $product->id ? 'selected' : '' }}>
                                            {{ $product->name }} 
                                            @if($product->category)
                                                ({{ $product->category->name }})
                                            @endif
                                        </option>
                                    @endforeach
                                </select>
                                @error('product_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Product Details -->
                        <div class="row mb-3">
                            <div class="col-md-8">
                                <label for="name" class="form-label">Product Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                       id="name" name="name" value="{{ old('name') }}" required>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label for="country_of_origin" class="form-label">Country of Origin</label>
                                <input type="text" class="form-control @error('country_of_origin') is-invalid @enderror" 
                                       id="country_of_origin" name="country_of_origin" value="{{ old('country_of_origin') }}">
                                @error('country_of_origin')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-12">
                                <label for="description" class="form-label">Description</label>
                                <textarea class="form-control @error('description') is-invalid @enderror" 
                                          id="description" name="description" rows="3">{{ old('description') }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Category and Subcategory -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="category_id" class="form-label">Category</label>
                                <select class="form-select @error('category_id') is-invalid @enderror" 
                                        id="category_id" name="category_id">
                                    <option value="">Select Category (Optional)</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 class="col-md-6">
                                <label for="subcategory_id" class="form-label">Subcategory</label>
                                <select class="form-select @error('subcategory_id') is-invalid @enderror" 
                                        id="subcategory_id" name="subcategory_id">
                                    <option value="">Select Subcategory (Optional)</option>
                                </select>
                                @error('subcategory_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Pricing Section -->
                        <div class="row mb-3">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">
                                    <i class="bi bi-calculator me-2"></i>Pricing Information
                                </h6>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="market_price_bdt" class="form-label">Market Price (BDT)</label>
                                <div class="input-group">
                                    <span class="input-group-text">৳</span>
                                    <input type="number" step="0.01" min="0"
                                           class="form-control @error('market_price_bdt') is-invalid @enderror"
                                           id="market_price_bdt" name="market_price_bdt" value="{{ old('market_price_bdt') }}">
                                    @error('market_price_bdt')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="text-muted">Base price before VAT/Tax</small>
                            </div>
                            <div class="col-md-4">
                                <label for="bidding_price_bdt" class="form-label">Bidding Price (BDT) <span class="text-muted">(Optional)</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">৳</span>
                                    <input type="number" step="0.01" min="0"
                                           class="form-control @error('bidding_price_bdt') is-invalid @enderror"
                                           id="bidding_price_bdt" name="bidding_price_bdt" value="{{ old('bidding_price_bdt') }}">
                                    @error('bidding_price_bdt')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="text-muted">Leave empty for auto-calculation</small>
                            </div>
                            <div class="col-md-4">
                                <label for="measurement_unit" class="form-label">Measurement Unit</label>
                                <input type="text" class="form-control @error('measurement_unit') is-invalid @enderror" 
                                       id="measurement_unit" name="measurement_unit" value="{{ old('measurement_unit') }}"
                                       placeholder="e.g., piece, kg, liter">
                                @error('measurement_unit')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label for="quantity_required" class="form-label">Quantity Required <span class="text-danger">*</span></label>
                                <input type="number" min="1" 
                                       class="form-control @error('quantity_required') is-invalid @enderror" 
                                       id="quantity_required" name="quantity_required" value="{{ old('quantity_required', 1) }}" required>
                                @error('quantity_required')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Priority and Mandatory -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="priority" class="form-label">Priority <span class="text-danger">*</span></label>
                                <select class="form-select @error('priority') is-invalid @enderror" 
                                        id="priority" name="priority" required>
                                    <option value="high" {{ old('priority') == 'high' ? 'selected' : '' }}>High</option>
                                    <option value="medium" {{ old('priority', 'medium') == 'medium' ? 'selected' : '' }}>Medium</option>
                                    <option value="low" {{ old('priority') == 'low' ? 'selected' : '' }}>Low</option>
                                </select>
                                @error('priority')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <div class="form-check mt-4">
                                    <input class="form-check-input" type="checkbox" 
                                           id="is_mandatory" name="is_mandatory" value="1"
                                           {{ old('is_mandatory') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_mandatory">
                                        This is a mandatory product
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Notes -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <label for="notes" class="form-label">Notes</label>
                                <textarea class="form-control @error('notes') is-invalid @enderror" 
                                          id="notes" name="notes" rows="2" 
                                          placeholder="Any additional notes or specifications...">{{ old('notes') }}</textarea>
                                @error('notes')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Submit Buttons -->
                        <div class="row">
                            <div class="col-12">
                                <div class="d-flex justify-content-end gap-2">
                                    <a href="{{ route('tenders.show', $tender) }}" class="btn btn-outline-secondary">
                                        <i class="bi bi-x-lg me-1"></i>Cancel
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="bi bi-check-lg me-1"></i>Add Product to Tender
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const newProductRadio = document.getElementById('new_product');
    const existingProductRadio = document.getElementById('existing_product');
    const existingProductSection = document.getElementById('existing_product_section');
    const productSelect = document.getElementById('product_id');
    const categorySelect = document.getElementById('category_id');
    const subcategorySelect = document.getElementById('subcategory_id');

    // Toggle product selection method
    function toggleProductMethod() {
        if (existingProductRadio.checked) {
            existingProductSection.style.display = 'block';
        } else {
            existingProductSection.style.display = 'none';
            productSelect.value = '';
        }
    }

    newProductRadio.addEventListener('change', toggleProductMethod);
    existingProductRadio.addEventListener('change', toggleProductMethod);

    // Auto-fill form when existing product is selected
    productSelect.addEventListener('change', function() {
        if (this.value) {
            const option = this.options[this.selectedIndex];
            document.getElementById('name').value = option.dataset.name || '';
            document.getElementById('description').value = option.dataset.description || '';
            document.getElementById('country_of_origin').value = option.dataset.country || '';
            document.getElementById('market_price_bdt').value = option.dataset.price || '';
            document.getElementById('measurement_unit').value = option.dataset.unit || '';
            
            // Set category and load subcategories
            if (option.dataset.category) {
                categorySelect.value = option.dataset.category;
                loadSubcategories(option.dataset.category, option.dataset.subcategory);
            }
        }
    });

    // Load subcategories when category changes
    categorySelect.addEventListener('change', function() {
        loadSubcategories(this.value);
    });

    function loadSubcategories(categoryId, selectedSubcategoryId = null) {
        subcategorySelect.innerHTML = '<option value="">Select Subcategory (Optional)</option>';
        
        if (categoryId) {
            fetch(`/tender-products/categories/${categoryId}/subcategories`)
                .then(response => response.json())
                .then(subcategories => {
                    subcategories.forEach(subcategory => {
                        const option = document.createElement('option');
                        option.value = subcategory.id;
                        option.textContent = subcategory.name;
                        if (selectedSubcategoryId && subcategory.id == selectedSubcategoryId) {
                            option.selected = true;
                        }
                        subcategorySelect.appendChild(option);
                    });
                })
                .catch(error => console.error('Error loading subcategories:', error));
        }
    }

    // Load subcategories on page load if category is selected
    if (categorySelect.value) {
        loadSubcategories(categorySelect.value, '{{ old('subcategory_id') }}');
    }
});
</script>
@endsection