@extends('layouts.app')

@section('title', 'Template Inventory Assignments - ' . $template->name)

@section('content')
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Page Header -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
            <div class="flex flex-col lg:flex-row lg:justify-between lg:items-start">
                <div class="mb-4 lg:mb-0">
                    <div class="flex items-center mb-4">
                        <div class="bg-indigo-100 rounded-lg p-3 mr-4">
                            <i class="fas fa-boxes text-indigo-600 text-xl"></i>
                        </div>
                        <div>
                            <h1 class="text-2xl font-bold text-gray-900">Template Inventory Assignments</h1>
                            <p class="mt-1 text-sm text-gray-500">Manage inventory items for questionnaire template</p>
                        </div>
                    </div>
                    <!-- Breadcrumb -->
                    <nav class="flex" aria-label="Breadcrumb">
                        <ol class="inline-flex items-center space-x-1 md:space-x-3">
                            <li class="inline-flex items-center">
                                <a href="{{ route('questionnaires.index') }}" class="text-gray-700 hover:text-indigo-600 transition-colors">
                                    <i class="fas fa-file-alt mr-2"></i> Questionnaires
                                </a>
                            </li>
                            <li>
                                <div class="flex items-center">
                                    <i class="fas fa-chevron-right text-gray-400 mx-2 text-xs"></i>
                                    <a href="{{ route('questionnaires.show', $template) }}" class="text-gray-700 hover:text-indigo-600 transition-colors">
                                        {{ $template->name }}
                                    </a>
                                </div>
                            </li>
                            <li aria-current="page">
                                <div class="flex items-center">
                                    <i class="fas fa-chevron-right text-gray-400 mx-2 text-xs"></i>
                                    <span class="text-gray-500">Inventory Assignments</span>
                                </div>
                            </li>
                        </ol>
                    </nav>
                </div>
                <div class="flex gap-3">
                    <a href="{{ route('questionnaires.show', $template) }}" class="inline-flex items-center px-4 py-2 bg-gray-600 text-white text-sm font-medium rounded-lg hover:bg-gray-700 transition-all duration-200 shadow-sm hover:shadow-md">
                        <i class="fas fa-arrow-left mr-2"></i> Back to Template
                    </a>
                </div>
            </div>
        </div>

        <!-- Template Overview -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
            <div class="flex items-center mb-4">
                <i class="fas fa-clipboard-list text-gray-400 mr-2"></i>
                <h2 class="text-lg font-semibold text-gray-900">Template Details</h2>
            </div>
            <div class="flex flex-col lg:flex-row lg:justify-between">
                <div class="lg:w-3/4">
                    <div class="flex items-center mb-2">
                        <div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
                            <i class="fas fa-file-alt text-indigo-600"></i>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-900">{{ $template->name }}</h3>
                    </div>
                    <p class="text-gray-600 mb-3">{{ $template->description ?? 'No description' }}</p>
                    <div class="flex flex-wrap gap-2">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                            <i class="fas fa-cog mr-1 text-xs"></i>
                            {{ $template->serviceType->name ?? 'Not specified' }}
                        </span>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $template->is_active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                            <i class="fas fa-circle text-xs mr-1.5 opacity-50"></i>
                            {{ $template->is_active ? 'Active' : 'Inactive' }}
                        </span>
                    </div>
                </div>
                <div class="lg:w-1/4 text-center lg:text-right mt-4 lg:mt-0">
                    <div class="inline-flex items-center px-4 py-2 bg-indigo-50 rounded-lg">
                        <i class="fas fa-layer-group text-indigo-600 mr-2"></i>
                        <span class="text-indigo-900 font-semibold">{{ $template->questions->count() }}</span>
                        <span class="text-indigo-600 ml-1">questions</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Current Assignments Overview -->
        @if($template->inventoryItems->count() > 0)
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
            <div class="flex items-center mb-6">
                <i class="fas fa-list text-gray-400 mr-2"></i>
                <h2 class="text-lg font-semibold text-gray-900">Current Inventory Assignments</h2>
                <span class="ml-3 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-100 text-emerald-800">
                    {{ $template->inventoryItems->count() }} items
                </span>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                @foreach($template->inventoryItems as $assignment)
                <div class="border border-gray-200 rounded-xl p-4 hover:border-indigo-300 transition-all duration-200 hover:shadow-sm">
                    <div class="flex justify-between items-start mb-3">
                        <div class="flex-1">
                            <div class="flex items-center mb-1">
                                <div class="flex-shrink-0 h-8 w-8 bg-indigo-100 rounded-full flex items-center justify-center mr-2">
                                    <i class="fas fa-box text-indigo-600 text-xs"></i>
                                </div>
                                <h6 class="font-semibold text-gray-900 truncate">{{ $assignment->inventoryItem->name }}</h6>
                            </div>
                            <p class="text-sm text-gray-600">{{ $assignment->inventoryItem->category->name }}</p>
                        </div>
                        <div class="text-right">
                            <span class="inline-flex items-center text-emerald-600 font-semibold">
                                <i class="fas fa-dollar-sign text-xs mr-1"></i>
                                {{ number_format($assignment->getTotalPrice(), 2) }}
                            </span>
                        </div>
                    </div>
                    <div class="space-y-2 text-sm">
                        <div class="flex justify-between">
                            <span class="text-gray-600">Default Quantity:</span>
                            <span class="font-medium text-gray-900">{{ $assignment->default_quantity }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Optional:</span>
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ $assignment->is_optional ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800' }}">
                                {{ $assignment->is_optional ? 'Yes' : 'No' }}
                            </span>
                        </div>
                        @if($assignment->option_label)
                        <div class="flex justify-between">
                            <span class="text-gray-600">Trigger Answer:</span>
                            <span class="font-medium text-gray-900">{{ $assignment->option_label }}</span>
                        </div>
                        @endif
                    </div>
                    <div class="mt-3 pt-3 border-t border-gray-200 flex justify-end gap-2">
                        <button type="button" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium transition-colors p-1 hover:bg-indigo-50 rounded" onclick="editAssignment('{{ $assignment->id }}')" title="Edit">
                            <i class="fas fa-edit mr-1"></i> Edit
                        </button>
                        <button type="button" class="text-red-600 hover:text-red-800 text-sm font-medium transition-colors p-1 hover:bg-red-50 rounded" onclick="removeAssignment('{{ $assignment->id }}')" title="Remove">
                            <i class="fas fa-trash mr-1"></i> Remove
                        </button>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endif

        <!-- Template Assignment Form -->
        <form action="{{ route('questionnaires.inventory.template.process', $template) }}" method="POST" id="templateAssignmentForm">
            @csrf
            @method('POST')
            
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200">
                    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center">
                        <div class="flex items-center mb-4 sm:mb-0">
                            <i class="fas fa-plus-circle text-gray-400 mr-2"></i>
                            <h2 class="text-lg font-semibold text-gray-900">Assign Inventory Items to Template</h2>
                        </div>
                        <div class="flex flex-wrap gap-2">
                            <button type="button" class="inline-flex items-center px-3 py-1.5 border border-gray-300 text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 transition-colors" onclick="selectAll()">
                                <i class="fas fa-check-square mr-1"></i> Select All
                            </button>
                            <button type="button" class="inline-flex items-center px-3 py-1.5 border border-gray-300 text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 transition-colors" onclick="clearAll()">
                                <i class="fas fa-square mr-1"></i> Clear All
                            </button>
                            <button type="button" class="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-lg text-white bg-emerald-600 hover:bg-emerald-700 transition-colors" onclick="previewAssignments()">
                                <i class="fas fa-eye mr-1"></i> Preview
                            </button>
                        </div>
                    </div>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                        @foreach($inventoryItems as $item)
                        <div class="inventory-item-card border border-gray-200 rounded-xl p-4 hover:border-indigo-300 transition-all duration-200">
                            <div class="flex items-start mb-3">
                                <input type="checkbox" 
                                       class="mt-1 h-4 w-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500" 
                                       id="item_{{ $item->id }}"
                                       name="inventory_items[]" 
                                       value="{{ $item->id }}"
                                       data-item-id="{{ $item->id }}"
                                       data-item-name="{{ $item->name }}"
                                       data-item-price="{{ $item->selling_price }}"
                                       onchange="toggleAssignmentFields(this)">
                                <label class="ml-3 flex-1 cursor-pointer" for="item_{{ $item->id }}">
                                    <div class="item-info">
                                        <div class="flex items-center mb-1">
                                            <div class="flex-shrink-0 h-6 w-6 bg-indigo-100 rounded-full flex items-center justify-center mr-2">
                                                <i class="fas fa-box text-indigo-600 text-xs"></i>
                                            </div>
                                            <div class="item-name font-medium text-gray-900">{{ $item->name }}</div>
                                        </div>
                                        <div class="item-details text-sm text-gray-600">
                                            <span class="category font-medium">{{ $item->category->name }}</span>
                                            <span class="price text-emerald-600 font-semibold ml-2">
                                                <i class="fas fa-dollar-sign text-xs"></i>
                                                {{ number_format($item->selling_price, 2) }}
                                            </span>
                                            @if($item->stock_quantity <= 0)
                                                <span class="text-red-600 ml-2">• Out of Stock</span>
                                            @endif
                                        </div>
                                    </div>
                                </label>
                            </div>
                        
                            <!-- Assignment Configuration (Hidden by default) -->
                            <div class="assignment-config border-t border-gray-200 pt-3 mt-3 hidden" id="config_{{ $item->id }}">
                                <div class="space-y-3">
                                    <div>
                                        <label class="block text-xs font-medium text-gray-700 mb-1">
                                            <i class="fas fa-key text-gray-400 mr-1"></i> Trigger Answer (Optional)
                                        </label>
                                        <input type="text" 
                                               class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors" 
                                               name="trigger_answer_{{ $item->id }}" 
                                               placeholder="e.g., Yes, No, Armed, Unarmed"
                                               title="Answer that triggers this item. Leave blank to always include.">
                                        <p class="text-xs text-gray-500 mt-1">Leave blank to always include this item</p>
                                    </div>
                                    <div class="grid grid-cols-2 gap-3">
                                        <div>
                                            <label class="block text-xs font-medium text-gray-700 mb-1">
                                                <i class="fas fa-hashtag text-gray-400 mr-1"></i> Default Quantity
                                            </label>
                                            <input type="number" 
                                                   class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors" 
                                                   name="default_quantity_{{ $item->id }}" 
                                                   value="1" 
                                                   min="1" 
                                                   required>
                                        </div>
                                        <div>
                                            <label class="block text-xs font-medium text-gray-700 mb-1">
                                                <i class="fas fa-toggle-off text-gray-400 mr-1"></i> Optional
                                            </label>
                                            <div class="flex items-center h-9">
                                                <input type="hidden" name="is_optional_{{ $item->id }}" value="0">
                                                <input type="checkbox" 
                                                       class="h-4 w-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500" 
                                                       name="is_optional_{{ $item->id }}" 
                                                       value="1">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
                    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center">
                        <div class="flex items-center">
                            <i class="fas fa-check-circle text-gray-400 mr-2"></i>
                            <span id="selectedCount" class="text-gray-600">0 items selected</span>
                        </div>
                        <div class="flex gap-2 mt-3 sm:mt-0">
                            <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-white bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-all duration-200 shadow-sm hover:shadow-md" id="submitBtn" disabled>
                                <i class="fas fa-save mr-2"></i> Save Assignments
                            </button>
                            <a href="{{ route('questionnaires.show', $template) }}" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 transition-colors">
                                Cancel
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <!-- Preview Modal -->
        <div class="fixed inset-0 z-50 overflow-y-auto hidden" id="previewModal">
            <div class="flex items-center justify-center min-h-screen px-4">
                <div class="fixed inset-0 bg-gray-900 bg-opacity-50 transition-opacity" onclick="closePreviewModal()"></div>
                <div class="relative bg-white rounded-xl max-w-4xl w-full max-h-[90vh] overflow-hidden shadow-xl">
                    <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                        <div class="flex items-center">
                            <i class="fas fa-eye text-indigo-600 mr-2"></i>
                            <h5 class="text-lg font-semibold text-gray-900">Assignment Preview</h5>
                        </div>
                        <button type="button" class="text-gray-400 hover:text-gray-600 transition-colors p-1 hover:bg-gray-100 rounded" onclick="closePreviewModal()">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="px-6 py-4 overflow-y-auto max-h-[60vh]">
                        <div id="previewContent">
                            <!-- Preview content will be loaded here -->
                        </div>
                    </div>
                    <div class="px-6 py-4 bg-gray-50 border-t border-gray-200 flex justify-end gap-2">
                        <button type="button" class="px-4 py-2 border border-gray-300 text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 transition-colors" onclick="closePreviewModal()">Close</button>
                        <button type="button" class="px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-white bg-indigo-600 hover:bg-indigo-700 transition-colors" onclick="submitForm()">Proceed with Assignment</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Help Section -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center mb-6">
                <i class="fas fa-info-circle text-gray-400 mr-2"></i>
                <h2 class="text-lg font-semibold text-gray-900">How Template Inventory Assignments Work</h2>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <div class="flex items-start mb-3">
                        <div class="flex-shrink-0 h-8 w-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
                            <i class="fas fa-layer-group text-indigo-600 text-xs"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-gray-900 mb-1">Template-Level Assignment</h3>
                            <p class="text-gray-700 text-sm">Items are assigned to the entire template rather than individual questions, making management simpler.</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="flex-shrink-0 h-8 w-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
                            <i class="fas fa-key text-indigo-600 text-xs"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-gray-900 mb-1">Trigger Answers</h3>
                            <p class="text-gray-700 text-sm">Specify which questionnaire answers should trigger each item (e.g., "Armed" → Body Armor).</p>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="flex items-start mb-3">
                        <div class="flex-shrink-0 h-8 w-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
                            <i class="fas fa-hashtag text-indigo-600 text-xs"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-gray-900 mb-1">Default Quantity</h3>
                            <p class="text-gray-700 text-sm">How many of each item to suggest when triggered.</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="flex-shrink-0 h-8 w-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
                            <i class="fas fa-toggle-off text-indigo-600 text-xs"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-gray-900 mb-1">Optional Items</h3>
                            <p class="text-gray-700 text-sm">If checked, the lead can skip these items during selection.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-6 p-4 bg-indigo-50 border border-indigo-200 rounded-xl">
                <div class="flex items-start">
                    <div class="flex-shrink-0">
                        <i class="fas fa-lightbulb text-indigo-600 mt-1"></i>
                    </div>
                    <div class="ml-3">
                        <h4 class="text-indigo-900 font-semibold mb-1">Pro Tip</h4>
                        <p class="text-indigo-700 text-sm">Leave trigger answer blank to always include an item, regardless of questionnaire responses. Use the Preview button to review all assignments before saving.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.inventory-item-card {
    transition: all 0.2s ease;
}

.inventory-item-card.selected {
    border-color: #10b981;
    background-color: #f0fdf4;
}

.item-info {
    margin-left: 1.5rem;
}

.item-name {
    font-weight: 600;
    color: #495057;
}

.item-details {
    font-size: 0.875rem;
    color: #6c757d;
}

.item-details .category {
    font-weight: 500;
}

.item-details .price {
    color: #28a745;
    font-weight: 600;
}

.assignment-config {
    border-top: 1px solid #e9ecef;
    padding-top: 0.75rem;
    margin-top: 0.75rem;
}
</style>
@endpush

@push('scripts')
<script>
let selectedAssignments = new Map();

function toggleAssignmentFields(checkbox) {
    const config = document.getElementById(`config_${checkbox.dataset.itemId}`);
    const card = checkbox.closest('.inventory-item-card');
    
    if (checkbox.checked) {
        config.classList.remove('hidden');
        card.classList.add('selected');
        
        // Track assignment
        selectedAssignments.set(checkbox.dataset.itemId, {
            itemId: checkbox.dataset.itemId,
            itemName: checkbox.dataset.itemName,
            itemPrice: parseFloat(checkbox.dataset.itemPrice)
        });
    } else {
        config.classList.add('hidden');
        card.classList.remove('selected');
        
        // Remove from tracking
        selectedAssignments.delete(checkbox.dataset.itemId);
    }
    
    updateSelectedCount();
    updateSubmitButton();
}

function updateSelectedCount() {
    const count = selectedAssignments.size;
    document.getElementById('selectedCount').textContent = `${count} items selected`;
}

function updateSubmitButton() {
    const submitBtn = document.getElementById('submitBtn');
    submitBtn.disabled = selectedAssignments.size === 0;
}

function selectAll() {
    const checkboxes = document.querySelectorAll('input[type="checkbox"][id^="item_"]:not(:disabled)');
    checkboxes.forEach(checkbox => {
        if (!checkbox.checked) {
            checkbox.checked = true;
            toggleAssignmentFields(checkbox);
        }
    });
}

function clearAll() {
    const checkboxes = document.querySelectorAll('input[type="checkbox"][id^="item_"]');
    checkboxes.forEach(checkbox => {
        if (checkbox.checked) {
            checkbox.checked = false;
            toggleAssignmentFields(checkbox);
        }
    });
}

function previewAssignments() {
    if (selectedAssignments.size === 0) {
        alert('Please select at least one inventory item to assign.');
        return;
    }
    
    const previewContent = document.getElementById('previewContent');
    let html = '<div class="overflow-x-auto"><table class="min-w-full divide-y divide-gray-200"><thead class="bg-gray-50"><tr><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Inventory Item</th><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Trigger Answer</th><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Quantity</th><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Optional</th><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th></tr></thead><tbody>';
    
    let totalEstimatedCost = 0;
    
    selectedAssignments.forEach((assignment, itemId) => {
        const config = document.getElementById(`config_${itemId}`);
        const triggerAnswer = config.querySelector(`input[name="trigger_answer_${itemId}"]`)?.value || 'Always';
        const quantity = config.querySelector(`input[name="default_quantity_${itemId}"]`)?.value || 1;
        const isOptional = config.querySelector(`input[name="is_optional_${itemId}"]`)?.checked || false;
        const itemTotal = assignment.itemPrice * parseInt(quantity);
        
        totalEstimatedCost += itemTotal;
        
        html += `
            <tr class="hover:bg-gray-50">
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${assignment.itemName}</td>
                <td class="px-6 py-4 whitespace-nowrap"><span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">${triggerAnswer}</span></td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${quantity}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${isOptional ? 'Yes' : 'No'}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-medium">$${itemTotal.toFixed(2)}</td>
            </tr>
        `;
    });
    
    html += `</tbody></table></div>`;
    html += `<div class="mt-4 p-4 bg-green-50 border border-green-200 rounded-lg"><div class="text-green-900"><strong>Estimated Total Cost:</strong> $${totalEstimatedCost.toFixed(2)} for ${selectedAssignments.size} assignments</div></div>`;
    
    previewContent.innerHTML = html;
    
    // Show modal
    document.getElementById('previewModal').classList.remove('hidden');
}

function closePreviewModal() {
    document.getElementById('previewModal').classList.add('hidden');
}

function submitForm() {
    // Close modal
    closePreviewModal();
    
    // Submit form
    document.getElementById('templateAssignmentForm').submit();
}

function editAssignment(assignmentId) {
    // Implement edit functionality (could open a modal or redirect to edit page)
    console.log('Edit assignment:', assignmentId);
}

function removeAssignment(assignmentId) {
    if (confirm('Are you sure you want to remove this assignment?')) {
        // Implement remove functionality
        console.log('Remove assignment:', assignmentId);
    }
}

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    updateSelectedCount();
    updateSubmitButton();
});
</script>
@endpush