{% 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>

                        <!-- Formulario de selección -->
                        <form method="POST" action="{{ url_for('commercial_invoice.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>
                                                            <div class="fw-bold text-primary">{{ "%.2f"|format(plan.get('new_total_cost', 0)) if plan.get('new_total_cost') else "%.2f"|format(0) }} €</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('commercial_invoice.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>

<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 botón para seleccionar todos
document.addEventListener('DOMContentLoaded', function() {
    const header = document.querySelector('h5:contains("Planes a incluir")');
    if (header) {
        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);
    }
});
</script>

{% endblock %}