{% extends 'base.html' %}

{% block titulo %} Asignación Administrativa {% endblock %}

{% block vertical %} {% include 'partes/vertical.html' %} {% endblock %}

{% block horizontal %} {% include 'partes/horizontal.html' %} {% endblock %}

{% block seccion %}
<div class="d-flex align-items-left align-items-md-center flex-column flex-md-row pt-2 pb-4">
    <div>
        <h3 class="fw-bold mb-3">Asignación de Vehículos Administrativos a Unidades</h3>
        <h6 class="op-7 mb-2">Servicio de Transporte del Ejército Bolivariano</h6>
    </div>
</div>
{% endblock %}

{% block contenido %}
<div class="card card-stats card-round">
    <div class="card-body p-4">
        <form method="post">
            {% csrf_token %}
            <div class="row mb-3">
                <div class="col-md-4">
                    <label for="{{ form.unidad.id_for_label }}" class="form-label">{{ form.unidad.label }}</label>
                    {{ form.unidad }}
                </div>
                <div class="col-md-4">
                    <label for="{{ form.directores.id_for_label }}" class="form-label">{{ form.directores.label }}</label>
                    {{ form.directores }}
                </div>
                <div class="col-md-4">
                    <label for="{{ form.jefes.id_for_label }}" class="form-label">{{ form.jefes.label }}</label>
                    {{ form.jefes }}
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="{{ form.vehiculos.id_for_label }}" class="form-label">{{ form.vehiculos.label }}</label>
                    {{ form.vehiculos }}
                    <small class="form-text text-muted">Mantén presionada la tecla Ctrl (o Cmd en Mac) para seleccionar múltiples vehículos.</small>
                </div>
                <div class="col-md-3">
                    <label for="{{ form.comprobante.id_for_label }}" class="form-label">{{ form.comprobante.label }}</label>
                    {{ form.comprobante }}
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-12">
                    <label class="form-label">Precios por vehículo</label>
                    <div id="precio-container" class="mb-3"></div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-12 text-end">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-plus"></i> REGISTRAR VEHICULO
                    </button>
                </div>
            </div>
        </form>
        
        <div class="table-responsive mt-4">
            <table class="table table-striped table-hover" style="width:100%">
                <thead class="thead-dark">
                    <tr>
                        <th>N°</th>
                        <th>Unidad</th>
                        <th>Placa Militar</th>
                        <th>Clase</th>
                        <th>Tipo</th>
                        <th>Marca</th>
                        <th>Modelo</th>
                        <th>Serial de Carrocería</th>
                        <th>Comprobante</th>
                        <th>Precio</th>
                        <th>Fecha de Asignación</th>
                    </tr>
                </thead>
                <tbody>
                    {% for administrativo in administrativos %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ administrativo.unidad.nombre }}</td>
                        <td>{{ administrativo.vehiculo.placa_militar }}</td>
                        <td>{{ administrativo.vehiculo.clase }}</td>
                        <td>{{ administrativo.vehiculo.tipo }}</td>
                        <td>{{ administrativo.vehiculo.marca }}</td>
                        <td>{{ administrativo.vehiculo.modelo }}</td>
                        <td>{{ administrativo.vehiculo.serial_carroceria }}</td>
                        <td>{{ administrativo.comprobante }}</td>
                        <td>{{ administrativo.precio }}</td>
                        <td>{{ administrativo.fecha_creacion|date:"d-m-Y" }}</td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="11" class="text-center">No hay asignaciones activas.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        <div class="d-flex justify-content-between mt-3 px-3">
            <a href="{% url 'generar_pdf' %}" class="btn btn-primary">
                <i class="fas fa-file-pdf"></i> Descargar PDF
            </a>
            <form action="{% url 'eliminar_todo' %}" method="post" style="display:inline;">
                {% csrf_token %}
                <button type="submit" class="btn btn-danger">
                    <i class="fas fa-trash"></i> Archivar Todo
                </button>
            </form>
        </div>
        
        <script>
        document.addEventListener('DOMContentLoaded', function() {
            const vehiculosSelect = document.getElementById('vehiculos');
            const precioContainer = document.getElementById('precio-container');
        
            function updatePrecios() {
                precioContainer.innerHTML = '';
                const selectedOptions = Array.from(vehiculosSelect.selectedOptions);
        
                selectedOptions.forEach(option => {
                    const vehiculoId = option.value;
                    const vehiculoText = option.text;
                    const div = document.createElement('div');
                    div.className = 'input-group mb-2';
                    div.innerHTML = `
                        <span class="input-group-text">${vehiculoText}</span>
                        <input type="number" step="0.01" name="precios" class="form-control" placeholder="Precio" required>
                    `;
                    precioContainer.appendChild(div);
                });
            }
        
            vehiculosSelect.addEventListener('change', updatePrecios);
            updatePrecios();
        
            $('#tabla-asignaciones').DataTable({
                language: { url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/es-ES.json' },
                responsive: true,
                autoWidth: false,
                dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6 d-flex justify-content-end"f>>rt<"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
                order: [[0, 'asc']],
                pageLength: 10,
            });
        });
        </script>
    </div>
</div>
{% endblock %}

{% block pie %} {% include 'partes/pie.html' %} {% endblock %}