@extends('layouts.app')

@section('title', 'Configuración de Marca — TI Manager')

@section('content')
<style>
    .floating-save-btn {
        position: fixed;
        bottom: 30px;
        right: 30px;
        z-index: 999;
        box-shadow: 0 8px 25px rgba(0,0,0,0.3);
        border-radius: 50px !important;
        padding: 14px 28px !important;
        font-size: 1.05rem !important;
        transition: all 0.3s ease;
    }
    .floating-save-btn:hover {
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 12px 30px rgba(0,0,0,0.4);
    }
    @media (max-width: 767px) {
        .floating-save-btn {
            bottom: 90px;
            right: 20px;
            padding: 12px 24px !important;
            font-size: 0.95rem !important;
        }
    }
</style>
<div class="animate-fadeIn">

    {{-- Encabezado --}}
    <div class="page-header" style="margin-bottom: 24px;">
        <h1 class="page-title" style="display: flex; align-items: center; gap: 10px;">
            <i class="ph ph-gear" style="color: var(--primary); font-size: 2rem;"></i>
            Configuración del Sistema
        </h1>
        <p class="text-muted" style="margin-top: 4px; font-size: 0.95rem;">Personaliza el diseño, marca, colores y temas del panel del sistema.</p>
    </div>

    {{-- Formulario --}}
    <form id="settings-form" action="{{ route('settings.update') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-bottom: 24px;">
            
            {{-- Columna Izquierda: Identidad de la Aplicación --}}
            <div class="card-glass" style="display: flex; flex-direction: column; gap: 20px;">
                <h3 style="border-bottom: 1px solid rgba(0,0,0,0.06); padding-bottom: 10px; display: flex; align-items: center; gap: 8px;">
                    <i class="ph ph-identification-card" style="color: var(--primary);"></i>
                    Identidad
                </h3>

                {{-- Nombre de la Aplicación --}}
                <div class="form-group">
                    <label for="app_name" class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">
                        Nombre de la Aplicación <span class="required" style="color: var(--danger);">*</span>
                    </label>
                    <input type="text"
                           id="app_name"
                           name="app_name"
                           class="form-control {{ $errors->has('app_name') ? 'is-invalid' : '' }}"
                           value="{{ old('app_name', $settings['app_name'] ?? 'TI Manager') }}"
                           placeholder="Ej: TI Manager"
                           required
                           style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15); font-family: inherit;">
                    @error('app_name')
                        <span class="form-error" style="color: var(--danger); font-size: 0.8rem; display: block; margin-top: 4px;">{{ $message }}</span>
                    @enderror
                </div>

                {{-- Título de la Aplicación --}}
                <div class="form-group">
                    <label for="app_title" class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">
                        Título de Pestaña (HTML Title Prefix) <span class="required" style="color: var(--danger);">*</span>
                    </label>
                    <input type="text"
                           id="app_title"
                           name="app_title"
                           class="form-control {{ $errors->has('app_title') ? 'is-invalid' : '' }}"
                           value="{{ old('app_title', $settings['app_title'] ?? 'SoftE77 - TI Manager') }}"
                           placeholder="Ej: SoftE77 - TI Manager"
                           required
                           style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15); font-family: inherit;">
                    @error('app_title')
                        <span class="form-error" style="color: var(--danger); font-size: 0.8rem; display: block; margin-top: 4px;">{{ $message }}</span>
                    @enderror
                </div>

                {{-- Modo del Tema --}}
                <div class="form-group">
                    <label for="app_theme_mode" class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">
                        Tema por Defecto <span class="required" style="color: var(--danger);">*</span>
                    </label>
                    <select id="app_theme_mode"
                            name="app_theme_mode"
                            class="form-control {{ $errors->has('app_theme_mode') ? 'is-invalid' : '' }}"
                            required
                            style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15); font-family: inherit;">
                        <option value="light" {{ old('app_theme_mode', $settings['app_theme_mode'] ?? 'light') === 'light' ? 'selected' : '' }}>Modo Claro</option>
                        <option value="dark" {{ old('app_theme_mode', $settings['app_theme_mode'] ?? 'light') === 'dark' ? 'selected' : '' }}>Modo Oscuro</option>
                    </select>
                    @error('app_theme_mode')
                        <span class="form-error" style="color: var(--danger); font-size: 0.8rem; display: block; margin-top: 4px;">{{ $message }}</span>
                    @enderror
                </div>
            </div>

            {{-- Columna Derecha: Colores de la Marca --}}
            <div class="card-glass" style="display: flex; flex-direction: column; gap: 20px;">
                <h3 style="border-bottom: 1px solid rgba(0,0,0,0.06); padding-bottom: 10px; display: flex; align-items: center; gap: 8px;">
                    <i class="ph ph-palette" style="color: var(--primary);"></i>
                    Personalización de Colores
                </h3>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
                    {{-- Color Primario --}}
                    <div class="form-group">
                        <label for="app_primary_color" class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">
                            Color Primario
                        </label>
                        <div style="display: flex; gap: 8px; align-items: center;">
                            <input type="color"
                                   id="app_primary_color"
                                   name="app_primary_color"
                                   value="{{ old('app_primary_color', $settings['app_primary_color'] ?? '#91c849') }}"
                                   style="width: 45px; height: 45px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15); cursor: pointer; padding: 0;">
                            <input type="text"
                                   id="app_primary_color_text"
                                   value="{{ old('app_primary_color', $settings['app_primary_color'] ?? '#91c849') }}"
                                   readonly
                                   style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15); font-family: monospace; background: var(--bg-body); color: var(--text-secondary); text-align: center;">
                        </div>
                        @error('app_primary_color')
                            <span class="form-error" style="color: var(--danger); font-size: 0.8rem; display: block; margin-top: 4px;">{{ $message }}</span>
                        @enderror
                    </div>

                    {{-- Color Secundario --}}
                    <div class="form-group">
                        <label for="app_secondary_color" class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">
                            Color Secundario
                        </label>
                        <div style="display: flex; gap: 8px; align-items: center;">
                            <input type="color"
                                   id="app_secondary_color"
                                   name="app_secondary_color"
                                   value="{{ old('app_secondary_color', $settings['app_secondary_color'] ?? '#14a7ed') }}"
                                   style="width: 45px; height: 45px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15); cursor: pointer; padding: 0;">
                            <input type="text"
                                   id="app_secondary_color_text"
                                   value="{{ old('app_secondary_color', $settings['app_secondary_color'] ?? '#14a7ed') }}"
                                   readonly
                                   style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15); font-family: monospace; background: var(--bg-body); color: var(--text-secondary); text-align: center;">
                        </div>
                        @error('app_secondary_color')
                            <span class="form-error" style="color: var(--danger); font-size: 0.8rem; display: block; margin-top: 4px;">{{ $message }}</span>
                        @enderror
                    </div>

                    {{-- Color de Fondo Splash PWA --}}
                    <div class="form-group" style="grid-column: span 2;">
                        <label for="app_pwa_bg_color" class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">
                            Fondo Pantalla de Carga (PWA)
                        </label>
                        <div style="display: flex; gap: 8px; align-items: center;">
                            @php 
                                $defaultBg = ($settings['app_theme_mode'] ?? 'light') === 'dark' ? '#0f0f1a' : '#f4f4f2'; 
                                $bgVal = old('app_pwa_bg_color', $settings['app_pwa_bg_color'] ?? $defaultBg);
                            @endphp
                            <input type="color"
                                   id="app_pwa_bg_color"
                                   name="app_pwa_bg_color"
                                   value="{{ $bgVal }}"
                                   style="width: 45px; height: 45px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15); cursor: pointer; padding: 0;">
                            <input type="text"
                                   id="app_pwa_bg_color_text"
                                   value="{{ $bgVal }}"
                                   readonly
                                   style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15); font-family: monospace; background: var(--bg-body); color: var(--text-secondary); text-align: center;">
                        </div>
                        <div class="text-xs text-muted" style="margin-top: 6px; font-size: 0.7rem;">Color de fondo cuando se abre la App en el móvil.</div>
                        @error('app_pwa_bg_color')
                            <span class="form-error" style="color: var(--danger); font-size: 0.8rem; display: block; margin-top: 4px;">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                {{-- Vista Previa de Colores --}}
                <div style="border: 1px solid rgba(0,0,0,0.06); border-radius: var(--radius-md); padding: 16px; margin-top: auto; display: flex; flex-direction: column; gap: 12px; background: rgba(0,0,0,0.02);">
                    <div style="font-weight: 600; font-size: 0.85rem; color: var(--text-secondary);">Previsualización de Elementos:</div>
                    <div style="display: flex; gap: 10px; flex-wrap: wrap;">
                        <button type="button" class="btn" id="preview-btn-primary" style="background: {{ $settings['app_primary_color'] ?? '#91c849' }}; color: #fff; border: none; padding: 8px 16px; border-radius: var(--radius-sm); font-family: inherit; font-size: 0.85rem; font-weight: 500; pointer-events: none;">
                            Acento Primario
                        </button>
                        <button type="button" class="btn" id="preview-btn-secondary" style="background: {{ $settings['app_secondary_color'] ?? '#14a7ed' }}; color: #fff; border: none; padding: 8px 16px; border-radius: var(--radius-sm); font-family: inherit; font-size: 0.85rem; font-weight: 500; pointer-events: none;">
                            Acento Secundario
                        </button>
                    </div>
                    <div style="font-size: 0.75rem; color: var(--text-muted); line-height: 1.4;">
                        <i class="ph ph-info" style="vertical-align: middle;"></i> Las variaciones de brillo, sombras y efectos de paso de cursor (hover) se calculan automáticamente sobre la base de estos colores.
                    </div>
                </div>
            </div>
        </div>

        {{-- Panel de Carga de Imágenes (Logo y Favicon) --}}
        <div class="card-glass" style="margin-bottom: 24px;">
            <h3 style="border-bottom: 1px solid rgba(0,0,0,0.06); padding-bottom: 10px; margin-bottom: 20px; display: flex; align-items: center; gap: 8px;">
                <i class="ph ph-image" style="color: var(--primary);"></i>
                Logotipos y Favicon de la Marca
            </h3>

            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px;">
                
                {{-- Sección de Logotipo Horizontal --}}
                <div style="display: flex; flex-direction: column; gap: 12px; border-right: 1px solid rgba(0,0,0,0.05); padding-right: 15px;">
                    <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 2px;">Logotipo Horizontal</label>
                    <span style="display: inline-block; background: var(--primary-light); color: var(--primary); font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-sm); align-self: flex-start; margin-bottom: 6px;">
                        Medida ideal: 240 x 60 px (4:1)
                    </span>
                    <div style="display: flex; align-items: center; gap: 20px; margin-top: auto;">
                        <div style="width: 90px; height: 90px; border-radius: var(--radius-md); border: 2px dashed rgba(0,0,0,0.12); display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(0,0,0,0.02); padding: 5px; flex-shrink: 0;">
                            @if(isset($settings['app_logo']) && $settings['app_logo'])
                                <img id="logo-preview" src="{{ Storage::url($settings['app_logo']) }}" style="max-width: 100%; max-height: 100%; object-fit: contain;">
                                <span id="logo-preview-placeholder" style="color: var(--text-muted); font-size: 0.75rem; display: none;">Sin Logo</span>
                            @else
                                <span id="logo-preview-placeholder" style="color: var(--text-muted); font-size: 0.75rem;">Sin Logo</span>
                                <img id="logo-preview" style="max-width: 100%; max-height: 100%; object-fit: contain; display: none;">
                            @endif
                        </div>
                        <div>
                            <input type="file" id="app_logo" name="app_logo" accept="image/*" style="display: none;" onchange="previewFile(this, 'logo-preview', 'logo-preview-placeholder')">
                            <label for="app_logo" class="btn btn-outline" style="cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--primary); color: var(--primary); background: transparent; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 600; transition: var(--transition-fast);">
                                <i class="ph ph-upload-simple" style="font-size: 1.1rem;"></i> Subir Logo
                            </label>
                            <div class="text-xs text-muted" style="margin-top: 6px; font-size: 0.7rem; color: var(--text-muted); line-height: 1.2;">Para barras superiores horizontales. PNG, JPG, SVG o WebP.</div>
                        </div>
                    </div>
                    @error('app_logo')
                        <span class="form-error" style="color: var(--danger); font-size: 0.8rem; display: block; margin-top: 4px;">{{ $message }}</span>
                    @enderror
                </div>

                {{-- Sección de Logotipo Vertical --}}
                <div style="display: flex; flex-direction: column; gap: 12px; border-right: 1px solid rgba(0,0,0,0.05); padding-right: 15px;">
                    <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 2px;">Logotipo Vertical / Isotipo</label>
                    <span style="display: inline-block; background: var(--primary-light); color: var(--primary); font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-sm); align-self: flex-start; margin-bottom: 6px;">
                        Medida ideal: 180 x 180 px (1:1)
                    </span>
                    <div style="display: flex; align-items: center; gap: 20px; margin-top: auto;">
                        <div style="width: 90px; height: 90px; border-radius: var(--radius-md); border: 2px dashed rgba(0,0,0,0.12); display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(0,0,0,0.02); padding: 5px; flex-shrink: 0;">
                            @if(isset($settings['app_logo_vertical']) && $settings['app_logo_vertical'])
                                <img id="logo-vertical-preview" src="{{ Storage::url($settings['app_logo_vertical']) }}" style="max-width: 100%; max-height: 100%; object-fit: contain;">
                                <span id="logo-vertical-placeholder" style="color: var(--text-muted); font-size: 0.75rem; display: none;">Sin Isotipo</span>
                            @else
                                <span id="logo-vertical-placeholder" style="color: var(--text-muted); font-size: 0.75rem;">Vector FT</span>
                                <img id="logo-vertical-preview" style="max-width: 100%; max-height: 100%; object-fit: contain; display: none;">
                            @endif
                        </div>
                        <div>
                            <input type="file" id="app_logo_vertical" name="app_logo_vertical" accept="image/*" style="display: none;" onchange="previewFile(this, 'logo-vertical-preview', 'logo-vertical-placeholder')">
                            <label for="app_logo_vertical" class="btn btn-outline" style="cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--primary); color: var(--primary); background: transparent; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 600; transition: var(--transition-fast);">
                                <i class="ph ph-upload-simple" style="font-size: 1.1rem;"></i> Subir Isotipo
                            </label>
                            <div class="text-xs text-muted" style="margin-top: 6px; font-size: 0.7rem; color: var(--text-muted); line-height: 1.2;">Para pantalla de login y menú lateral vertical. PNG, JPG, SVG, WebP.</div>
                        </div>
                    </div>
                    @error('app_logo_vertical')
                        <span class="form-error" style="color: var(--danger); font-size: 0.8rem; display: block; margin-top: 4px;">{{ $message }}</span>
                    @enderror
                </div>

                {{-- Sección de Favicon --}}
                <div style="display: flex; flex-direction: column; gap: 12px; padding-right: 5px;">
                    <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 2px;">Favicon (Pestaña del Navegador)</label>
                    <span style="display: inline-block; background: var(--primary-light); color: var(--primary); font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-sm); align-self: flex-start; margin-bottom: 6px;">
                        Medida ideal: 32 x 32 px (1:1)
                    </span>
                    <div style="display: flex; align-items: center; gap: 20px; margin-top: auto;">
                        <div style="width: 50px; height: 50px; border-radius: var(--radius-sm); border: 2px dashed rgba(0,0,0,0.12); display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(0,0,0,0.02); padding: 3px; flex-shrink: 0; margin-left: 20px;">
                            @if(isset($settings['app_favicon']) && $settings['app_favicon'])
                                <img id="favicon-preview" src="{{ Storage::url($settings['app_favicon']) }}" style="max-width: 100%; max-height: 100%; object-fit: contain;">
                                <span id="favicon-preview-placeholder" style="color: var(--text-muted); font-size: 0.75rem; display: none;">Default</span>
                            @else
                                <span id="favicon-preview-placeholder" style="color: var(--text-muted); font-size: 0.7rem;">Default</span>
                                <img id="favicon-preview" style="max-width: 100%; max-height: 100%; object-fit: contain; display: none;">
                            @endif
                        </div>
                        <div>
                            <input type="file" id="app_favicon" name="app_favicon" accept="image/*,.ico" style="display: none;" onchange="previewFile(this, 'favicon-preview', 'favicon-preview-placeholder')">
                            <label for="app_favicon" class="btn btn-outline" style="cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--primary); color: var(--primary); background: transparent; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 600; transition: var(--transition-fast);">
                                <i class="ph ph-upload-simple" style="font-size: 1.1rem;"></i> Subir Favicon
                            </label>
                            <div class="text-xs text-muted" style="margin-top: 6px; font-size: 0.7rem; color: var(--text-muted); line-height: 1.2;">Se muestra en la pestaña del navegador. ICO, PNG o SVG.</div>
                        </div>
                    </div>
                    @error('app_favicon')
                        <span class="form-error" style="color: var(--danger); font-size: 0.8rem; display: block; margin-top: 4px;">{{ $message }}</span>
                    @enderror
                </div>

            </div>
        </div>

        {{-- Panel de Iconos PWA --}}
        <div class="card-glass" style="margin-bottom: 24px;">
            <h3 style="border-bottom: 1px solid rgba(0,0,0,0.06); padding-bottom: 10px; margin-bottom: 20px; display: flex; align-items: center; gap: 8px;">
                <i class="ph ph-phone" style="color: var(--primary);"></i>
                Iconos de Aplicación Móvil (PWA)
            </h3>

            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px;">
                
                {{-- Icono PWA 192x192 --}}
                <div style="display: flex; flex-direction: column; gap: 12px; border-right: 1px solid rgba(0,0,0,0.05); padding-right: 15px;">
                    <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 2px;">Icono de Aplicación (Mediano)</label>
                    <span style="display: inline-block; background: var(--primary-light); color: var(--primary); font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-sm); align-self: flex-start; margin-bottom: 6px;">
                        Medida recomendada: 192 x 192 px (PNG)
                    </span>
                    <div style="display: flex; align-items: center; gap: 20px; margin-top: auto;">
                        <div style="width: 80px; height: 80px; border-radius: var(--radius-md); border: 2px dashed rgba(0,0,0,0.12); display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(0,0,0,0.02); padding: 5px; flex-shrink: 0;">
                            @if(isset($settings['app_pwa_icon_192']) && $settings['app_pwa_icon_192'])
                                <img id="pwa-192-preview" src="{{ Storage::url($settings['app_pwa_icon_192']) }}" style="max-width: 100%; max-height: 100%; object-fit: contain;">
                                <span id="pwa-192-placeholder" style="color: var(--text-muted); font-size: 0.75rem; display: none;">Sin Icono</span>
                            @else
                                <span id="pwa-192-placeholder" style="color: var(--text-muted); font-size: 0.75rem;">Vector FT</span>
                                <img id="pwa-192-preview" style="max-width: 100%; max-height: 100%; object-fit: contain; display: none;">
                            @endif
                        </div>
                        <div>
                            <input type="file" id="app_pwa_icon_192" name="app_pwa_icon_192" accept="image/png" style="display: none;" onchange="previewFile(this, 'pwa-192-preview', 'pwa-192-placeholder')">
                            <label for="app_pwa_icon_192" class="btn btn-outline" style="cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--primary); color: var(--primary); background: transparent; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 600; transition: var(--transition-fast);">
                                <i class="ph ph-upload-simple" style="font-size: 1.1rem;"></i> Subir Icono 192px
                            </label>
                            <div class="text-xs text-muted" style="margin-top: 6px; font-size: 0.7rem; color: var(--text-muted); line-height: 1.2;">Usado para accesos directos y menús en móvil. Solo formato PNG.</div>
                        </div>
                    </div>
                    @error('app_pwa_icon_192')
                        <span class="form-error" style="color: var(--danger); font-size: 0.8rem; display: block; margin-top: 4px;">{{ $message }}</span>
                    @enderror
                </div>

                {{-- Icono PWA 512x512 --}}
                <div style="display: flex; flex-direction: column; gap: 12px; padding-right: 5px;">
                    <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 2px;">Icono de Pantalla de Carga (Grande)</label>
                    <span style="display: inline-block; background: var(--primary-light); color: var(--primary); font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-sm); align-self: flex-start; margin-bottom: 6px;">
                        Medida recomendada: 512 x 512 px (PNG)
                    </span>
                    <div style="display: flex; align-items: center; gap: 20px; margin-top: auto;">
                        <div style="width: 80px; height: 80px; border-radius: var(--radius-md); border: 2px dashed rgba(0,0,0,0.12); display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(0,0,0,0.02); padding: 5px; flex-shrink: 0;">
                            @if(isset($settings['app_pwa_icon_512']) && $settings['app_pwa_icon_512'])
                                <img id="pwa-512-preview" src="{{ Storage::url($settings['app_pwa_icon_512']) }}" style="max-width: 100%; max-height: 100%; object-fit: contain;">
                                <span id="pwa-512-placeholder" style="color: var(--text-muted); font-size: 0.75rem; display: none;">Sin Icono</span>
                            @else
                                <span id="pwa-512-placeholder" style="color: var(--text-muted); font-size: 0.75rem;">Vector FT</span>
                                <img id="pwa-512-preview" style="max-width: 100%; max-height: 100%; object-fit: contain; display: none;">
                            @endif
                        </div>
                        <div>
                            <input type="file" id="app_pwa_icon_512" name="app_pwa_icon_512" accept="image/png" style="display: none;" onchange="previewFile(this, 'pwa-512-preview', 'pwa-512-placeholder')">
                            <label for="app_pwa_icon_512" class="btn btn-outline" style="cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--primary); color: var(--primary); background: transparent; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 600; transition: var(--transition-fast);">
                                <i class="ph ph-upload-simple" style="font-size: 1.1rem;"></i> Subir Icono 512px
                            </label>
                            <div class="text-xs text-muted" style="margin-top: 6px; font-size: 0.7rem; color: var(--text-muted); line-height: 1.2;">Usado para la pantalla de carga (splash screen) de la app. Solo formato PNG.</div>
                        </div>
                    </div>
                    @error('app_pwa_icon_512')
                        <span class="form-error" style="color: var(--danger); font-size: 0.8rem; display: block; margin-top: 4px;">{{ $message }}</span>
                    @enderror
                </div>

                <!-- Icono Notificaciones Push -->
                <div style="display: flex; flex-direction: column; gap: 12px; padding-right: 5px;">
                    <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 2px;">Ícono Notificaciones Push</label>
                    <span style="display: inline-block; background: var(--primary-light); color: var(--primary); font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-sm); align-self: flex-start; margin-bottom: 6px;">
                        Medida recomendada: 192 x 192 px (PNG)
                    </span>
                    <div style="display: flex; align-items: flex-start; gap: 20px; margin-top: auto;">
                        <div style="width: 80px; height: 80px; border-radius: var(--radius-md); border: 2px dashed rgba(0,0,0,0.12); display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(0,0,0,0.02); padding: 5px; flex-shrink: 0;">
                            @if(isset($settings['app_push_icon']) && $settings['app_push_icon'])
                                <img id="push-icon-preview" src="{{ Storage::url($settings['app_push_icon']) }}" style="max-width: 100%; max-height: 100%; object-fit: contain;">
                                <span id="push-icon-placeholder" style="color: var(--text-muted); font-size: 0.75rem; display: none;">Sin Icono</span>
                            @else
                                <span id="push-icon-placeholder" style="color: var(--text-muted); font-size: 0.75rem;">Vector FT</span>
                                <img id="push-icon-preview" style="max-width: 100%; max-height: 100%; object-fit: contain; display: none;">
                            @endif
                        </div>
                        <div style="flex: 1;">
                            <input type="file" id="app_push_icon" name="app_push_icon" accept="image/*" style="display: none;" onchange="previewFile(this, 'push-icon-preview', 'push-icon-placeholder')">
                            <label for="app_push_icon" class="btn btn-outline" style="cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--primary); color: var(--primary); background: transparent; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 600; transition: var(--transition-fast); margin-bottom: 8px;">
                                <i class="ph ph-upload-simple" style="font-size: 1.1rem;"></i> Subir Icono Push
                            </label>
                            <div class="text-xs text-muted" style="font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; background: rgba(0,0,0,0.02); padding: 8px; border-radius: var(--radius-sm); border-left: 3px solid var(--primary);">
                                <strong>Normas obligatorias:</strong><br>
                                • Fondo 100% transparente.<br>
                                • Diseño blanco monocromático.<br>
                                • Margen seguro del 15%.
                            </div>
                        </div>
                    </div>
                    @error('app_push_icon')
                        <span class="form-error" style="color: var(--danger); font-size: 0.8rem; display: block; margin-top: 4px;">{{ $message }}</span>
                    @enderror
                </div>

            </div>
        </div>

        {{-- Datos de Empresa para Cotizaciones --}}
        <div class="card-glass" style="margin-bottom: 24px;">
            <h3 style="border-bottom: 1px solid rgba(0,0,0,0.06); padding-bottom: 10px; margin-bottom: 20px; display: flex; align-items: center; gap: 8px;">
                <i class="ph ph-buildings" style="color: var(--primary);"></i>
                Datos de la Empresa para Cotizaciones y Reportes
            </h3>

            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-bottom: 20px;">
                <div class="form-group">
                    <label class="form-label" style="font-weight: 600;">Razón Social / Nombre de la Empresa</label>
                    <input type="text" name="company_name" class="form-control" value="{{ old('company_name', $settings['company_name'] ?? '') }}" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                </div>
                <div class="form-group">
                    <label class="form-label" style="font-weight: 600;">NIT / RUT</label>
                    <input type="text" name="company_nit" class="form-control" value="{{ old('company_nit', $settings['company_nit'] ?? '') }}" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                </div>
                <div class="form-group">
                    <label class="form-label" style="font-weight: 600;">Dirección</label>
                    <input type="text" name="company_address" class="form-control" value="{{ old('company_address', $settings['company_address'] ?? '') }}" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                </div>
                <div class="form-group">
                    <label class="form-label" style="font-weight: 600;">Teléfono</label>
                    <input type="text" name="company_phone" class="form-control" value="{{ old('company_phone', $settings['company_phone'] ?? '') }}" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                </div>
                <div class="form-group">
                    <label class="form-label" style="font-weight: 600;">Correo Electrónico</label>
                    <input type="email" name="company_email" class="form-control" value="{{ old('company_email', $settings['company_email'] ?? '') }}" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                </div>
                <div class="form-group">
                    <label class="form-label" style="font-weight: 600;">Sitio Web</label>
                    <input type="text" name="company_website" class="form-control" value="{{ old('company_website', $settings['company_website'] ?? '') }}" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                </div>
            </div>

            <div class="form-group" style="margin-bottom: 20px;">
                <label class="form-label" style="font-weight: 600;">Términos y Condiciones por Defecto (Cotizaciones)</label>
                <textarea name="quote_terms" class="form-control" rows="4" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">{{ old('quote_terms', $settings['quote_terms'] ?? "- Los precios en esta cotización podrían cambiar en cualquier momento sin previo aviso.\n- Puede cancelar en efectivo o en las siguientes cuentas de ahorros.") }}</textarea>
            </div>

            <div style="display: flex; gap: 20px;">
                <div class="form-group" style="display: flex; align-items: center; gap: 8px;">
                    <input type="hidden" name="quote_enable_taxes" value="0">
                    <input type="checkbox" name="quote_enable_taxes" id="quote_enable_taxes" value="1" {{ old('quote_enable_taxes', $settings['quote_enable_taxes'] ?? '0') == '1' ? 'checked' : '' }} style="width: 18px; height: 18px;">
                    <label for="quote_enable_taxes" class="form-label" style="font-weight: 600; margin: 0;">Habilitar Impuestos Globales</label>
                </div>
                <div class="form-group" style="flex: 1; max-width: 200px;">
                    <label class="form-label" style="font-weight: 600;">Porcentaje de Impuesto (%)</label>
                    <input type="number" step="0.01" name="quote_tax_percentage" class="form-control" value="{{ old('quote_tax_percentage', $settings['quote_tax_percentage'] ?? '0') }}" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                </div>
            </div>
        </div>

        {{-- Configuración de Correo SMTP --}}
        <div class="card-glass" style="margin-bottom: 24px;">
            <h3 style="border-bottom: 1px solid rgba(0,0,0,0.06); padding-bottom: 10px; margin-bottom: 20px; display: flex; align-items: center; gap: 8px;">
                <i class="ph ph-envelope-simple" style="color: var(--primary);"></i>
                Configuración de Servidor de Correo (SMTP)
            </h3>
            
            <p class="text-muted" style="font-size: 0.85rem; margin-bottom: 15px;">Configura estos datos si deseas que el sistema envíe correos desde tu propio servidor corporativo.</p>

            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px;">
                <div class="form-group">
                    <label class="form-label" style="font-weight: 600;">Servidor SMTP (Host)</label>
                    <input type="text" name="mail_host" class="form-control" value="{{ old('mail_host', $settings['mail_host'] ?? '') }}" placeholder="ej. smtp.tudominio.com" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                </div>
                <div class="form-group">
                    <label class="form-label" style="font-weight: 600;">Puerto</label>
                    <input type="number" name="mail_port" class="form-control" value="{{ old('mail_port', $settings['mail_port'] ?? '587') }}" placeholder="ej. 587 o 465" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                </div>
                <div class="form-group">
                    <label class="form-label" style="font-weight: 600;">Encriptación</label>
                    <input type="text" name="mail_encryption" class="form-control" value="{{ old('mail_encryption', $settings['mail_encryption'] ?? 'tls') }}" placeholder="ej. tls o ssl" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                </div>
            </div>

            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px;">
                <div class="form-group">
                    <label class="form-label" style="font-weight: 600;">Usuario SMTP (Correo)</label>
                    <input type="text" name="mail_username" class="form-control" value="{{ old('mail_username', $settings['mail_username'] ?? '') }}" placeholder="ej. info@miempresa.com" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                </div>
                <div class="form-group">
                    <label class="form-label" style="font-weight: 600;">Contraseña SMTP</label>
                    <input type="password" name="mail_password" class="form-control" value="{{ old('mail_password', $settings['mail_password'] ?? '') }}" placeholder="********" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                </div>
            </div>

            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
                <div class="form-group">
                    <label class="form-label" style="font-weight: 600;">Remitente por Defecto (Correo)</label>
                    <input type="email" name="mail_from_address" class="form-control" value="{{ old('mail_from_address', $settings['mail_from_address'] ?? '') }}" placeholder="ej. info@miempresa.com" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                </div>
                <div class="form-group">
                    <label class="form-label" style="font-weight: 600;">Remitente por Defecto (Nombre)</label>
                    <input type="text" name="mail_from_name" class="form-control" value="{{ old('mail_from_name', $settings['mail_from_name'] ?? 'TI Manager') }}" placeholder="ej. Soporte Empresa" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                </div>
            </div>
        </div>

        {{-- Configuración del Actualizador (GitHub) --}}
        <div id="updater-section" class="card-glass" style="margin-bottom: 24px; scroll-margin-top: 80px;">
            <h3 style="border-bottom: 1px solid rgba(0,0,0,0.06); padding-bottom: 10px; margin-bottom: 20px; display: flex; align-items: center; gap: 8px;">
                <i class="ph ph-cloud-arrow-down" style="color: var(--primary);"></i>
                Actualizaciones Automáticas del Sistema
            </h3>
            
            <p class="text-muted" style="font-size: 0.85rem; margin-bottom: 15px;">
                Configura un "Personal Access Token" (PAT) de GitHub para poder descargar las actualizaciones del repositorio privado.
            </p>

            <div class="form-group" style="margin-bottom: 20px;">
                <label class="form-label" style="font-weight: 600;">GitHub Token (PAT)</label>
                <input type="password" name="github_pat" class="form-control" value="{{ old('github_pat', $settings['github_pat'] ?? '') }}" placeholder="ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxx" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                <div class="text-xs text-muted" style="margin-top: 6px; font-size: 0.75rem;">
        El token solo necesita permiso de lectura ("repo"). Si lo dejas en blanco, no podrás usar el actualizador de 1-Click.
    </div>
</div>

</form>

            <div style="background: rgba(0,0,0,0.02); padding: 15px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: space-between;">
                <div>
                    <h5 style="margin: 0; font-weight: 600;">Comprobar Actualizaciones</h5>
                    <p style="margin: 0; font-size: 0.8rem; color: var(--text-muted);">Verifica si hay nuevo código disponible en la nube.</p>
                </div>
                <a href="{{ route('update.check') }}" class="btn" style="background: var(--surface); border: 1px solid var(--border-color); color: var(--text-primary); font-weight: 600; padding: 8px 16px; border-radius: var(--radius-sm); text-decoration: none;">
                    Buscar Versión <i class="ph ph-arrows-clockwise ms-1"></i>
                </a>
            </div>

            @if(session('update_available'))
                <div class="mt-3" style="background: rgba(20, 167, 237, 0.1); border: 1px solid rgba(20, 167, 237, 0.3); border-radius: var(--radius-md); padding: 15px;">
                    <h5 style="margin-top: 0; color: #0f7cac; display: flex; align-items: center; gap: 8px;">
                        <i class="ph ph-bell-ringing"></i> ¡Nueva actualización disponible!
                    </h5>
                    <p style="margin-bottom: 10px; font-size: 0.9rem;">
                        <strong>Versión:</strong> {{ session('update_available')['short_sha'] }}<br>
                        <strong>Fecha:</strong> {{ session('update_available')['date'] }}<br>
                        <strong>Cambios:</strong> {{ session('update_available')['message'] }}
                    </p>
                    
                    <form action="{{ route('update.apply') }}" method="POST" onsubmit="return confirmDelete(event, '¿Estás seguro de querer aplicar esta actualización?\n\nAl continuar:\n1. Se descargarán y reemplazarán los archivos del sistema.\n2. Se actualizará la base de datos (migraciones).\n3. Se limpiará la memoria caché.\n\nEl proceso demorará un par de minutos y recargará el sistema. No cierres la ventana.', 'Sí, actualizar')">
                        @csrf
                        <input type="hidden" name="sha" value="{{ session('update_available')['sha'] }}">
                        <button type="submit" class="btn btn-primary">
                            Aplicar Actualización Ahora <i class="ph ph-download-simple ms-1"></i>
                        </button>
                    </form>
                </div>
            @endif
        </div>

        

    
    {{-- Botones de Acción --}}
    <div>
        <button type="submit" form="settings-form" class="btn floating-save-btn" style="background: var(--primary); color: #fff; border: none; font-family: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;">
            <i class="ph ph-floppy-disk" style="font-size: 1.3rem;"></i>
            Guardar Cambios
        </button>
    </div>

    {{-- Cuentas Bancarias --}}

    <div class="card-glass" style="margin-top: 40px; margin-bottom: 24px;" x-data="bankAccountsManager()">
        <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.06); padding-bottom: 10px; margin-bottom: 20px;">
            <h3 style="display: flex; align-items: center; gap: 8px; margin: 0;">
                <i class="ph ph-bank" style="color: var(--primary);"></i>
                Cuentas Bancarias
            </h3>
            <button type="button" class="btn" style="background: var(--primary); color: #fff; border: none; padding: 8px 16px; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer;" @click="openNew()">
                + Agregar Cuenta
            </button>
        </div>

        <div style="display: flex; flex-direction: column; gap: 12px;" id="bank-accounts-list">
            @foreach($bankAccounts as $bank)
            <div class="bank-card" data-bank-id="{{ $bank->id }}" style="border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 15px; position: relative; display: flex; align-items: center; gap: 15px; transition: all 0.2s ease; background: var(--surface);">
                {{-- Drag handle & order arrows --}}
                <div style="display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0;">
                    <button type="button" class="btn btn-sm btn-ghost" style="padding: 2px 6px; font-size: 0.8rem; line-height: 1; color: var(--text-muted);" onclick="moveBankAccount({{ $bank->id }}, 'up')" title="Subir">
                        <i class="ph ph-caret-up-bold"></i>
                    </button>
                    <span style="font-size: 0.7rem; font-weight: 700; color: var(--text-muted); background: rgba(0,0,0,0.05); border-radius: 4px; padding: 1px 6px; min-width: 20px; text-align: center;">{{ $loop->iteration }}</span>
                    <button type="button" class="btn btn-sm btn-ghost" style="padding: 2px 6px; font-size: 0.8rem; line-height: 1; color: var(--text-muted);" onclick="moveBankAccount({{ $bank->id }}, 'down')" title="Bajar">
                        <i class="ph ph-caret-down-bold"></i>
                    </button>
                </div>

                {{-- Bank info --}}
                <div style="flex: 1; min-width: 0;">
                    <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px;">
                        @if($bank->logo_path)
                            <img src="{{ Storage::url($bank->logo_path) }}" alt="{{ $bank->bank_name }}" style="height: 30px; object-fit: contain;">
                        @else
                            <h4 style="margin: 0; font-weight: 700;">{{ $bank->bank_name }}</h4>
                        @endif
                        <div style="display: flex; gap: 4px; flex-shrink: 0;">
                            <button type="button" class="btn btn-sm btn-ghost text-primary" style="padding: 4px;" @click="openEdit({{ $bank->id }}, {{ htmlspecialchars(json_encode($bank)) }})"><i class="ph ph-pencil-simple"></i></button>
                            <form action="{{ route('settings.banks.destroy', $bank) }}" method="POST" style="display: inline;" onsubmit="confirmDelete(event, '¿Eliminar cuenta bancaria?')">
                                @csrf @method('DELETE')
                                <button class="btn btn-sm btn-ghost text-danger" style="padding: 4px;"><i class="ph ph-trash"></i></button>
                            </form>
                        </div>
                    </div>
                    <div style="font-size: 0.9rem; margin-bottom: 4px;"><strong>{{ $bank->account_type ?? 'Cuenta' }} No.</strong> {{ $bank->account_number }}</div>
                    @if($bank->owner_name)
                        <div style="font-size: 0.85rem; color: var(--text-muted);">A nombre de {{ $bank->owner_name }}</div>
                    @endif
                    @if($bank->owner_document)
                        <div style="font-size: 0.85rem; color: var(--text-muted);">NIT/C.C: {{ $bank->owner_document }}</div>
                    @endif
                </div>
            </div>
            @endforeach
        </div>

        @if($bankAccounts->isEmpty())
            <div style="text-align: center; padding: 30px; color: var(--text-muted);">
                <i class="ph ph-bank" style="font-size: 2rem; opacity: 0.3;"></i>
                <p style="margin-top: 8px;">No hay cuentas bancarias registradas.</p>
            </div>
        @endif

        {{-- Modal Banco --}}
        <template x-teleport="body">
            <div x-show="showBankModal" x-cloak style="position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px;" x-transition.opacity>
                <div class="card" style="width: 100%; max-width: 500px; padding: 24px; position: relative;" @click.outside="showBankModal = false">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                        <h3 style="margin: 0;" x-text="editBankId ? 'Editar Cuenta' : 'Nueva Cuenta'"></h3>
                        <button type="button" class="btn btn-ghost btn-sm" @click="showBankModal = false"><i class="ph ph-x"></i></button>
                    </div>
                    <form :action="formAction" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="_method" :value="editBankId ? 'PUT' : 'POST'">
                        <div style="display: grid; gap: 15px;">
                            <div>
                                <label class="form-label" style="font-weight: 600;">Nombre del Banco (Ej. Bancolombia) *</label>
                                <input type="text" name="bank_name" class="form-control" required x-model="form.bank_name" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                            </div>
                            <div style="display: flex; gap: 15px;">
                                <div style="flex: 1;">
                                    <label class="form-label" style="font-weight: 600;">Tipo de Cuenta</label>
                                    <input type="text" name="account_type" class="form-control" placeholder="Ahorros, A la mano..." x-model="form.account_type" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                                </div>
                                <div style="flex: 1;">
                                    <label class="form-label" style="font-weight: 600;">No. de Cuenta *</label>
                                    <input type="text" name="account_number" class="form-control" required x-model="form.account_number" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                                </div>
                            </div>
                            <div style="display: flex; gap: 15px;">
                                <div style="flex: 1;">
                                    <label class="form-label" style="font-weight: 600;">Titular de la Cuenta</label>
                                    <input type="text" name="owner_name" class="form-control" x-model="form.owner_name" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                                </div>
                                <div style="flex: 1;">
                                    <label class="form-label" style="font-weight: 600;">NIT o Cédula</label>
                                    <input type="text" name="owner_document" class="form-control" x-model="form.owner_document" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                                </div>
                            </div>
                            <div>
                                <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 4px;">Logo del Banco (Formato Horizontal)</label>
                                <span style="display: inline-block; background: var(--primary-light); color: var(--primary); font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-sm); margin-bottom: 12px;">
                                    Medida recomendada: Formato horizontal (ej. 200 x 50 px, PNG transparente sin márgenes extra)
                                </span>
                                <div style="display: flex; align-items: center; gap: 20px;">
                                    <div style="width: 120px; height: 50px; border-radius: var(--radius-md); border: 2px dashed rgba(0,0,0,0.12); display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(0,0,0,0.02); padding: 5px; flex-shrink: 0;">
                                        <template x-if="imagePreview">
                                            <img :src="imagePreview" style="max-width: 100%; max-height: 100%; object-fit: contain;">
                                        </template>
                                        <template x-if="!imagePreview && editLogoPath">
                                            <img :src="'/storage/' + editLogoPath" style="max-width: 100%; max-height: 100%; object-fit: contain;">
                                        </template>
                                        <template x-if="!imagePreview && !editLogoPath">
                                            <span style="color: var(--text-muted); font-size: 0.75rem;">Sin Logo</span>
                                        </template>
                                    </div>
                                    <div>
                                        <input type="file" id="bank_logo_input" name="logo" accept="image/*" style="display: none;" 
                                            @change="
                                                const file = $event.target.files[0];
                                                if(file) {
                                                    const reader = new FileReader();
                                                    reader.onload = (e) => { imagePreview = e.target.result; };
                                                    reader.readAsDataURL(file);
                                                } else {
                                                    imagePreview = null;
                                                }
                                            ">
                                        <label for="bank_logo_input" class="btn btn-outline" style="cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--primary); color: var(--primary); background: transparent; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 600; transition: var(--transition-fast);">
                                            <i class="ph ph-upload-simple" style="font-size: 1.1rem;"></i> Subir Logo
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div style="margin-top: 10px; text-align: right;">
                                <button type="submit" class="btn" style="background: var(--primary); color: #fff; border: none; padding: 10px 20px; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer;">Guardar Cuenta</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </template>
    </div>

    <script>
    function bankAccountsManager() {
        return {
            showBankModal: false,
            editBankId: null,
            editLogoPath: null,
            imagePreview: null,
            form: {
                bank_name: '',
                account_type: '',
                account_number: '',
                owner_name: '',
                owner_document: '',
            },
            get formAction() {
                return this.editBankId 
                    ? '{{ url("settings/banks") }}/' + this.editBankId
                    : '{{ route("settings.banks.store") }}';
            },
            openNew() {
                this.editBankId = null;
                this.editLogoPath = null;
                this.imagePreview = null;
                this.form = {
                    bank_name: '',
                    account_type: '',
                    account_number: '',
                    owner_name: '',
                    owner_document: '',
                };
                const logoInput = document.getElementById('bank_logo_input');
                if (logoInput) logoInput.value = null;
                this.showBankModal = true;
            },
            openEdit(id, bankData) {
                this.editBankId = id;
                this.editLogoPath = bankData.logo_path || null;
                this.imagePreview = null;
                this.form = {
                    bank_name: bankData.bank_name || '',
                    account_type: bankData.account_type || '',
                    account_number: bankData.account_number || '',
                    owner_name: bankData.owner_name || '',
                    owner_document: bankData.owner_document || '',
                };
                const logoInput = document.getElementById('bank_logo_input');
                if (logoInput) logoInput.value = null;
                this.showBankModal = true;
            }
        };
    }

    function moveBankAccount(bankId, direction) {
        const list = document.getElementById('bank-accounts-list');
        const cards = Array.from(list.querySelectorAll('.bank-card'));
        const currentIndex = cards.findIndex(c => c.dataset.bankId == bankId);

        if (direction === 'up' && currentIndex > 0) {
            list.insertBefore(cards[currentIndex], cards[currentIndex - 1]);
        } else if (direction === 'down' && currentIndex < cards.length - 1) {
            list.insertBefore(cards[currentIndex + 1], cards[currentIndex]);
        } else {
            return; // no movement needed
        }

        // Save new order via AJAX
        saveBankOrder();
    }

    function saveBankOrder() {
        const list = document.getElementById('bank-accounts-list');
        const cards = Array.from(list.querySelectorAll('.bank-card'));
        const order = cards.map(c => parseInt(c.dataset.bankId));

        // Update visual numbers
        cards.forEach((card, index) => {
            const badge = card.querySelector('span[style*="min-width"]');
            if (badge) badge.textContent = index + 1;
        });

        // Flash effect
        cards.forEach(card => {
            card.style.transition = 'background 0.3s ease';
        });

        fetch('{{ route("settings.banks.reorder") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json',
            },
            body: JSON.stringify({ order: order }),
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                // Brief green flash on reordered items
                cards.forEach(card => {
                    card.style.background = 'rgba(145, 200, 73, 0.1)';
                    setTimeout(() => { card.style.background = ''; }, 600);
                });
            }
        })
        .catch(err => console.error('Error reordering:', err));
    }
    </script>
</div>

@push('scripts')
<script>
    // Sincronizar selectores de color con sus cajas de texto hexadecimal
    const primaryInput = document.getElementById('app_primary_color');
    const primaryText = document.getElementById('app_primary_color_text');
    const previewPrimary = document.getElementById('preview-btn-primary');

    primaryInput.addEventListener('input', function(e) {
        primaryText.value = e.target.value.toUpperCase();
        if (previewPrimary) {
            previewPrimary.style.backgroundColor = e.target.value;
        }
    });

    const secondaryInput = document.getElementById('app_secondary_color');
    const secondaryText = document.getElementById('app_secondary_color_text');
    const previewSecondary = document.getElementById('preview-btn-secondary');

    secondaryInput.addEventListener('input', function(e) {
        secondaryText.value = e.target.value.toUpperCase();
        if (previewSecondary) {
            previewSecondary.style.backgroundColor = e.target.value;
        }
    });

    const bgInput = document.getElementById('app_pwa_bg_color');
    const bgText = document.getElementById('app_pwa_bg_color_text');
    if(bgInput && bgText) {
        bgInput.addEventListener('input', function(e) {
            bgText.value = e.target.value.toUpperCase();
        });
    }


</script>
@endpush
@endsection