{% extends "base.html" %}

{% block title %}Crear Esquema - ARCH{% endblock %}

{% block content %}
<div class="container mt-4">
    <h1>Crear Nuevo Esquema</h1>
    
    <div class="card">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0">Información del Esquema</h5>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ url_for('schemas.create') }}" id="schema-form">
                {{ form.csrf_token if form.csrf_token }}
                
                <div class="mb-3">
                    <label for="codigo" class="form-label">Código del Esquema</label>
                    <input type="text" class="form-control" id="codigo" name="codigo" required>
                </div>
                
                <div class="mb-3">
                    <label for="descripcion" class="form-label">Descripción</label>
                    <textarea class="form-control" id="descripcion" name="descripcion" rows="3" required></textarea>
                </div>
                
                <hr>
                <h4>Documentos del Esquema</h4>
                
                <div id="documents-container">
                    <!-- Initial document template -->
                    <div class="document-item card mb-3 p-3">
                        <div class="row">
                            <div class="col-md-3 mb-3">
                                <label class="form-label">Tipo de Documento</label>
                                <select class="form-select" name="doc_tipo[]" required>
                                    {% if filetypes %}
                                        {% for extension, filetype in filetypes.items() %}
                                            <option value="{{ extension }}">{{ filetype.descripcion }}</option>
                                        {% endfor %}
                                    {% else %}
                                        <option value="">No hay tipos disponibles</option>
                                    {% endif %}
                                </select>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Nombre</label>
                                <input type="text" class="form-control" name="doc_nombre[]" required>
                            </div>
                            <div class="col-md-2 mb-3">
                                <label class="form-label">Nivel Ver</label>
                                <input type="number" class="form-control" name="doc_nivel_ver[]" value="0" min="0" max="9999">
                            </div>
                            <div class="col-md-2 mb-3">
                                <label class="form-label">Nivel Editar</label>
                                <input type="number" class="form-control" name="doc_nivel_editar[]" value="1000" min="0" max="9999">
                            </div>
                            <div class="col-md-1 mb-3 d-flex align-items-end">
                                <button type="button" class="btn btn-danger remove-document" style="display:none;">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="mb-4">
                    <button type="button" class="btn btn-secondary" id="add-document">
                        <i class="fas fa-plus"></i> Agregar Documento
                    </button>
                </div>
                
                <div class="d-flex justify-content-between">
                    <button type="submit" class="btn btn-primary">Crear Esquema</button>
                    <a href="{{ url_for('schemas.list') }}" class="btn btn-secondary">Cancelar</a>
                </div>
            </form>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const container = document.getElementById('documents-container');
        const addButton = document.getElementById('add-document');
        
        // Initially enable the remove button if more than one document exists
        updateRemoveButtons();
        
        addButton.addEventListener('click', function() {
            const documentTemplate = container.querySelector('.document-item').cloneNode(true);
            
            // Reset values
            const inputs = documentTemplate.querySelectorAll('input[type="text"], input[type="number"]');
            inputs.forEach(input => {
                if (input.name.includes('nivel_ver')) {
                    input.value = '0';
                } else if (input.name.includes('nivel_editar')) {
                    input.value = '1000';
                } else {
                    input.value = '';
                }
            });
            
            container.appendChild(documentTemplate);
            updateRemoveButtons();
            
            // Add event listener to the new remove button
            documentTemplate.querySelector('.remove-document').addEventListener('click', function() {
                this.closest('.document-item').remove();
                updateRemoveButtons();
            });
        });
        
        // Function to update the visibility of remove buttons
        function updateRemoveButtons() {
            const items = container.querySelectorAll('.document-item');
            items.forEach((item, index) => {
                const removeBtn = item.querySelector('.remove-document');
                if (items.length > 1) {
                    removeBtn.style.display = 'block';
                } else {
                    removeBtn.style.display = 'none';
                }
            });
        }
        
        // Add event listeners to initial remove buttons
        document.querySelectorAll('.remove-document').forEach(button => {
            button.addEventListener('click', function() {
                this.closest('.document-item').remove();
                updateRemoveButtons();
            });
        });
    });
</script>
{% endblock %}