@extends('layouts.app')

@section('titulo', 'Configuración')

@section('contenido')
<div class="config-wrapper">
    <div class="config-header">
        <h1>Configuración de la plataforma</h1>
        <p class="config-sub">Textos, marca e imágenes del login. Solo administradores.</p>
    </div>

    @if (session('status'))
        <div class="alert-enterprise ok">{{ session('status') }}</div>
    @endif

    <form method="POST" action="{{ route('configuracion.update') }}" enctype="multipart/form-data" class="config-form">
        @csrf
        @method('PUT')

        <div class="config-tabs">
            <button type="button" class="tab-btn active" data-tab="login">Login</button>
            <button type="button" class="tab-btn" data-tab="marca">Marca</button>
            <button type="button" class="tab-btn" data-tab="sistema">Sistema</button>
        </div>

        {{-- TAB LOGIN --}}
        <div class="tab-panel active" data-panel="login">
            <h2>Textos del login</h2>
            @foreach ($login->where('tipo', 'text') as $c)
                <div class="config-row">
                    <label>{{ $c->etiqueta ?? $c->clave }}</label>
                    <input type="text" name="textos[{{ $c->clave }}]"
                           value="{{ old('textos.'.$c->clave, $c->valor) }}"
                           class="config-input" maxlength="500">
                    @if($c->descripcion)<small>{{ $c->descripcion }}</small>@endif
                </div>
            @endforeach

            <h2 style="margin-top:32px">Imágenes del login</h2>
            @foreach ($login->where('tipo', 'image') as $c)
                <div class="config-row">
                    <label>{{ $c->etiqueta ?? $c->clave }}</label>
                    @if($c->valor && file_exists(public_path('storage/'.$c->valor)))
                        <div class="config-preview">
                            <img src="{{ asset('storage/'.$c->valor) }}" alt="preview">
                        </div>
                    @else
                        <div class="config-preview vacio">Sin imagen cargada</div>
                    @endif
                    <input type="file" name="imagenes[{{ $c->clave }}]" accept="image/*" class="config-file">
                </div>
            @endforeach
        </div>

        {{-- TAB MARCA --}}
        <div class="tab-panel" data-panel="marca">
            <h2>Marca del cliente</h2>
            @foreach ($marca as $c)
                <div class="config-row">
                    <label>{{ $c->etiqueta ?? $c->clave }}</label>
                    @if ($c->tipo === 'color')
                        <div style="display:flex;gap:8px;align-items:center">
                            <input type="color"
                                   value="{{ old('textos.'.$c->clave, $c->valor) ?: '#1D3D8E' }}"
                                   style="width:56px;height:40px;padding:2px;border:1px solid #E5E7EB;border-radius:6px;cursor:pointer"
                                   oninput="this.nextElementSibling.value=this.value">
                            <input type="text" name="textos[{{ $c->clave }}]"
                                   value="{{ old('textos.'.$c->clave, $c->valor) }}"
                                   class="config-input" maxlength="20" style="flex:1"
                                   placeholder="#RRGGBB"
                                   pattern="^#[0-9A-Fa-f]{6}$"
                                   oninput="this.previousElementSibling.value=this.value">
                        </div>
                        @if($c->descripcion)<small>{{ $c->descripcion }}</small>@endif
                    @elseif ($c->tipo === 'image')
                        @if($c->valor && file_exists(public_path('storage/'.$c->valor)))
                            <div class="config-preview">
                                <img src="{{ asset('storage/'.$c->valor) }}" alt="preview">
                            </div>
                        @else
                            <div class="config-preview vacio">Sin imagen cargada</div>
                        @endif
                        <input type="file" name="imagenes[{{ $c->clave }}]" accept="image/*" class="config-file">
                    @else
                        <input type="text" name="textos[{{ $c->clave }}]"
                               value="{{ old('textos.'.$c->clave, $c->valor) }}" class="config-input" maxlength="500">
                    @endif
                </div>
            @endforeach
        </div>

        {{-- TAB SISTEMA --}}
        <div class="tab-panel" data-panel="sistema">
            <h2>Sistema</h2>
            @foreach ($sistema as $c)
                <div class="config-row">
                    <label>{{ $c->etiqueta ?? $c->clave }}</label>
                    <input type="text" name="textos[{{ $c->clave }}]"
                           value="{{ old('textos.'.$c->clave, $c->valor) }}" class="config-input" maxlength="500">
                </div>
            @endforeach
        </div>

        <div class="config-footer">
            <button type="submit" class="btn-enterprise">Guardar cambios</button>
        </div>
    </form>
</div>

<style>
.config-wrapper { max-width: 900px; margin: 0 auto; }
.config-header h1 { font-size: 26px; color: #111827; margin-bottom: 6px; }
.config-sub { color: #6B7280; margin-bottom: 24px; }
.config-tabs { display: flex; gap: 6px; border-bottom: 2px solid #E5E7EB; margin-bottom: 24px; }
.tab-btn { background: none; border: none; padding: 12px 20px; color: #6B7280; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.tab-btn.active { color: #2155A3; border-bottom-color: #2155A3; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.config-row { margin-bottom: 20px; }
.config-row label { display: block; font-size: 13px; font-weight: 600; color: #374151; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.config-input { width: 100%; padding: 10px 14px; border: 1px solid #E5E7EB; border-radius: 6px; font-size: 14px; }
.config-input:focus { outline: none; border-color: #2155A3; box-shadow: 0 0 0 3px rgba(33,85,163,.1); }
.config-file { margin-top: 8px; }
.config-preview { display: inline-block; padding: 8px; border: 1px dashed #E5E7EB; border-radius: 6px; background: #F9FAFB; margin-bottom: 8px; }
.config-preview img { max-height: 80px; max-width: 300px; display: block; }
.config-preview.vacio { color: #9CA3AF; font-size: 13px; padding: 20px; text-align: center; }
.config-footer { margin-top: 32px; padding-top: 24px; border-top: 1px solid #E5E7EB; text-align: right; }
.btn-enterprise { background: #2155A3; color: white; padding: 12px 28px; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; }
.btn-enterprise:hover { background: #1a4485; }
.alert-enterprise.ok { background: #D1FAE5; color: #065F46; padding: 12px 16px; border-radius: 6px; margin-bottom: 20px; }
</style>

<script>
document.querySelectorAll('.tab-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
        document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
        btn.classList.add('active');
        document.querySelector('[data-panel="' + btn.dataset.tab + '"]').classList.add('active');
    });
});
</script>
@endsection