@extends('layouts.app', ['title' => term('nav_settings','Configuracion')])

@section('content')

<div class="stabs">
    <button class="stab active" data-stab="marca"><i class="fa-solid fa-palette"></i> Marca</button>
    <button class="stab" data-stab="terminos"><i class="fa-solid fa-font"></i> Términos</button>
    <button class="stab" data-stab="empresa"><i class="fa-solid fa-building"></i> Empresa</button>
    <button class="stab" data-stab="roles"><i class="fa-solid fa-user-shield"></i> Roles <span class="pill">{{ $roles->count() }}</span></button>
    <button class="stab" data-stab="importador-clientes"><i class="fa-solid fa-file-excel"></i> Importador clientes</button>
    <button class="stab" data-stab="seguridad"><i class="fa-solid fa-shield-halved"></i> Seguridad</button>
    <button class="stab" data-stab="respaldos"><i class="fa-solid fa-database"></i> Respaldos</button>
    <button class="stab" data-stab="actividad"><i class="fa-solid fa-list-check"></i> Actividad</button>
</div>

{{-- ===================== MARCA ===================== --}}
<div class="stab-panel active" id="stab-marca">
    <div class="grid g2" style="grid-template-columns:1.4fr 1fr">
        <div class="card">
            <div class="card-head">
                <div><div class="card-title">Identidad de marca</div><div class="sub">Personaliza nombre, logo y color principal del sistema</div></div>
                <span class="pill gold"><i class="fa-solid fa-palette"></i> Branding</span>
            </div>
            <form method="post" action="{{ route('settings.branding') }}" enctype="multipart/form-data" class="form-grid two">
                @csrf
                <div style="grid-column:1/-1;display:flex;gap:20px;align-items:center;padding:14px;border:1px dashed var(--line-strong);border-radius:14px;background:rgba(255,255,255,.02)">
                    <div style="width:96px;height:96px;border-radius:16px;background:#ffffff;border:1px solid var(--line);display:grid;place-items:center;color:#10131b;font-size:34px;overflow:hidden;box-shadow:0 12px 28px -10px rgba(201,168,76,.5)">
                        @if(brand_logo_url())
                            <img src="{{ brand_logo_url() }}" alt="Logo actual" style="width:100%;height:100%;object-fit:contain">
                        @else
                            <i class="fa-solid fa-building" style="color:var(--gold)"></i>
                        @endif
                    </div>
                    <div style="flex:1;display:grid;gap:8px">
                        <strong style="font-family:var(--display);font-size:18px">{{ brand_name() }} <span class="text-muted" style="font-weight:400">· {{ brand_subname() }}</span></strong>
                        <div class="sub">{{ brand_tagline() }}</div>
                        <div class="row">
                            <label style="text-transform:none;letter-spacing:0;font-weight:500" class="btn btn-sm btn-ghost" for="logo-input"><i class="fa-solid fa-cloud-arrow-up"></i> Subir logo (PNG/SVG/JPG, max 2MB)</label>
                            <input type="file" name="logo" id="logo-input" accept="image/*" style="display:none">
                            @if(brand_logo_url())
                                <label class="row" style="text-transform:none;letter-spacing:0;color:var(--muted);gap:6px;font-weight:500;cursor:pointer"><input type="checkbox" name="remove_logo" value="1" style="width:auto"> Eliminar logo actual</label>
                            @endif
                        </div>
                    </div>
                </div>

                <label>Nombre del sistema<input name="brand_name" value="{{ brand_name() }}" maxlength="80" required></label>
                <label>Subnombre (ej. "Admin")<input name="brand_subname" value="{{ brand_subname() }}" maxlength="80"></label>
                <label>Tagline<input name="brand_tagline" value="{{ brand_tagline() }}" maxlength="160"></label>
                <label>Color principal<input name="brand_accent" type="color" value="{{ brand_accent() ?: '#c9a84c' }}"></label>
                <label style="grid-column:1/-1">Titulo de la pagina de login<input name="brand_login_title" value="{{ setting('brand_login_title') }}" maxlength="255" placeholder="Sistema inmobiliario inteligente…"></label>

                <div style="grid-column:1/-1;display:flex;gap:10px">
                    <button class="btn btn-primary" type="submit"><i class="fa-solid fa-floppy-disk"></i>Guardar identidad</button>
                </div>
            </form>
        </div>

        <div class="card">
            <div class="card-head">
                <div><div class="card-title">Vista previa</div><div class="sub">Así se ve tu marca en el sistema</div></div>
            </div>
            <div style="display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:#f6f8fc">
                <div style="width:42px;height:42px;border-radius:12px;background:#ffffff;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;flex-shrink:0">
                    @if(brand_logo_url())<img src="{{ brand_logo_url() }}" style="width:100%;height:100%;object-fit:contain" alt="">@else<i class="fa-solid fa-building text-gold"></i>@endif
                </div>
                <div><div style="font-family:var(--display);font-size:18px;font-weight:600">{{ brand_name() }}</div><div class="sub" style="color:var(--gold);text-transform:uppercase;letter-spacing:.16em;font-size:11px">{{ brand_subname() }}</div></div>
            </div>
            <div class="sub" style="margin-top:12px;line-height:1.6">El logo y nombre aparecen en el menú lateral, página de login, fichas PDF y landings públicas.</div>
        </div>
    </div>

        <div class="card" style="margin-top:16px">
            <div class="card-head">
                <div>
                    <div class="card-title"><i class="fa-solid fa-layer-group text-gold"></i> Tema visual del panel</div>
                    <div class="sub">Elige el estilo del panel administrativo. No afecta contratos, recibos, planes ni documentos generados.</div>
                </div>
                <span class="pill gold"><i class="fa-solid fa-display"></i> Panel</span>
            </div>

            <form method="post" action="{{ route('settings.theme') }}">
                @csrf
                @php
                    $currentPanelTheme = (string) setting('panel_theme', 'modern');
                    if (in_array($currentPanelTheme, ['actual', 'smart'], true)) {
                        $currentPanelTheme = 'modern';
                    }
                    if (! in_array($currentPanelTheme, ['classic', 'modern'], true)) {
                        $currentPanelTheme = 'modern';
                    }
                @endphp

                <div class="theme-simple-grid">
                    <label class="theme-simple-option">
                        <input type="radio" name="panel_theme" value="classic" @checked($currentPanelTheme === 'classic')>
                        <strong>Clásico</strong>
                        <span>Diseño sobrio, compacto y operativo para trabajo diario.</span>
                    </label>

                    <label class="theme-simple-option">
                        <input type="radio" name="panel_theme" value="modern" @checked($currentPanelTheme === 'modern')>
                        <strong>Moderno</strong>
                        <span>Diseño limpio, elegante y optimizado para cargar rápido.</span>
                    </label>
                </div>

                <div style="display:flex;justify-content:flex-end;margin-top:14px">
                    <button class="btn btn-primary" type="submit"><i class="fa-solid fa-floppy-disk"></i> Guardar tema</button>
                </div>
            </form>
        </div>

</div>

{{-- ===================== TÉRMINOS DEL SISTEMA ===================== --}}
<div class="stab-panel" id="stab-terminos">
    <div class="card">
        <div class="card-head">
            <div><div class="card-title"><i class="fa-solid fa-font text-gold"></i> Términos del sistema</div><div class="sub">Renombra los títulos del menú y los módulos en todo el sistema. Deja un campo vacío para usar el nombre por defecto.</div></div>
            <button type="submit" form="terms-form" class="btn btn-primary btn-sm"><i class="fa-solid fa-floppy-disk"></i> Guardar términos</button>
        </div>

        <div class="sub" style="margin:6px 0 14px;padding:10px 12px;background:rgba(201,168,76,.08);border:1px solid rgba(201,168,76,.22);border-radius:10px;color:#ffd87a">
            <i class="fa-solid fa-circle-info"></i> Aquí cambias los títulos del <strong>menú</strong> y las <strong>pestañas</strong> principales. Para cualquier <strong>otra palabra o título</strong> de cualquier sección (encabezados, botones, columnas…), usa el <strong>Diccionario de traducción</strong> más abajo ↓ — ese reemplaza el texto en <strong>todo</strong> el sistema.
        </div>

        <form method="post" action="{{ route('settings.terms') }}" id="terms-form">
            @csrf
            @foreach($termsCatalog as $group => $items)
                <fieldset style="border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:rgba(255,255,255,.02);margin-bottom:14px">
                    <legend class="sub" style="padding:0 8px;color:var(--gold);font-weight:600">{{ $group }}</legend>
                    <div class="form-grid three">
                        @foreach($items as $key => $default)
                            <label style="text-transform:none;letter-spacing:0">
                                <span class="sub" style="margin-bottom:4px;display:block">{{ $default }}</span>
                                <input name="term_{{ $key }}" value="{{ setting('term_'.$key) }}" placeholder="{{ $default }}" maxlength="60">
                            </label>
                        @endforeach
                    </div>
                </fieldset>
            @endforeach
            <div style="display:flex;gap:10px;justify-content:flex-end">
                <button class="btn btn-primary" type="submit"><i class="fa-solid fa-floppy-disk"></i>Guardar términos</button>
            </div>
        </form>
    </div>

    {{-- Diccionario de traducción: reemplazar cualquier palabra/frase --}}
    <div class="card" style="margin-top:16px">
        <div class="card-head">
            <div><div class="card-title"><i class="fa-solid fa-language text-gold"></i> Diccionario de traducción</div><div class="sub">Reemplaza cualquier palabra o frase del sistema por otra. Funciona como una traducción: original → reemplazo.</div></div>
            <button type="submit" form="phrases-form" class="btn btn-primary btn-sm"><i class="fa-solid fa-floppy-disk"></i> Guardar diccionario</button>
        </div>

        <div class="sub" style="margin:6px 0 14px;padding:10px 12px;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.25);border-radius:10px">
            <i class="fa-solid fa-circle-info text-info"></i> Se reemplaza el <strong>texto visible</strong> en todo el sistema (no afecta datos guardados ni botones de código). Es sensible a mayúsculas y reemplaza palabras completas: <em>“Cliente”</em> y <em>“Clientes”</em> son entradas distintas.
        </div>

        <form method="post" action="{{ route('settings.phrases') }}" id="phrases-form">
            @csrf
            <div id="phrases-rows" style="display:flex;flex-direction:column;gap:8px">
                @forelse($phrases as $p)
                    <div class="phrase-row" style="display:grid;grid-template-columns:1fr 40px 1fr 40px;gap:8px;align-items:center">
                        <input name="from[]" value="{{ $p['from'] ?? '' }}" placeholder="Palabra original (ej. Cliente)" maxlength="120">
                        <div style="text-align:center;color:var(--gold)"><i class="fa-solid fa-arrow-right"></i></div>
                        <input name="to[]" value="{{ $p['to'] ?? '' }}" placeholder="Reemplazo (ej. Comprador)" maxlength="120">
                        <button type="button" class="btn btn-sm btn-ghost" onclick="this.closest('.phrase-row').remove()" data-tip="Quitar"><i class="fa-solid fa-xmark"></i></button>
                    </div>
                @empty
                    <div class="phrase-row" style="display:grid;grid-template-columns:1fr 40px 1fr 40px;gap:8px;align-items:center">
                        <input name="from[]" value="" placeholder="Palabra original (ej. Cliente)" maxlength="120">
                        <div style="text-align:center;color:var(--gold)"><i class="fa-solid fa-arrow-right"></i></div>
                        <input name="to[]" value="" placeholder="Reemplazo (ej. Comprador)" maxlength="120">
                        <button type="button" class="btn btn-sm btn-ghost" onclick="this.closest('.phrase-row').remove()" data-tip="Quitar"><i class="fa-solid fa-xmark"></i></button>
                    </div>
                @endforelse
            </div>
            <div style="display:flex;gap:10px;justify-content:space-between;margin-top:14px">
                <button type="button" class="btn btn-ghost btn-sm" onclick="addPhraseRow()"><i class="fa-solid fa-plus"></i> Agregar palabra</button>
                <button class="btn btn-primary" type="submit"><i class="fa-solid fa-floppy-disk"></i>Guardar diccionario</button>
            </div>
        </form>
    </div>
</div>

{{-- ===================== EMPRESA ===================== --}}
<div class="stab-panel" id="stab-empresa">
    <div class="card">
        <div class="card-head">
            <div><div class="card-title">Datos de empresa y operacion</div><div class="sub">Usados en contratos, recordatorios y reportes</div></div>
        </div>
        <form method="post" action="{{ route('settings.update') }}" class="form-grid three">
            @csrf
            <label>Empresa<input name="company_name" value="{{ $settings['company_name'] ?? '' }}" maxlength="160"></label>
            <label>RFC<input name="company_rfc" value="{{ $settings['company_rfc'] ?? '' }}" maxlength="13"></label>
            <label>Representante / depositario<input name="company_representative" value="{{ $settings['company_representative'] ?? '' }}" maxlength="160" placeholder="Nombre que firma por la empresa"></label>
            <label>Cargo del representante<input name="company_role" value="{{ $settings['company_role'] ?? '' }}" maxlength="160" placeholder="Asociante y administrador unico"></label>
            <label>Telefono<input name="company_phone" value="{{ $settings['company_phone'] ?? '' }}" maxlength="30"></label>
            <label>Email<input name="company_email" type="email" value="{{ $settings['company_email'] ?? '' }}" maxlength="255"></label>
            <label style="grid-column:span 2">Direccion<input name="company_address" value="{{ $settings['company_address'] ?? '' }}" maxlength="255"></label>
            <label>Ciudad de contratos<input name="company_city" value="{{ $settings['company_city'] ?? 'Tepic, Nayarit' }}" maxlength="160"></label>
            <label style="grid-column:1/-1">Sucursal / pie de hoja de contratos<input name="company_branch" value="{{ $settings['company_branch'] ?? '' }}" maxlength="255" placeholder="SUCURSAL AV. ALLENDE - Av. Ignacio Allende #79..."></label>
            <label>Nacionalidad default cliente<input name="default_client_nationality" value="{{ $settings['default_client_nationality'] ?? 'mexicana' }}" maxlength="80"></label>
            <label>Codigo WhatsApp pais<input name="whatsapp_country_code" value="{{ $settings['whatsapp_country_code'] ?? '52' }}" maxlength="5"></label>
            <label>Tolerancia dias vencido<input name="overdue_grace_days" type="number" min="0" max="90" value="{{ $settings['overdue_grace_days'] ?? '3' }}"></label>
            <label>Conservar respaldos (dias)<input name="backup_keep_days" type="number" min="1" max="365" value="{{ $settings['backup_keep_days'] ?? '30' }}"></label>
            <div style="grid-column:1/-1"><button class="btn btn-primary" type="submit"><i class="fa-solid fa-floppy-disk"></i>Guardar configuracion</button></div>
        </form>
    </div>
</div>


{{-- ===================== IMPORTADOR CLIENTES ===================== --}}
<div class="stab-panel" id="stab-importador-clientes">
    <div class="grid g2" style="grid-template-columns:1fr 1fr">
        <div class="card">
            <div class="card-head">
                <div>
                    <div class="card-title">Importador integral desde Excel</div>
                    <div class="sub">Con una sola importación sube todo: datos personales del cliente, su vinculación (apartado/compra/liquidación de un lote) y el historial de abonos/comprobantes. Usa el formato con hojas <strong>CLIENTES</strong> y <strong>ABONOS</strong>.</div>
                </div>
                <span class="pill green"><i class="fa-solid fa-file-excel"></i> Excel / CSV</span>
            </div>

            <form method="post" action="{{ route('settings.clients-import.store') }}" enctype="multipart/form-data" class="form-grid">
                @csrf
                <label>Archivo Excel o CSV *
                    <input type="file" name="clients_file" accept=".xlsx,.csv,.txt" required>
                </label>

                <label>Modo de importación
                    <select name="mode">
                        <option value="create_update">Crear nuevos y actualizar existentes</option>
                        <option value="create_only">Solo crear nuevos</option>
                    </select>
                </label>

                <div class="sub" style="line-height:1.55">
                    Para actualizar, el sistema busca coincidencia por <strong>ID</strong>, <strong>correo</strong>, <strong>RFC</strong>, <strong>CURP</strong> o <strong>teléfono</strong>.
                    Las filas vacías se omiten.
                </div>

                <div>
                    <button class="btn btn-primary" type="submit"><i class="fa-solid fa-upload"></i>Importar clientes</button>
                </div>
            </form>
        </div>

        <div class="card">
            <div class="card-head">
                <div>
                    <div class="card-title">Formato oficial para llenar</div>
                    <div class="sub">Descarga el archivo base con todas las columnas usadas por Clientes.</div>
                </div>
            </div>

            <div class="import-help-box">
                <strong>Hoja CLIENTES:</strong>
                <span>CLIENTE_ID, datos personales (nombres, apellidos, RFC, CURP, domicilio, género, estado civil, beneficiario sustituto…), asesor y la vinculación del lote (proyecto, manzana, lote, forma de pago, precio, enganche, plan de aportación, plazo, anualidad, fechas y estado).</span>
                <br><strong>Hoja ABONOS:</strong>
                <span>CLIENTE_ID, fecha, monto, método, referencia, concepto y comprobante (un renglón por pago, repitiendo el CLIENTE_ID).</span>
            </div>

            <a class="btn btn-success" href="{{ route('settings.clients-import.template') }}">
                <i class="fa-solid fa-file-arrow-down"></i> Descargar formato Excel integral
            </a>

            <div class="sub" style="margin-top:12px;line-height:1.5">
                Fechas en formato <strong>AAAA-MM-DD</strong>. Si el proyecto/manzana/lote no existen se crean solos. El saldo y el estado de cuenta se calculan automáticamente con la suma de abonos.
            </div>
        </div>
    </div>
</div>


{{-- ===================== ROLES ===================== --}}
<div class="stab-panel" id="stab-roles">
    <div class="card">
        <div class="card-head">
            <div><div class="card-title">Roles del sistema</div><div class="sub">Define quien accede a cada modulo</div></div>
            <button class="btn btn-primary btn-sm" type="button" data-modal-open="modal-add-role"><i class="fa-solid fa-user-shield"></i>Nuevo rol</button>
        </div>
        <div class="card users-admin-card">
            <div class="card-head">
                <div>
                    <div class="card-title">Usuarios del sistema</div>
                    <div class="sub">Como administrador puedes crear usuario, asignar rol y establecer contraseña.</div>
                </div>
                <button class="btn btn-primary btn-sm" type="button" data-modal-open="modal-add-user"><i class="fa-solid fa-user-plus"></i>Nuevo usuario</button>
            </div>

            <div class="table-wrap">
                <table>
                    <thead>
                        <tr>
                            <th>Usuario</th>
                            <th>Correo de acceso</th>
                            <th>Rol</th>
                            <th>Estado</th>
                            <th style="width:140px">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse(($users ?? collect()) as $user)
                            <tr>
                                <td>
                                    <strong>{{ $user->name }}</strong>
                                    <div class="sub">ID #{{ $user->id }}</div>
                                </td>
                                <td>{{ $user->email }}</td>
                                <td><span class="pill gold">{{ $roles->firstWhere('name', $user->role)?->display_name ?? $user->role }}</span></td>
                                <td><span class="badge {{ $user->is_active ? 'green' : 'red' }}">{{ $user->is_active ? 'Activo' : 'Inactivo' }}</span></td>
                                <td>
                                    <div class="actions">
                                        <button class="btn btn-sm" type="button" data-modal-open="modal-edit-user-{{ $user->id }}"><i class="fa-solid fa-pen"></i>Editar</button>
                                        @if(auth()->id() !== $user->id)
                                            <form method="post" action="{{ route('settings.users.destroy', $user) }}" onsubmit="return confirm('¿Eliminar este usuario?')">
                                                @csrf @method('DELETE')
                                                <button class="btn btn-danger btn-sm" type="submit"><i class="fa-solid fa-trash"></i></button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="5" style="text-align:center;color:var(--muted);padding:18px">Aún no hay usuarios registrados.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card-head" style="margin-top:16px">
            <div><div class="card-title">Roles y permisos</div><div class="sub">Define qué puede ver cada tipo de usuario.</div></div>
        </div>

        <div class="grid g3">
            @forelse($roles as $role)
                <div class="card" style="margin:0;background:linear-gradient(180deg,#eaeef5,#ffffff);border-color:{{ $role->color }}33">
                    <div class="card-head">
                        <div>
                            <div class="card-title" style="display:flex;align-items:center;gap:8px">
                                <span style="width:10px;height:10px;border-radius:50%;background:{{ $role->color }};box-shadow:0 0 8px {{ $role->color }}80;display:inline-block"></span>
                                {{ $role->display_name }}
                            </div>
                            <div class="sub">{{ $role->name }} @if($role->is_system) · <span class="pill gold" style="padding:1px 6px;font-size:10px">sistema</span> @endif</div>
                        </div>
                    </div>
                    @if($role->description)<div class="sub" style="margin-bottom:10px">{{ $role->description }}</div>@endif
                    <div class="row" style="margin-bottom:10px">
                        @php $perms = $role->permissions ?? []; @endphp
                        @if(in_array('*', $perms, true))
                            <span class="pill gold"><i class="fa-solid fa-key"></i> Acceso total</span>
                        @else
                            @foreach(array_slice($perms,0,5) as $perm)
                                <span class="pill">{{ $sections[$perm] ?? $perm }}</span>
                            @endforeach
                            @if(count($perms) > 5)<span class="pill">+{{ count($perms) - 5 }}</span>@endif
                        @endif
                    </div>
                    <div class="actions">
                        <button class="btn btn-sm" type="button" data-modal-open="modal-edit-role-{{ $role->id }}"><i class="fa-solid fa-pen"></i>Editar</button>
                        @if(! $role->is_system)
                            <form method="post" action="{{ route('roles.destroy', $role) }}" onsubmit="return confirm('Eliminar rol?')">
                                @csrf @method('DELETE')
                                <button class="btn btn-danger btn-sm" type="submit"><i class="fa-solid fa-trash"></i></button>
                            </form>
                        @endif
                    </div>
                </div>
            @empty
                <div class="card" style="grid-column:1/-1;margin:0"><div class="sub" style="text-align:center;padding:18px">Sin roles configurados.</div></div>
            @endforelse
        </div>
    </div>
</div>

{{-- ===================== SEGURIDAD ===================== --}}
<div class="stab-panel" id="stab-seguridad">
    <div class="card" style="max-width:560px">
        <div class="card-head">
            <div><div class="card-title">Seguridad de la cuenta</div><div class="sub">Cambia tu contrasena con requisitos fuertes</div></div>
            <span class="pill {{ auth()->user()?->is_active ?? true ? 'green' : 'red' }}"><i class="fa-solid fa-shield-halved"></i> {{ auth()->user()?->is_active ?? true ? 'Activa' : 'Inactiva' }}</span>
        </div>
        <form method="post" action="{{ route('profile.password') }}" class="form-grid">
            @csrf
            <label>Contrasena actual<input name="current_password" type="password" autocomplete="current-password" required></label>
            <label>Nueva contrasena<input name="password" type="password" autocomplete="new-password" minlength="8" required></label>
            <label>Confirmar contrasena<input name="password_confirmation" type="password" autocomplete="new-password" minlength="8" required></label>
            <div class="sub" style="line-height:1.5">Minimo 8 caracteres, mayusculas, minusculas, numeros, simbolos y no haber sido filtrada.</div>
            <button class="btn btn-primary" type="submit"><i class="fa-solid fa-key"></i>Actualizar contrasena</button>
        </form>
    </div>
</div>

{{-- ===================== RESPALDOS ===================== --}}
<div class="stab-panel" id="stab-respaldos">
    <div class="card">
        <div class="card-head">
            <div><div class="card-title">Copias de seguridad</div><div class="sub">Respaldos de tu base de datos. Se conservan los ultimos 30 automaticamente.</div></div>
            <span class="pill blue"><i class="fa-solid fa-database"></i> {{ $backupsCount ?? 0 }} totales</span>
        </div>
        <form method="post" action="{{ route('backups.store') }}" class="toolbar" style="margin-bottom:14px">
            @csrf
            <div class="filters" style="flex:1"><input name="note" placeholder="Nota descriptiva (opcional)" maxlength="160" style="min-width:260px"></div>
            <button class="btn btn-primary" type="submit"><i class="fa-solid fa-cloud-arrow-up"></i>Crear copia ahora</button>
        </form>
        <div class="table-wrap">
            <table>
                <thead><tr><th>Archivo</th><th>Tamano</th><th>Nota</th><th>Generado por</th><th>Fecha</th><th>Acciones</th></tr></thead>
                <tbody>
                    @forelse($backups as $backup)
                        <tr>
                            <td><i class="fa-solid fa-file-zipper text-gold"></i> {{ $backup->filename }}</td>
                            <td>{{ $backup->human_size }}</td>
                            <td>{{ $backup->note ?: '—' }}</td>
                            <td>{{ $backup->user?->name ?? 'Sistema' }}</td>
                            <td>{{ optional($backup->completed_at)->format('d/m/Y H:i') ?? '—' }}</td>
                            <td>
                                <div class="actions">
                                    <a class="btn btn-sm" href="{{ route('backups.download', $backup) }}" data-tip="Descargar"><i class="fa-solid fa-download"></i></a>
                                    <form method="post" action="{{ route('backups.restore', $backup) }}" onsubmit="return confirm('Restaurar este respaldo reemplazara los datos actuales. Continuar?')">
                                        @csrf
                                        <button class="btn btn-sm" type="submit" data-tip="Restaurar"><i class="fa-solid fa-rotate-left"></i></button>
                                    </form>
                                    <form method="post" action="{{ route('backups.destroy', $backup) }}" onsubmit="return confirm('Eliminar definitivamente?')">
                                        @csrf @method('DELETE')
                                        <button class="btn btn-sm btn-danger" type="submit"><i class="fa-solid fa-trash"></i></button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="6" style="color:var(--muted);text-align:center;padding:18px">Aun no hay copias de seguridad.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- ===================== ACTIVIDAD ===================== --}}
<div class="stab-panel" id="stab-actividad">
    <div class="card">
        <div class="card-head">
            <div><div class="card-title">Registro de actividad</div><div class="sub">Auditoria de accesos, cambios y operaciones criticas</div></div>
            <span class="pill"><i class="fa-solid fa-list-check"></i> {{ $logsCount ?? 0 }} eventos</span>
        </div>
        <form method="post" action="{{ route('activity-logs.destroy') }}" class="toolbar" style="margin-bottom:14px" onsubmit="return confirm('Limpiar registros?')">
            @csrf @method('DELETE')
            <div class="filters" style="flex:1;align-items:center">
                <label style="text-transform:none;letter-spacing:0;color:var(--muted)">Depurar mas antiguos a
                    <select name="days" style="display:inline-block;width:auto;margin-left:6px">
                        <option value="0">— Todo el historial —</option>
                        <option value="7">7 dias</option>
                        <option value="30" selected>30 dias</option>
                        <option value="90">90 dias</option>
                        <option value="180">180 dias</option>
                    </select>
                </label>
            </div>
            <button class="btn btn-sm btn-danger" type="submit"><i class="fa-solid fa-broom"></i>Depurar</button>
        </form>
        <div class="table-wrap">
            <table>
                <thead><tr><th></th><th>Evento</th><th>Usuario</th><th>Entidad</th><th>IP</th><th>Fecha</th></tr></thead>
                <tbody>
                    @forelse($logs as $log)
                        <tr>
                            <td><i class="fa-solid {{ $log->icon }} text-gold"></i></td>
                            <td><div>{{ $log->description }}</div><div class="sub"><span class="badge {{ $log->badge }}">{{ $log->action }}</span></div></td>
                            <td>{{ $log->user?->name ?? 'Anonimo' }}</td>
                            <td>{{ $log->entity_type ? $log->entity_type.' #'.$log->entity_id : '—' }}</td>
                            <td class="text-mono" style="font-size:12px">{{ $log->ip_address ?: '—' }}</td>
                            <td>{{ $log->created_at?->format('d/m/Y H:i') }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="6" style="color:var(--muted);text-align:center;padding:18px">Aun no hay actividad registrada.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@section('modals')
{{-- Modal: nuevo usuario --}}
<div class="modal-backdrop" id="modal-add-user">
    <div class="modal">
        <div class="modal-head"><h3><i class="fa-solid fa-user-plus text-gold"></i> Nuevo usuario</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
        <form method="post" action="{{ route('settings.users.store') }}">
            @csrf
            <div class="modal-body">
                <div class="form-grid two">
                    <label>Nombre de usuario *
                        <input name="name" required maxlength="255" placeholder="Nombre visible del usuario">
                    </label>
                    <label>Correo para ingresar *
                        <input name="email" type="email" required maxlength="255" placeholder="correo@empresa.com">
                    </label>
                    <label>Contraseña *
                        <input name="password" type="password" required minlength="4" autocomplete="new-password">
                    </label>
                    <label>Confirmar contraseña *
                        <input name="password_confirmation" type="password" required minlength="4" autocomplete="new-password">
                    </label>
                    <label>Rol *
                        <select name="role" required>
                            @foreach($roles as $role)
                                <option value="{{ $role->name }}">{{ $role->display_name }}</option>
                            @endforeach
                        </select>
                    </label>
                    <label style="display:flex;align-items:center;gap:8px;margin-top:24px;text-transform:none;letter-spacing:0">
                        <input type="checkbox" name="is_active" value="1" checked style="width:auto"> Usuario activo
                    </label>
                </div>
            </div>
            <div class="modal-foot">
                <button class="btn btn-ghost" type="button" data-modal-close>Cancelar</button>
                <button class="btn btn-primary" type="submit"><i class="fa-solid fa-floppy-disk"></i>Crear usuario</button>
            </div>
        </form>
    </div>
</div>

@foreach(($users ?? collect()) as $user)
<div class="modal-backdrop" id="modal-edit-user-{{ $user->id }}">
    <div class="modal">
        <div class="modal-head"><h3><i class="fa-solid fa-user-gear text-gold"></i> Editar usuario</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
        <form method="post" action="{{ route('settings.users.update', $user) }}">
            @csrf @method('PUT')
            <div class="modal-body">
                <div class="form-grid two">
                    <label>Nombre de usuario *
                        <input name="name" value="{{ $user->name }}" required maxlength="255">
                    </label>
                    <label>Correo para ingresar *
                        <input name="email" type="email" value="{{ $user->email }}" required maxlength="255">
                    </label>
                    <label>Nueva contraseña
                        <input name="password" type="password" minlength="4" autocomplete="new-password" placeholder="Dejar vacío para conservar">
                    </label>
                    <label>Confirmar nueva contraseña
                        <input name="password_confirmation" type="password" minlength="4" autocomplete="new-password">
                    </label>
                    <label>Rol *
                        <select name="role" required {{ auth()->id() === $user->id ? 'disabled' : '' }}>
                            @foreach($roles as $role)
                                <option value="{{ $role->name }}" @selected($user->role === $role->name)>{{ $role->display_name }}</option>
                            @endforeach
                        </select>
                        @if(auth()->id() === $user->id)
                            <input type="hidden" name="role" value="admin">
                        @endif
                    </label>
                    <label style="display:flex;align-items:center;gap:8px;margin-top:24px;text-transform:none;letter-spacing:0">
                        <input type="checkbox" name="is_active" value="1" @checked($user->is_active || auth()->id() === $user->id) {{ auth()->id() === $user->id ? 'disabled' : '' }} style="width:auto"> Usuario activo
                        @if(auth()->id() === $user->id)
                            <input type="hidden" name="is_active" value="1">
                        @endif
                    </label>
                </div>
                @if(auth()->id() === $user->id)
                    <div class="sub" style="margin-top:10px">Tu propio usuario administrador no puede desactivarse ni cambiarse a otro rol desde aquí.</div>
                @endif
            </div>
            <div class="modal-foot">
                <button class="btn btn-ghost" type="button" data-modal-close>Cancelar</button>
                <button class="btn btn-primary" type="submit"><i class="fa-solid fa-floppy-disk"></i>Guardar usuario</button>
            </div>
        </form>
    </div>
</div>
@endforeach

{{-- Modal: nuevo rol --}}
<div class="modal-backdrop" id="modal-add-role">
    <div class="modal">
        <div class="modal-head"><h3><i class="fa-solid fa-user-shield text-gold"></i> Nuevo rol</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
        <form method="post" action="{{ route('roles.store') }}">
            @csrf
            <div class="modal-body">
                <div class="form-grid two">
                    <label>Nombre interno *<input name="name" required pattern="[a-z0-9_]+" title="Solo minusculas, numeros y guion bajo" placeholder="ej. supervisor"></label>
                    <label>Nombre visible *<input name="display_name" required maxlength="120" placeholder="Supervisor de obra"></label>
                    <label>Color<input name="color" type="color" value="#c9a84c"></label>
                    <label>&nbsp;<div class="sub" style="padding-top:9px">Se asigna a usuarios con la columna <code>role</code>.</div></label>
                    <label style="grid-column:1/-1">Descripcion<textarea name="description" rows="2" maxlength="250"></textarea></label>
                    <fieldset style="grid-column:1/-1;border:1px solid var(--line);border-radius:12px;padding:14px;background:rgba(255,255,255,.02)">
                        <legend class="sub" style="padding:0 8px">Acceso a modulos</legend>
                        <div class="grid g3">
                            @foreach($sections as $key => $label)
                                <label class="row" style="text-transform:none;letter-spacing:0;font-weight:500;color:var(--text);gap:8px">
                                    <input type="checkbox" name="permissions[]" value="{{ $key }}" style="width:auto"> {{ $label }}
                                </label>
                            @endforeach
                        </div>
                    </fieldset>
                </div>
            </div>
            <div class="modal-foot">
                <button class="btn btn-ghost" type="button" data-modal-close>Cancelar</button>
                <button class="btn btn-primary" type="submit"><i class="fa-solid fa-floppy-disk"></i>Crear rol</button>
            </div>
        </form>
    </div>
</div>

@foreach($roles as $role)
<div class="modal-backdrop" id="modal-edit-role-{{ $role->id }}">
    <div class="modal">
        <div class="modal-head"><h3><i class="fa-solid fa-pen text-gold"></i> Editar — {{ $role->display_name }}</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
        <form method="post" action="{{ route('roles.update', $role) }}">
            @csrf @method('PUT')
            <div class="modal-body">
                <div class="form-grid two">
                    <label>Nombre interno *<input name="name" value="{{ $role->name }}" required {{ $role->is_system ? 'readonly' : '' }} pattern="[a-z0-9_]+"></label>
                    <label>Nombre visible *<input name="display_name" value="{{ $role->display_name }}" required maxlength="120"></label>
                    <label>Color<input name="color" type="color" value="{{ $role->color }}"></label>
                    <label>&nbsp;<div class="sub" style="padding-top:9px">@if($role->is_system)Rol del sistema (nombre interno bloqueado).@endif</div></label>
                    <label style="grid-column:1/-1">Descripcion<textarea name="description" rows="2" maxlength="250">{{ $role->description }}</textarea></label>
                    <fieldset style="grid-column:1/-1;border:1px solid var(--line);border-radius:12px;padding:14px;background:rgba(255,255,255,.02)">
                        <legend class="sub" style="padding:0 8px">Acceso a modulos</legend>
                        @php $perms = $role->permissions ?? []; @endphp
                        @if(in_array('*', $perms, true))
                            <div class="sub" style="margin-bottom:10px"><span class="pill gold"><i class="fa-solid fa-key"></i> Acceso total (* )</span> — desmarca para limitar.</div>
                            <input type="hidden" name="permissions[]" value="*">
                        @endif
                        <div class="grid g3">
                            @foreach($sections as $key => $label)
                                <label class="row" style="text-transform:none;letter-spacing:0;font-weight:500;color:var(--text);gap:8px">
                                    <input type="checkbox" name="permissions[]" value="{{ $key }}" @checked(in_array($key, $perms, true) || in_array('*', $perms, true)) style="width:auto"> {{ $label }}
                                </label>
                            @endforeach
                        </div>
                    </fieldset>
                </div>
            </div>
            <div class="modal-foot">
                <button class="btn btn-ghost" type="button" data-modal-close>Cancelar</button>
                <button class="btn btn-primary" type="submit"><i class="fa-solid fa-floppy-disk"></i>Guardar</button>
            </div>
        </form>
    </div>
</div>
@endforeach
@endsection

@push('styles')
<style>
.stabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;background:linear-gradient(180deg,#f6f8fc,#f6f8fc);border:1px solid var(--line);border-radius:14px;padding:6px;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 26px -16px rgba(0,0,0,.6)}
.stab{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid transparent;color:var(--muted);padding:10px 15px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:600;transition:all .2s var(--ease)}
.stab:hover{color:var(--text);background:rgba(255,255,255,.04)}
.stab.active{background:linear-gradient(180deg,rgba(201,168,76,.20),rgba(201,168,76,.06));color:var(--gold);border-color:rgba(201,168,76,.34);box-shadow:0 6px 18px -10px rgba(201,168,76,.5)}
.stab .pill{font-size:10px;padding:1px 7px}
.stab-panel{display:none;animation:fadeUp .35s var(--ease)}
.stab-panel.active{display:block}
@media(max-width:720px){.stabs{overflow-x:auto;flex-wrap:nowrap}.stab{white-space:nowrap}}

.theme-simple-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}
.theme-simple-option{
    position:relative;
    display:block;
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff;
    padding:14px 14px 14px 42px;
    cursor:pointer;
    text-transform:none!important;
    letter-spacing:0!important;
}
.theme-simple-option input{
    position:absolute;
    left:14px;
    top:17px;
    width:auto;
    accent-color:var(--gold);
}
.theme-simple-option strong{
    display:block;
    color:var(--text);
    font-size:13px;
}
.theme-simple-option span{
    display:block;
    color:var(--muted);
    font-size:11.5px;
    line-height:1.35;
    margin-top:4px;
}
@media(max-width:900px){
    .theme-simple-grid{grid-template-columns:1fr}
}


.users-admin-card{margin-bottom:16px;background:linear-gradient(180deg,#ffffff,#f8fafc)}
.users-admin-card table td{vertical-align:middle}


.import-help-box{
    display:grid;
    gap:6px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:14px;
    background:linear-gradient(180deg,#ffffff,#f8fafc);
    margin-bottom:14px;
}
.import-help-box strong{color:var(--text)}
.import-help-box span{color:var(--muted);font-size:13px;line-height:1.45}

</style>
@endpush

@push('scripts')
<script>
/* Preview del logo al seleccionar archivo */
document.getElementById('logo-input')?.addEventListener('change',function(e){
    const file=e.target.files[0];if(!file)return;
    const r=new FileReader();
    r.onload=ev=>{
        // El contenedor del logo es el div con box-shadow dorado justo antes del bloque de botones
        const wrap=document.getElementById('logo-input').closest('[style*="border:1px dashed"]')?.querySelector('div[style*="border-radius:16px"]');
        if(!wrap)return;
        let img=wrap.querySelector('img');
        if(!img){
            // No había logo: reemplazar el ícono con una imagen
            wrap.innerHTML='';
            img=document.createElement('img');
            img.style.cssText='width:100%;height:100%;object-fit:contain';
            img.alt='Logo actual';
            wrap.appendChild(img);
        }
        img.src=ev.target.result;
    };
    r.readAsDataURL(file);
});

/* Agregar fila al diccionario de traducción */
function addPhraseRow(){
    const wrap=document.getElementById('phrases-rows');
    if(!wrap)return;
    const row=document.createElement('div');
    row.className='phrase-row';
    row.style.cssText='display:grid;grid-template-columns:1fr 40px 1fr 40px;gap:8px;align-items:center';
    row.innerHTML='<input name="from[]" placeholder="Palabra original (ej. Cliente)" maxlength="120">'+
        '<div style="text-align:center;color:var(--gold)"><i class="fa-solid fa-arrow-right"></i></div>'+
        '<input name="to[]" placeholder="Reemplazo (ej. Comprador)" maxlength="120">'+
        '<button type="button" class="btn btn-sm btn-ghost" onclick="this.closest(\'.phrase-row\').remove()"><i class="fa-solid fa-xmark"></i></button>';
    wrap.appendChild(row);
    row.querySelector('input')?.focus();
}

/* Tabs de configuración */
document.querySelectorAll('.stab').forEach(tab=>{
    tab.addEventListener('click',()=>{
        const id=tab.dataset.stab;
        document.querySelectorAll('.stab').forEach(t=>t.classList.remove('active'));
        document.querySelectorAll('.stab-panel').forEach(p=>p.classList.remove('active'));
        tab.classList.add('active');
        document.getElementById('stab-'+id)?.classList.add('active');
        history.replaceState(null,'','#'+id);
    });
});
if(location.hash){
    const t=document.querySelector('.stab[data-stab="'+location.hash.slice(1)+'"]');
    if(t)t.click();
}
</script>
@endpush