{% extends "base.html" %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="container-fluid" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 120px 0 40px 0;">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="card shadow-lg border-0" style="border-radius: 20px; overflow: hidden;">
                    <div class="card-body p-5">
                        <!-- Header -->
                        <div class="text-center mb-4" style="border-bottom: 2px solid #f1f5f9; padding-bottom: 20px;">
                            <h2 class="text-primary mb-3">{{ title }}</h2>
                            <p class="text-muted">Selecciona los planes que deseas incluir en la propuesta personalizada</p>
                        </div>

                        <!-- Información del cliente -->
                        <div class="client-info mb-4">
                            <h5 class="text-secondary mb-3">
                                <i class="fas fa-user me-2"></i>Cliente: {{ client_name }}
                            </h5>
                            <p class="text-muted"><i class="fas fa-home me-2"></i>{{ supply_address }}</p>
                        </div>
                        
                        <!-- Documentos existentes -->
                        {% if existing_proposals %}
                        <div class="mb-4">
                            <h5 class="text-secondary mb-3">
                                <i class="fas fa-file-pdf me-2"></i>Propuestas anteriores
                            </h5>
                            <div class="table-responsive">
                                <table class="table table-hover table-sm">
                                    <thead>
                                        <tr>
                                            <th>Fecha</th>
                                            <th>Nombre</th>
                                            <th>Planes incluidos</th>
                                            <th>Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for doc in existing_proposals %}
                                        <tr>
                                            <td>{{ doc.created_at.strftime('%d/%m/%Y %H:%M') }}</td>
                                            <td>{{ doc.file_name }}</td>
                                            <td>
                                                {% if doc.document_metadata and doc.document_metadata.get('planes_incluidos') %}
                                                    <small>{{ doc.document_metadata.get('planes_incluidos')|join(', ') }}</small>
                                                {% else %}
                                                    <small class="text-muted">No disponible</small>
                                                {% endif %}
                                            </td>
                                            <td>
                                                <div class="btn-group btn-group-sm">
                                                    <a href="{{ url_for('admin.download_document', document_id=doc.id) }}" class="btn btn-succes bg-oba" title="Descargar">
                                                        <i class="fas fa-download"></i>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        {% endif %}
                        
                        <!-- Documento de factura original -->
                        {% if original_invoice %}
                        <div class="mb-4">
                            <h5 class="text-secondary mb-3">
                                <i class="fas fa-file-invoice me-2"></i>Factura original
                            </h5>
                            <div class="d-flex align-items-center">
                                <div>
                                    <p class="mb-0">{{ original_invoice.file_name }}</p>
                                    <small class="text-muted">Subido el {{ original_invoice.created_at.strftime('%d/%m/%Y %H:%M') }}</small>
                                </div>
                                <div class="ms-auto">
                                    <a href="{{ url_for('admin.download_document', document_id=original_invoice.id) }}" class="btn btn-sm btn-success bg-oba">
                                        <i class="fas fa-download me-1"></i> Descargar
                                    </a>
                                </div>
                            </div>
                        </div>
                        {% endif %}

                        <!-- Formulario de selección -->
                        <form method="POST" action="{{ url_for('admin.recalculate_generate_proposal') }}">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                            
                            <!-- Selección de planes -->
                            <div class="mb-4">
                                <h5 class="text-secondary mb-3">
                                    <i class="fas fa-check-square me-2"></i>Planes a incluir en la propuesta
                                </h5>
                                
                                <div class="row">
                                    {% for plan in plans %}
                                    <div class="col-md-6 mb-3">
                                        <div class="card border-2" style="border-color: #e5e7eb !important;">
                                            <div class="card-body">
                                                <div class="form-check mb-3">
                                                    <input class="form-check-input" type="checkbox" name="selected_plans" value="{{ loop.index0 }}" id="plan{{ loop.index0 }}">
                                                    <label class="form-check-label fw-bold" for="plan{{ loop.index0 }}">
                                                        {{ plan.name }} - {{ plan.supplier }}
                                                    </label>
                                                </div>
                                                
                                                <div class="plan-details">
                                                    <div class="row">
                                                        <div class="col-6">
                                                            <small class="text-muted">Coste mensual:</small>
                                                            {% set monthly_cost = plan.get('new_total_cost') or plan.get('ole_cost') %}
                                                            {% if monthly_cost is none or monthly_cost is sameas false %}
                                                                {% if plan.get('current_cost', 0) > 0 and plan.get('savings_percentage', 0) > 0 %}
                                                                    {% set monthly_cost = plan.get('current_cost', 0) * (1 - plan.get('savings_percentage', 0) / 100) %}
                                                                {% endif %}
                                                            {% endif %}
                                                            <div class="fw-bold text-primary">
                                                                {% if monthly_cost and monthly_cost > 0 %}
                                                                    {{ "%.2f"|format(monthly_cost) }} €
                                                                {% else %}
                                                                    <span title="No se pudo calcular el coste mensual">N/A</span>
                                                                {% endif %}
                                                            </div>
                                                        </div>
                                                        <div class="col-6">
                                                            {% if plan.get('is_savings', True) %}
                                                                <small class="text-muted">Ahorro anual:</small>
                                                                <div class="fw-bold text-success">{{ plan.get('yearly_savings', 0)|round|int }} €</div>
                                                            {% else %}
                                                                <small class="text-muted">Coste adicional:</small>
                                                                <div class="fw-bold text-danger">+{{ plan.get('yearly_loss', 0)|round|int }} €</div>
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                    <div class="mt-2">
                                                        <small class="text-muted">Permanencia: {{ plan.get('contract_duration', 12) }} meses</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>

                            <!-- Comentario personalizado -->
                            <div class="mb-4">
                                <h5 class="text-secondary mb-3">
                                    <i class="fas fa-comment me-2"></i>Comentario personalizado
                                </h5>
                                <textarea class="form-control" name="custom_comment" rows="4" 
                                          placeholder="Añade un comentario personalizado para el cliente (ej: 'Para un restaurante como el suyo, recomendamos especialmente...')"></textarea>
                                <small class="form-text text-muted">Este comentario aparecerá en la propuesta junto con los planes seleccionados.</small>
                            </div>

                            <!-- Botones de acción -->
                            <div class="text-center">
                                <div class="row">
                                    <div class="col-md-6">
                                        <a href="{{ url_for('admin.admin_plans_selection') }}" class="btn btn-outline-secondary btn-lg w-100 mb-3">
                                            <i class="fas fa-arrow-left me-2"></i>Volver a planes
                                        </a>
                                    </div>
                                    <div class="col-md-6">
                                        <button type="submit" class="btn btn-primary btn-lg w-100 mb-3">
                                            <i class="fas fa-file-pdf me-2"></i>Generar propuesta
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .bg-oba {
        transition: all 0.5s ease;
        background-color: #A518D1;
        color:white;
        border-color: #A518D1 !important;
    }
    .bg-oba:hover {
        transition: all 0.5s ease;
        background-color: #351F96;
        color: white !important
        border-color: #351F96 !important;
    }
</style>

<script>
// Validar que al menos un plan esté seleccionado
document.querySelector('form').addEventListener('submit', function(e) {
    const checkboxes = document.querySelectorAll('input[name="selected_plans"]:checked');
    if (checkboxes.length === 0) {
        e.preventDefault();
        alert('Debes seleccionar al menos un plan para la propuesta.');
    }
});

// Seleccionar todos / Deseleccionar todos
function toggleAllPlans() {
    const checkboxes = document.querySelectorAll('input[name="selected_plans"]');
    const allChecked = Array.from(checkboxes).every(cb => cb.checked);
    
    checkboxes.forEach(cb => {
        cb.checked = !allChecked;
    });
}

// Añadir título explicativo y botón para seleccionar todos
document.addEventListener('DOMContentLoaded', function() {
    // Añadir título explicativo
    const header = document.querySelector('h5');
    if (header && header.textContent.includes('Planes a incluir')) {
        const infoText = document.createElement('small');
        infoText.className = 'text-muted d-block mt-2';
        infoText.innerHTML = '<i class="fas fa-info-circle me-1"></i>Selecciona los planes que deseas incluir en la propuesta';
        header.parentNode.insertBefore(infoText, header.nextSibling);
        
        // Añadir botón para alternar todos
        const toggleBtn = document.createElement('button');
        toggleBtn.type = 'button';
        toggleBtn.className = 'btn btn-sm btn-outline-primary ms-2';
        toggleBtn.innerHTML = '<i class="fas fa-check-double me-1"></i>Alternar todos';
        toggleBtn.onclick = toggleAllPlans;
        header.appendChild(toggleBtn);
    }
    
    // Preseleccionar el primer plan si hay planes disponibles
    const firstPlan = document.querySelector('input[name="selected_plans"]');
    if (firstPlan) {
        firstPlan.checked = true;
    }
});
</script>

{% endblock %}