@extends('padre.padre')
@section('contenido')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
    :root {
        --primary-blue: #2563eb;
        --primary-hover: #1d4ed8;
        --accent-teal: #0d9488;
        --bg-gray: #f8fafc;
        --card-bg: #ffffff;
        --border-color: #e2e8f0;
        --text-dark: #1e293b;
        --text-muted: #64748b;
    }

    body {
        background-color: #f1f5f9;
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        color: var(--text-dark);
        margin: 0;
        padding: 0;
    }

    .terceros-wrapper {
        padding: 1.5rem 2rem;
        max-width: 1600px;
        margin: 0 auto;
    }

    /* HEADER */
    .top-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 20px;
        background: white;
        padding: 18px 24px;
        border-radius: 16px;
        border: 1px solid var(--border-color);
        box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    }

    .header-title-box {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .header-icon-circle {
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, #eff6ff, #dbeafe);
        color: var(--primary-blue);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
    }

    .header-text h1 {
        font-size: 20px;
        font-weight: 800;
        margin: 0;
        color: #0f172a;
    }

    .header-text p {
        font-size: 12px;
        color: var(--text-muted);
        margin: 2px 0 0;
    }

    .header-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* BOTONES */
    .btn-action {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 18px;
        font-size: 13px;
        font-weight: 700;
        border-radius: 10px;
        border: none;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none !important;
    }

    .btn-primary-action {
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        color: white;
        box-shadow: 0 4px 10px rgba(37,99,235,0.25);
    }
    .btn-primary-action:hover {
        background: linear-gradient(135deg, #1d4ed8, #1e40af);
        transform: translateY(-1px);
        color: white;
    }

    .btn-excel-action {
        background: #ecfdf5;
        color: #059669;
        border: 1px solid #a7f3d0;
    }
    .btn-excel-action:hover {
        background: #10b981;
        color: white;
    }

    .btn-back {
        background: #f8fafc;
        color: #475569;
        border: 1px solid #cbd5e1;
    }
    .btn-back:hover {
        background: #e2e8f0;
        color: #0f172a;
    }

    /* KPI METRICS */
    .kpi-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 15px;
        margin-bottom: 20px;
    }

    .kpi-card {
        background: white;
        border-radius: 14px;
        padding: 16px 20px;
        border: 1px solid var(--border-color);
        box-shadow: 0 1px 3px rgba(0,0,0,0.02);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .kpi-info h4 {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-muted);
        margin: 0 0 6px 0;
    }

    .kpi-info .kpi-num {
        font-size: 24px;
        font-weight: 900;
        color: #0f172a;
        margin: 0;
    }

    .kpi-icon {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }
    .kpi-blue { background: #eff6ff; color: #2563eb; }
    .kpi-purple { background: #faf5ff; color: #9333ea; }
    .kpi-amber { background: #fffbeb; color: #d97706; }
    .kpi-teal { background: #f0fdfa; color: #0d9488; }

    /* FILTROS */
    .filter-card {
        background: white;
        border-radius: 14px;
        padding: 16px 20px;
        border: 1px solid var(--border-color);
        margin-bottom: 20px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    }

    .filter-form {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr auto;
        gap: 12px;
        align-items: center;
    }

    .form-control-custom, .form-select-custom {
        width: 100%;
        padding: 9px 14px;
        font-size: 13px;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        background: #f8fafc;
        color: #1e293b;
        transition: all 0.2s;
        outline: none;
    }
    .form-control-custom:focus, .form-select-custom:focus {
        background: white;
        border-color: var(--primary-blue);
        box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
    }

    /* AUTOCOMPLETE CIUDADES */
    .autocomplete-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border: 1.5px solid #cbd5e1;
        border-radius: 10px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.12);
        max-height: 220px;
        overflow-y: auto;
        z-index: 1200;
        margin-top: 4px;
    }
    .autocomplete-item {
        padding: 10px 14px;
        cursor: pointer;
        border-bottom: 1px solid #f1f5f9;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: background 0.15s;
    }
    .autocomplete-item:hover, .autocomplete-item.active {
        background-color: #eff6ff;
    }
    .badge-postal-dian {
        background: #e0e7ff;
        color: #3730a3;
        padding: 2px 8px;
        border-radius: 6px;
        font-weight: 800;
        font-size: 11px;
    }
    .badge-quick-city {
        background: #f1f5f9;
        border: 1px solid #cbd5e1;
        color: #1e293b;
        font-size: 11px;
        font-weight: 600;
        padding: 3px 8px;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.15s;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    .badge-quick-city:hover {
        background: #eff6ff;
        border-color: #3b82f6;
        color: #1d4ed8;
    }

    /* TABLA */
    .table-card {
        background: white;
        border-radius: 16px;
        border: 1px solid var(--border-color);
        box-shadow: 0 2px 6px rgba(0,0,0,0.02);
        overflow: hidden;
    }

    .table-responsive {
        width: 100%;
        overflow-x: auto;
    }

    .custom-table {
        width: 100%;
        border-collapse: collapse;
        text-align: left;
        font-size: 13px;
    }

    .custom-table th {
        background: #f8fafc;
        padding: 12px 16px;
        font-weight: 700;
        color: #475569;
        border-bottom: 1px solid var(--border-color);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
    }

    .custom-table td {
        padding: 14px 16px;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }

    .custom-table tr:hover {
        background-color: #f8fafc;
    }

    .tercero-avatar {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: #f1f5f9;
        color: #475569;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 13px;
    }
    .avatar-juridica { background: #e0e7ff; color: #3730a3; }
    .avatar-natural { background: #fef3c7; color: #92400e; }
    .avatar-empleado { background: #d1fae5; color: #065f46; }

    .badge-naturaleza {
        font-size: 11px;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 6px;
        display: inline-block;
    }
    .badge-nat { background: #fef3c7; color: #92400e; }
    .badge-jur { background: #e0e7ff; color: #3730a3; }

    .badge-status {
        font-size: 11px;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 6px;
        display: inline-block;
    }
    .status-active { background: #dcfce7; color: #166534; }
    .status-inactive { background: #fee2e2; color: #991b1b; }

    .action-btn-group {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .btn-icon-action {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        background: white;
        color: #475569;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.15s;
        font-size: 13px;
    }
    .btn-icon-action:hover {
        background: #f1f5f9;
        color: #0f172a;
        transform: scale(1.05);
    }
    .btn-icon-edit:hover { background: #eff6ff; color: var(--primary-blue); border-color: #bfdbfe; }
    .btn-icon-view:hover { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }
    .btn-icon-toggle:hover { background: #fff1f2; color: #e11d48; border-color: #fecdd3; }

    /* PAGINACIÓN */
    .table-pagination-bar {
        padding: 14px 20px;
        border-top: 1px solid var(--border-color);
        background: #f8fafc;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
    }
    .pagination-info {
        display: flex;
        align-items: center;
        gap: 16px;
        font-size: 12px;
        color: #64748b;
    }
    .per-page-selector {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .pagination-nav {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .page-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px 12px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
        color: #334155;
        background: white;
        border: 1px solid #cbd5e1;
        transition: all 0.15s;
        cursor: pointer;
    }
    .page-btn:hover:not(.disabled):not(.active) {
        background: #eff6ff;
        border-color: #3b82f6;
        color: #1d4ed8;
    }
    .page-btn.active {
        background: var(--primary-blue);
        border-color: var(--primary-blue);
        color: white;
        cursor: default;
    }
    .page-btn.disabled {
        color: #94a3b8;
        background: #f1f5f9;
        border-color: #e2e8f0;
        cursor: not-allowed;
        opacity: 0.7;
    }

    /* MODAL */
    .custom-modal-backdrop {
        position: fixed;
        top: 0; left: 0; width: 100vw; height: 100vh;
        background: rgba(15, 23, 42, 0.65);
        backdrop-filter: blur(4px);
        z-index: 1050;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .custom-modal-content {
        background: white;
        width: 100%;
        max-width: 850px;
        max-height: 90vh;
        border-radius: 20px;
        box-shadow: 0 20px 25px -5px rgba(0,0,0,0.2);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        animation: modalFadeIn 0.2s ease-out;
    }

    @keyframes modalFadeIn {
        from { transform: scale(0.96); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }

    .modal-hdr {
        padding: 18px 24px;
        background: linear-gradient(135deg, #1e293b, #0f172a);
        color: white;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .modal-hdr h3 { margin: 0; font-size: 16px; font-weight: 800; }
    .btn-close-modal {
        background: transparent;
        border: none;
        color: #94a3b8;
        font-size: 20px;
        cursor: pointer;
        transition: color 0.15s;
    }
    .btn-close-modal:hover { color: white; }

    /* MODAL TABS */
    .modal-tabs {
        display: flex;
        background: #f8fafc;
        border-bottom: 1px solid var(--border-color);
        padding: 0 20px;
        gap: 8px;
        overflow-x: auto;
    }

    .modal-tab-btn {
        padding: 12px 16px;
        border: none;
        background: transparent;
        font-size: 13px;
        font-weight: 700;
        color: var(--text-muted);
        cursor: pointer;
        border-bottom: 2px solid transparent;
        transition: all 0.2s;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .modal-tab-btn.active {
        color: var(--primary-blue);
        border-bottom-color: var(--primary-blue);
        background: white;
    }

    .modal-body-scroll {
        padding: 24px;
        overflow-y: auto;
        flex: 1;
    }

    .tab-pane {
        display: none;
    }
    .tab-pane.active {
        display: block;
    }

    .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
    .form-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .form-group-custom { margin-bottom: 14px; }
    .form-group-custom label {
        display: block;
        font-size: 12px;
        font-weight: 700;
        color: #334155;
        margin-bottom: 6px;
    }
    .form-group-custom label .req { color: #ef4444; }

    .modal-ftr {
        padding: 14px 24px;
        border-top: 1px solid var(--border-color);
        background: #f8fafc;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
    }

    /* SWITCH TOGGLE */
    .switch-container {
        display: flex;
        align-items: center;
        gap: 10px;
        background: #f1f5f9;
        padding: 10px 14px;
        border-radius: 10px;
        border: 1px solid #cbd5e1;
    }
    .switch-input {
        width: 40px;
        height: 20px;
        accent-color: var(--primary-blue);
        cursor: pointer;
    }

    @media (max-width: 768px) {
        .terceros-wrapper { padding: 1rem; }
        .filter-form { grid-template-columns: 1fr; }
        .form-grid-2, .form-grid-3, .form-grid-4 { grid-template-columns: 1fr; }
        .top-header { flex-direction: column; align-items: flex-start; }
    }
</style>

<div class="terceros-wrapper">
    <!-- HEADER -->
    <div class="top-header">
        <div class="header-title-box">
            <a href="{{ url('contabilidad') }}" class="btn-action btn-back" title="Regresar al panel contable">
                <i class="fa-solid fa-arrow-left"></i>
            </a>
            <div class="header-icon-circle">
                <i class="fa-solid fa-address-book"></i>
            </div>
            <div class="header-text">
                <h1>Catálogo de Terceros Contables</h1>
                <p>Gestión integral de Clientes, Proveedores, Empleados y Terceros tributarios (DIAN / Exógena)</p>
            </div>
        </div>
        <div class="header-actions">
            <a href="{{ url('terceros-contables/exportar-excel') }}?{{ http_build_query($filtros) }}" class="btn-action btn-excel-action">
                <i class="fa-solid fa-file-excel"></i> Exportar Excel
            </a>
            <button type="button" class="btn-action btn-primary-action" onclick="abrirModalNuevoTercero()">
                <i class="fa-solid fa-user-plus"></i> Nuevo Tercero
            </button>
        </div>
    </div>

    <!-- KPIS -->
    <div class="kpi-grid">
        <div class="kpi-card">
            <div class="kpi-info">
                <h4>Total Terceros</h4>
                <p class="kpi-num">{{ number_format($totalTerceros) }}</p>
            </div>
            <div class="kpi-icon kpi-blue">
                <i class="fa-solid fa-users"></i>
            </div>
        </div>
        <div class="kpi-card">
            <div class="kpi-info">
                <h4>Personas Jurídicas</h4>
                <p class="kpi-num">{{ number_format($totalJuridicos) }}</p>
            </div>
            <div class="kpi-icon kpi-purple">
                <i class="fa-solid fa-building"></i>
            </div>
        </div>
        <div class="kpi-card">
            <div class="kpi-info">
                <h4>Personas Naturales</h4>
                <p class="kpi-num">{{ number_format($totalNaturales) }}</p>
            </div>
            <div class="kpi-icon kpi-amber">
                <i class="fa-solid fa-user"></i>
            </div>
        </div>
        <div class="kpi-card">
            <div class="kpi-info">
                <h4>Empleados en Nómina</h4>
                <p class="kpi-num">{{ number_format($totalEmpleados) }}</p>
            </div>
            <div class="kpi-icon kpi-teal">
                <i class="fa-solid fa-id-badge"></i>
            </div>
        </div>
    </div>

    <!-- FILTROS -->
    <div class="filter-card">
        <form method="GET" action="{{ url('terceros-contables') }}" class="filter-form">
            <div>
                <input type="text" name="buscar" value="{{ $filtros['buscar'] ?? '' }}" class="form-control-custom" placeholder="🔍 Buscar por NIT, Cédula, Nombre, Teléfono, Correo...">
            </div>
            <div>
                <select name="naturaleza" class="form-select-custom" onchange="this.form.submit()">
                    <option value="todos">Naturaleza: Todas</option>
                    <option value="NATURALES" {{ ($filtros['naturaleza'] ?? '') == 'NATURALES' || ($filtros['naturaleza'] ?? '') == 'Natural' ? 'selected' : '' }}>Persona Natural (NATURALES)</option>
                    <option value="JURIDICAS" {{ ($filtros['naturaleza'] ?? '') == 'JURIDICAS' || ($filtros['naturaleza'] ?? '') == 'Jurídica' ? 'selected' : '' }}>Persona Jurídica (JURIDICAS)</option>
                </select>
            </div>
            <div>
                <select name="es_empleado" class="form-select-custom" onchange="this.form.submit()">
                    <option value="todos">Tipo: Todos</option>
                    <option value="0" {{ ($filtros['es_empleado'] ?? '') === '0' ? 'selected' : '' }}>Clientes / Proveedores</option>
                    <option value="1" {{ ($filtros['es_empleado'] ?? '') === '1' ? 'selected' : '' }}>Empleados</option>
                </select>
            </div>
            <div>
                <select name="estadoC" class="form-select-custom" onchange="this.form.submit()">
                    <option value="todos">Estado: Todos</option>
                    <option value="1" {{ ($filtros['estadoC'] ?? '') === '1' ? 'selected' : '' }}>Activos</option>
                    <option value="0" {{ ($filtros['estadoC'] ?? '') === '0' ? 'selected' : '' }}>Inactivos</option>
                </select>
            </div>
            <div style="display: flex; gap: 6px;">
                <button type="submit" class="btn-action btn-primary-action" style="padding: 9px 14px;">Filtrar</button>
                @if(!empty($filtros))
                    <a href="{{ url('terceros-contables') }}" class="btn-action btn-back" style="padding: 9px 12px;" title="Limpiar filtros">✖</a>
                @endif
            </div>
        </form>
    </div>

    <!-- TABLA DE RESULTADOS -->
    <div class="table-card">
        <div class="table-responsive">
            <table class="custom-table">
                <thead>
                    <tr>
                        <th style="width: 50px;">#</th>
                        <th>Identificación / NIT</th>
                        <th>Razón Social / Nombre Completo</th>
                        <th>Tipo / Naturaleza</th>
                        <th>Contacto</th>
                        <th>Ciudad</th>
                        <th>Régimen Fiscal</th>
                        <th>Estado</th>
                        <th style="text-align: right;">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($terceros as $t)
                        @php
                            $tipoIdRaw = $t->tipoId ?? 'CC';
                            $natRaw = $t->naturaleza ?? '';
                            $tipoIdNorm = \App\Http\Controllers\TercerosController::normalizarTipoId($tipoIdRaw);
                            $natNorm = \App\Http\Controllers\TercerosController::normalizarNaturaleza($natRaw, $tipoIdRaw);
                            $esJur = ($natNorm === 'JURIDICAS');
                            $esEmp = !empty($t->es_empleado);
                            $avatarCls = $esEmp ? 'avatar-empleado' : ($esJur ? 'avatar-juridica' : 'avatar-natural');
                            $inicial = strtoupper(substr($t->Nombre, 0, 1));
                            $natLabel = $esJur ? 'Jurídica' : 'Natural';
                        @endphp
                        <tr>
                            <td>
                                <div class="tercero-avatar {{ $avatarCls }}">
                                    @if($esEmp) <i class="fa-solid fa-id-badge"></i>
                                    @elseif($esJur) <i class="fa-solid fa-building"></i>
                                    @else {{ $inicial }}
                                    @endif
                                </div>
                            </td>
                            <td>
                                <strong style="color:#0f172a; font-size:13px;">{{ $t->cedula }}</strong>
                                @if(!empty($t->dv))
                                    <span style="background:#e2e8f0; color:#475569; padding:1px 5px; border-radius:4px; font-size:11px; font-weight:700;">-{{ $t->dv }}</span>
                                @endif
                                <div style="font-size:11px; color:var(--text-muted);">Tipo: {{ $tipoIdNorm }}</div>
                            </td>
                            <td>
                                <div style="font-weight:700; color:#0f172a;">{{ $t->Nombre }} {{ $t->apellido ?? '' }}</div>
                                @if(!empty($t->Alias) && $t->Alias !== $t->Nombre)
                                    <div style="font-size:11px; color:var(--text-muted);"><i class="fa-regular fa-bookmark"></i> {{ $t->Alias }}</div>
                                @endif
                            </td>
                            <td>
                                <span class="badge-naturaleza {{ $esJur ? 'badge-jur' : 'badge-nat' }}">
                                    {{ $natLabel }}
                                </span>
                                @if($esEmp)
                                    <span class="badge-naturaleza" style="background:#d1fae5; color:#065f46; margin-left:4px;">
                                        Empleado
                                    </span>
                                @endif
                            </td>
                            <td>
                                <div><i class="fa-solid fa-phone" style="font-size:11px; color:var(--text-muted);"></i> {{ $t->telefono ?: 'S/N' }}</div>
                                <div style="font-size:11px; color:var(--text-muted);"><i class="fa-regular fa-envelope"></i> {{ $t->correo ?: 'Sin correo' }}</div>
                            </td>
                            <td>
                                <div>
                                    @if(!empty($t->nombre_ciudad))
                                        <strong style="color:#0f172a;">{{ $t->nombre_ciudad }}</strong> 
                                        @if(!empty($t->nombre_departamento))
                                            <span style="font-size:11px; color:var(--text-muted);">({{ $t->nombre_departamento }})</span>
                                        @endif
                                        <div style="font-size:11px; color:var(--primary-blue); font-weight:700;"><i class="fa-solid fa-barcode"></i> Cód: {{ $t->codigociudad }}</div>
                                    @elseif(!empty($t->codigociudad))
                                        <strong>{{ $t->codigociudad }}</strong>
                                    @else
                                        <span style="color:var(--text-muted);">No registrada</span>
                                    @endif
                                </div>
                                <div style="font-size:11px; color:var(--text-muted); margin-top:2px;"><i class="fa-solid fa-location-dot"></i> {{ $t->direccion ?: 'Sin dirección' }}</div>
                            </td>
                            <td>
                                <span style="font-size:11px; font-weight:600; color:#475569;">{{ $t->regimen ?: 'No especificado' }}</span>
                            </td>
                            <td>
                                <span class="badge-status {{ $t->estadoC == 1 ? 'status-active' : 'status-inactive' }}">
                                    {{ $t->estadoC == 1 ? 'ACTIVO' : 'INACTIVO' }}
                                </span>
                            </td>
                            <td style="text-align: right;">
                                <div class="action-btn-group" style="justify-content: flex-end;">
                                    <button type="button" class="btn-icon-action btn-icon-view" onclick="verFichaTercero('{{ $t->cedula }}')" title="Ver Ficha Completa">
                                        <i class="fa-regular fa-eye"></i>
                                    </button>
                                    <button type="button" class="btn-icon-action btn-icon-edit" onclick="editarTercero('{{ $t->cedula }}')" title="Editar">
                                        <i class="fa-solid fa-pen-to-square"></i>
                                    </button>
                                    <button type="button" class="btn-icon-action btn-icon-toggle" onclick="cambiarEstadoTercero('{{ $t->cedula }}', {{ $t->estadoC }})" title="{{ $t->estadoC == 1 ? 'Desactivar' : 'Activar' }}">
                                        <i class="fa-solid {{ $t->estadoC == 1 ? 'fa-toggle-on' : 'fa-toggle-off' }}"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" style="text-align:center; padding: 40px 20px; color: var(--text-muted);">
                                <i class="fa-solid fa-users-slash" style="font-size: 36px; margin-bottom: 10px; color:#cbd5e1; display:block;"></i>
                                <strong>No se encontraron terceros registrados con los filtros aplicados.</strong>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- PAGINACIÓN Y CONTROL DE REGISTROS -->
        <div class="table-pagination-bar">
            <div class="pagination-info">
                <span>Mostrando <strong>{{ $terceros->firstItem() ?? 0 }}</strong> a <strong>{{ $terceros->lastItem() ?? 0 }}</strong> de <strong>{{ number_format($terceros->total()) }}</strong> terceros</span>
                <div class="per-page-selector">
                    <label for="select_per_page" style="margin:0; font-size:12px; color:var(--text-muted); font-weight:600;">Mostrar:</label>
                    <select id="select_per_page" class="form-select-custom" style="padding: 4px 8px; font-size:12px; width:auto; height:auto;" onchange="cambiarRegistrosPorPagina(this.value)">
                        <option value="10" {{ ($filtros['per_page'] ?? 20) == 10 ? 'selected' : '' }}>10 por pág.</option>
                        <option value="20" {{ ($filtros['per_page'] ?? 20) == 20 ? 'selected' : '' }}>20 por pág.</option>
                        <option value="50" {{ ($filtros['per_page'] ?? 20) == 50 ? 'selected' : '' }}>50 por pág.</option>
                        <option value="100" {{ ($filtros['per_page'] ?? 20) == 100 ? 'selected' : '' }}>100 por pág.</option>
                    </select>
                </div>
            </div>

            @if($terceros->hasPages())
                <div class="pagination-nav">
                    {{-- Botón Primera Página --}}
                    @if ($terceros->currentPage() > 2)
                        <a href="{{ $terceros->url(1) }}" class="page-btn" title="Primera página"><i class="fa-solid fa-angles-left"></i></a>
                    @endif

                    {{-- Botón Anterior --}}
                    @if ($terceros->onFirstPage())
                        <span class="page-btn disabled"><i class="fa-solid fa-chevron-left"></i> Anterior</span>
                    @else
                        <a href="{{ $terceros->previousPageUrl() }}" class="page-btn"><i class="fa-solid fa-chevron-left"></i> Anterior</a>
                    @endif

                    {{-- Números de Página --}}
                    @foreach ($terceros->getUrlRange(max(1, $terceros->currentPage() - 2), min($terceros->lastPage(), $terceros->currentPage() + 2)) as $page => $url)
                        @if ($page == $terceros->currentPage())
                            <span class="page-btn active">{{ $page }}</span>
                        @else
                            <a href="{{ $url }}" class="page-btn">{{ $page }}</a>
                        @endif
                    @endforeach

                    {{-- Botón Siguiente --}}
                    @if ($terceros->hasMorePages())
                        <a href="{{ $terceros->nextPageUrl() }}" class="page-btn">Siguiente <i class="fa-solid fa-chevron-right"></i></a>
                    @else
                        <span class="page-btn disabled">Siguiente <i class="fa-solid fa-chevron-right"></i></span>
                    @endif

                    {{-- Botón Última Página --}}
                    @if ($terceros->currentPage() < $terceros->lastPage() - 1)
                        <a href="{{ $terceros->url($terceros->lastPage()) }}" class="page-btn" title="Última página"><i class="fa-solid fa-angles-right"></i></a>
                    @endif
                </div>
            @endif
        </div>
    </div>
</div>

<!-- MODAL FORMULARIO TERCERO (CREAR / EDITAR) -->
<div class="custom-modal-backdrop" id="modalTercero">
    <div class="custom-modal-content">
        <div class="modal-hdr">
            <h3 id="modalTerceroTitle"><i class="fa-solid fa-user-plus"></i> Registrar Nuevo Tercero</h3>
            <button type="button" class="btn-close-modal" onclick="cerrarModalTercero()">✖</button>
        </div>

        <!-- TABS DEL MODAL -->
        <div class="modal-tabs">
            <button type="button" class="modal-tab-btn active" onclick="cambiarTabModal('tab-basico')">
                <i class="fa-regular fa-id-card"></i> 1. Datos Básicos
            </button>
            <button type="button" class="modal-tab-btn" onclick="cambiarTabModal('tab-ubicacion')">
                <i class="fa-solid fa-location-dot"></i> 2. Ubicación & Contacto
            </button>
            <button type="button" class="modal-tab-btn" onclick="cambiarTabModal('tab-tributario')">
                <i class="fa-solid fa-receipt"></i> 3. Perfil DIAN & Comercial
            </button>
            <button type="button" class="modal-tab-btn" onclick="cambiarTabModal('tab-nomina')">
                <i class="fa-solid fa-user-tie"></i> 4. Nómina (Opcional)
            </button>
        </div>

        <form id="formTercero" onsubmit="guardarTercero(event)">
            @csrf
            <input type="hidden" id="tercero_modo" value="crear">

            <div class="modal-body-scroll">
                <!-- TAB 1: DATOS BÁSICOS -->
                <div class="tab-pane active" id="tab-basico">
                    <div class="form-grid-3">
                        <div class="form-group-custom">
                            <label>Tipo Documento <span class="req">*</span></label>
                            <select id="t_tipoId" name="tipoId" class="form-select-custom" required onchange="manejarCambioTipoId()">
                                <option value="CC">CC - Cédula de Ciudadanía</option>
                                <option value="NI">NI - NIT / RUT (Facturación Electrónica)</option>
                                <option value="CE">CE - Cédula de Extranjería</option>
                                <option value="PP">PP - Pasaporte</option>
                                <option value="TI">TI - Tarjeta de Identidad</option>
                                <option value="DIE">DIE - Doc. Identificación Extranjero</option>
                            </select>
                        </div>
                        <div class="form-group-custom">
                            <label>Número Identificación / NIT <span class="req">*</span></label>
                            <input type="text" id="t_cedula" name="cedula" class="form-control-custom" required placeholder="Ej: 901234567" oninput="autoCalcularDvEnVivo()">
                        </div>
                        <div class="form-group-custom">
                            <label>Dígito Verificación (DV)</label>
                            <input type="text" id="t_dv" name="dv" class="form-control-custom" placeholder="Autocalculado" maxlength="2" style="background:#f1f5f9; font-weight:800; text-align:center;">
                        </div>
                    </div>

                    <div class="form-grid-2">
                        <div class="form-group-custom">
                            <label>Naturaleza Jurídica <span class="req">*</span></label>
                            <select id="t_naturaleza" name="naturaleza" class="form-select-custom" required onchange="manejarCambioNaturaleza()">
                                <option value="NATURALES">Persona Natural (NATURALES)</option>
                                <option value="JURIDICAS">Persona Jurídica (JURIDICAS)</option>
                            </select>
                        </div>
                        <div class="form-group-custom">
                            <label>Nombre Comercial / Alias</label>
                            <input type="text" id="t_Alias" name="Alias" class="form-control-custom" placeholder="Ej: Distribuidora El Sol">
                        </div>
                    </div>

                    <div class="form-grid-2">
                        <div class="form-group-custom">
                            <label id="lbl_nombre">Primer Nombre / Razón Social <span class="req">*</span></label>
                            <input type="text" id="t_Nombre" name="Nombre" class="form-control-custom" required placeholder="Ingrese nombre o razón social">
                        </div>
                        <div class="form-group-custom" id="grp_apellido">
                            <label>Apellidos</label>
                            <input type="text" id="t_apellido" name="apellido" class="form-control-custom" placeholder="Ingrese apellidos">
                        </div>
                    </div>
                </div>

                <!-- TAB 2: UBICACIÓN Y CONTACTO -->
                <div class="tab-pane" id="tab-ubicacion">
                    <div class="form-grid-2">
                        <div class="form-group-custom">
                            <label>Dirección Principal</label>
                            <input type="text" id="t_direccion" name="direccion" class="form-control-custom" placeholder="Ej: Cra 45 # 12-34 Piso 2">
                        </div>
                        <div class="form-group-custom">
                            <label>Barrio / Sector</label>
                            <input type="text" id="t_barrio" name="barrio" class="form-control-custom" placeholder="Ej: El Poblado">
                        </div>
                    </div>

                    <div class="form-grid-2">
                        <div class="form-group-custom" style="position: relative;">
                            <label><i class="fa-solid fa-magnifying-glass" style="color:var(--primary-blue);"></i> Ciudad / Municipio (Búsqueda DIAN) <span class="req">*</span></label>
                            <div style="position: relative;">
                                <input type="text" id="t_ciudad_nombre" class="form-control-custom" placeholder="Escriba para buscar: Ej: Bogotá, Pereira, Medellín..." autocomplete="off" oninput="buscarCiudadesEnVivo(this.value, 'nombre')" onfocus="buscarCiudadesEnVivo(this.value, 'nombre')" style="padding-right: 32px;">
                                <button type="button" onclick="buscarCiudadesEnVivo('', 'nombre')" style="position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #64748b; cursor: pointer;" title="Ver ciudades principales">
                                    <i class="fa-solid fa-chevron-down"></i>
                                </button>
                            </div>
                            <div id="lista_ciudades_sugeridas" class="autocomplete-dropdown" style="display: none;"></div>
                        </div>
                        <div class="form-group-custom" style="position: relative;">
                            <label><i class="fa-solid fa-barcode" style="color:var(--primary-blue);"></i> Código Postal / Código DIAN Ciudad <span class="req">*</span></label>
                            <input type="text" id="t_codigociudad" name="codigociudad" class="form-control-custom" placeholder="Ej: 11001 o escriba ciudad..." autocomplete="off" required style="font-weight: 700; color: var(--primary-blue);" oninput="buscarCiudadesEnVivo(this.value, 'codigo')" onfocus="buscarCiudadesEnVivo(this.value, 'codigo')">
                            <div id="lista_codigos_sugeridos" class="autocomplete-dropdown" style="display: none;"></div>
                        </div>
                    </div>

                    <!-- BOTONES DE ACCESO RÁPIDO A CIUDADES FRECUENTES -->
                    <div style="margin-top: -6px; margin-bottom: 14px;">
                        <span style="font-size: 11px; font-weight: 700; color: #64748b; margin-right: 6px;">Ciudades frecuentes:</span>
                        <div style="display: inline-flex; flex-wrap: wrap; gap: 4px;">
                            @if(!empty($ciudadTenant))
                                <button type="button" class="badge-quick-city" style="background:#eff6ff; border-color:#3b82f6; color:#1d4ed8; font-weight:800;" onclick="seleccionarCiudad('{{ addslashes($ciudadTenant) }}', '', '{{ $codigoPostalTenant }}')" title="Ciudad predeterminada asignada a este Tenant">
                                    🏢 Sede Tenant: {{ $ciudadTenant }} ({{ $codigoPostalTenant }})
                                </button>
                            @endif
                            <button type="button" class="badge-quick-city" onclick="seleccionarCiudad('Bogotá, D.C.', 'Bogota, D.C.', '11001')">📍 Bogotá (11001)</button>
                            <button type="button" class="badge-quick-city" onclick="seleccionarCiudad('Medellín', 'Antioquia', '05001')">📍 Medellín (05001)</button>
                            <button type="button" class="badge-quick-city" onclick="seleccionarCiudad('Cali', 'Valle del Cauca', '76001')">📍 Cali (76001)</button>
                            <button type="button" class="badge-quick-city" onclick="seleccionarCiudad('Barranquilla', 'Atlántico', '08001')">📍 Barranquilla (08001)</button>
                            <button type="button" class="badge-quick-city" onclick="seleccionarCiudad('Pereira', 'Risaralda', '66001')">📍 Pereira (66001)</button>
                            <button type="button" class="badge-quick-city" onclick="seleccionarCiudad('Bucaramanga', 'Santander', '68001')">📍 Bucaramanga (68001)</button>
                            <button type="button" class="badge-quick-city" onclick="seleccionarCiudad('Cartagena', 'Bolívar', '13001')">📍 Cartagena (13001)</button>
                        </div>
                    </div>

                    <div class="form-grid-2">
                        <div class="form-group-custom">
                            <label>Teléfono / Celular</label>
                            <input type="text" id="t_telefono" name="telefono" class="form-control-custom" placeholder="Ej: 3001234567">
                        </div>
                        <div class="form-group-custom">
                            <label>Correo Electrónico (Facturación / Avisos)</label>
                            <input type="email" id="t_correo" name="correo" class="form-control-custom" placeholder="facturacion@empresa.com">
                        </div>
                    </div>

                    <div class="form-group-custom">
                        <label>Notas / Observaciones Internas</label>
                        <textarea id="t_notaComentario" name="notaComentario" class="form-control-custom" rows="2" placeholder="Comentarios adicionales sobre el tercero..."></textarea>
                    </div>
                </div>

                <!-- TAB 3: PERFIL DIAN Y COMERCIAL -->
                <div class="tab-pane" id="tab-tributario">
                    <div class="form-grid-2">
                        <div class="form-group-custom">
                            <label>Régimen Tributario</label>
                            <select id="t_regimen" name="regimen" class="form-select-custom">
                                <option value="NO_APLICA">NO_APLICA (No Responsable de IVA / Simplificado)</option>
                                <option value="IVA">IVA (Responsable de IVA / Común)</option>
                                <option value="IVA_E_INC">IVA_E_INC (IVA e Impoconsumo)</option>
                                <option value="Régimen Simple de Tributación (SIMPLE)">Régimen Simple de Tributación (SIMPLE)</option>
                                <option value="Gran Contribuyente">Gran Contribuyente</option>
                                <option value="Autorretenedor">Autorretenedor</option>
                            </select>
                        </div>
                        <div class="form-group-custom">
                            <label>Responsabilidad Fiscal (DIAN)</label>
                            <select id="t_responsabilidad" name="responsabilidad" class="form-select-custom">
                                <option value="R-99-PN">R-99-PN (No responsable de IVA)</option>
                                <option value="O-13">O-13 (Gran Contribuyente)</option>
                                <option value="O-15">O-15 (Autorretenedor)</option>
                                <option value="O-23">O-23 (Agente de retención IVA)</option>
                                <option value="O-47">O-47 (Régimen Simple de Tributación)</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-grid-3">
                        <div class="form-group-custom">
                            <label>Cupo de Crédito ($)</label>
                            <input type="number" step="0.01" id="t_cupo" name="cupo" class="form-control-custom" value="0">
                        </div>
                        <div class="form-group-custom">
                            <label>% Descuento Comercial</label>
                            <input type="number" step="0.01" id="t_dtoclie" name="dtoclie" class="form-control-custom" value="0">
                        </div>
                        <div class="form-group-custom">
                            <label>Forma de Pago por Defecto</label>
                            <select id="t_metodoPagoDefec" name="metodoPagoDefec" class="form-select-custom">
                                <option value="Contado">Contado</option>
                                <option value="Crédito 15 días">Crédito 15 días</option>
                                <option value="Crédito 30 días">Crédito 30 días</option>
                                <option value="Crédito 60 días">Crédito 60 días</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group-custom">
                        <label>Estado del Tercero</label>
                        <select id="t_estadoC" name="estadoC" class="form-select-custom">
                            <option value="1">ACTIVO</option>
                            <option value="0">INACTIVO</option>
                        </select>
                    </div>
                </div>

                <!-- TAB 4: DATOS DE NÓMINA (OPCIONAL) -->
                <div class="tab-pane" id="tab-nomina">
                    <div class="form-group-custom">
                        <div class="switch-container">
                            <input type="checkbox" id="t_es_empleado" name="es_empleado" value="1" class="switch-input" onchange="toggleCamposNomina()">
                            <label for="t_es_empleado" style="margin:0; cursor:pointer; font-weight:700;">
                                <i class="fa-solid fa-id-badge"></i> Habilitar a este tercero como Empleado para el Módulo de Nómina
                            </label>
                        </div>
                    </div>

                    <div id="seccion_campos_nomina" style="display: none; margin-top: 15px;">
                        <div class="form-grid-3">
                            <div class="form-group-custom">
                                <label>Salario Base Mensual ($)</label>
                                <input type="number" step="0.01" id="t_salario_base" name="salario_base" class="form-control-custom" value="0">
                            </div>
                            <div class="form-group-custom">
                                <label>Cargo Laboral</label>
                                <input type="text" id="t_cargo" name="cargo" class="form-control-custom" placeholder="Ej: Operario / Contador">
                            </div>
                            <div class="form-group-custom">
                                <label>Auxilio de Transporte</label>
                                <select id="t_auxilio_transporte_aplica" name="auxilio_transporte_aplica" class="form-select-custom">
                                    <option value="1">SÍ Aplica Auxilio de Transporte</option>
                                    <option value="0">NO Aplica (Salario Integral / Remoto)</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-grid-2">
                            <div class="form-group-custom">
                                <label>NIT EPS</label>
                                <input type="text" id="t_nit_eps" name="nit_eps" class="form-control-custom" placeholder="NIT EPS">
                            </div>
                            <div class="form-group-custom">
                                <label>Nombre EPS</label>
                                <input type="text" id="t_nombre_eps" name="nombre_eps" class="form-control-custom" placeholder="Ej: Sura EPS / Sanitas">
                            </div>
                        </div>

                        <div class="form-grid-2">
                            <div class="form-group-custom">
                                <label>NIT Fondo de Pensiones / Cesantías</label>
                                <input type="text" id="t_nit_fondo" name="nit_fondo" class="form-control-custom" placeholder="NIT Fondo">
                            </div>
                            <div class="form-group-custom">
                                <label>Nombre Fondo Pensiones</label>
                                <input type="text" id="t_nombre_fondo" name="nombre_fondo" class="form-control-custom" placeholder="Ej: Porvenir / Colfondos">
                            </div>
                        </div>

                        <div class="form-grid-3">
                            <div class="form-group-custom">
                                <label>NIT ARL</label>
                                <input type="text" id="t_nit_arl" name="nit_arl" class="form-control-custom" placeholder="NIT ARL">
                            </div>
                            <div class="form-group-custom">
                                <label>Nombre ARL</label>
                                <input type="text" id="t_nombre_arl" name="nombre_arl" class="form-control-custom" placeholder="Ej: ARL Sura / Positiva">
                            </div>
                            <div class="form-group-custom">
                                <label>Tarifa de Riesgo ARL</label>
                                <select id="t_tarifa_riesgos" name="tarifa_riesgos" class="form-select-custom">
                                    <option value="0.00522">Clase I (0.522%) - Administrativo</option>
                                    <option value="0.01044">Clase II (1.044%) - Manufactura Liviana</option>
                                    <option value="0.02436">Clase III (2.436%) - Procesos Industriales</option>
                                    <option value="0.04350">Clase IV (4.350%) - Transporte / Mecánica</option>
                                    <option value="0.06960">Clase V (6.960%) - Construcción / Alto Riesgo</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-grid-2">
                            <div class="form-group-custom">
                                <label>NIT Caja de Compensación</label>
                                <input type="text" id="t_nit_caja" name="nit_caja" class="form-control-custom" placeholder="NIT Caja">
                            </div>
                            <div class="form-group-custom">
                                <label>Nombre Caja Compensación</label>
                                <input type="text" id="t_nombre_caja" name="nombre_caja" class="form-control-custom" placeholder="Ej: Comfama / Colsubsidio">
                            </div>
                        </div>

                        <!-- CAMPOS DIAN NÓMINA ELECTRÓNICA & BANCO -->
                        <div style="font-weight:700; font-size:12px; text-transform:uppercase; color:#0284c7; margin:15px 0 10px; border-bottom:1px solid #e2e8f0; padding-bottom:4px; display:flex; justify-content:space-between; align-items:center;">
                            <span><i class="fa-solid fa-paper-plane me-1"></i> Parámetros Nómina Electrónica (DIAN) & Pago Bancario</span>
                            <span style="font-size:11px; color:#64748b; font-weight:normal;">(Se auto-completan si los dejas por defecto)</span>
                        </div>

                        <div class="form-grid-3">
                            <div class="form-group-custom">
                                <label>Tipo de Contrato (DIAN)</label>
                                <select id="t_tipo_contrato" name="tipo_contrato" class="form-select-custom">
                                    <option value="TERMINO_INDEFINIDO" selected>Término Indefinido</option>
                                    <option value="TERMINO_FIJO">Término Fijo</option>
                                    <option value="OBRA_LABOR">Por Obra o Labor</option>
                                    <option value="APRENDIZAJE_ETAPA_LECTIVA">Aprendizaje (Etapa Lectiva)</option>
                                    <option value="APRENDIZAJE_ETAPA_PRODUCTIVA">Aprendizaje (Etapa Productiva)</option>
                                    <option value="PRESTACION_SERVICIOS">Prestación de Servicios</option>
                                </select>
                            </div>
                            <div class="form-group-custom">
                                <label>Tipo Trabajador (DIAN)</label>
                                <select id="t_tipo_trabajador" name="tipo_trabajador" class="form-select-custom">
                                    <option value="DEPENDIENTE" selected>01 - Dependiente</option>
                                    <option value="SERVICIO_DOMESTICO">02 - Servicio Doméstico</option>
                                    <option value="APRENDIZ_SENA">19 - Aprendiz SENA</option>
                                    <option value="PRACTICANTE">23 - Estudiante / Prácticas</option>
                                </select>
                            </div>
                            <div class="form-group-custom">
                                <label>Subtipo Trabajador</label>
                                <select id="t_subtipo_trabajador" name="subtipo_trabajador" class="form-select-custom">
                                    <option value="NO_APLICA" selected>00 - No Aplica (Estándar)</option>
                                    <option value="PENSIONADO_VEJEZ">01 - Pensionado por Vejez activo</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-grid-3">
                            <div class="form-group-custom">
                                <label>Periodo de Nómina</label>
                                <select id="t_periodo_nomina" name="periodo_nomina" class="form-select-custom">
                                    <option value="MENSUAL" selected>Mensual (Estándar DIAN)</option>
                                    <option value="QUINCENAL">Quincenal</option>
                                    <option value="CATORCENAL">Catorcenal</option>
                                    <option value="SEMANAL">Semanal</option>
                                </select>
                            </div>
                            <div class="form-group-custom">
                                <label>Método de Pago DIAN</label>
                                <select id="t_metodo_pago_nomina" name="metodo_pago_nomina" class="form-select-custom">
                                    <option value="10" selected>10 - Efectivo / No Definido</option>
                                    <option value="47">47 - Transferencia Bancaria</option>
                                    <option value="42">42 - Consignación Bancaria</option>
                                    <option value="20">20 - Cheque</option>
                                </select>
                            </div>
                            <div class="form-group-custom">
                                <label>Entidad Bancaria</label>
                                <select id="t_banco_nomina" name="banco_nomina" class="form-select-custom">
                                    <option value="7" selected>Bancolombia (007)</option>
                                    <option value="1">Banco de Bogotá (001)</option>
                                    <option value="23">Banco Davivienda (023)</option>
                                    <option value="2">Banco Popular (002)</option>
                                    <option value="13">BBVA Colombia (013)</option>
                                    <option value="9">Banco de Occidente (009)</option>
                                    <option value="51">DaviPlata (051)</option>
                                    <option value="507">Nequi (507)</option>
                                    <option value="32">Banco Caja Social (032)</option>
                                    <option value="52">Banco AV Villas (052)</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-grid-4">
                            <div class="form-group-custom">
                                <label>Tipo Cuenta Bancaria</label>
                                <select id="t_tipo_cuenta_nomina" name="tipo_cuenta_nomina" class="form-select-custom">
                                    <option value="AHORROS" selected>Cuenta de Ahorros</option>
                                    <option value="CORRIENTE">Cuenta Corriente</option>
                                </select>
                            </div>
                            <div class="form-group-custom">
                                <label>Nº Cuenta Bancaria</label>
                                <input type="text" id="t_numero_cuenta_nomina" name="numero_cuenta_nomina" class="form-control-custom" placeholder="Opcional (Usa Cédula)">
                            </div>
                            <div class="form-group-custom">
                                <label>Fecha Ingreso a Empresa</label>
                                <input type="date" id="t_fecha_ingreso_emp" name="fecha_ingreso_emp" class="form-control-custom">
                            </div>
                            <div class="form-group-custom">
                                <label>Salario Integral / Alto Riesgo</label>
                                <div style="display:flex; gap:10px; margin-top:6px;">
                                    <label style="font-size:12px; display:inline-flex; align-items:center; cursor:pointer;">
                                        <input type="checkbox" id="t_salario_integral" name="salario_integral" value="1" style="margin-right:4px;"> Integral
                                    </label>
                                    <label style="font-size:12px; display:inline-flex; align-items:center; cursor:pointer;">
                                        <input type="checkbox" id="t_alto_riesgo_pension" name="alto_riesgo_pension" value="1" style="margin-right:4px;"> Alto Riesgo
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-ftr">
                <button type="button" class="btn-action btn-back" onclick="cerrarModalTercero()">Cancelar</button>
                <button type="submit" class="btn-action btn-primary-action" id="btnGuardarTercero">
                    <i class="fa-solid fa-save"></i> Guardar Tercero
                </button>
            </div>
        </form>
    </div>
</div>

<!-- MODAL VER FICHA TERCERO -->
<div class="custom-modal-backdrop" id="modalFichaTercero">
    <div class="custom-modal-content" style="max-width: 650px;">
        <div class="modal-hdr">
            <h3><i class="fa-regular fa-id-card"></i> Ficha Detallada del Tercero</h3>
            <button type="button" class="btn-close-modal" onclick="cerrarModalFicha()">✖</button>
        </div>
        <div class="modal-body-scroll" id="fichaContenido">
            <div style="text-align:center; padding:30px;"><i class="fa-solid fa-spinner fa-spin fa-2x"></i></div>
        </div>
        <div class="modal-ftr">
            <button type="button" class="btn-action btn-back" onclick="cerrarModalFicha()">Cerrar</button>
        </div>
    </div>
</div>

<script>
    // Normalizadores para garantizar compatibilidad con datos históricos y API de Facturación Electrónica (NI, NATURALES, JURIDICAS)
    function normalizarTipoIdJS(tipoId) {
        if (!tipoId) return 'CC';
        const t = String(tipoId).trim().toUpperCase();
        if (t === 'NI' || t === 'NIT' || t === '31') return 'NI';
        if (t === 'CC' || t === '13') return 'CC';
        if (t === 'CE' || t === '22') return 'CE';
        if (t === 'PP' || t === '41') return 'PP';
        if (t === 'TI' || t === '12') return 'TI';
        if (t === 'DIE' || t === '42' || t === '50') return 'DIE';
        return t;
    }

    function normalizarNaturalezaJS(nat, tipoId) {
        if (nat) {
            const n = String(nat).trim().toUpperCase();
            if (n.startsWith('JUR') || n === 'PJ') return 'JURIDICAS';
            if (n.startsWith('NAT') || n === 'PN') return 'NATURALES';
        }
        const t = normalizarTipoIdJS(tipoId);
        if (t === 'NI') return 'JURIDICAS';
        return 'NATURALES';
    }

    function normalizarRegimenJS(reg) {
        if (!reg) return 'NO_APLICA';
        const r = String(reg).trim().toUpperCase();
        if (r === 'NO_APLICA' || r.includes('NO RESPONSABLE') || r.includes('SIMPLIFICADO') || r === 'NO APLICA') {
            return 'NO_APLICA';
        }
        if (r === 'IVA_E_INC') return 'IVA_E_INC';
        if (r === 'IVA' || r.includes('RESPONSABLE') || r.includes('COMUN')) {
            return 'IVA';
        }
        if (r.includes('SIMPLE')) return 'Régimen Simple de Tributación (SIMPLE)';
        if (r.includes('GRAN')) return 'Gran Contribuyente';
        if (r.includes('AUTORRET')) return 'Autorretenedor';
        return 'NO_APLICA';
    }

    function normalizarMetodoPagoJS(met) {
        if (!met) return 'Contado';
        const m = String(met).trim().toLowerCase();
        if (m === 'nulo' || m === 'efecti' || m === 'contado' || m === '') return 'Contado';
        if (m.includes('15')) return 'Crédito 15 días';
        if (m.includes('30')) return 'Crédito 30 días';
        if (m.includes('60')) return 'Crédito 60 días';
        return 'Contado';
    }

    // Algoritmo Oficial DIAN Módulo 11 en JavaScript
    function calcularDvDian(nit) {
        nit = String(nit).replace(/\D/g, '');
        if (!nit || nit.length === 0) return '';
        
        const primos = [3, 7, 13, 17, 19, 23, 29, 37, 41, 43, 47, 53, 59, 67, 71];
        let suma = 0;
        const len = nit.length;
        
        for (let i = 0; i < len; i++) {
            const pos = len - 1 - i;
            if (primos[i]) {
                suma += parseInt(nit.charAt(pos)) * primos[i];
            }
        }
        
        const residuo = suma % 11;
        if (residuo === 0 || residuo === 1) return residuo;
        return 11 - residuo;
    }

    function autoCalcularDvEnVivo() {
        const cedula = document.getElementById('t_cedula').value.trim();
        const tipoId = document.getElementById('t_tipoId').value;
        const dvInput = document.getElementById('t_dv');
        
        if (tipoId === 'NI' || tipoId === 'NIT' || tipoId === '31' || cedula.length >= 8) {
            dvInput.value = calcularDvDian(cedula);
        } else {
            dvInput.value = '';
        }
    }

    // AUTOCOMPLETAR DINÁMICO DE CIUDADES Y CÓDIGOS POSTALES (DIAN)
    let debounceTimerCiudad = null;

    function buscarCiudadesEnVivo(texto, origen = 'nombre') {
        clearTimeout(debounceTimerCiudad);
        const contNombre = document.getElementById('lista_ciudades_sugeridas');
        const contCodigo = document.getElementById('lista_codigos_sugeridos');
        
        const contenedor = (origen === 'codigo') ? contCodigo : contNombre;
        const otroContenedor = (origen === 'codigo') ? contNombre : contCodigo;
        
        if (otroContenedor) otroContenedor.style.display = 'none';
        if (!contenedor) return;
        
        texto = (texto || '').trim();

        debounceTimerCiudad = setTimeout(() => {
            fetch('{{ url("api/ciudades/buscar") }}?q=' + encodeURIComponent(texto))
            .then(r => r.json())
            .then(ciudades => {
                if (!ciudades || ciudades.length === 0) {
                    contenedor.innerHTML = '<div style="padding:10px 14px; font-size:12px; color:#64748b;"><i class="fa-solid fa-circle-exclamation"></i> No se encontraron ciudades coincidentes.</div>';
                    contenedor.style.display = 'block';
                    return;
                }

                let html = '<div style="padding:6px 10px; font-size:10px; font-weight:800; text-transform:uppercase; color:#94a3b8; background:#f8fafc; border-bottom:1px solid #e2e8f0;">Seleccione una Ciudad / Municipio (DIAN):</div>';
                ciudades.forEach(c => {
                    const ciudadEscapada = (c.Ciudad || '').replace(/'/g, "\\'");
                    const deptoEscapado = (c.Departamento || '').replace(/'/g, "\\'");
                    const codEscapado = (c.CodigoDIAN || '').replace(/'/g, "\\'");
                    
                    html += `
                        <div class="autocomplete-item" onclick="seleccionarCiudad('${ciudadEscapada}', '${deptoEscapado}', '${codEscapado}')">
                            <div>
                                <i class="fa-solid fa-location-dot" style="color:#3b82f6; margin-right:6px; font-size:11px;"></i>
                                <strong style="color:#0f172a; font-size:13px;">${c.Ciudad}</strong>
                                <span style="font-size:11px; color:#64748b; margin-left:4px;">(${c.Departamento})</span>
                            </div>
                            <span class="badge-postal-dian"><i class="fa-solid fa-barcode"></i> Cód: ${c.CodigoDIAN}</span>
                        </div>
                    `;
                });
                contenedor.innerHTML = html;
                contenedor.style.display = 'block';
            })
            .catch(err => {
                console.error('Error buscando ciudades:', err);
            });
        }, 150);
    }

    function seleccionarCiudad(ciudad, departamento, codigoDian) {
        document.getElementById('t_ciudad_nombre').value = `${ciudad} (${departamento})`;
        document.getElementById('t_codigociudad').value = codigoDian;
        
        const contNombre = document.getElementById('lista_ciudades_sugeridas');
        const contCodigo = document.getElementById('lista_codigos_sugeridos');
        if (contNombre) contNombre.style.display = 'none';
        if (contCodigo) contCodigo.style.display = 'none';
    }

    // Cerrar sugerencias al hacer clic fuera
    document.addEventListener('click', function(e) {
        const contNombre = document.getElementById('lista_ciudades_sugeridas');
        const contCodigo = document.getElementById('lista_codigos_sugeridos');
        const inputCiudad = document.getElementById('t_ciudad_nombre');
        const inputCodigo = document.getElementById('t_codigociudad');
        
        if (contNombre && !contNombre.contains(e.target) && e.target !== inputCiudad) {
            contNombre.style.display = 'none';
        }
        if (contCodigo && !contCodigo.contains(e.target) && e.target !== inputCodigo) {
            contCodigo.style.display = 'none';
        }
    });

    function manejarCambioTipoId() {
        const tipoId = document.getElementById('t_tipoId').value;
        const natSelect = document.getElementById('t_naturaleza');
        if (tipoId === 'NI' || tipoId === 'NIT' || tipoId === '31') {
            natSelect.value = 'JURIDICAS';
        } else {
            natSelect.value = 'NATURALES';
        }
        manejarCambioNaturaleza();
        autoCalcularDvEnVivo();
    }

    function manejarCambioNaturaleza() {
        const nat = document.getElementById('t_naturaleza').value;
        const lblNombre = document.getElementById('lbl_nombre');
        const grpApellido = document.getElementById('grp_apellido');
        
        if (nat === 'JURIDICAS' || nat === 'Jurídica' || nat === 'Juridica') {
            lblNombre.innerHTML = 'Razón Social <span class="req">*</span>';
            grpApellido.style.display = 'none';
        } else {
            lblNombre.innerHTML = 'Primer Nombre <span class="req">*</span>';
            grpApellido.style.display = 'block';
        }
    }

    function toggleCamposNomina() {
        const checked = document.getElementById('t_es_empleado').checked;
        document.getElementById('seccion_campos_nomina').style.display = checked ? 'block' : 'none';
    }

    function cambiarTabModal(tabId) {
        document.querySelectorAll('.modal-tab-btn').forEach(btn => btn.classList.remove('active'));
        document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('active'));
        
        event.currentTarget.classList.add('active');
        document.getElementById(tabId).classList.add('active');
    }

    function abrirModalNuevoTercero() {
        document.getElementById('formTercero').reset();
        document.getElementById('tercero_modo').value = 'crear';
        document.getElementById('t_tipoId').value = 'CC';
        document.getElementById('t_naturaleza').value = 'NATURALES';
        document.getElementById('t_regimen').value = 'NO_APLICA';
        document.getElementById('t_responsabilidad').value = 'R-99-PN';
        document.getElementById('t_cedula').readOnly = false;
        document.getElementById('modalTerceroTitle').innerHTML = '<i class="fa-solid fa-user-plus"></i> Registrar Nuevo Tercero';
        document.getElementById('seccion_campos_nomina').style.display = 'none';
        if (document.getElementById('t_tipo_contrato')) document.getElementById('t_tipo_contrato').value = 'TERMINO_INDEFINIDO';
        if (document.getElementById('t_tipo_trabajador')) document.getElementById('t_tipo_trabajador').value = 'DEPENDIENTE';
        if (document.getElementById('t_subtipo_trabajador')) document.getElementById('t_subtipo_trabajador').value = 'NO_APLICA';
        if (document.getElementById('t_periodo_nomina')) document.getElementById('t_periodo_nomina').value = 'MENSUAL';
        if (document.getElementById('t_metodo_pago_nomina')) document.getElementById('t_metodo_pago_nomina').value = '10';
        if (document.getElementById('t_banco_nomina')) document.getElementById('t_banco_nomina').value = '7';
        if (document.getElementById('t_tipo_cuenta_nomina')) document.getElementById('t_tipo_cuenta_nomina').value = 'AHORROS';
        if (document.getElementById('t_numero_cuenta_nomina')) document.getElementById('t_numero_cuenta_nomina').value = '';
        if (document.getElementById('t_fecha_ingreso_emp')) document.getElementById('t_fecha_ingreso_emp').value = '';
        if (document.getElementById('t_salario_integral')) document.getElementById('t_salario_integral').checked = false;
        if (document.getElementById('t_alto_riesgo_pension')) document.getElementById('t_alto_riesgo_pension').checked = false;
        // Precargar ciudad y código postal/DIAN asignados al Tenant (si existen en DatosTenat)
        const ciudadTenantDef = {!! json_encode($ciudadTenant ?? '') !!};
        const codigoTenantDef = {!! json_encode($codigoPostalTenant ?? '') !!};

        if (ciudadTenantDef && ciudadTenantDef.trim() !== '') {
            document.getElementById('t_ciudad_nombre').value = ciudadTenantDef;
        } else {
            document.getElementById('t_ciudad_nombre').value = '';
        }

        if (codigoTenantDef && codigoTenantDef.trim() !== '') {
            document.getElementById('t_codigociudad').value = codigoTenantDef;
        } else {
            document.getElementById('t_codigociudad').value = '';
        }

        const listCiudad = document.getElementById('lista_ciudades_sugeridas');
        if (listCiudad) listCiudad.style.display = 'none';
        const listCodigo = document.getElementById('lista_codigos_sugeridos');
        if (listCodigo) listCodigo.style.display = 'none';

        manejarCambioNaturaleza();
        
        // Reset tabs to first
        document.querySelectorAll('.modal-tab-btn').forEach((b, i) => b.classList.toggle('active', i === 0));
        document.querySelectorAll('.tab-pane').forEach((p, i) => p.classList.toggle('active', i === 0));
        
        document.getElementById('modalTercero').style.display = 'flex';
    }

    function cerrarModalTercero() {
        document.getElementById('modalTercero').style.display = 'none';
    }

    function cerrarModalFicha() {
        document.getElementById('modalFichaTercero').style.display = 'none';
    }

    function guardarTercero(e) {
        e.preventDefault();
        const modo = document.getElementById('tercero_modo').value;
        const cedula = document.getElementById('t_cedula').value.trim();
        const url = modo === 'crear' ? '{{ url("api/terceros/guardar") }}' : '{{ url("api/terceros/actualizar") }}/' + encodeURIComponent(cedula);
        
        const form = document.getElementById('formTercero');
        const formData = new FormData(form);

        const btn = document.getElementById('btnGuardarTercero');
        btn.disabled = true;
        btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Guardando...';

        fetch(url, {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(r => r.json())
        .then(data => {
            btn.disabled = false;
            btn.innerHTML = '<i class="fa-solid fa-save"></i> Guardar Tercero';

            if (data.status === 'ok') {
                Swal.fire({
                    icon: 'success',
                    title: '¡Operación Exitosa!',
                    text: data.message,
                    timer: 1500,
                    showConfirmButton: false
                }).then(() => {
                    window.location.reload();
                });
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: data.message || 'No se pudo guardar el tercero.'
                });
            }
        })
        .catch(err => {
            btn.disabled = false;
            btn.innerHTML = '<i class="fa-solid fa-save"></i> Guardar Tercero';
            Swal.fire({
                icon: 'error',
                title: 'Error de Red',
                text: 'Ocurrió un error al procesar la solicitud: ' + err.message
            });
        });
    }

    function editarTercero(cedula) {
        Swal.fire({
            title: 'Cargando información...',
            allowOutsideClick: false,
            didOpen: () => Swal.showLoading()
        });

        fetch('{{ url("api/terceros/obtener") }}/' + encodeURIComponent(cedula))
        .then(r => r.json())
        .then(data => {
            Swal.close();
            if (data.status === 'ok') {
                const t = data.tercero;
                document.getElementById('formTercero').reset();
                document.getElementById('tercero_modo').value = 'editar';
                document.getElementById('modalTerceroTitle').innerHTML = '<i class="fa-solid fa-pen-to-square"></i> Editar Tercero: ' + t.Nombre;
                
                const tipoNorm = normalizarTipoIdJS(t.tipoId);
                const natNorm = normalizarNaturalezaJS(t.naturaleza, t.tipoId);
                const regNorm = normalizarRegimenJS(t.regimen);
                const metNorm = normalizarMetodoPagoJS(t.metodoPagoDefec);

                document.getElementById('t_tipoId').value = tipoNorm;
                if (!document.getElementById('t_tipoId').value) {
                    document.getElementById('t_tipoId').value = 'CC';
                }

                document.getElementById('t_cedula').value = t.cedula;
                document.getElementById('t_cedula').readOnly = true; // No modificar llave primaria
                document.getElementById('t_dv').value = (t.dv !== null && t.dv !== undefined) ? t.dv : '';

                document.getElementById('t_naturaleza').value = natNorm;
                if (!document.getElementById('t_naturaleza').value) {
                    document.getElementById('t_naturaleza').value = 'NATURALES';
                }

                document.getElementById('t_Nombre').value = t.Nombre || '';
                document.getElementById('t_apellido').value = t.apellido || '';
                document.getElementById('t_Alias').value = t.Alias || '';
                document.getElementById('t_direccion').value = t.direccion || '';
                document.getElementById('t_barrio').value = t.barrio || '';
                document.getElementById('t_codigociudad').value = t.codigociudad || '';
                if (t.nombre_ciudad) {
                    document.getElementById('t_ciudad_nombre').value = t.nombre_ciudad + (t.nombre_departamento ? ' (' + t.nombre_departamento + ')' : '');
                } else {
                    document.getElementById('t_ciudad_nombre').value = '';
                }
                const listCiudad = document.getElementById('lista_ciudades_sugeridas');
                if (listCiudad) listCiudad.style.display = 'none';
                const listCodigo = document.getElementById('lista_codigos_sugeridos');
                if (listCodigo) listCodigo.style.display = 'none';

                document.getElementById('t_telefono').value = t.telefono || '';
                document.getElementById('t_correo').value = t.correo || '';
                
                document.getElementById('t_regimen').value = regNorm;
                if (!document.getElementById('t_regimen').value) {
                    document.getElementById('t_regimen').value = 'NO_APLICA';
                }

                if (t.responsabilidad) {
                    document.getElementById('t_responsabilidad').value = t.responsabilidad;
                }
                if (!document.getElementById('t_responsabilidad').value) {
                    document.getElementById('t_responsabilidad').value = 'R-99-PN';
                }

                document.getElementById('t_cupo').value = t.cupo || 0;
                document.getElementById('t_dtoclie').value = t.dtoclie || 0;
                
                document.getElementById('t_metodoPagoDefec').value = metNorm;
                if (!document.getElementById('t_metodoPagoDefec').value) {
                    document.getElementById('t_metodoPagoDefec').value = 'Contado';
                }

                document.getElementById('t_estadoC').value = t.estadoC !== undefined ? t.estadoC : 1;
                document.getElementById('t_notaComentario').value = t.notaComentario || '';

                // Datos nómina
                const esEmp = (t.es_empleado == 1);
                document.getElementById('t_es_empleado').checked = esEmp;
                document.getElementById('seccion_campos_nomina').style.display = esEmp ? 'block' : 'none';
                document.getElementById('t_salario_base').value = t.salario_base || 0;
                document.getElementById('t_cargo').value = t.cargo || '';
                document.getElementById('t_auxilio_transporte_aplica').value = t.auxilio_transporte_aplica !== undefined ? t.auxilio_transporte_aplica : 1;
                document.getElementById('t_nit_eps').value = t.nit_eps || '';
                document.getElementById('t_nombre_eps').value = t.nombre_eps || '';
                document.getElementById('t_nit_fondo').value = t.nit_fondo || '';
                document.getElementById('t_nombre_fondo').value = t.nombre_fondo || '';
                document.getElementById('t_nit_arl').value = t.nit_arl || '';
                document.getElementById('t_nombre_arl').value = t.nombre_arl || '';
                document.getElementById('t_tarifa_riesgos').value = t.tarifa_riesgos || '0.00522';
                document.getElementById('t_nit_caja').value = t.nit_caja || '';
                document.getElementById('t_nombre_caja').value = t.nombre_caja || '';
                if (document.getElementById('t_tipo_contrato')) document.getElementById('t_tipo_contrato').value = t.tipo_contrato || 'TERMINO_INDEFINIDO';
                if (document.getElementById('t_tipo_trabajador')) document.getElementById('t_tipo_trabajador').value = t.tipo_trabajador || 'DEPENDIENTE';
                if (document.getElementById('t_subtipo_trabajador')) document.getElementById('t_subtipo_trabajador').value = t.subtipo_trabajador || 'NO_APLICA';
                if (document.getElementById('t_periodo_nomina')) document.getElementById('t_periodo_nomina').value = t.periodo_nomina || 'MENSUAL';
                if (document.getElementById('t_metodo_pago_nomina')) document.getElementById('t_metodo_pago_nomina').value = t.metodo_pago_nomina || '10';
                if (document.getElementById('t_banco_nomina')) document.getElementById('t_banco_nomina').value = t.banco_nomina || '7';
                if (document.getElementById('t_tipo_cuenta_nomina')) document.getElementById('t_tipo_cuenta_nomina').value = t.tipo_cuenta_nomina || 'AHORROS';
                if (document.getElementById('t_numero_cuenta_nomina')) document.getElementById('t_numero_cuenta_nomina').value = t.numero_cuenta_nomina || '';
                if (document.getElementById('t_fecha_ingreso_emp')) document.getElementById('t_fecha_ingreso_emp').value = t.fecha_ingreso_emp || '';
                if (document.getElementById('t_salario_integral')) document.getElementById('t_salario_integral').checked = (t.salario_integral == 1 || t.salario_integral == '1');
                if (document.getElementById('t_alto_riesgo_pension')) document.getElementById('t_alto_riesgo_pension').checked = (t.alto_riesgo_pension == 1 || t.alto_riesgo_pension == '1');

                manejarCambioNaturaleza();

                // Open modal on first tab
                document.querySelectorAll('.modal-tab-btn').forEach((b, i) => b.classList.toggle('active', i === 0));
                document.querySelectorAll('.tab-pane').forEach((p, i) => p.classList.toggle('active', i === 0));

                document.getElementById('modalTercero').style.display = 'flex';
            } else {
                Swal.fire('Error', data.message, 'error');
            }
        })
        .catch(err => {
            Swal.fire('Error', 'No se pudo cargar la información: ' + err.message, 'error');
        });
    }

    function verFichaTercero(cedula) {
        document.getElementById('modalFichaTercero').style.display = 'flex';
        document.getElementById('fichaContenido').innerHTML = '<div style="text-align:center; padding:30px;"><i class="fa-solid fa-spinner fa-spin fa-2x"></i> Cargando...</div>';

        fetch('{{ url("api/terceros/obtener") }}/' + encodeURIComponent(cedula))
        .then(r => r.json())
        .then(data => {
            if (data.status === 'ok') {
                const t = data.tercero;
                let html = `
                    <div style="display:flex; align-items:center; gap:15px; margin-bottom:20px; padding-bottom:15px; border-bottom:1px solid #e2e8f0;">
                        <div style="width:55px; height:55px; border-radius:12px; background:#eff6ff; color:#2563eb; display:flex; align-items:center; justify-content:center; font-size:24px;">
                            <i class="fa-solid fa-id-card"></i>
                        </div>
                        <div>
                            <h2 style="margin:0; font-size:18px; font-weight:800; color:#0f172a;">${t.Nombre} ${t.apellido || ''}</h2>
                            <p style="margin:2px 0 0; font-size:12px; color:#64748b;">${t.Alias || 'Sin alias'} &bull; NIT/Cédula: <strong>${t.cedula}${t.dv ? '-' + t.dv : ''}</strong></p>
                        </div>
                    </div>

                    <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; font-size:12px; margin-bottom:15px;">
                        <div style="background:#f8fafc; padding:10px 14px; border-radius:8px; border:1px solid #e2e8f0;">
                            <span style="color:#64748b; display:block; font-size:11px;">Tipo Documento:</span>
                            <strong>${normalizarTipoIdJS(t.tipoId)}</strong>
                        </div>
                        <div style="background:#f8fafc; padding:10px 14px; border-radius:8px; border:1px solid #e2e8f0;">
                            <span style="color:#64748b; display:block; font-size:11px;">Naturaleza:</span>
                            <strong>${normalizarNaturalezaJS(t.naturaleza, t.tipoId) === 'JURIDICAS' ? 'Persona Jurídica (JURIDICAS)' : 'Persona Natural (NATURALES)'}</strong>
                        </div>
                        <div style="background:#f8fafc; padding:10px 14px; border-radius:8px; border:1px solid #e2e8f0;">
                            <span style="color:#64748b; display:block; font-size:11px;">Teléfono:</span>
                            <strong>${t.telefono || 'No registrado'}</strong>
                        </div>
                        <div style="background:#f8fafc; padding:10px 14px; border-radius:8px; border:1px solid #e2e8f0;">
                            <span style="color:#64748b; display:block; font-size:11px;">Correo:</span>
                            <strong>${t.correo || 'No registrado'}</strong>
                        </div>
                        <div style="background:#f8fafc; padding:10px 14px; border-radius:8px; border:1px solid #e2e8f0;">
                            <span style="color:#64748b; display:block; font-size:11px;">Dirección:</span>
                            <strong>${t.direccion || 'No registrada'}</strong>
                        </div>
                        <div style="background:#f8fafc; padding:10px 14px; border-radius:8px; border:1px solid #e2e8f0;">
                            <span style="color:#64748b; display:block; font-size:11px;">Ciudad / Municipio:</span>
                            <strong>${t.nombre_ciudad ? t.nombre_ciudad + (t.nombre_departamento ? ' (' + t.nombre_departamento + ')' : '') + ' &bull; Cód. ' + (t.codigociudad || '') : (t.codigociudad || 'No registrada')}</strong>
                        </div>
                        <div style="background:#f8fafc; padding:10px 14px; border-radius:8px; border:1px solid #e2e8f0;">
                            <span style="color:#64748b; display:block; font-size:11px;">Régimen:</span>
                            <strong>${t.regimen || 'NO_APLICA'}</strong>
                        </div>
                        <div style="background:#f8fafc; padding:10px 14px; border-radius:8px; border:1px solid #e2e8f0;">
                            <span style="color:#64748b; display:block; font-size:11px;">Responsabilidad DIAN:</span>
                            <strong>${t.responsabilidad || 'R-99-PN'}</strong>
                        </div>
                    </div>
                `;

                if (t.es_empleado == 1) {
                    html += `
                        <div style="background:#f0fdf4; border:1px solid #bbf7d0; border-radius:10px; padding:12px 16px; margin-top:10px;">
                            <h4 style="margin:0 0 8px; font-size:13px; color:#166534; font-weight:800;"><i class="fa-solid fa-user-tie"></i> Información Laboral (Nómina)</h4>
                            <div style="display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:12px;">
                                <div><span style="color:#166534;">Cargo:</span> <strong>${t.cargo || 'No asignado'}</strong></div>
                                <div><span style="color:#166534;">Salario Base:</span> <strong>$ ${parseFloat(t.salario_base || 0).toLocaleString()}</strong></div>
                                <div><span style="color:#166534;">EPS:</span> ${t.nombre_eps || 'No asignada'}</div>
                                <div><span style="color:#166534;">Pensión:</span> ${t.nombre_fondo || 'No asignado'}</div>
                                <div><span style="color:#166534;">ARL:</span> ${t.nombre_arl || 'No asignada'}</div>
                                <div><span style="color:#166534;">Caja:</span> ${t.nombre_caja || 'No asignada'}</div>
                            </div>
                        </div>
                    `;
                }

                document.getElementById('fichaContenido').innerHTML = html;
            } else {
                document.getElementById('fichaContenido').innerHTML = `<div class="alert alert-danger">${data.message}</div>`;
            }
        });
    }

    function cambiarEstadoTercero(cedula, estadoActual) {
        const accion = estadoActual == 1 ? 'desactivar' : 'activar';
        Swal.fire({
            title: `¿Deseas ${accion} a este tercero?`,
            text: `Identificación: ${cedula}`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: estadoActual == 1 ? '#ef4444' : '#10b981',
            cancelButtonColor: '#64748b',
            confirmButtonText: `Sí, ${accion}`,
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                fetch('{{ url("api/terceros/cambiar-estado") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: JSON.stringify({ cedula: cedula })
                })
                .then(r => r.json())
                .then(data => {
                    if (data.status === 'ok') {
                        Swal.fire({
                            icon: 'success',
                            title: data.message,
                            timer: 1200,
                            showConfirmButton: false
                        }).then(() => window.location.reload());
                    } else {
                        Swal.fire('Error', data.message, 'error');
                    }
                });
            }
        });
    }

    function cambiarRegistrosPorPagina(val) {
        const url = new URL(window.location.href);
        url.searchParams.set('per_page', val);
        url.searchParams.set('page', '1');
        window.location.href = url.toString();
    }
</script>
@endsection