{% extends "base.html" %}
{% block title %}Configuración{% endblock %}
{% block header %}Configuración{% endblock %}
{% block content %}
<div class="max-w-3xl">
    <div class="bg-white rounded-xl shadow-sm border border-gray-200">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="font-semibold text-gray-800"><i class="fas fa-database mr-2 text-blue-500"></i>Conexión Firebird</h3>
        </div>
        <div class="p-6">
            <form method="POST" action="/config/save" class="space-y-6">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Host</label>
                        <input type="text" name="config_firebird_host"
                            value="{{ configs|selectattr('key', 'equalto', 'firebird_host')|map(attribute='value')|first }}"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 text-sm">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Puerto</label>
                        <input type="text" name="config_firebird_port"
                            value="{{ configs|selectattr('key', 'equalto', 'firebird_port')|map(attribute='value')|first }}"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 text-sm">
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Base de Datos (ruta)</label>
                    <input type="text" name="config_firebird_database"
                        value="{{ configs|selectattr('key', 'equalto', 'firebird_database')|map(attribute='value')|first }}"
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 text-sm">
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Usuario</label>
                        <input type="text" name="config_firebird_user"
                            value="{{ configs|selectattr('key', 'equalto', 'firebird_user')|map(attribute='value')|first }}"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 text-sm">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Contraseña</label>
                        <input type="password" name="config_firebird_password"
                            value="{{ configs|selectattr('key', 'equalto', 'firebird_password')|map(attribute='value')|first }}"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 text-sm">
                    </div>
                </div>
                <div class="flex items-center space-x-3">
                    <button type="button" onclick="testFirebird()"
                        class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-medium">
                        <i class="fas fa-plug mr-1"></i> Probar Conexión
                    </button>
                    <span id="fb-status" class="text-sm"></span>
                </div>

                <hr class="border-gray-200">

                <h4 class="font-medium text-gray-800"><i class="fas fa-cloud mr-2 text-blue-500"></i>API de Envío</h4>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">URL Base de la API</label>
                    <input type="text" name="config_api_url"
                        value="{{ configs|selectattr('key', 'equalto', 'api_url')|map(attribute='value')|first }}"
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 text-sm"
                        placeholder="https://api.ejemplo.com">
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Método HTTP</label>
                        <select name="config_api_method"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 text-sm">
                            <option value="POST" {% if (configs|selectattr('key', 'equalto', 'api_method')|map(attribute='value')|first) == 'POST' %}selected{% endif %}>POST</option>
                            <option value="PUT" {% if (configs|selectattr('key', 'equalto', 'api_method')|map(attribute='value')|first) == 'PUT' %}selected{% endif %}>PUT</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Timeout (seg)</label>
                        <input type="number" name="config_api_timeout"
                            value="{{ configs|selectattr('key', 'equalto', 'api_timeout')|map(attribute='value')|first }}"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 text-sm">
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">API Key (Bearer token)</label>
                    <input type="text" name="config_api_key"
                        value="{{ configs|selectattr('key', 'equalto', 'api_key')|map(attribute='value')|first }}"
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 text-sm">
                </div>

                <hr class="border-gray-200">

                <h4 class="font-medium text-gray-800"><i class="fas fa-building mr-2 text-blue-500"></i>Datos del Prestador</h4>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">NIT / Documento Obligado</label>
                        <input type="text" name="config_num_documento_obligado"
                            value="{{ configs|selectattr('key', 'equalto', 'num_documento_obligado')|map(attribute='value')|first }}"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 text-sm">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Código Prestador</label>
                        <input type="text" name="config_cod_prestador"
                            value="{{ configs|selectattr('key', 'equalto', 'cod_prestador')|map(attribute='value')|first }}"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 text-sm">
                    </div>
                </div>

                <button type="submit"
                    class="px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors">
                    <i class="fas fa-save mr-2"></i> Guardar Configuración
                </button>
            </form>
        </div>
    </div>
</div>

<script>
async function testFirebird() {
    const btn = event.target;
    const status = document.getElementById('fb-status');
    btn.disabled = true;
    status.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Probando...';

    const form = btn.closest('form');
    const data = new FormData();
    data.append('host', form.querySelector('[name="config_firebird_host"]').value);
    data.append('port', form.querySelector('[name="config_firebird_port"]').value);
    data.append('database', form.querySelector('[name="config_firebird_database"]').value);
    data.append('fb_user', form.querySelector('[name="config_firebird_user"]').value);
    data.append('fb_password', form.querySelector('[name="config_firebird_password"]').value);

    const resp = await fetch('/terceros/test-connection', {method:'POST', body: data});
    const result = await resp.json();
    btn.disabled = false;
    status.innerHTML = result.success
        ? '<span class="text-green-600"><i class="fas fa-check-circle"></i> Conexión exitosa</span>'
        : '<span class="text-red-600"><i class="fas fa-times-circle"></i> ' + result.message + '</span>';
}
</script>
{% endblock %}