{% extends "base.html" %}

{% block title %}Configuración de Gateway - Mi Aplicación{% endblock %}

{% block content %}
<header class="main-header">
    <h1>Configuración de Gateway</h1>
    <p>Configure los parámetros de su gateway para una conexión óptima</p>
</header>

<!-- Panel de información general -->
<section class="content-box">
    <div class="panel-header">
        <h2>Información del Gateway</h2>
        <span class="badge badge-primary">Protegido</span>
    </div>
    
    <div class="gateway-info">
        <div class="info-item">
            <div class="info-label">EUI del Gateway:</div>
            <div class="info-value">{{ gateway_eui }}</div>
        </div>
        
        <div class="info-item">
            <div class="info-label">Estado:</div>
            <div class="info-value">
                <span class="status-indicator {% if gateway_status == 'online' %}online{% else %}offline{% endif %}"></span>
                {{ gateway_status|capitalize }}
            </div>
        </div>
        
        <div class="info-item">
            <div class="info-label">IP:</div>
            <div class="info-value">{{ gateway_ip }}</div>
        </div>
        
        <div class="info-item">
            <div class="info-label">Versión de Firmware:</div>
            <div class="info-value">{{ firmware_version }}</div>
        </div>
    </div>
</section>

<!-- Panel de configuración de LoRaWAN -->
<section class="content-box">
    <div class="panel-header">
        <h2>Configuración LoRaWAN</h2>
    </div>
    
    <form id="lorawan-config-form" method="POST" action="{{ url_for('save_lorawan_config_route') }}">
        <div class="form-row">
            <div class="form-group">
                <label for="frequency_plan">Plan de Frecuencia</label>
                <select id="frequency_plan" name="frequency_plan" required>
                    <option value="EU868" {% if frequency_plan == 'EU868' %}selected{% endif %}>Europa (EU868)</option>
                    <option value="US915" {% if frequency_plan == 'US915' %}selected{% endif %}>Estados Unidos (US915)</option>
                    <option value="AU915" {% if frequency_plan == 'AU915' %}selected{% endif %}>Australia (AU915)</option>
                    <option value="AS923" {% if frequency_plan == 'AS923' %}selected{% endif %}>Asia (AS923)</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="lorawan_public">Servidor LoRaWAN</label>
                <select id="lorawan_public" name="lorawan_public" required>
                    <option value="ttn" {% if lorawan_public == 'ttn' %}selected{% endif %}>The Things Network</option>
                    <option value="chirpstack" {% if lorawan_public == 'chirpstack' %}selected{% endif %}>ChirpStack</option>
                    <option value="custom" {% if lorawan_public == 'custom' %}selected{% endif %}>Personalizado</option>
                </select>
            </div>
        </div>
        
        <div id="custom-server-fields" {% if lorawan_public != 'custom' %}style="display:none;"{% endif %}>
            <div class="form-row">
                <div class="form-group">
                    <label for="server_address">Dirección del Servidor</label>
                    <input type="text" id="server_address" name="server_address" value="{{ server_address }}" placeholder="eu1.cloud.thethings.network">
                </div>
                
                <div class="form-group">
                    <label for="server_port">Puerto</label>
                    <input type="number" id="server_port" name="server_port" value="{{ server_port }}" placeholder="1700" min="1" max="65535">
                </div>
            </div>
        </div>
        
        <div class="form-row">
            <div class="form-group">
                <label for="gateway_id">ID del Gateway</label>
                <input type="text" id="gateway_id" name="gateway_id" value="{{ gateway_id }}" required>
            </div>
            
            <div class="form-group">
                <label for="gateway_key">Clave de Acceso</label>
                <div class="password-field">
                    <input type="password" id="gateway_key" name="gateway_key" value="{{ gateway_key }}" required>
                    <button type="button" class="toggle-password" data-target="gateway_key">
                        <i class="icon-eye"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <button type="submit" class="btn-primary">Guardar Configuración LoRaWAN</button>
    </form>
</section>

<!-- Panel de configuración avanzada -->
<section class="content-box">
    <div class="panel-header">
        <h2>Configuración Avanzada</h2>
    </div>
    
    <form id="advanced-config-form" method="POST" action="{{ url_for('save_advanced_config') }}">
        <div class="form-row">
            <div class="form-group">
                <label for="packet_forwarder">Packet Forwarder</label>
                <select id="packet_forwarder" name="packet_forwarder" required>
                    <option value="basic" {% if packet_forwarder == 'basic' %}selected{% endif %}>Básico</option>
                    <option value="mp" {% if packet_forwarder == 'mp' %}selected{% endif %}>Multi-protocolo</option>
                    <option value="custom" {% if packet_forwarder == 'custom' %}selected{% endif %}>Personalizado</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="beacon_period">Periodo de Beacon (ms)</label>
                <input type="number" id="beacon_period" name="beacon_period" value="{{ beacon_period }}" min="0" placeholder="128000">
            </div>
        </div>
        
        <div class="form-row">
            <div class="form-group">
                <label for="keepalive_interval">Intervalo de Keepalive (s)</label>
                <input type="number" id="keepalive_interval" name="keepalive_interval" value="{{ keepalive_interval }}" min="10" placeholder="10">
            </div>
            
            <div class="form-group">
                <label for="stat_interval">Intervalo de Estadísticas (s)</label>
                <input type="number" id="stat_interval" name="stat_interval" value="{{ stat_interval }}" min="5" placeholder="30">
            </div>
        </div>
        
        <div class="form-group">
            <label for="custom_command">Comando Personalizado</label>
            <textarea id="custom_command" name="custom_command" rows="3" placeholder="Ingrese comandos adicionales para la configuración...">{{ custom_command }}</textarea>
        </div>
        
        <button type="submit" class="btn-primary">Guardar Configuración Avanzada</button>
    </form>
</section>
{% endblock %}

{% block extra_js %}
<script>
    // Mostrar/ocultar campos de servidor personalizado
    document.getElementById('lorawan_public').addEventListener('change', function() {
        const customFields = document.getElementById('custom-server-fields');
        if (this.value === 'custom') {
            customFields.style.display = 'block';
        } else {
            customFields.style.display = 'none';
        }
    });
    
    // Mostrar/ocultar contraseñas
    document.querySelectorAll('.toggle-password').forEach(button => {
        button.addEventListener('click', function() {
            const targetId = this.getAttribute('data-target');
            const passwordField = document.getElementById(targetId);
            
            if (passwordField.type === 'password') {
                passwordField.type = 'text';
                this.innerHTML = '<i class="icon-eye-off"></i>';
            } else {
                passwordField.type = 'password';
                this.innerHTML = '<i class="icon-eye"></i>';
            }
        });
    });
</script>
{% endblock %}

{% block extra_css %}
<style>
    .panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5rem;
    }
    
    .badge {
        padding: 0.3rem 0.6rem;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 500;
    }
    
    .badge-primary {
        background-color: var(--primary-color);
        color: white;
    }
    
    .gateway-info {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1.5rem;
    }
    
    .info-item {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .info-label {
        font-weight: 500;
        color: #555;
    }
    
    .info-value {
        font-size: 1.1rem;
        font-family: monospace;
        background-color: #f5f5f5;
        padding: 0.5rem 0.75rem;
        border-radius: 4px;
        display: flex;
        align-items: center;
    }
    
    .status-indicator {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin-right: 8px;
    }
    
    .status-indicator.online {
        background-color: #28a745;
        box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
    }
    
    .status-indicator.offline {
        background-color: #dc3545;
        box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
    }
    
    .password-field {
        position: relative;
        display: flex;
        align-items: center;
    }
    
    .toggle-password {
        position: absolute;
        right: 10px;
        background: none;
        border: none;
        color: #555;
        cursor: pointer;
        padding: 0.25rem;
    }
    
    .btn-primary {
        background-color: var(--primary-color);
        color: white;
        border: none;
        padding: 0.6rem 1.2rem;
        border-radius: 4px;
        cursor: pointer;
        font-weight: 500;
        font-size: 1rem;
        transition: background-color 0.2s;
    }
    
    .btn-primary:hover {
        background-color: var(--primary-hover);
    }
</style>
{% endblock %}