@extends('layouts.app')

@section('title', 'Configuración del Sistema')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0">
                    <i class="fas fa-cogs"></i> Configuración del Sistema
                </h1>
                <button class="btn btn-primary" onclick="saveConfig()">
                    <i class="fas fa-save"></i> Guardar Configuración
                </button>
            </div>

            <div class="row">
                <!-- Configuración General -->
                <div class="col-md-6">
                    <div class="card shadow mb-4">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <i class="fas fa-cog"></i> Configuración General
                            </h5>
                        </div>
                        <div class="card-body">
                            <form>
                                <div class="mb-3">
                                    <label class="form-label">Nombre de la Empresa</label>
                                    <input type="text" class="form-control" value="TPLink Bolivia" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Dirección</label>
                                    <input type="text" class="form-control" value="La Paz, Bolivia" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Teléfono</label>
                                    <input type="tel" class="form-control" value="+591 2 123456" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Email de Contacto</label>
                                    <input type="email" class="form-control" value="contacto@tplinkbolivia.com" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Sitio Web</label>
                                    <input type="url" class="form-control" value="https://tplinkbolivia.com">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Configuración de Facturación -->
                <div class="col-md-6">
                    <div class="card shadow mb-4">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <i class="fas fa-receipt"></i> Configuración de Facturación
                            </h5>
                        </div>
                        <div class="card-body">
                            <form>
                                <div class="mb-3">
                                    <label class="form-label">Prefijo de Factura</label>
                                    <input type="text" class="form-control" value="FAC" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Número de Factura Inicial</label>
                                    <input type="number" class="form-control" value="1" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Días de Vencimiento</label>
                                    <input type="number" class="form-control" value="30" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Impuesto (%)</label>
                                    <input type="number" class="form-control" value="13" step="0.01" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Moneda</label>
                                    <select class="form-select">
                                        <option value="BOB" selected>Boliviano (BOB)</option>
                                        <option value="USD">Dólar (USD)</option>
                                    </select>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- Configuración de Email -->
                <div class="col-md-6">
                    <div class="card shadow mb-4">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <i class="fas fa-envelope"></i> Configuración de Email
                            </h5>
                        </div>
                        <div class="card-body">
                            <form>
                                <div class="mb-3">
                                    <label class="form-label">Servidor SMTP</label>
                                    <input type="text" class="form-control" value="smtp.gmail.com" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Puerto</label>
                                    <input type="number" class="form-control" value="587" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Usuario</label>
                                    <input type="email" class="form-control" value="noreply@tplinkbolivia.com" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Contraseña</label>
                                    <input type="password" class="form-control" value="••••••••" required>
                                </div>
                                <div class="mb-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="emailTLS" checked>
                                        <label class="form-check-label" for="emailTLS">
                                            Usar TLS/SSL
                                        </label>
                                    </div>
                                </div>
                                <button type="button" class="btn btn-outline-primary" onclick="testEmail()">
                                    <i class="fas fa-paper-plane"></i> Probar Conexión
                                </button>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Configuración de Backup -->
                <div class="col-md-6">
                    <div class="card shadow mb-4">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <i class="fas fa-database"></i> Configuración de Backup
                            </h5>
                        </div>
                        <div class="card-body">
                            <form>
                                <div class="mb-3">
                                    <label class="form-label">Frecuencia de Backup</label>
                                    <select class="form-select">
                                        <option value="daily" selected>Diario</option>
                                        <option value="weekly">Semanal</option>
                                        <option value="monthly">Mensual</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Hora de Backup</label>
                                    <input type="time" class="form-control" value="02:00" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Retener Backups (días)</label>
                                    <input type="number" class="form-control" value="30" required>
                                </div>
                                <div class="mb-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="autoBackup" checked>
                                        <label class="form-check-label" for="autoBackup">
                                            Backup Automático
                                        </label>
                                    </div>
                                </div>
                                <button type="button" class="btn btn-outline-success" onclick="createBackup()">
                                    <i class="fas fa-download"></i> Crear Backup Ahora
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Configuración de Seguridad -->
            <div class="row">
                <div class="col-12">
                    <div class="card shadow mb-4">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <i class="fas fa-shield-alt"></i> Configuración de Seguridad
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label class="form-label">Tiempo de Sesión (minutos)</label>
                                        <input type="number" class="form-control" value="120" required>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label class="form-label">Intentos de Login</label>
                                        <input type="number" class="form-control" value="3" required>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label class="form-label">Bloqueo (minutos)</label>
                                        <input type="number" class="form-control" value="15" required>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="checkbox" id="require2FA">
                                        <label class="form-check-label" for="require2FA">
                                            Requerir Autenticación de Dos Factores
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="checkbox" id="logActions" checked>
                                        <label class="form-check-label" for="logActions">
                                            Registrar Todas las Acciones
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function saveConfig() {
    alert('Configuración guardada exitosamente');
}

function testEmail() {
    alert('Probando conexión de email...');
}

function createBackup() {
    alert('Creando backup del sistema...');
}
</script>
@endsection