@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-cog"></i> Configuración del Sistema
                </h1>
            </div>

            <div class="row">
                <!-- Navegación de pestañas -->
                <div class="col-12">
                    <ul class="nav nav-tabs" id="configTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="general-tab" data-bs-toggle="tab" data-bs-target="#general" type="button" role="tab">
                                <i class="fas fa-cog"></i> General
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="users-tab" data-bs-toggle="tab" data-bs-target="#users" type="button" role="tab">
                                <i class="fas fa-users"></i> Usuarios
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="backup-tab" data-bs-toggle="tab" data-bs-target="#backup" type="button" role="tab">
                                <i class="fas fa-database"></i> Backup
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="maintenance-tab" data-bs-toggle="tab" data-bs-target="#maintenance" type="button" role="tab">
                                <i class="fas fa-tools"></i> Mantenimiento
                            </button>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="tab-content mt-4" id="configTabsContent">
                <!-- Pestaña General -->
                <div class="tab-pane fade show active" id="general" role="tabpanel">
                    <div class="card shadow">
                        <div class="card-header">
                            <h5 class="mb-0">Configuración General</h5>
                        </div>
                        <div class="card-body">
                            <form method="POST" action="{{ route('configuracion.guardar-general') }}">
                                @csrf
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Nombre del Sistema</label>
                                            <input type="text" name="system_name" class="form-control" value="{{ old('system_name', session('app.name', config('app.name'))) }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Versión</label>
                                            <input type="text" class="form-control" value="1.0.0" readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Zona Horaria</label>
                                            <select name="timezone" class="form-select">
                                                @php $tz = old('timezone', session('app.timezone', config('app.timezone'))); @endphp
                                                <option value="America/La_Paz" {{ $tz === 'America/La_Paz' ? 'selected' : '' }}>America/La_Paz</option>
                                                <option value="America/Santa_Cruz" {{ $tz === 'America/Santa_Cruz' ? 'selected' : '' }}>America/Santa_Cruz</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Idioma</label>
                                            <select name="language" class="form-select">
                                                @php $lang = old('language', session('app.locale', app()->getLocale())); @endphp
                                                <option value="es" {{ $lang === 'es' ? 'selected' : '' }}>Español</option>
                                                <option value="en" {{ $lang === 'en' ? 'selected' : '' }}>English</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Elementos por Página</label>
                                            <input type="number" name="per_page" class="form-control" value="{{ old('per_page', (int)session('ui.per_page', 10)) }}" min="5" max="100">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Formato de Fecha</label>
                                            <select name="date_format" class="form-select">
                                                @php $df = old('date_format', session('ui.date_format', 'd/m/Y')); @endphp
                                                <option value="d/m/Y" {{ $df === 'd/m/Y' ? 'selected' : '' }}>dd/mm/yyyy</option>
                                                <option value="m/d/Y" {{ $df === 'm/d/Y' ? 'selected' : '' }}>mm/dd/yyyy</option>
                                                <option value="Y-m-d" {{ $df === 'Y-m-d' ? 'selected' : '' }}>yyyy-mm-dd</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i> Guardar Cambios
                                </button>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Pestaña Usuarios -->
                <div class="tab-pane fade" id="users" role="tabpanel">
                    <div class="card shadow">
                        <div class="card-header">
                            <h5 class="mb-0">Configuración de Usuarios</h5>
                        </div>
                        <div class="card-body">
                            <form method="POST" action="{{ route('configuracion.guardar-usuarios') }}">
                                @csrf
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Longitud Mínima de Contraseña</label>
                                            <input type="number" name="min_length" class="form-control" value="{{ old('min_length', (int)session('security.password.min_length', 8)) }}" min="4" max="20">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Expiración de Contraseña (días)</label>
                                            <input type="number" name="expire_days" class="form-control" value="{{ old('expire_days', 90) }}" min="30" max="365">
                                        </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="requireUppercase" name="require_uppercase" value="1" {{ old('require_uppercase', session('security.password.require_upper', true)) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="requireUppercase">
                                                Requerir mayúsculas
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check mb-3">
                                            <input class="form-check-input" type="checkbox" id="requireNumbers" name="require_numbers" value="1" {{ old('require_numbers', session('security.password.require_numbers', true)) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="requireNumbers">
                                                Requerir números
                                            </label>
                                        </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="requireSymbols" name="require_symbols" value="1" {{ old('require_symbols', session('security.password.require_symbols', false)) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="requireSymbols">
                                                Requerir símbolos especiales
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check mb-3">
                                            <input type="hidden" name="allow_self_reset" value="0">
                                            <input class="form-check-input" type="checkbox" id="allowSelfReset" name="allow_self_reset" value="1" {{ old('allow_self_reset', session('security.password.allow_self_reset', true)) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="allowSelfReset">
                                                Permitir auto-reset de contraseña
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i> Guardar Configuración
                                </button>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Pestaña Backup -->
                <div class="tab-pane fade" id="backup" role="tabpanel">
                    <div class="card shadow">
                        <div class="card-header">
                            <h5 class="mb-0">Configuración de Backup</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <h6>Configuración Automática</h6>
                                    <form>
                                        <div class="mb-3">
                                            <label class="form-label">Frecuencia</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</label>
                                            <input type="time" class="form-control" value="02:00">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Retener (días)</label>
                                            <input type="number" class="form-control" value="30" min="1" max="365">
                                        </div>
                                        <div class="form-check mb-3">
                                            <input class="form-check-input" type="checkbox" id="autoBackup" checked>
                                            <label class="form-check-label" for="autoBackup">
                                                Backup automático habilitado
                                            </label>
                                        </div>
                                    </form>
                                </div>
                                <div class="col-md-6">
                                    <h6>Backup Manual</h6>
                                    <p class="text-muted">Crear backup inmediato del sistema</p>
                                    <form method="POST" action="{{ route('configuracion.backup.crear') }}" class="mb-3">
                                        @csrf
                                        <button type="submit" class="btn btn-success">
                                            <i class="fas fa-download"></i> Crear Backup Ahora
                                        </button>
                                    </form>
                                    
                                    <h6 class="mt-4">Backups Recientes</h6>
                                    <div class="list-group">
                                        @forelse(($backups ?? collect()) as $b)
                                        <div class="list-group-item d-flex justify-content-between align-items-center">
                                            <div>
                                                <strong>{{ $b['name'] }}</strong>
                                                <br><small class="text-muted">{{ date('d/m/Y H:i', $b['mtime']) }} — {{ number_format($b['size']/1024, 1) }} KB</small>
                                            </div>
                                            <div class="d-flex">
                                                <a href="{{ route('configuracion.backup.descargar', ['file' => $b['name']]) }}" class="btn btn-sm btn-outline-primary me-2">
                                                    <i class="fas fa-download"></i>
                                                </a>
                                                <form method="POST" action="{{ route('configuracion.backup.eliminar', ['file' => $b['name']]) }}" onsubmit="return confirm('¿Eliminar backup {{ $b['name'] }}?')">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button class="btn btn-sm btn-outline-danger">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                        @empty
                                        <div class="list-group-item text-muted">No hay backups disponibles.</div>
                                        @endforelse
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Pestaña Mantenimiento -->
                <div class="tab-pane fade" id="maintenance" role="tabpanel">
                    <div class="card shadow">
                        <div class="card-header">
                            <h5 class="mb-0">Herramientas de Mantenimiento</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="card border-info">
                                        <div class="card-body text-center">
                                            <i class="fas fa-broom fa-3x text-info mb-3"></i>
                                            <h6>Limpiar Cache</h6>
                                            <p class="text-muted">Eliminar archivos de cache temporales</p>
                                            <form method="POST" action="{{ route('configuracion.mantenimiento.limpiar-cache') }}">
                                                @csrf
                                                <button class="btn btn-info" type="submit">
                                                    <i class="fas fa-broom"></i> Limpiar
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card border-warning">
                                        <div class="card-body text-center">
                                            <i class="fas fa-file-alt fa-3x text-warning mb-3"></i>
                                            <h6>Limpiar Logs</h6>
                                            <p class="text-muted">Eliminar logs antiguos del sistema</p>
                                            <form method="POST" action="{{ route('configuracion.mantenimiento.limpiar-logs') }}">
                                                @csrf
                                                <button class="btn btn-warning" type="submit">
                                                    <i class="fas fa-trash"></i> Limpiar
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                @if(config('database.default') !== 'sqlite')
                                <div class="col-md-4">
                                    <div class="card border-success">
                                        <div class="card-body text-center">
                                            <i class="fas fa-sync fa-3x text-success mb-3"></i>
                                            <h6>Optimizar BD</h6>
                                            <p class="text-muted">Optimizar base de datos</p>
                                            <form method="POST" action="{{ route('configuracion.mantenimiento.optimizar-bd') }}">
                                                @csrf
                                                <button class="btn btn-success" type="submit">
                                                    <i class="fas fa-sync"></i> Optimizar
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection