{% extends "base.html" %}
{% block title %}Solicitud #{{ solicitud.SolicitudID }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0">
        <a href="{{ url_for('solicitudes.lista') }}" class="text-decoration-none">
            <i class="bi bi-arrow-left"></i>
        </a>
        Solicitud #{{ solicitud.SolicitudID }}
        {% if solicitud.Estado == 'Pendiente' %}<span class="badge bg-warning text-dark ms-2">Pendiente</span>
        {% elif solicitud.Estado == 'Aprobada' %}<span class="badge bg-success ms-2">Aprobada</span>
        {% else %}<span class="badge bg-danger ms-2">Rechazada</span>{% endif %}
    </h4>
    {% if solicitud.Estado == 'Pendiente' %}
    <div>
        <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modalAprobar">
            <i class="bi bi-check-circle"></i> Aprobar
        </button>
        <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#modalRechazar">
            <i class="bi bi-x-circle"></i> Rechazar
        </button>
    </div>
    {% endif %}
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card shadow-sm mb-3">
            <div class="card-header"><strong><i class="bi bi-building"></i> Empresa</strong></div>
            <div class="card-body">
                <dl class="row mb-0">
                    <dt class="col-sm-4">NIT</dt><dd class="col-sm-8">{{ solicitud.NIT }}</dd>
                    <dt class="col-sm-4">Razon Social</dt><dd class="col-sm-8">{{ solicitud.NombreEmpresa or '-' }}</dd>
                    <dt class="col-sm-4">Nombre Comercial</dt><dd class="col-sm-8">{{ solicitud.NombreComercial or '-' }}</dd>
                    <dt class="col-sm-4">Direccion</dt><dd class="col-sm-8">{{ solicitud.Direccion or '-' }}</dd>
                    <dt class="col-sm-4">Telefono</dt><dd class="col-sm-8">{{ solicitud.Telefono or '-' }}</dd>
                    <dt class="col-sm-4">Celular</dt><dd class="col-sm-8">{{ solicitud.Celular or '-' }}</dd>
                    <dt class="col-sm-4">Departamento</dt><dd class="col-sm-8">{{ solicitud.Departamento or '-' }}</dd>
                    <dt class="col-sm-4">Ciudad</dt><dd class="col-sm-8">{{ solicitud.Ciudad or '-' }}</dd>
                </dl>
            </div>
        </div>

        <div class="card shadow-sm">
            <div class="card-header"><strong><i class="bi bi-person"></i> Responsable</strong></div>
            <div class="card-body">
                <dl class="row mb-0">
                    <dt class="col-sm-4">Nombre</dt><dd class="col-sm-8">{{ solicitud.Responsable or '-' }}</dd>
                    <dt class="col-sm-4">Telefono</dt><dd class="col-sm-8">{{ solicitud.TelefonoResponsable or '-' }}</dd>
                    <dt class="col-sm-4">Correo</dt><dd class="col-sm-8">{{ solicitud.CorreoResponsable or '-' }}</dd>
                    <dt class="col-sm-4">Motivo</dt><dd class="col-sm-8">{{ solicitud.Motivo or '-' }}</dd>
                </dl>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card shadow-sm mb-3">
            <div class="card-header"><strong><i class="bi bi-pc-display"></i> Equipo</strong></div>
            <div class="card-body">
                <dl class="row mb-0">
                    <dt class="col-sm-4">Nombre equipo</dt><dd class="col-sm-8">{{ solicitud.NombreEquipo or '-' }}</dd>
                    <dt class="col-sm-4">Sistema operativo</dt><dd class="col-sm-8"><small>{{ solicitud.OSVersion or '-' }}</small></dd>
                    <dt class="col-sm-4">Modulo</dt><dd class="col-sm-8"><span class="badge bg-secondary">{{ solicitud.Modulo }}</span></dd>
                    <dt class="col-sm-4">Licencia temporal</dt><dd class="col-sm-8">{{ solicitud.LicenciaTemporal }}</dd>
                    <dt class="col-sm-4">IP cliente</dt><dd class="col-sm-8"><code>{{ solicitud.IpCliente or '-' }}</code></dd>
                </dl>
            </div>
        </div>

        <div class="card shadow-sm mb-3">
            <div class="card-header"><strong><i class="bi bi-key"></i> Claves</strong></div>
            <div class="card-body">
                <small class="text-muted">Clave producto</small>
                <div class="bg-light p-2 rounded mb-2"><code class="text-break">{{ solicitud.ClaveProducto }}</code></div>
                <small class="text-muted">Clave mes</small>
                <div class="bg-light p-2 rounded"><code class="text-break">{{ solicitud.ClaveMes or '-' }}</code></div>
            </div>
        </div>

        {% if solicitud.Estado != 'Pendiente' %}
        <div class="card shadow-sm">
            <div class="card-header"><strong><i class="bi bi-clipboard-check"></i> Resolucion</strong></div>
            <div class="card-body">
                <dl class="row mb-0">
                    <dt class="col-sm-4">Estado</dt><dd class="col-sm-8">{{ solicitud.Estado }}</dd>
                    <dt class="col-sm-4">Resuelta el</dt><dd class="col-sm-8">{{ solicitud.FechaResolucion.strftime('%Y-%m-%d %H:%M:%S') if solicitud.FechaResolucion else '-' }}</dd>
                    <dt class="col-sm-4">Por</dt><dd class="col-sm-8">{{ solicitud.UsuarioAprobador or '-' }}</dd>
                    <dt class="col-sm-4">Vence el</dt><dd class="col-sm-8">{{ solicitud.FechaVencimiento.strftime('%Y-%m-%d') if solicitud.FechaVencimiento else 'Permanente' }}</dd>
                    <dt class="col-sm-4">Observaciones</dt><dd class="col-sm-8">{{ solicitud.Observaciones or '-' }}</dd>
                </dl>
            </div>
        </div>
        {% endif %}
    </div>
</div>

{% if solicitud.Estado == 'Pendiente' %}
<!-- Modal Aprobar -->
<div class="modal fade" id="modalAprobar" tabindex="-1">
    <div class="modal-dialog">
        <form method="POST" action="{{ url_for('solicitudes.aprobar', solicitud_id=solicitud.SolicitudID) }}">
            <div class="modal-content">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title">Aprobar solicitud #{{ solicitud.SolicitudID }}</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>Al aprobar:</p>
                    <ul class="small">
                        <li>Se registrara la licencia en <code>LicenciasEmpresas</code> como <strong>activa</strong>.</li>
                        <li>El cliente MIG la detectara automaticamente en su proximo polling (~10 segundos).</li>
                    </ul>

                    <div class="mb-3">
                        <label class="form-label">Duracion de la licencia</label>
                        <select name="duracion" class="form-select" id="selDuracion">
                            <option value="permanente">Permanente</option>
                            <option value="mensual">Mensual (30 dias)</option>
                            <option value="trimestral">Trimestral (90 dias)</option>
                            <option value="anual">Anual (365 dias)</option>
                            <option value="custom">Personalizada</option>
                        </select>
                    </div>
                    <div class="mb-3" id="divFechaCustom" style="display:none;">
                        <label class="form-label">Fecha de vencimiento</label>
                        <input type="date" name="fecha_vencimiento" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Observaciones (opcional)</label>
                        <textarea name="observaciones" class="form-control" rows="2"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success"><i class="bi bi-check-circle"></i> Aprobar</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Modal Rechazar -->
<div class="modal fade" id="modalRechazar" tabindex="-1">
    <div class="modal-dialog">
        <form method="POST" action="{{ url_for('solicitudes.rechazar', solicitud_id=solicitud.SolicitudID) }}">
            <div class="modal-content">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title">Rechazar solicitud #{{ solicitud.SolicitudID }}</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p class="small text-muted">El motivo se le mostrara al cliente cuando haga polling.</p>
                    <div class="mb-3">
                        <label class="form-label">Motivo del rechazo <span class="text-danger">*</span></label>
                        <textarea name="motivo" class="form-control" rows="3" required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-danger"><i class="bi bi-x-circle"></i> Rechazar</button>
                </div>
            </div>
        </form>
    </div>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
    const selDuracion = document.getElementById('selDuracion');
    if (selDuracion) {
        selDuracion.addEventListener('change', (e) => {
            document.getElementById('divFechaCustom').style.display = e.target.value === 'custom' ? 'block' : 'none';
        });
    }
</script>
{% endblock %}