@extends('../layouts/partials/header')

@section('content')

<div class="container mt-3">
    <br>
    <div class="card">
        <div class="card-header">
            <ul class="nav nav-tabs" id="clienteTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <a class="nav-link active" id="tab-personal-tab" data-bs-toggle="tab" href="#tab-personal" role="tab">Información Personal</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" id="tab-socio-tab" data-bs-toggle="tab" href="#tab-socio" role="tab">Socio Económico</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" id="tab-contacto-tab" data-bs-toggle="tab" href="#tab-contacto" role="tab">Contacto</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" id="tab-direccion-tab" data-bs-toggle="tab" href="#tab-direccion" role="tab">Direcciones</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" id="tab-redes-tab" data-bs-toggle="tab" href="#tab-redes" role="tab">Redes Sociales</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" id="tab-extra-tab" data-bs-toggle="tab" href="#tab-extra" role="tab">Datos Adicionales</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" id="tab-boveda-tab" data-bs-toggle="tab" href="#tab-boveda" role="tab">
                        <i class="bi bi-safe2"></i> Bóveda de Documentos
                        @if($cliente->documentos->count() > 0)
                            <span class="badge bg-secondary rounded-pill ms-1">{{ $cliente->documentos->count() }}</span>
                        @endif
                    </a>
                </li>
            </ul>
        </div>

        <div class="card-body">

            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <strong>OK:</strong> {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <strong>Por favor corrige los siguientes errores:</strong>
                    <ul class="mb-0 mt-1">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <form action="{{ route('clientes.update', $cliente) }}" method="POST" id="formCliente">
                @csrf
                @method('PUT')
                <input type="hidden" name="active_tab" id="active_tab" value="{{ old('active_tab', 'tab-personal') }}">

                <div class="tab-content mt-3" id="clienteTabsContent">

                    {{-- ===== TAB 1: INFORMACIÓN PERSONAL ===== --}}
                    <div class="tab-pane fade show active" id="tab-personal" role="tabpanel">
                        <p class="text-muted small">Los campos marcados con <span class="text-danger">*</span> son obligatorios.</p>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Nombre(s)</label>
                                <input type="text" name="ip_nombre" value="{{ old('ip_nombre', $cliente->ip_nombre) }}" class="form-control @error('ip_nombre') is-invalid @enderror" maxlength="100">
                                @error('ip_nombre')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Apellido Paterno</label>
                                <input type="text" name="ip_apellido_paterno" value="{{ old('ip_apellido_paterno', $cliente->ip_apellido_paterno) }}" class="form-control @error('ip_apellido_paterno') is-invalid @enderror" maxlength="100">
                                @error('ip_apellido_paterno')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Apellido Materno</label>
                                <input type="text" name="ip_apellido_materno" value="{{ old('ip_apellido_materno', $cliente->ip_apellido_materno) }}" class="form-control @error('ip_apellido_materno') is-invalid @enderror" maxlength="100">
                                @error('ip_apellido_materno')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Género</label>
                                <select name="ip_genero" class="form-select @error('ip_genero') is-invalid @enderror">
                                    <option value="">- Seleccionar -</option>
                                    @foreach(['Masculino','Femenino','Otro'] as $g)
                                        <option value="{{ $g }}" {{ old('ip_genero', $cliente->ip_genero) == $g ? 'selected' : '' }}>{{ $g }}</option>
                                    @endforeach
                                </select>
                                @error('ip_genero')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Fecha de Nacimiento</label>
                                <input type="date" name="ip_fecha_nacimiento" value="{{ old('ip_fecha_nacimiento', optional($cliente->ip_fecha_nacimiento)->format('Y-m-d')) }}" class="form-control @error('ip_fecha_nacimiento') is-invalid @enderror">
                                @error('ip_fecha_nacimiento')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Estado Civil</label>
                                <select name="ip_estado_civil" class="form-select @error('ip_estado_civil') is-invalid @enderror">
                                    <option value="">- Seleccionar -</option>
                                    @foreach(['Soltero(a)','Casado(a)','Divorciado(a)','Viudo(a)','Unión libre'] as $ec)
                                        <option value="{{ $ec }}" {{ old('ip_estado_civil', $cliente->ip_estado_civil) == $ec ? 'selected' : '' }}>{{ $ec }}</option>
                                    @endforeach
                                </select>
                                @error('ip_estado_civil')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-2">
                                <label class="form-label fw-bold">Hijos</label>
                                <input type="number" name="ip_hijos" value="{{ old('ip_hijos', $cliente->ip_hijos) }}" class="form-control @error('ip_hijos') is-invalid @enderror" min="0" max="99">
                                @error('ip_hijos')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Identificación</label>
                                <input type="text" name="ip_identificacion" value="{{ old('ip_identificacion', $cliente->ip_identificacion) }}" class="form-control @error('ip_identificacion') is-invalid @enderror" maxlength="50" placeholder="INE, Pasaporte, etc.">
                                @error('ip_identificacion')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">RFC</label>
                                <input type="text" name="ip_rfc" value="{{ old('ip_rfc', $cliente->ip_rfc) }}" class="form-control @error('ip_rfc') is-invalid @enderror" maxlength="17" style="text-transform:uppercase;">
                                @error('ip_rfc')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">CURP</label>
                                <input type="text" name="ip_curp" value="{{ old('ip_curp', $cliente->ip_curp) }}" class="form-control @error('ip_curp') is-invalid @enderror" maxlength="18" style="text-transform:uppercase;">
                                @error('ip_curp')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Nacionalidad</label>
                                <input type="text" name="ip_nacionalidad" value="{{ old('ip_nacionalidad', $cliente->ip_nacionalidad) }}" class="form-control @error('ip_nacionalidad') is-invalid @enderror" maxlength="60">
                                @error('ip_nacionalidad')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>
                    </div>

                    {{-- ===== TAB 2: ESTUDIO SOCIO ECONÓMICO ===== --}}
                    <div class="tab-pane fade" id="tab-socio" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Nivel de Educación</label>
                                <select name="se_educacion" class="form-select">
                                    <option value="">- Seleccionar -</option>
                                    @foreach(['Sin estudios','Primaria','Secundaria','Preparatoria','Licenciatura','Maestría','Doctorado'] as $nivel)
                                        <option value="{{ $nivel }}" {{ old('se_educacion', $cliente->se_educacion) == $nivel ? 'selected' : '' }}>{{ $nivel }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Ocupación</label>
                                <input type="text" name="se_ocupacion" value="{{ old('se_ocupacion', $cliente->se_ocupacion) }}" class="form-control" maxlength="100">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Tipo de Empleo</label>
                                <select name="se_empleo" class="form-select">
                                    <option value="">- Seleccionar -</option>
                                    @foreach(['Empleado','Independiente / Freelance','Empresario','Desempleado','Jubilado / Pensionado','Estudiante'] as $empleo)
                                        <option value="{{ $empleo }}" {{ old('se_empleo', $cliente->se_empleo) == $empleo ? 'selected' : '' }}>{{ $empleo }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Tipo de Vivienda</label>
                                <select name="se_vivienda" class="form-select">
                                    <option value="">- Seleccionar -</option>
                                    @foreach(['Propia','Rentada','Familiar','Otro'] as $vivienda)
                                        <option value="{{ $vivienda }}" {{ old('se_vivienda', $cliente->se_vivienda) == $vivienda ? 'selected' : '' }}>{{ $vivienda }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-2 d-flex align-items-end">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="se_auto" id="se_auto" value="1" {{ old('se_auto', $cliente->se_auto) ? 'checked' : '' }}>
                                    <label class="form-check-label fw-bold" for="se_auto">Tiene Automóvil</label>
                                </div>
                            </div>
                            <div class="col-md-2 d-flex align-items-end">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="se_smartphone" id="se_smartphone" value="1" {{ old('se_smartphone', $cliente->se_smartphone) ? 'checked' : '' }}>
                                    <label class="form-check-label fw-bold" for="se_smartphone">Tiene Smartphone</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- ===== TAB 3: CONTACTO ===== --}}
                    <div class="tab-pane fade" id="tab-contacto" role="tabpanel">
                        <div class="row g-3">

                            <div class="col-12"><h6 class="text-secondary border-bottom pb-1">Contacto Principal</h6></div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Correo</label>
                                <input type="email" name="cp_correo" value="{{ old('cp_correo', $cliente->cp_correo) }}" class="form-control @error('cp_correo') is-invalid @enderror" maxlength="150">
                                @error('cp_correo')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Teléfono</label>
                                <input type="text" name="cp_telefono" value="{{ old('cp_telefono', $cliente->cp_telefono) }}" class="form-control" maxlength="20">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Tipo</label>
                                <select name="cp_tipo" class="form-select">
                                    <option value="">- Seleccionar -</option>
                                    @foreach(['Celular','Oficina','Casa','Otro'] as $tipo)
                                        <option value="{{ $tipo }}" {{ old('cp_tipo', $cliente->cp_tipo) == $tipo ? 'selected' : '' }}>{{ $tipo }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-12"><h6 class="text-secondary border-bottom pb-1 mt-2">Contacto para Notificaciones</h6></div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Responsable</label>
                                <input type="text" name="cn_responsable" value="{{ old('cn_responsable', $cliente->cn_responsable) }}" class="form-control" maxlength="150">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Correo</label>
                                <input type="email" name="cn_correo" value="{{ old('cn_correo', $cliente->cn_correo) }}" class="form-control" maxlength="150">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Teléfono</label>
                                <input type="text" name="cn_telefono" value="{{ old('cn_telefono', $cliente->cn_telefono) }}" class="form-control" maxlength="20">
                            </div>

                            <div class="col-12"><h6 class="text-secondary border-bottom pb-1 mt-2">Contacto de Cobranza</h6></div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Responsable</label>
                                <input type="text" name="cc_responsable" value="{{ old('cc_responsable', $cliente->cc_responsable) }}" class="form-control" maxlength="150">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Correo</label>
                                <input type="email" name="cc_correo" value="{{ old('cc_correo', $cliente->cc_correo) }}" class="form-control" maxlength="150">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Teléfono</label>
                                <input type="text" name="cc_telefono" value="{{ old('cc_telefono', $cliente->cc_telefono) }}" class="form-control" maxlength="20">
                            </div>

                            <div class="col-12"><h6 class="text-secondary border-bottom pb-1 mt-2">Contacto de Siniestros</h6></div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Responsable</label>
                                <input type="text" name="cs_responsable" value="{{ old('cs_responsable', $cliente->cs_responsable) }}" class="form-control" maxlength="150">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Correo</label>
                                <input type="email" name="cs_correo" value="{{ old('cs_correo', $cliente->cs_correo) }}" class="form-control" maxlength="150">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Teléfono</label>
                                <input type="text" name="cs_telefono" value="{{ old('cs_telefono', $cliente->cs_telefono) }}" class="form-control" maxlength="20">
                            </div>

                        </div>
                    </div>

                    {{-- ===== TAB 4: DIRECCIONES ===== --}}
                    <div class="tab-pane fade" id="tab-direccion" role="tabpanel">
                        <div class="row g-3">

                            @foreach([
                                ['prefix' => 'dir_principal', 'label' => 'Dirección Principal'],
                                ['prefix' => 'dir_fiscal',    'label' => 'Dirección Fiscal'],
                                ['prefix' => 'dir_actual',    'label' => 'Dirección Actual'],
                                ['prefix' => 'dir_otro',      'label' => 'Otra Dirección'],
                            ] as $dir)
                                <div class="col-12"><h6 class="text-secondary border-bottom pb-1 mt-2">{{ $dir['label'] }}</h6></div>
                                <div class="col-md-5">
                                    <label class="form-label fw-bold">Calle</label>
                                    <input type="text" name="{{ $dir['prefix'] }}_calle" value="{{ old($dir['prefix'].'_calle', $cliente->{$dir['prefix'].'_calle'}) }}" class="form-control" maxlength="150">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label fw-bold">Núm. Ext.</label>
                                    <input type="text" name="{{ $dir['prefix'] }}_numero_ext" value="{{ old($dir['prefix'].'_numero_ext', $cliente->{$dir['prefix'].'_numero_ext'}) }}" class="form-control" maxlength="20">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label fw-bold">Núm. Int.</label>
                                    <input type="text" name="{{ $dir['prefix'] }}_numero_int" value="{{ old($dir['prefix'].'_numero_int', $cliente->{$dir['prefix'].'_numero_int'}) }}" class="form-control" maxlength="20">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label fw-bold">Colonia</label>
                                    <input type="text" name="{{ $dir['prefix'] }}_colonia" value="{{ old($dir['prefix'].'_colonia', $cliente->{$dir['prefix'].'_colonia'}) }}" class="form-control" maxlength="100">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label fw-bold">Ciudad</label>
                                    <input type="text" name="{{ $dir['prefix'] }}_ciudad" value="{{ old($dir['prefix'].'_ciudad', $cliente->{$dir['prefix'].'_ciudad'}) }}" class="form-control" maxlength="100">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label fw-bold">C.P.</label>
                                    <input type="text" name="{{ $dir['prefix'] }}_codigo_postal" value="{{ old($dir['prefix'].'_codigo_postal', $cliente->{$dir['prefix'].'_codigo_postal'}) }}" class="form-control" maxlength="10">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label fw-bold">Estado</label>
                                    <input type="text" name="{{ $dir['prefix'] }}_estado" value="{{ old($dir['prefix'].'_estado', $cliente->{$dir['prefix'].'_estado'}) }}" class="form-control" maxlength="100">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label fw-bold">País</label>
                                    <input type="text" name="{{ $dir['prefix'] }}_pais" value="{{ old($dir['prefix'].'_pais', $cliente->{$dir['prefix'].'_pais'} ?? 'México') }}" class="form-control" maxlength="100">
                                </div>
                            @endforeach

                        </div>
                    </div>

                    {{-- ===== TAB 5: REDES SOCIALES ===== --}}
                    <div class="tab-pane fade" id="tab-redes" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Facebook</label>
                                <input type="text" name="rs_facebook" value="{{ old('rs_facebook', $cliente->rs_facebook) }}" class="form-control" maxlength="150">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Instagram</label>
                                <input type="text" name="rs_instagram" value="{{ old('rs_instagram', $cliente->rs_instagram) }}" class="form-control" maxlength="150">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">LinkedIn</label>
                                <input type="text" name="rs_linkedin" value="{{ old('rs_linkedin', $cliente->rs_linkedin) }}" class="form-control" maxlength="150">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Twitter / X</label>
                                <input type="text" name="rs_twitter" value="{{ old('rs_twitter', $cliente->rs_twitter) }}" class="form-control" maxlength="150">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Sitio Web</label>
                                <input type="text" name="rs_sitio_web" value="{{ old('rs_sitio_web', $cliente->rs_sitio_web) }}" class="form-control" maxlength="150">
                            </div>
                        </div>
                    </div>

                    {{-- ===== TAB 6: DATOS ADICIONALES ===== --}}
                    <div class="tab-pane fade" id="tab-extra" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Clave Agente</label>
                                <input type="text" name="clave_agente" value="{{ old('clave_agente', $cliente->clave_agente) }}" class="form-control" maxlength="8">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Fecha de Alta</label>
                                <input type="date" name="fecha_alta" value="{{ old('fecha_alta', optional($cliente->fecha_alta)->format('Y-m-d')) }}" class="form-control">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Origen</label>
                                <select name="origen" class="form-select">
                                    <option value="">- Seleccionar -</option>
                                    @foreach(['Referido','Web','Llamada','Visita','Redes Sociales','Otro'] as $origen)
                                        <option value="{{ $origen }}" {{ old('origen', $cliente->origen) == $origen ? 'selected' : '' }}>{{ $origen }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Estatus</label>
                                <select name="estatus" class="form-select">
                                    @foreach(['activo' => 'Activo','prospecto' => 'Prospecto','inactivo' => 'Inactivo','baja' => 'Baja'] as $val => $label)
                                        <option value="{{ $val }}" {{ old('estatus', $cliente->estatus) == $val ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-8">
                                <label class="form-label fw-bold">Notas</label>
                                <textarea name="notas" class="form-control" rows="4" maxlength="2000">{{ old('notas', $cliente->notas) }}</textarea>
                            </div>
                        </div>
                    </div>

                    {{-- TAB 7: placeholder vacío — el contenido real está fuera del form --}}
                    <div class="tab-pane fade" id="tab-boveda" role="tabpanel"></div>

                </div>{{-- /tab-content --}}

                <div class="row mt-4" id="botonesCliente">
                    <div class="col-12 d-flex gap-2">
                        <button type="submit" class="btn btn-primary btn-sm">
                            <i class="bi bi-floppy"></i> Actualizar
                        </button>
                        <a href="{{ route('clientes.index') }}" class="btn btn-secondary btn-sm">Cancelar</a>
                    </div>
                </div>

            </form>{{-- /formCliente --}}

            {{-- ===== BÓVEDA DE DOCUMENTOS (fuera del formCliente para evitar form anidado) ===== --}}
            <div class="tab-content-boveda">

                {{-- Mensajes de estado de bóveda --}}
                @if (session('error'))
                    <div class="alert alert-danger alert-dismissible fade show mt-3" role="alert">
                        <strong>Error:</strong> {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                {{-- Panel de carga --}}
                <div id="panelBoveda" class="d-none">
                    <div class="card border-0 bg-light mt-3">
                        <div class="card-body">
                            <h6 class="fw-bold mb-3">
                                <i class="bi bi-cloud-upload me-1"></i> Cargar nuevo documento
                            </h6>
                            <form action="{{ route('clientes.documentos.store', $cliente) }}"
                                  method="POST"
                                  enctype="multipart/form-data"
                                  id="formBoveda">
                                @csrf
                                <div class="row g-2 align-items-end">
                                    <div class="col-md-8">
                                        <label class="form-label fw-bold">
                                            Archivo
                                            <span class="text-muted fw-normal small">(PDF, Excel xlsx/xls, JPG/PNG — máx. 20 MB)</span>
                                        </label>
                                        <input type="file"
                                               name="documento"
                                               id="inputDocumento"
                                               class="form-control @error('documento') is-invalid @enderror"
                                               accept=".pdf,.xlsx,.xls,.jpg,.jpeg,.png">
                                        @error('documento')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-4">
                                        <button type="submit" class="btn btn-success w-100" id="btnSubir">
                                            <i class="bi bi-upload me-1"></i> Subir a Bóveda
                                        </button>
                                    </div>
                                </div>
                                <div class="progress mt-3 d-none" id="progresoSubida" style="height:6px;">
                                    <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"
                                         role="progressbar" style="width:100%"></div>
                                </div>
                            </form>
                        </div>
                    </div>

                    {{-- Listado de documentos --}}
                    <div class="mt-4">
                        <h6 class="fw-bold mb-2">
                            <i class="bi bi-folder2-open me-1"></i>
                            Documentos almacenados
                            <span class="badge bg-secondary ms-1">{{ $cliente->documentos->count() }}</span>
                        </h6>

                        @if($cliente->documentos->isEmpty())
                            <div class="text-center py-5 text-muted">
                                <i class="bi bi-archive" style="font-size:2.5rem;"></i>
                                <p class="mt-2 mb-0">No hay documentos en la bóveda todavía.</p>
                                <small>Sube el primer documento usando el panel de arriba.</small>
                            </div>
                        @else
                            <div class="table-responsive">
                                <table class="table table-hover table-sm align-middle mb-0">
                                    <thead class="table-light">
                                        <tr>
                                            <th style="width:40px;"></th>
                                            <th>Nombre</th>
                                            <th>Tamaño</th>
                                            <th>Subido por</th>
                                            <th>Fecha</th>
                                            <th class="text-center" style="width:130px;">Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($cliente->documentos as $documento)
                                            <tr>
                                                <td class="text-center">
                                                    <i class="bi {{ $documento->icono }}" style="font-size:1.3rem;"></i>
                                                </td>
                                                <td class="text-break">{{ $documento->nombre_original }}</td>
                                                <td class="text-nowrap">{{ $documento->tamano_legible }}</td>
                                                <td class="text-nowrap">{{ $documento->usuario?->name ?? '—' }}</td>
                                                <td class="text-nowrap">{{ $documento->created_at->format('d/m/Y H:i') }}</td>
                                                <td class="text-center">
                                                    <a href="{{ route('clientes.documentos.download', [$cliente, $documento]) }}"
                                                       class="btn btn-outline-primary btn-sm"
                                                       title="Descargar">
                                                        <i class="bi bi-download"></i>
                                                    </a>
                                                    <form action="{{ route('clientes.documentos.destroy', [$cliente, $documento]) }}"
                                                          method="POST"
                                                          class="d-inline"
                                                          onsubmit="return confirm('¿Eliminar el documento {{ addslashes($documento->nombre_original) }}? Esta acción no se puede deshacer.')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit"
                                                                class="btn btn-outline-danger btn-sm"
                                                                title="Eliminar">
                                                            <i class="bi bi-trash3"></i>
                                                        </button>
                                                    </form>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @endif
                    </div>
                </div>{{-- /panelBoveda --}}

            </div>{{-- /tab-content-boveda --}}

        </div>{{-- /card-body --}}
    </div>{{-- /card --}}
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const panelBoveda   = document.getElementById('panelBoveda');
        const botonesCliente = document.getElementById('botonesCliente');

        function aplicarEstadoTab(tabId) {
            const esBoveda = tabId === 'tab-boveda';
            if (panelBoveda)    panelBoveda.classList.toggle('d-none', !esBoveda);
            if (botonesCliente) botonesCliente.classList.toggle('d-none',  esBoveda);
            if (document.getElementById('active_tab')) {
                document.getElementById('active_tab').value = tabId;
            }
        }

        const tabs = document.querySelectorAll('a[data-bs-toggle="tab"]');
        tabs.forEach(tab => {
            tab.addEventListener('shown.bs.tab', function (e) {
                const tabId = e.target.getAttribute('href').substring(1);
                aplicarEstadoTab(tabId);
            });
        });

        const activeTab = '{{ old('active_tab', session('active_tab', 'tab-personal')) }}';
        const tabElement = document.querySelector(`a[href="#${activeTab}"]`);
        if (tabElement) {
            new bootstrap.Tab(tabElement).show();
        }
        aplicarEstadoTab(activeTab);

        // Bóveda: mostrar progreso al subir
        const formBoveda = document.getElementById('formBoveda');
        if (formBoveda) {
            formBoveda.addEventListener('submit', function () {
                const progreso = document.getElementById('progresoSubida');
                const btnSubir = document.getElementById('btnSubir');
                if (progreso) progreso.classList.remove('d-none');
                if (btnSubir) {
                    btnSubir.disabled = true;
                    btnSubir.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Subiendo...';
                }
            });
        }
    });
</script>

@endsection

@extends('../layouts/partials/footer')