{{-- New-Unity ERP | finance/price-lists/prices.blade.php | v3.37 | 05/08/2026 --}}
{{-- v3.37 — FIX 1: warnings de margen alto (>9999%) reemplazados por modal Bootstrap 5 en tiempo real.
             Checks en onUtilityChange y onFinalPriceChange antes de registrar el cambio.
             Cancelar revierte inputs al valor previo; Confirmar registra el cambio normalmente.
             Post-save alert() reemplazado por showNotificacion() (modal no bloqueante). --}}
{{-- v3.36 — FIX 1: warnings de margen en executeSingleSave/executeSave (respuesta JSON de bulk()). --}}
{{--         FIX 2: columna "Parte #" muestra product_number en lugar de id interno. --}}
{{--         FIX 3: input búsqueda — type="search", autocomplete="off", sin name, placeholder en español. --}}
{{-- v3.35 — FIX 4: loadCategories() dispara applyFilter() automáticamente al seleccionar grupo. --}}
{{-- v3.34 — Bug 3: footerText contaba literal ''' en lugar del número — usar puro JS sin Blade embedding. --}}
{{-- v3.33 — Bug 1: ruta tiers corregida (price-lists.tiers.index) + ícono bi-layers. --}}
{{-- v3.32 — Fix: header modal no duplicado. saveSingle MAY usa GEN Price cuando no hay tier. --}}
{{-- v3.31 — Modal confirmación MAY: muestra Tier, Disc. %, New Price, Margin. --}}
{{-- v3.30 — Fix MAY: sin tier → Disc=0, Final Price=GEN Price. --}}
{{-- v3.30 — Fix: Disc. % MAY alineado izquierda con padding-right. --}}
{{-- v3.29 — Modal Edit List Config más ancho (modal-lg). --}}
{{-- v3.28 — Header morado restaurado con listas y Edit Config. Filtros en card body. --}}
{{-- v3.27 — Edit List Config en modal inline. Listas+filtros en un card. Cancel Filter. --}}
{{-- v3.26 — Cancel en modal autorización revierte valores originales de la fila. --}}
{{-- v3.25 — Fix: modal confirmación muestra New Price desde data.final_price. --}}
{{-- v3.24 — Fix: Final Price texto se actualiza dinámicamente al cambiar Utility %. --}}
{{-- v3.23 — Botón Cancel por fila: restaura Utility % y Final Price al valor original. --}}
{{-- v3.22 — Spinner eliminado solo en Final Price. Utility % mantiene flechas. --}}
{{-- v3.21 — Eliminadas flechas spinner de inputs numéricos. Padding limpio. --}}
{{-- v3.20 — Header Final Price $ centrado. --}}
{{-- v3.19 — Fix: padding-right en Utility % y Final Price para separar decimales de flechas spinner. --}}
{{-- v3.18 — Final Price input: más espacio al final y ancho mínimo. --}}
{{-- v3.17 — Final Price input: alineado izquierda con espacio al final. --}}
{{-- v3.16 — Final Price: texto negritas por default, input aparece al desbloquear. Candado se cierra al guardar. --}}
{{-- v3.15 — Validaciones: precio<costo bloqueado, precio<protection o utility<target requiere autorización. --}}
{{-- v3.14 — Final Price editable con candado. Bidireccional con Utility %. --}}
{{-- v3.13 — Fix: Utility % alineado izquierda con padding extra. --}}
{{-- v3.12 — Fix: modal confirmación muestra precio anterior real desde data-original-price. --}}
{{-- v3.11 — Modal de confirmación antes de guardar (individual y masivo). Muestra precio anterior vs nuevo. --}}
{{-- v3.10 — Fix: Save por fila toma valores actuales aunque no haya cambios registrados. --}}
{{-- v3.9 — Fix: Final Price siempre recalculado desde basePrice × (1+utility%). --}}
{{-- v3.8 — Utility %: campo ancho completo sin símbolo %. --}}
{{-- v3.7 — Fix: P.P label, Utility % valor visible y alineado, Final Price formato moneda. --}}
{{-- v3.6 — Tabla: Cost $|Protection Price $|Base Price $|Utility %|Final Price $|Margin|Status|Save --}}
{{--         Utility % editable por producto (default: TargetMargin de lista). Solo hacia arriba. --}}
{{--         Protection y Base: solo lectura. Final Price: calculado. Save por fila + Save Changes. --}}
{{-- v3.5 — Nueva tabla: Base Cost $|Base %|Final Price $|Margin|Save. Bidireccional. --}}
{{-- v3.4 — Eliminado texto % over base. --}}
{{-- v3.3 — Fix: Protection/Base solo lectura. Cálculo correcto. --}}
{{-- v3.2 — Nueva arquitectura de precios. --}}
{{-- v3.1 — Fix: GEN Price se actualiza en tiempo real al guardar. --}}
{{-- v3.0 — Tabla inline editable. GEN Price como columna diferenciadora. --}}
@extends('layouts.vertical')

@section('content')
<div class="container-fluid px-3 py-2">

    {{-- Header --}}
    <div class="d-flex justify-content-between align-items-start mb-3">
        <div>
            <h1 class="h4 mb-0">
                <i class="fad fa-tags me-2 text-primary"></i>
                <span class="badge bg-warning text-dark me-1">{{ $priceList->code }}</span>
                {{ $priceList->name }}
            </h1>
            <nav><ol class="breadcrumb mb-0 small">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Unity ERP</a></li>
                <li class="breadcrumb-item"><a href="{{ route('finance.price-lists.index') }}">{{ __('finance.price-lists') }}</a></li>
                <li class="breadcrumb-item active">{{ $priceList->name }}</li>
            </ol></nav>
        </div>
        <div class="d-flex gap-2">
            @if($priceList->pricing_model === 'volume_discount')
            <a href="{{ route('finance.price-lists.tiers.index', $priceList) }}"
               class="btn btn-outline-info btn-sm">
                <i class="bi bi-layers me-1"></i>{{ __('finance.volume-tiers') }}
            </a>
            @endif
            <a href="{{ route('finance.price-lists.index') }}" class="btn btn-secondary btn-sm">
                <i class="fas fa-arrow-left me-1"></i>{{ __('finance.back') }}
            </a>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show py-2 small mb-3">
            {{ session('success') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show py-2 small mb-3">
            {{ session('error') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    {{-- Switch de listas + Edit Config + Filtros --}}
    <div class="card mb-3">
        <div class="card-header py-2" style="background:#3d0f5e; color:#fff;">
            <div class="d-flex gap-2 flex-wrap align-items-center">
                @foreach($lists as $list)
                <a href="{{ route('finance.price-lists.prices.index', $list) }}"
                   class="btn btn-sm {{ $list->id === $priceList->id ? 'btn-warning text-dark' : 'btn-outline-light' }}">
                    {{ $list->code }} — {{ $list->name }}
                </a>
                @endforeach
                <button type="button" class="btn btn-sm btn-outline-light ms-auto"
                        data-bs-toggle="modal" data-bs-target="#modalEditList">
                    <i class="fas fa-cog me-1"></i>{{ __('finance.edit-list-config') }}
                </button>
            </div>
        </div>
        <div class="card-body py-2">

            {{-- Fila 1: Listas + Edit Config (eliminada — movida al header) --}}
            <div class="d-flex gap-2 mb-2 flex-wrap align-items-center d-none">
            </div>

            {{-- Filtros --}}
            <div class="row g-2 align-items-center">
                <div class="col-md-3">
                    <select id="filterGroup" class="form-select form-select-sm" onchange="loadCategories()">
                        <option value="">{{ __('finance.all-groups') }}</option>
                        @foreach($groups as $g)
                            <option value="{{ $g->id }}" @selected(request('group_id') == $g->id)>{{ $g->es_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <select id="filterCategory" class="form-select form-select-sm" onchange="loadBrands()">
                        <option value="">{{ __('finance.all-categories') }}</option>
                        @foreach($categories as $c)
                            <option value="{{ $c->id }}" @selected(request('category_id') == $c->id)>{{ $c->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <select id="filterBrand" class="form-select form-select-sm">
                        <option value="">{{ __('finance.all-brands') }}</option>
                        @foreach($brands as $b)
                            <option value="{{ $b->id }}" @selected(request('brand_id') == $b->id)>{{ $b->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <input type="search" id="filterSearch" class="form-control form-control-sm"
                           autocomplete="off" placeholder="Buscar por nombre o SKU..."
                           value="{{ request('search') }}">
                </div>
                <div class="col-auto d-flex gap-1">
                    <button type="button" class="btn btn-success btn-sm" onclick="applyFilter()">
                        <i class="fas fa-filter me-1"></i>{{ __('finance.filter') }}
                    </button>
                    <button type="button" class="btn btn-outline-secondary btn-sm" onclick="clearFilter()">
                        <i class="fas fa-times me-1"></i>{{ __('finance.cancel-filter') }}
                    </button>
                </div>
                <div class="col-auto ms-auto">
                    <button type="button" class="btn btn-primary btn-sm" id="btnSaveAll" onclick="saveAll()" disabled>
                        <i class="fas fa-save me-1"></i>{{ __('finance.save-changes') }}
                        <span class="badge bg-light text-dark ms-1" id="changesCount">0</span>
                    </button>
                </div>
            </div>

        </div>
    </div>

    {{-- Tabla --}}
    <div class="card">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0" style="font-size:0.8rem;">
                    <thead>
                        <tr style="border-bottom:2px solid #dee2e6; background:#f8f9fa;">
                            <th class="ps-3" style="width:60px;">{{ __('finance.part-num') }}</th>
                            <th>{{ __('finance.product') }}</th>
                            <th style="width:50px;" class="text-center">{{ __('finance.type') }}</th>
                            @if($priceList->pricing_model !== 'volume_discount')
                                <th style="width:100px;" class="text-end">{{ __('finance.cost-dollar') }}</th>
                                <th style="width:80px;" class="text-end">{{ __('finance.pp-dollar') }}</th>
                                <th style="width:115px;" class="text-end">{{ __('finance.base-price-dollar') }}</th>
                                <th style="width:90px;" class="text-center">{{ __('finance.utility-pct') }}</th>
                                <th style="width:115px;" class="text-center">{{ __('finance.final-price-dollar') }}</th>
                                <th style="width:70px;" class="text-center">{{ __('finance.margin') }}</th>
                            @else
                                <th style="width:100px;" class="text-end">{{ __('finance.cost-dollar') }}</th>
                                <th style="width:110px;" class="text-end">{{ __('finance.gen-price') }}</th>
                                <th style="width:190px;" class="text-center">{{ __('finance.tier-max-disc') }}</th>
                                <th style="width:110px;" class="text-center">{{ __('finance.disc-pct-col') }}</th>
                                <th style="width:110px;" class="text-end">{{ __('finance.final-price') }}</th>
                                <th style="width:70px;" class="text-center">{{ __('finance.margin') }}</th>
                            @endif
                            <th style="width:60px;" class="text-center">{{ __('finance.status') }}</th>
                            <th style="width:55px;" class="text-center">{{ __('finance.save') }}</th>
                        </tr>
                    </thead>
                    <tbody id="priceTableBody">
                        <tr>
                            <td colspan="12" class="text-center text-muted py-5">
                                <i class="fad fa-filter fa-2x d-block mb-2 opacity-25"></i>
                                {!! __('finance.select-group-filter') !!}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer py-2 d-flex justify-content-between align-items-center small text-muted"
             id="tableFooter" style="display:none!important;">
            <span id="footerText"></span>
            <button type="button" class="btn btn-primary btn-sm" onclick="saveAll()" id="btnSaveAll2" disabled>
                <i class="fas fa-save me-1"></i>{{ __('finance.save-changes') }}
            </button>
        </div>
    </div>

</div>

{{-- Modal: Edit List Config --}}
<div class="modal fade" id="modalEditList" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header py-2" style="background:#3d0f5e; color:#fff;">
                <h5 class="modal-title">
                    <i class="fas fa-cog me-2"></i>{{ __('finance.edit-list-config') }} —
                    <span class="badge bg-warning text-dark ms-1">{{ $priceList->code }}</span>
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="formEditList" action="{{ route('finance.price-lists.update', $priceList) }}" method="POST">
                @csrf @method('PUT')
                <div class="modal-body">

                    <div class="mb-3">
                        <label class="form-label fw-semibold small">{{ __('finance.name-req') }}</label>
                        <input type="text" name="name" class="form-control form-control-sm"
                               value="{{ $priceList->name }}" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold small">{{ __('finance.description') }}</label>
                        <textarea name="description" class="form-control form-control-sm" rows="2">{{ $priceList->description }}</textarea>
                    </div>

                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold small">{{ __('finance.currency-req') }}</label>
                            <select name="currency" class="form-select form-select-sm">
                                <option value="MXN" @selected($priceList->currency === 'MXN')>MXN</option>
                                <option value="USD" @selected($priceList->currency === 'USD')>USD</option>
                                <option value="EUR" @selected($priceList->currency === 'EUR')>EUR</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold small">{{ __('finance.available-quotes-invoices') }}</label>
                            <div class="form-check form-switch mt-1">
                                <input class="form-check-input" type="checkbox" name="available_for_sale"
                                       value="1" @checked($priceList->available_for_sale)>
                                <label class="form-check-label small">{{ __('finance.enabled') }}</label>
                            </div>
                        </div>
                    </div>

                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold small">
                                {{ __('finance.target-margin-pct') }}
                                <i class="fas fa-info-circle text-muted ms-1"
                                   title="{{ __('finance.base-price-protection-tip') }}"></i>
                            </label>
                            <div class="input-group input-group-sm">
                                <input type="number" name="target_margin_percent" id="modalTargetMargin"
                                       class="form-control" min="0" step="0.01"
                                       value="{{ $priceList->target_margin_percent ?? 0 }}"
                                       onchange="updateModalPreview()">
                                <span class="input-group-text bg-light">%</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold small">
                                {{ __('finance.min-protection-pct') }}
                                <i class="fas fa-info-circle text-danger ms-1"
                                   title="{{ __('finance.min-protection-auth-tip') }}"></i>
                            </label>
                            <div class="input-group input-group-sm">
                                <input type="number" name="min_protection_percent" id="modalMinProtection"
                                       class="form-control border-danger" min="0" step="0.01"
                                       value="{{ $priceList->min_protection_percent ?? 0 }}"
                                       onchange="updateModalPreview()">
                                <span class="input-group-text bg-danger text-white">%</span>
                            </div>
                        </div>
                    </div>

                    {{-- Preview --}}
                    <div class="alert alert-light border py-2 small mb-0">
                        <div class="fw-semibold mb-1 text-muted">
                            <i class="fas fa-calculator me-1"></i>{{ __('finance.price-preview-example') }}
                        </div>
                        <div class="d-flex gap-2 flex-wrap align-items-center" style="font-size:0.8rem;">
                            <span class="text-muted">{{ __('finance.cost-word') }} <strong>$100.00</strong></span>
                            <i class="fas fa-times text-muted"></i>
                            <span>{{ __('finance.min-prot') }} <strong class="text-danger" id="modalPreviewProtPct">0%</strong></span>
                            <i class="fas fa-equals text-muted"></i>
                            <span>= <strong class="text-danger" id="modalPreviewProtPrice">$0.00</strong></span>
                            <i class="fas fa-times text-muted ms-2"></i>
                            <span>{{ __('finance.target') }} <strong class="text-primary" id="modalPreviewMargin">0%</strong></span>
                            <i class="fas fa-equals text-muted"></i>
                            <span class="fw-bold" style="color:#198754;">{{ __('finance.commercial-colon') }} <strong id="modalPreviewBase">$0.00</strong></span>
                        </div>
                    </div>

                </div>
                <div class="modal-footer py-2">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i>{{ __('finance.cancel') }}
                    </button>
                    <button type="submit" class="btn btn-primary btn-sm">
                        <i class="fas fa-save me-1"></i>{{ __('finance.save-changes') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Modal: Confirmación de cambio --}}
<div class="modal fade" id="modalConfirmSave" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content border-primary">
            <div class="modal-header py-2" style="background:#3d0f5e; color:#fff;">
                <h5 class="modal-title">
                    <i class="fas fa-save me-2"></i>{{ __('finance.confirm-price-change') }}
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="small mb-3">{{ __('finance.about-to-update') }}</p>
                <table class="table table-sm table-bordered mb-0" style="font-size:0.82rem;">
                    <thead id="confirmHeader"></thead>
                    <tbody id="confirmList"></tbody>
                </table>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>{{ __('finance.cancel') }}
                </button>
                <button type="button" class="btn btn-primary btn-sm" id="btnConfirmSave">
                    <i class="fas fa-save me-1"></i>{{ __('finance.confirm-save') }}
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal: No permitido — precio menor al costo --}}
<div class="modal fade" id="modalBlocked" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content border-danger">
            <div class="modal-header py-2 bg-danger text-white">
                <h5 class="modal-title">
                    <i class="fas fa-ban me-2"></i>{{ __('finance.price-not-allowed') }}
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="mb-2" id="blockedMessage"></p>
                <div class="alert alert-danger py-2 small mb-0">
                    <i class="fas fa-times-circle me-1"></i>
                    {{ __('finance.price-cannot-save') }}
                </div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>{{ __('finance.ok-fix-price') }}
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal: Autorización requerida --}}
<div class="modal fade" id="modalAuthRequired" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content border-danger">
            <div class="modal-header py-2 bg-danger text-white">
                <h5 class="modal-title">
                    <i class="fas fa-shield-alt me-2"></i>{{ __('finance.authorization-required') }}
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="small mb-2">{{ __('finance.below-min-protection-list') }}</p>
                <ul id="authList" class="small mb-0"></ul>
                <div class="alert alert-warning py-2 small mt-3 mb-0">
                    <i class="fas fa-exclamation-triangle me-1"></i>
                    {{ __('finance.supervisor-authorize') }}
                </div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal"
                        onclick="cancelFromAuthModal()">
                    <i class="fas fa-times me-1"></i>{{ __('finance.cancel-fix-prices') }}
                </button>
                <button type="button" class="btn btn-danger btn-sm" id="btnSaveAnyway">
                    <i class="fas fa-check me-1"></i>{{ __('finance.save-with-auth') }}
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal: Advertencia margen de utilidad muy alto (>9999%) --}}
<div class="modal fade" id="modalWarningMargen" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-warning">
            <div class="modal-header py-2 bg-warning text-dark">
                <h5 class="modal-title">
                    <i class="bi bi-exclamation-triangle-fill me-2"></i>Margen de utilidad alto
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" onclick="cancelHighMargin()"></button>
            </div>
            <div class="modal-body">
                <p class="mb-1">El producto <strong id="warnMargenNombre"></strong> tiene un margen de <strong id="warnMargenPct" class="text-warning fs-5"></strong>.</p>
                <p class="mb-0 text-muted small">Esto puede indicar que el costo base es muy bajo o que el precio es inusualmente alto. ¿Deseas continuar guardando este precio?</p>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-secondary btn-sm" onclick="cancelHighMargin()">
                    <i class="bi bi-x me-1"></i>Cancelar
                </button>
                <button type="button" class="btn btn-warning btn-sm" onclick="confirmHighMargin()">
                    <i class="bi bi-check-lg me-1"></i>Guardar de todas formas
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal: Notificación post-guardado (errores y warnings del servidor) --}}
<div class="modal fade" id="modalNotificacion" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header py-2" id="modalNotificacionHeader">
                <h6 class="modal-title mb-0" id="modalNotificacionTitle"></h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body small" id="modalNotificacionBody"></div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<style>
/* Solo quitar spinner del Final Price, no del Utility % */
.no-spinner::-webkit-inner-spin-button,
.no-spinner::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.no-spinner { -moz-appearance: textfield; }
</style>

<script>
var AppUrl        = '{{ url('') }}';
var ListId        = {{ $priceList->id }};
var ListCode      = '{{ $priceList->code }}';
var IsMay         = {{ $priceList->pricing_model === 'volume_discount' ? 'true' : 'false' }};
var TargetMargin  = {{ (float)($priceList->target_margin_percent ?? 0) }};
var MinProtection = {{ (float)($priceList->min_protection_percent ?? 0) }};
var changes           = {};
var _highMarginPending = null;

@php
$tiersForJs = $tiers->map(function($t) {
    return [
        'id'       => $t->id,
        'min_qty'  => $t->min_qty,
        'max_qty'  => $t->max_qty,
        'max_disc' => $t->max_discount_perc,
        'label'    => $t->rangeLabel(),
    ];
})->values()->toJson();
@endphp
var Tiers = {!! $tiersForJs ?? '[]' !!};

// ── Filtros cascada ───────────────────────────────────────────────────
function loadCategories() {
    var gId = document.getElementById('filterGroup').value;
    document.getElementById('filterCategory').innerHTML = '<option value="">All Categories</option>';
    document.getElementById('filterBrand').innerHTML    = '<option value="">All Brands</option>';
    if (!gId) { clearFilter(); return; }
    $.ajax({ url: AppUrl + '/invoices/getCategories', data: { idGroup: gId }, success: function(d) {
        $.each(d.categories, function(i, c) { $('#filterCategory').append('<option value="'+c.id+'">'+c.name+'</option>'); });
    }});
    applyFilter();
}
function loadBrands() {
    var cId = document.getElementById('filterCategory').value;
    document.getElementById('filterBrand').innerHTML = '<option value="">All Brands</option>';
    if (!cId) return;
    $.ajax({ url: AppUrl + '/invoices/getBrands', data: { categoryId: cId }, success: function(d) {
        $.each(d.brands, function(i, b) { $('#filterBrand').append('<option value="'+b.id+'">'+b.name+'</option>'); });
    }});
}
function applyFilter() {
    var params = new URLSearchParams({
        group_id:    document.getElementById('filterGroup').value,
        category_id: document.getElementById('filterCategory').value,
        brand_id:    document.getElementById('filterBrand').value,
        search:      document.getElementById('filterSearch').value,
    });
    document.getElementById('priceTableBody').innerHTML =
        '<tr><td colspan="12" class="text-center py-4"><i class="fas fa-spinner fa-spin me-2"></i>{{ __('finance.loading') }}</td></tr>';
    fetch(AppUrl + '/finance/price-lists/' + ListId + '/prices/load?' + params.toString())
    .then(function(r) { if (!r.ok) throw new Error('HTTP ' + r.status); return r.json(); })
    .then(function(data) { renderTable(data); })
    .catch(function(err) {
        document.getElementById('priceTableBody').innerHTML =
            '<tr><td colspan="12" class="text-center text-danger py-4"><i class="fas fa-exclamation-triangle me-2"></i>{{ __('finance.js-error', ['msg' => "' + err.message + '"]) }}</td></tr>';
    });
}
function clearFilter() {
    document.getElementById('filterGroup').value = '';
    document.getElementById('filterCategory').innerHTML = '<option value="">All Categories</option>';
    document.getElementById('filterBrand').innerHTML    = '<option value="">All Brands</option>';
    document.getElementById('filterSearch').value = '';
    document.getElementById('priceTableBody').innerHTML =
        '<tr><td colspan="12" class="text-center text-muted py-5"><i class="fad fa-filter fa-2x d-block mb-2 opacity-25"></i>{!! __('finance.select-group-filter') !!}</td></tr>';
    document.getElementById('tableFooter').style.display = 'none';
    changes = {}; updateSaveBtn();
}

// ── Render ────────────────────────────────────────────────────────────
function renderTable(products) {
    if (!products.length) {
        document.getElementById('priceTableBody').innerHTML =
            '<tr><td colspan="12" class="text-center text-muted py-5">{{ __('finance.js-no-products') }}</td></tr>';
        document.getElementById('tableFooter').style.display = 'none';
        return;
    }
    var rows = '';
    products.forEach(function(p) {
        var typeColor = p.material_type === 'TR' ? 'info' : (p.material_type === 'RM' ? 'warning' : 'secondary');
        var hasCost   = p.active_cost > 0;
        var hasPrice  = p.price_id > 0;
        var cost      = parseFloat(p.active_cost) || 0;

        var costCell = '<td class="text-end small ' + (hasCost ? 'text-muted' : 'text-danger') + '">'
            + (hasCost ? '$' + cost.toFixed(2) : '<span class="badge bg-danger-subtle text-danger">No cost</span>')
            + '</td>';

        var priceCols = IsMay ? buildMayRow(p, hasCost, hasPrice) : buildFixedRow(p, hasCost, hasPrice);

        var statusCell = hasPrice
            ? '<span class="badge bg-success small">{{ __('finance.active-status') }}</span>'
            : '<span class="badge bg-light text-muted small border">{{ __('finance.no-price') }}</span>';

        var saveBtn = '<div class="d-flex gap-1 justify-content-center">'
            + '<button type="button" class="btn btn-sm btn-outline-primary py-0 px-2"'
            + ' onclick="saveSingle(' + p.id + ')" title="{{ __('finance.save-this-product') }}">'
            + '<i class="fas fa-save"></i></button>'
            + '<button type="button" class="btn btn-sm btn-outline-secondary py-0 px-2"'
            + ' onclick="cancelSingle(' + p.id + ')" title="{{ __('finance.cancel-changes') }}">'
            + '<i class="fas fa-times"></i></button>'
            + '</div>';

        rows += '<tr id="row_' + p.id + '"'
            + ' data-product-id="' + p.id + '"'
            + ' data-price-id="'   + (p.price_id || 0) + '"'
            + ' data-cost="'       + cost + '"'
            + ' data-gen-price="'  + (p.gen_price || 0) + '"'
            + ' data-original-price="' + (p.final_price || 0) + '"'
            + ' data-original-utility="' + (p.base_margin_percent || TargetMargin) + '">'
            + '<td class="ps-3 text-muted small fw-semibold">' + (p.product_number || p.id) + '</td>'
            + '<td><span class="fw-semibold">' + p.product_name + '</span>'
            + '<br><small class="text-muted">SKU: ' + (p.sku || '—') + '</small></td>'
            + '<td class="text-center"><span class="badge bg-' + typeColor + ' small">' + p.material_type + '</span></td>'
            + costCell
            + priceCols
            + '<td class="text-center">' + statusCell + '</td>'
            + '<td class="text-center">' + saveBtn + '</td>'
            + '</tr>';
    });
    document.getElementById('priceTableBody').innerHTML = rows;
    document.getElementById('tableFooter').style.removeProperty('display');
    document.getElementById('footerText').textContent = products.length + ' productos cargados';
}

// ── Columnas fijas: Cost|Protection Price|Base Price|Utility %|Final Price|Margin ──
function buildFixedRow(p, hasCost, hasPrice) {
    var cost         = parseFloat(p.active_cost) || 0;
    var basePriceDB  = parseFloat(p.base_price) || 0;
    var finalPriceDB = parseFloat(p.final_price) || 0;
    var utilityDB    = parseFloat(p.base_margin_percent) || 0;

    // Calcular Protection Price = cost × (1 + MinProtection%)
    var protectionPrice = cost > 0 ? cost * (1 + MinProtection / 100) : 0;

    // Base Price = Protection Price (guardado en base_price)
    var basePrice = hasPrice && basePriceDB > 0 ? basePriceDB : protectionPrice;

    // Utility % — del producto si ya tiene precio, sino del target margin de la lista
    var utilityPct = hasPrice && utilityDB > 0 ? utilityDB : TargetMargin;

    // Final Price — SIEMPRE recalcular desde basePrice × (1 + utilityPct%)
    // El valor guardado en BD puede estar desactualizado
    var finalPrice = basePrice > 0 ? basePrice * (1 + utilityPct / 100) : 0;

    // Margin = (Final - Cost) / Cost × 100
    var margin = cost > 0 && finalPrice > 0 ? ((finalPrice - cost) / cost * 100) : 0;

    // Solo lectura: Protection Price
    var protCell = protectionPrice > 0
        ? '<span class="text-danger fw-semibold">$' + protectionPrice.toFixed(2) + '</span>'
        : '<span class="text-muted">—</span>';

    // Solo lectura: Base Price
    var baseCell = basePrice > 0
        ? '<span class="text-primary fw-semibold">$' + basePrice.toFixed(2) + '</span>'
        : '<span class="text-muted">—</span>';

    // Editable: Utility %
    var utilityInput = '<input type="number" class="form-control form-control-sm fw-semibold text-primary" id="utility_' + p.id + '"'
        + ' value="' + utilityPct.toFixed(2) + '" min="0" step="0.01" style="padding-right:8px;"'
        + ' onchange="onUtilityChange(' + p.id + ', this)">';

    // Final Price — texto en negritas por default, input oculto hasta desbloquear
    var finalFormatted = finalPrice > 0 ? finalPrice.toFixed(2) : '0.00';
    var finalDisplay   = finalPrice > 0 ? '$' + finalPrice.toFixed(2) : '—';
    var finalCell = '<div class="d-flex align-items-center gap-1 justify-content-end">'
        + '<span class="fw-bold" id="finalPriceText_' + p.id + '">' + finalDisplay + '</span>'
        + '<input type="number" class="form-control form-control-sm fw-bold d-none no-spinner" id="finalPrice_' + p.id + '"'
        + ' value="' + finalFormatted + '" min="0" step="0.01" style="padding-right:8px; min-width:90px; -moz-appearance:textfield;" onwheel="this.blur()"'
        + ' onchange="onFinalPriceChange(' + p.id + ', this)">'
        + '<button class="btn btn-sm btn-outline-secondary px-1 py-0" type="button" id="lockBtn_' + p.id + '"'
        + ' onclick="toggleFinalLock(' + p.id + ')" title="{{ __('finance.click-edit-final') }}">'
        + '<i class="fas fa-lock" id="lockIcon_' + p.id + '"></i></button>'
        + '</div>';

    // Semáforo
    var semaphore = buildSemaphore(margin, cost, finalPrice, protectionPrice);

    return '<td class="text-end">' + protCell + '</td>'
         + '<td class="text-end">' + baseCell + '</td>'
         + '<td class="text-center">' + utilityInput + '</td>'
         + '<td class="text-end" id="finalCell_' + p.id + '">' + finalCell + '</td>'
         + '<td class="text-center" id="semaphoreCell_' + p.id + '">' + semaphore + '</td>';
}

// ── Semáforo ──────────────────────────────────────────────────────────
function buildSemaphore(margin, cost, finalPrice, protectionPrice) {
    protectionPrice = protectionPrice || (cost > 0 ? cost * (1 + MinProtection / 100) : 0);
    if (cost > 0 && finalPrice < protectionPrice) {
        return '<span class="badge bg-dark" title="{{ __('finance.below-protection-title') }}"><i class="fas fa-lock"></i></span>';
    }
    if (margin >= 30) return '<span class="badge bg-success">' + margin.toFixed(1) + '%</span>';
    if (margin >= 15) return '<span class="badge bg-warning text-dark">' + margin.toFixed(1) + '%</span>';
    return '<span class="badge bg-danger">' + margin.toFixed(1) + '%</span>';
}

// ── Evento: Utility % cambia → recalcula Final Price ─────────────────
function onUtilityChange(productId, input) {
    var row          = document.getElementById('row_' + productId);
    var cost         = parseFloat(row.dataset.cost) || 0;
    var utilityPct   = parseFloat(input.value) || 0;
    var protPrice    = cost > 0 ? cost * (1 + MinProtection / 100) : 0;

    // Leer Base Price del span
    var baseSpan  = row.querySelector('[id^="finalCell_"] ~ td span, .text-primary.fw-semibold');
    // Buscar Base Price guardado en data o calcular
    var basePrice = protPrice > 0 ? protPrice : cost;

    // Buscar el span de Base Price en la fila
    var cells = row.querySelectorAll('td');
    // Cost=3, Protection=4, Base=5, Utility=6, Final=7, Semaphore=8
    var basePriceText = cells[5] ? cells[5].textContent.replace('$', '').trim() : '0';
    basePrice = parseFloat(basePriceText) || protPrice || cost;

    var finalPrice = basePrice * (1 + utilityPct / 100);
    var margin     = cost > 0 ? ((finalPrice - cost) / cost * 100) : 0;

    // Actualizar Final Price — input y texto visible
    var fpEl   = document.getElementById('finalPrice_' + productId);
    var fpText = document.getElementById('finalPriceText_' + productId);
    if (fpEl)   fpEl.value = finalPrice > 0 ? finalPrice.toFixed(2) : '0.00';
    if (fpText && fpText.classList.contains('d-none') === false) {
        fpText.textContent = finalPrice > 0 ? '$' + finalPrice.toFixed(2) : '—';
    }

    // Actualizar semáforo
    var semEl = document.getElementById('semaphoreCell_' + productId);
    if (semEl) semEl.innerHTML = buildSemaphore(margin, cost, finalPrice, protPrice);

    // Validar precio
    var validation = validatePrice(productId, finalPrice, utilityPct);
    if (validation === 'blocked') {
        input.value = TargetMargin.toFixed(2);
        var fpEl2 = document.getElementById('finalPrice_' + productId);
        if (fpEl2) fpEl2.value = (basePrice * (1 + TargetMargin / 100)).toFixed(2);
        return;
    }

    // — Aviso de margen muy alto (>9999%) — confirmar antes de registrar
    if (margin > 9999) {
        var pName = row.querySelector('.fw-semibold').textContent;
        showHighMarginModal(productId, margin, pName, function() {
            if (!changes[productId]) changes[productId] = {};
            changes[productId].price_id            = parseInt(row.dataset.priceId) || 0;
            changes[productId].cost_ref            = cost;
            changes[productId].base_price          = basePrice;
            changes[productId].base_margin_percent = utilityPct;
            changes[productId].adjustment_percent  = 0;
            changes[productId].final_price         = finalPrice;
            if (validation === 'auth_required') { changes[productId].below_protection = true; }
            else { delete changes[productId].below_protection; }
            row.classList.add('table-warning');
            updateSaveBtn();
        }, function() {
            var origUtil = parseFloat(row.dataset.originalUtility) || TargetMargin;
            input.value  = origUtil.toFixed(2);
            var protP    = cost > 0 ? cost * (1 + MinProtection / 100) : 0;
            var baseP    = protP > 0 ? protP : cost;
            var revFp    = baseP * (1 + origUtil / 100);
            var fpEl     = document.getElementById('finalPrice_' + productId);
            var fpTxt    = document.getElementById('finalPriceText_' + productId);
            if (fpEl)  fpEl.value = revFp > 0 ? revFp.toFixed(2) : '0.00';
            if (fpTxt) fpTxt.textContent = revFp > 0 ? '$' + revFp.toFixed(2) : '—';
        });
        return;
    }
    // Registrar cambio
    if (!changes[productId]) changes[productId] = {};
    changes[productId].price_id            = parseInt(row.dataset.priceId) || 0;
    changes[productId].cost_ref            = cost;
    changes[productId].base_price          = basePrice;
    changes[productId].base_margin_percent = utilityPct;
    changes[productId].adjustment_percent  = 0;
    changes[productId].final_price         = finalPrice;
    if (validation === 'auth_required') {
        changes[productId].below_protection = true;
    } else {
        delete changes[productId].below_protection;
    }
    row.classList.add('table-warning');
    updateSaveBtn();
}

// ── Validación de precio ─────────────────────────────────────────────
function validatePrice(productId, finalPrice, utilityPct) {
    var row       = document.getElementById('row_' + productId);
    var cost      = parseFloat(row.dataset.cost) || 0;
    var protPrice = cost > 0 ? cost * (1 + MinProtection / 100) : 0;

    // Regla 1: No puede ser menor al costo
    if (cost > 0 && finalPrice < cost) {
        document.getElementById('blockedMessage').innerHTML =
            '{{ __('finance.js-price-below-cost', ['price' => "' + finalPrice.toFixed(2) + '", 'cost' => "' + cost.toFixed(2) + '", 'min' => "' + cost.toFixed(2) + '"]) }}';
        bootstrap.Modal.getOrCreateInstance(document.getElementById('modalBlocked')).show();
        return 'blocked';
    }

    // Regla 2: Menor al protection price → requiere autorización
    if (protPrice > 0 && finalPrice < protPrice) {
        return 'auth_required';
    }

    // Regla 3: Utility % menor al TargetMargin → requiere autorización
    if (utilityPct < TargetMargin) {
        return 'auth_required';
    }

    return 'ok';
}

// ── Cancel desde modal de autorización ───────────────────────────────
function cancelFromAuthModal() {
    var modal     = document.getElementById('modalAuthRequired');
    var productId = modal.dataset.productId ? parseInt(modal.dataset.productId) : null;
    if (productId) cancelSingle(productId);
}

// ── Preview modal Edit List ──────────────────────────────────────────
function updateModalPreview() {
    var cost       = 100;
    var margin     = parseFloat(document.getElementById('modalTargetMargin').value) || 0;
    var protection = parseFloat(document.getElementById('modalMinProtection').value) || 0;
    var protPrice  = cost * (1 + protection / 100);
    var basePrice  = protPrice * (1 + margin / 100);
    document.getElementById('modalPreviewProtPct').textContent   = protection.toFixed(2) + '%';
    document.getElementById('modalPreviewProtPrice').textContent = '$' + protPrice.toFixed(2);
    document.getElementById('modalPreviewMargin').textContent    = margin.toFixed(2) + '%';
    document.getElementById('modalPreviewBase').textContent      = '$' + basePrice.toFixed(2);
}
document.addEventListener('DOMContentLoaded', function() { updateModalPreview(); });

// ── Advertencia margen muy alto (>9999%) ─────────────────────────────
function showHighMarginModal(productId, margin, productName, onConfirm, onCancel) {
    document.getElementById('warnMargenNombre').textContent = productName;
    document.getElementById('warnMargenPct').textContent    = margin.toFixed(1) + '%';
    _highMarginPending = { onConfirm: onConfirm, onCancel: onCancel };
    bootstrap.Modal.getOrCreateInstance(document.getElementById('modalWarningMargen')).show();
}
function confirmHighMargin() {
    var m = bootstrap.Modal.getInstance(document.getElementById('modalWarningMargen'));
    if (m) m.hide();
    if (_highMarginPending && _highMarginPending.onConfirm) _highMarginPending.onConfirm();
    _highMarginPending = null;
}
function cancelHighMargin() {
    var m = bootstrap.Modal.getInstance(document.getElementById('modalWarningMargen'));
    if (m) m.hide();
    if (_highMarginPending && _highMarginPending.onCancel) _highMarginPending.onCancel();
    _highMarginPending = null;
}
function showNotificacion(title, body, isError) {
    document.getElementById('modalNotificacionTitle').textContent = title;
    document.getElementById('modalNotificacionBody').innerHTML    = body;
    var hdr = document.getElementById('modalNotificacionHeader');
    hdr.className = 'modal-header py-2 ' + (isError ? 'bg-danger text-white' : 'bg-warning text-dark');
    bootstrap.Modal.getOrCreateInstance(document.getElementById('modalNotificacion')).show();
}

// ── Toggle candado Final Price ────────────────────────────────────────
function toggleFinalLock(productId) {
    var input   = document.getElementById('finalPrice_' + productId);
    var text    = document.getElementById('finalPriceText_' + productId);
    var icon    = document.getElementById('lockIcon_' + productId);
    var locked  = input.classList.contains('d-none');

    if (locked) {
        // Abrir — mostrar input, ocultar texto
        input.classList.remove('d-none');
        if (text) text.classList.add('d-none');
        icon.className = 'fas fa-lock-open text-warning';
        input.focus();
    } else {
        // Cerrar — mostrar texto, ocultar input
        input.classList.add('d-none');
        if (text) {
            text.classList.remove('d-none');
            var val = parseFloat(input.value) || 0;
            text.textContent = val > 0 ? '$' + val.toFixed(2) : '—';
        }
        icon.className = 'fas fa-lock';
    }
}

// ── Final Price cambia → recalcula Utility % ──────────────────────────
function onFinalPriceChange(productId, input) {
    var row        = document.getElementById('row_' + productId);
    var cost       = parseFloat(row.dataset.cost) || 0;
    var protPrice  = cost > 0 ? cost * (1 + MinProtection / 100) : 0;
    var finalPrice = parseFloat(input.value) || 0;

    // Leer Base Price de la celda (span texto)
    var cells     = row.querySelectorAll('td');
    var basePriceTxt = cells[5] ? cells[5].textContent.replace('$','').trim() : '0';
    var basePrice = parseFloat(basePriceTxt) || protPrice || cost;

    // Recalcular Utility %
    var utilityPct = basePrice > 0 ? ((finalPrice - basePrice) / basePrice * 100) : 0;
    var utilityEl  = document.getElementById('utility_' + productId);
    if (utilityEl) utilityEl.value = utilityPct.toFixed(2);

    // Semáforo
    var margin = cost > 0 ? ((finalPrice - cost) / cost * 100) : 0;
    var semEl  = document.getElementById('semaphoreCell_' + productId);
    if (semEl) semEl.innerHTML = buildSemaphore(margin, cost, finalPrice, protPrice);

    // Validar precio
    var validation = validatePrice(productId, finalPrice, utilityPct);
    if (validation === 'blocked') {
        input.value = TargetMargin.toFixed(2);
        var fpEl2 = document.getElementById('finalPrice_' + productId);
        if (fpEl2) fpEl2.value = (basePrice * (1 + TargetMargin / 100)).toFixed(2);
        return;
    }

    // — Aviso de margen muy alto (>9999%) — confirmar antes de registrar
    if (margin > 9999) {
        var pName2    = row.querySelector('.fw-semibold').textContent;
        var origFp2   = parseFloat(row.dataset.originalPrice) || 0;
        var origUtil2 = parseFloat(row.dataset.originalUtility) || TargetMargin;
        showHighMarginModal(productId, margin, pName2, function() {
            if (!changes[productId]) changes[productId] = {};
            changes[productId].price_id            = parseInt(row.dataset.priceId) || 0;
            changes[productId].cost_ref            = cost;
            changes[productId].base_price          = basePrice;
            changes[productId].base_margin_percent = utilityPct;
            changes[productId].adjustment_percent  = 0;
            changes[productId].final_price         = finalPrice;
            if (validation === 'auth_required') { changes[productId].below_protection = true; }
            else { delete changes[productId].below_protection; }
            row.classList.add('table-warning');
            updateSaveBtn();
        }, function() {
            input.value = origFp2 > 0 ? origFp2.toFixed(2) : '0.00';
            var utilEl  = document.getElementById('utility_' + productId);
            if (utilEl) utilEl.value = origUtil2.toFixed(2);
        });
        return;
    }
    // Registrar cambio
    if (!changes[productId]) changes[productId] = {};
    changes[productId].price_id            = parseInt(row.dataset.priceId) || 0;
    changes[productId].cost_ref            = cost;
    changes[productId].base_price          = basePrice;
    changes[productId].base_margin_percent = utilityPct;
    changes[productId].adjustment_percent  = 0;
    changes[productId].final_price         = finalPrice;
    if (validation === 'auth_required') {
        changes[productId].below_protection = true;
    } else {
        delete changes[productId].below_protection;
    }
    row.classList.add('table-warning');
    updateSaveBtn();
}

// ── Cancel individual ────────────────────────────────────────────────
function cancelSingle(productId) {
    var row          = document.getElementById('row_' + productId);
    var origPrice    = parseFloat(row.dataset.originalPrice) || 0;
    var origUtility  = parseFloat(row.dataset.originalUtility) || TargetMargin;

    // Restaurar Utility %
    var utilityEl = document.getElementById('utility_' + productId);
    if (utilityEl) utilityEl.value = origUtility.toFixed(2);

    // Restaurar Final Price texto
    var fpText = document.getElementById('finalPriceText_' + productId);
    var fpInput = document.getElementById('finalPrice_' + productId);
    var fpIcon  = document.getElementById('lockIcon_' + productId);
    if (fpText) fpText.textContent = origPrice > 0 ? '$' + origPrice.toFixed(2) : '—';
    if (fpInput) {
        fpInput.value = origPrice > 0 ? origPrice.toFixed(2) : '0.00';
        fpInput.classList.add('d-none');
        if (fpText) fpText.classList.remove('d-none');
    }
    if (fpIcon) fpIcon.className = 'fas fa-lock';

    // Restaurar semáforo
    var cost      = parseFloat(row.dataset.cost) || 0;
    var protPrice = cost > 0 ? cost * (1 + MinProtection / 100) : 0;
    var margin    = cost > 0 && origPrice > 0 ? ((origPrice - cost) / cost * 100) : 0;
    var semEl = document.getElementById('semaphoreCell_' + productId);
    if (semEl) semEl.innerHTML = buildSemaphore(margin, cost, origPrice, protPrice);

    // Limpiar cambios
    delete changes[productId];
    row.classList.remove('table-warning');
    updateSaveBtn();
}

// ── MAY: columnas tier ────────────────────────────────────────────────
function buildMayRow(p, hasCost, hasPrice) {
    var genPrice   = p.gen_price || 0;
    var tierId     = p.tier_id || null;
    var cost       = parseFloat(p.active_cost) || 0;
    // Si no hay tier seleccionado → disc = 0, Final Price = GEN Price
    var discPerc   = tierId ? (p.discount_perc || 0) : 0;
    var finalPrice = tierId ? (p.final_price || genPrice) : genPrice;

    var genCell = genPrice > 0
        ? '<span class="fw-bold" id="genCell_' + p.id + '" style="color:' + (!hasPrice ? '#6f42c1' : '#6c757d') + '">$' + parseFloat(genPrice).toFixed(2) + '</span>'
        : '<span class="text-danger small" id="genCell_' + p.id + '">No GEN</span>';

    var tierSel = '<select class="form-select form-select-sm" id="tier_' + p.id + '" onchange="onTierChange(' + p.id + ', this)"><option value="">{{ __('finance.js-no-tier-option') }}</option>';
    Tiers.forEach(function(t) {
        tierSel += '<option value="' + t.id + '" data-max="' + t.max_disc + '"' + (tierId === t.id ? ' selected' : '') + '>' + t.label + '</option>';
    });
    tierSel += '</select>';

    var discInput = '<input type="number" class="form-control form-control-sm" id="disc_' + p.id + '"'
        + ' min="0" max="100" step="0.01" style="padding-right:8px;"'
        + ' value="' + parseFloat(discPerc).toFixed(2) + '" onchange="onDiscChange(' + p.id + ', this)">';

    var finalCell = hasPrice && finalPrice > 0
        ? '<span class="text-success fw-bold" id="final_' + p.id + '">$' + parseFloat(finalPrice).toFixed(2) + '</span>'
        : (genPrice > 0 ? '<span style="color:#6f42c1" class="fw-bold" id="final_' + p.id + '">$' + parseFloat(genPrice).toFixed(2) + '</span>' : '<span class="text-muted" id="final_' + p.id + '">—</span>');

    var margin = cost > 0 && finalPrice > 0 ? ((finalPrice - cost) / cost * 100) : 0;
    var semaphore = cost > 0 && finalPrice > 0 ? buildSemaphore(margin, cost, finalPrice, 0) : '<span class="text-muted">—</span>';

    return '<td class="text-end">' + genCell + '</td>'
         + '<td class="text-center">' + tierSel + '</td>'
         + '<td>' + discInput + '</td>'
         + '<td class="text-end fw-bold" id="finalMayCell_' + p.id + '">' + finalCell + '</td>'
         + '<td class="text-center" id="semaphoreCell_' + p.id + '">' + semaphore + '</td>';
}

function onTierChange(productId, select) {
    var tierId   = select.value ? parseInt(select.value) : null;
    var maxDisc  = parseFloat(select.options[select.selectedIndex].dataset.max || 0);
    var row      = document.getElementById('row_' + productId);
    var genPrice = parseFloat(row.dataset.genPrice) || 0;
    var cost     = parseFloat(row.dataset.cost) || 0;
    var discEl   = document.getElementById('disc_' + productId);
    if (tierId && maxDisc > 0) { discEl.max = maxDisc; discEl.value = maxDisc.toFixed(2); }
    else { discEl.max = 100; discEl.value = '0.00'; }
    var disc   = parseFloat(discEl.value);
    var final  = genPrice > 0 ? genPrice * (1 - disc / 100) : 0;
    var finalEl = document.getElementById('final_' + productId);
    if (finalEl) finalEl.textContent = tierId ? '$' + final.toFixed(2) : '$' + genPrice.toFixed(2);
    var margin = cost > 0 && final > 0 ? ((final - cost) / cost * 100) : 0;
    var semEl = document.getElementById('semaphoreCell_' + productId);
    if (semEl) semEl.innerHTML = cost > 0 ? buildSemaphore(margin, cost, final, 0) : '—';
    if (!changes[productId]) changes[productId] = {};
    changes[productId].price_type    = 'discount';
    changes[productId].tier_id       = tierId;
    changes[productId].discount_perc = disc;
    changes[productId].price_id      = parseInt(row.dataset.priceId) || 0;
    // Guardar label del tier para el modal de confirmación
    var tierLabel = tierId
        ? (select.options[select.selectedIndex].textContent.trim())
        : '{{ __('finance.js-no-tier-gen') }}';
    changes[productId].tier_label    = tierLabel;
    changes[productId].final_price   = genPrice > 0 ? genPrice * (1 - disc / 100) : genPrice;
    row.classList.add('table-warning'); updateSaveBtn();
}

function onDiscChange(productId, input) {
    var row      = document.getElementById('row_' + productId);
    var genPrice = parseFloat(row.dataset.genPrice) || 0;
    var cost     = parseFloat(row.dataset.cost) || 0;
    var tierSel  = document.getElementById('tier_' + productId);
    var tierId   = tierSel && tierSel.value ? parseInt(tierSel.value) : null;
    var maxDisc  = tierSel ? parseFloat(tierSel.options[tierSel.selectedIndex].dataset.max || 0) : 0;
    var disc     = parseFloat(input.value) || 0;
    if (tierId && maxDisc > 0 && disc > maxDisc) { input.classList.add('is-invalid'); disc = maxDisc; input.value = maxDisc.toFixed(2); }
    else { input.classList.remove('is-invalid'); }
    var final  = genPrice > 0 ? genPrice * (1 - disc / 100) : 0;
    var finalEl = document.getElementById('final_' + productId);
    if (finalEl) finalEl.textContent = '$' + final.toFixed(2);
    var margin = cost > 0 && final > 0 ? ((final - cost) / cost * 100) : 0;
    var semEl = document.getElementById('semaphoreCell_' + productId);
    if (semEl) semEl.innerHTML = cost > 0 ? buildSemaphore(margin, cost, final, 0) : '—';
    if (!changes[productId]) changes[productId] = {};
    changes[productId].price_type    = 'discount';
    changes[productId].tier_id       = tierId;
    changes[productId].discount_perc = disc;
    changes[productId].price_id      = parseInt(row.dataset.priceId) || 0;
    var tierSel2 = document.getElementById('tier_' + productId);
    var tierLabel2 = tierId && tierSel2
        ? tierSel2.options[tierSel2.selectedIndex].textContent.trim()
        : '{{ __('finance.js-no-tier-gen') }}';
    changes[productId].tier_label  = tierLabel2;
    changes[productId].final_price = genPrice > 0 ? genPrice * (1 - disc / 100) : genPrice;
    row.classList.add('table-warning'); updateSaveBtn();
}

// ── Save ──────────────────────────────────────────────────────────────
function updateSaveBtn() {
    var count = Object.keys(changes).length;
    var cc = document.getElementById('changesCount');
    if (cc) cc.textContent = count;
    var b1 = document.getElementById('btnSaveAll');
    var b2 = document.getElementById('btnSaveAll2');
    if (b1) b1.disabled = count === 0;
    if (b2) b2.disabled = count === 0;
    if (count > 0) { var tf = document.getElementById('tableFooter'); if (tf) tf.style.removeProperty('display'); }
}

function saveSingle(productId) {
    var row  = document.getElementById('row_' + productId);
    var data = changes[productId];

    // Si no hay cambios registrados, tomar valores actuales de los campos
    if (!data) {
        var cost       = parseFloat(row.dataset.cost) || 0;
        var genPrice2  = parseFloat(row.dataset.genPrice) || 0;

        if (IsMay) {
            // MAY: sin cambios registrados → usar GEN Price sin descuento
            var tierSel3   = document.getElementById('tier_' + productId);
            var tierId3    = tierSel3 && tierSel3.value ? parseInt(tierSel3.value) : null;
            var disc3      = parseFloat(document.getElementById('disc_' + productId).value) || 0;
            var finalMay   = genPrice2 > 0 ? genPrice2 * (1 - disc3 / 100) : genPrice2;
            var tierLabel3 = tierId3 && tierSel3
                ? tierSel3.options[tierSel3.selectedIndex].textContent.trim()
                : '{{ __('finance.js-no-tier-gen') }}';
            data = {
                price_id:     parseInt(row.dataset.priceId) || 0,
                price_type:   'discount',
                tier_id:      tierId3,
                discount_perc: disc3,
                final_price:  finalMay,
                tier_label:   tierLabel3,
            };
        } else {
            var protPrice  = cost > 0 ? cost * (1 + MinProtection / 100) : 0;
            var utilityEl  = document.getElementById('utility_' + productId);
            var utilityPct = utilityEl ? parseFloat(utilityEl.value) || TargetMargin : TargetMargin;
            var basePrice  = protPrice > 0 ? protPrice : cost;
            var finalPrice = basePrice * (1 + utilityPct / 100);
            data = {
                price_id:            parseInt(row.dataset.priceId) || 0,
                cost_ref:            cost,
                base_price:          basePrice,
                base_margin_percent: utilityPct,
                adjustment_percent:  0,
                final_price:         finalPrice,
            };
            if (protPrice > 0 && finalPrice < protPrice) data.below_protection = true;
        }
    }
    // Mostrar modal de confirmación
    var productName = row.querySelector('.fw-semibold').textContent;
    var fpEl        = document.getElementById('finalPrice_' + productId);
    var fpTxtEl     = document.getElementById('finalPriceText_' + productId);
    var newPrice    = data.final_price > 0
        ? '$' + parseFloat(data.final_price).toFixed(2)
        : (fpTxtEl ? fpTxtEl.textContent : (fpEl ? '$' + parseFloat(fpEl.value).toFixed(2) : '—'));
    var originalPrice = parseFloat(row.dataset.originalPrice) || 0;
    var oldPriceText  = parseInt(row.dataset.priceId) > 0 && originalPrice > 0
        ? '$' + originalPrice.toFixed(2)
        : '<span class="text-muted">{{ __('finance.no-price') }}</span>';

    var isMayChange = changes[productId] && changes[productId].tier_label !== undefined;
    var tierLabel   = isMayChange ? changes[productId].tier_label : '';
    var discPct     = isMayChange ? parseFloat(changes[productId].discount_perc || 0).toFixed(2) + '%' : '';
    var margin      = '';
    var cost2       = parseFloat(row ? row.dataset.cost : 0) || 0;
    var fp2         = parseFloat(data.final_price) || 0;
    if (cost2 > 0 && fp2 > 0) margin = ((fp2 - cost2) / cost2 * 100).toFixed(1) + '%';

    var headerRow = isMayChange
        ? '<tr class="table-light"><th>{{ __('finance.part-num') }}</th><th class="text-end">{{ __('finance.previous-price') }}</th><th>{{ __('finance.tier') }}</th><th class="text-center">{{ __('finance.disc-pct-col') }}</th><th class="text-end">{{ __('finance.new-price') }}</th><th class="text-center">{{ __('finance.margin') }}</th></tr>'
        : '<tr class="table-light"><th>{{ __('finance.part-num') }}</th><th class="text-end">{{ __('finance.previous-price') }}</th><th class="text-end">{{ __('finance.new-price') }}</th><th class="text-center">{{ __('finance.utility-pct') }}</th></tr>';

    var dataRow = isMayChange
        ? '<tr>'
          + '<td class="fw-semibold">' + productName + '</td>'
          + '<td class="text-end text-muted">' + oldPriceText + '</td>'
          + '<td class="small">' + tierLabel + '</td>'
          + '<td class="text-center text-primary">' + discPct + '</td>'
          + '<td class="text-end text-success fw-bold">' + newPrice + '</td>'
          + '<td class="text-center"><span class="badge ' + (parseFloat(margin) >= 20 ? 'bg-success' : 'bg-warning text-dark') + '">' + margin + '</span></td>'
          + '</tr>'
        : '<tr>'
          + '<td class="fw-semibold">' + productName + '</td>'
          + '<td class="text-end">' + oldPriceText + '</td>'
          + '<td class="text-end text-success fw-bold">' + newPrice + '</td>'
          + '<td class="text-center text-primary">' + parseFloat(data.base_margin_percent || 0).toFixed(2) + '%</td>'
          + '</tr>';

    document.getElementById('confirmHeader').innerHTML = headerRow;
    document.getElementById('confirmList').innerHTML = dataRow;

    var confirmModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('modalConfirmSave'));

    document.getElementById('btnConfirmSave').onclick = function() {
        confirmModal.hide();
        if (data.below_protection) {
            document.getElementById('authList').innerHTML =
                '<li class="text-danger"><i class="fas fa-lock me-1"></i>' + productName + '</li>';
            document.getElementById('modalAuthRequired').dataset.productId = productId;
            document.getElementById('btnSaveAnyway').onclick = function() {
                bootstrap.Modal.getInstance(document.getElementById('modalAuthRequired')).hide();
                delete data.below_protection;
                changes[productId] = data;
                executeSingleSave(productId);
            };
            bootstrap.Modal.getOrCreateInstance(document.getElementById('modalAuthRequired')).show();
            return;
        }
        changes[productId] = data;
        executeSingleSave(productId);
    };

    confirmModal.show();
}

function executeSingleSave(productId) {
    var single = {};
    single[productId] = changes[productId];
    fetch(AppUrl + '/finance/price-lists/' + ListId + '/prices/bulk', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
        body: JSON.stringify({ prices: single })
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.success && data.results.length > 0) {
            var r   = data.results[0];
            var row = document.getElementById('row_' + r.product_id);
            if (row) {
                row.classList.remove('table-warning');
                row.classList.add('table-success');
                row.dataset.priceId = r.price_id;
                setTimeout(function() { row.classList.remove('table-success'); }, 2000);
            }
            if (ListCode === 'GEN' && r.final_price > 0) {
                var genEl = document.getElementById('genCell_' + r.product_id);
                if (genEl) genEl.textContent = '$' + parseFloat(r.final_price).toFixed(2);
                if (row) row.dataset.genPrice = r.final_price;
            }
            // Cerrar candado y mostrar texto
            var fpInput = document.getElementById('finalPrice_' + r.product_id);
            var fpText  = document.getElementById('finalPriceText_' + r.product_id);
            var fpIcon  = document.getElementById('lockIcon_' + r.product_id);
            if (fpInput && !fpInput.classList.contains('d-none')) {
                fpInput.classList.add('d-none');
                if (fpText) { fpText.classList.remove('d-none'); fpText.textContent = '$' + parseFloat(r.final_price).toFixed(2); }
                if (fpIcon) fpIcon.className = 'fas fa-lock';
            } else if (fpText && r.final_price > 0) {
                fpText.textContent = '$' + parseFloat(r.final_price).toFixed(2);
            }
            delete changes[productId];
            updateSaveBtn();
        }
        if (data.errors   && data.errors.length   > 0) showNotificacion('Error al guardar', data.errors.map(function(e) { return '<p class="mb-1">' + e + '</p>'; }).join(''), true);
        if (data.warnings && data.warnings.length > 0) showNotificacion('Advertencia', data.warnings.map(function(w) { return '<p class="mb-1">' + w + '</p>'; }).join(''), false);
    })
    .catch(function(err) { console.warn('Save error:', err); });
}

function saveAll() {
    if (Object.keys(changes).length === 0) return;

    // Construir tabla de confirmación
    var confirmRows = '';
    Object.keys(changes).forEach(function(productId) {
        var row      = document.getElementById('row_' + productId);
        var name     = row ? row.querySelector('.fw-semibold').textContent : '#' + productId;
        var fpEl     = document.getElementById('finalPrice_' + productId);
        var newPrice = fpEl ? fpEl.textContent : '$' + parseFloat(changes[productId].final_price || 0).toFixed(2);
        var origPrice  = row ? parseFloat(row.dataset.originalPrice) || 0 : 0;
        var hasOld     = parseInt(row ? row.dataset.priceId : 0) > 0;
        var oldPriceTxt = hasOld && origPrice > 0 ? '$' + origPrice.toFixed(2) : '{{ __('finance.no-price') }}';
        confirmRows += '<tr>'
            + '<td class="fw-semibold small">' + name + '</td>'
            + '<td class="text-end small">' + oldPriceTxt + '</td>'
            + '<td class="text-end text-success fw-bold small">' + newPrice + '</td>'
            + '<td class="text-center text-primary small">' + parseFloat(changes[productId].base_margin_percent || 0).toFixed(2) + '%</td>'
            + '</tr>';
    });
    document.getElementById('confirmList').innerHTML = confirmRows;

    var confirmModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('modalConfirmSave'));
    document.getElementById('btnConfirmSave').onclick = function() {
        confirmModal.hide();
        proceedSaveAll();
    };
    confirmModal.show();
}

function proceedSaveAll() {
    var belowProtection = [];
    Object.keys(changes).forEach(function(productId) {
        if (changes[productId].below_protection) {
            var row = document.getElementById('row_' + productId);
            belowProtection.push(row ? row.querySelector('.fw-semibold').textContent : '#' + productId);
        }
    });
    if (belowProtection.length > 0) {
        document.getElementById('authList').innerHTML = belowProtection.map(function(n) {
            return '<li class="text-danger"><i class="fas fa-lock me-1"></i>' + n + '</li>';
        }).join('');
        document.getElementById('btnSaveAnyway').onclick = function() {
            bootstrap.Modal.getInstance(document.getElementById('modalAuthRequired')).hide();
            Object.keys(changes).forEach(function(id) { delete changes[id].below_protection; });
            executeSave();
        };
        bootstrap.Modal.getOrCreateInstance(document.getElementById('modalAuthRequired')).show();
        return;
    }
    executeSave();
}

function executeSave() {
    var b1 = document.getElementById('btnSaveAll');
    var b2 = document.getElementById('btnSaveAll2');
    b1.disabled = true; b2.disabled = true;
    b1.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>{{ __('finance.saving') }}';
    fetch(AppUrl + '/finance/price-lists/' + ListId + '/prices/bulk', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
        body: JSON.stringify({ prices: changes })
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.success) {
            data.results.forEach(function(r) {
                var row = document.getElementById('row_' + r.product_id);
                var fpEl   = document.getElementById('finalPrice_' + r.product_id);
                var fpTxt  = document.getElementById('finalPriceText_' + r.product_id);
                var fpIcon2 = document.getElementById('lockIcon_' + r.product_id);
                if (r.final_price > 0) {
                    if (fpEl) fpEl.value = parseFloat(r.final_price).toFixed(2);
                    if (fpTxt) fpTxt.textContent = '$' + parseFloat(r.final_price).toFixed(2);
                    if (fpEl && !fpEl.classList.contains('d-none')) {
                        fpEl.classList.add('d-none');
                        if (fpTxt) fpTxt.classList.remove('d-none');
                        if (fpIcon2) fpIcon2.className = 'fas fa-lock';
                    }
                }
                if (ListCode === 'GEN' && r.final_price > 0) {
                    var genEl = document.getElementById('genCell_' + r.product_id);
                    if (genEl) genEl.textContent = '$' + parseFloat(r.final_price).toFixed(2);
                    if (row) row.dataset.genPrice = r.final_price;
                }
                if (row) {
                    row.classList.remove('table-warning');
                    row.classList.add('table-success');
                    row.dataset.priceId = r.price_id;
                    setTimeout(function() { row.classList.remove('table-success'); }, 2000);
                }
            });
            if (data.errors   && data.errors.length   > 0) showNotificacion('{{ __('finance.js-some-not-saved') }}', data.errors.map(function(e) { return '<p class="mb-1">' + e + '</p>'; }).join(''), true);
            if (data.warnings && data.warnings.length > 0) showNotificacion('Advertencia', data.warnings.map(function(w) { return '<p class="mb-1">' + w + '</p>'; }).join(''), false);
            changes = {}; updateSaveBtn();
            b1.innerHTML = '<i class="fas fa-save me-1"></i>{{ __('finance.save-changes') }} <span class="badge bg-light text-dark ms-1" id="changesCount">0</span>';
        } else {
            alert('{{ __('finance.js-error', ['msg' => "' + (data.message || '" . __('finance.js-unknown-error') . "') + '"]) }}');
            b1.innerHTML = '<i class="fas fa-save me-1"></i>{{ __('finance.save-changes') }} <span class="badge bg-light text-dark ms-1" id="changesCount">' + Object.keys(changes).length + '</span>';
            b1.disabled = false; b2.disabled = false;
        }
    })
    .catch(function(err) {
        console.warn('Save error:', err);
        changes = {}; updateSaveBtn();
        b1.innerHTML = '<i class="fas fa-save me-1"></i>{{ __('finance.save-changes') }} <span class="badge bg-light text-dark ms-1" id="changesCount">0</span>';
        applyFilter();
    });
}
</script>

@endsection