{{-- New-Unity ERP | finance/price-lists/tiers_may.blade.php | v1.3 | 05/07/2026 --}}
{{-- v1.3 — Modal Edit Tier: referencia Target Margin, Min Protection y preview dinámico. --}}
{{-- v1.2 — Simulador: tabla por tier con Qty Range, Discount %, Final Price, Valid, Use. --}}
{{-- v1.1 — Sincronización Min Protection % ↔ Minimum Margin %. Simulador usa Min Protection para Min Price. --}}
{{-- v1.0 — Blade dedicado MAY sin dropdown Pricing Model. --}}
{{-- v1.0 — Blade dedicado para MAY: elimina dropdown Pricing Model. Agrega Target Margin % y Min Protection %. --}}
@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-layer-group me-2 text-primary"></i>
                <span class="badge bg-warning text-dark me-1">{{ $priceList->code }}</span>
                {{ $priceList->name }} — {{ __('finance.volume-tiers') }}
            </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"><a href="{{ route('finance.price-lists.prices.index', $priceList) }}">{{ $priceList->name }}</a></li>
                <li class="breadcrumb-item active">{{ __('finance.volume-tiers') }}</li>
            </ol></nav>
        </div>
        <a href="{{ route('finance.price-lists.prices.index', $priceList) }}" class="btn btn-secondary btn-sm">
            <i class="fas fa-arrow-left me-1"></i>{{ __('finance.back-to-prices') }}
        </a>
    </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

    <div class="row g-3">

        {{-- Left: Configuración de la lista --}}
        <div class="col-md-4">
            <div class="card mb-3">
                <div class="card-header py-2" style="background:#3d0f5e; color:#fff;">
                    <h6 class="mb-0"><i class="fas fa-cog me-2"></i>{{ __('finance.list-configuration') }}</h6>
                </div>
                <form action="{{ route('finance.price-lists.price-lists.tiers.config', $priceList) }}" method="POST">
                    @csrf
                    @method('PUT')
                    @method('PUT')
                    <div class="card-body">
                        {{-- Pricing Model fijo: siempre Volume Discount para MAY --}}
                        <input type="hidden" name="pricing_model" value="volume_discount">
                        <div class="alert alert-info py-2 small mb-3">
                            <i class="fas fa-info-circle me-1"></i>
                            {!! __('finance.may-volume-info') !!}
                        </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"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('finance.target-margin-tip-may') }}"></i>
                                </label>
                                <div class="input-group input-group-sm">
                                    <input type="number" name="target_margin_percent"
                                           class="form-control" min="0" step="0.01"
                                           value="{{ $priceList->target_margin_percent ?? 0 }}"
                                           onchange="updatePreview()">
                                    <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"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('finance.min-protection-tip-may') }}"></i>
                                </label>
                                <div class="input-group input-group-sm">
                                    <input type="number" name="min_protection_percent"
                                           id="minProtectionInput"
                                           class="form-control border-danger" min="0" step="0.01"
                                           value="{{ $priceList->min_protection_percent ?? 0 }}"
                                           onchange="syncMinMargin(this.value); updatePreview();">
                                    <span class="input-group-text bg-danger text-white">%</span>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold small">
                                {{ __('finance.min-qty-apply') }}
                            </label>
                            <div class="input-group input-group-sm">
                                <input type="number" name="min_qty_required"
                                       class="form-control" min="1"
                                       value="{{ $priceList->min_qty_required }}">
                                <span class="input-group-text bg-light">{{ __('finance.pcs') }}</span>
                            </div>
                            <small class="text-muted">{{ __('finance.below-qty-gen') }}</small>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold small">
                                {{ __('finance.min-margin-cost') }}
                            </label>
                            <div class="input-group input-group-sm">
                                <input type="number" name="margin_min_perc"
                                       id="marginMinInput"
                                       class="form-control" min="0" max="100" step="0.01"
                                       value="{{ $priceList->min_protection_percent ?? $priceList->margin_min_perc }}"
                                       onchange="syncMinProtection(this.value);">
                                <span class="input-group-text bg-light">%</span>
                            </div>
                            <small class="text-muted">
                                {{ __('finance.no-discount-below', ['pct' => $priceList->margin_min_perc]) }}
                            </small>
                        </div>
                    </div>
                    <div class="card-footer py-2">
                        <button type="submit" class="btn btn-primary btn-sm w-100">
                            <i class="fas fa-save me-1"></i>{{ __('finance.save-configuration') }}
                        </button>
                    </div>
                </form>
            </div>

            {{-- Info box --}}
            <div class="card border-info">
                <div class="card-body py-2 small">
                    <h6 class="text-info mb-2" style="font-size:11px;">
                        <i class="fas fa-info-circle me-1"></i>{{ __('finance.how-tiers-work') }}
                    </h6>
                    <ul class="text-muted mb-0 ps-3" style="font-size:11px;">
                        <li>{!! __('finance.tiers-work-1') !!}</li>
                        <li>{{ __('finance.tiers-work-2') }}</li>
                        <li>{{ __('finance.tiers-work-3') }}</li>
                        <li>{{ __('finance.tiers-work-4') }}</li>
                    </ul>
                </div>
            </div>
        </div>

        {{-- Right: Tabla de tiers --}}
        <div class="col-md-8">
            <div class="card mb-3">
                <div class="card-header py-2 d-flex justify-content-between align-items-center"
                     style="background:#3d0f5e; color:#fff;">
                    <h6 class="mb-0"><i class="fas fa-layer-group me-2"></i>{{ __('finance.volume-discount-tiers') }}</h6>
                    <button type="button" class="btn btn-sm"
                            style="background:#000; color:#fff;"
                            data-bs-toggle="modal" data-bs-target="#modalAddTier">
                        <i class="fas fa-plus me-1"></i>{{ __('finance.add-tier') }}
                    </button>
                </div>
                <div class="card-body p-0">
                    <table class="table table-hover align-middle mb-0" style="font-size:0.85rem;">
                        <thead>
                            <tr style="border-bottom:2px solid #dee2e6;">
                                <th class="ps-3" style="width:180px;">{{ __('finance.quantity-range') }}</th>
                                <th style="width:200px;" class="text-center">{{ __('finance.max-discount-allowed') }}</th>
                                <th class="text-center">{{ __('finance.example-gen') }}</th>
                                <th style="width:80px;" class="text-center">{{ __('finance.actions') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{-- Debajo del mínimo --}}
                            <tr class="table-light">
                                <td class="ps-3 text-muted small">
                                    1 — {{ $priceList->min_qty_required - 1 }} {{ __('finance.pcs') }}
                                </td>
                                <td class="text-center">
                                    <span class="badge bg-secondary">{{ __('finance.gen-price-applies') }}</span>
                                </td>
                                <td class="text-center text-muted small">$780.00</td>
                                <td></td>
                            </tr>
                            @forelse($tiers as $tier)
                            <tr>
                                <td class="ps-3 fw-semibold">{{ $tier->rangeLabel() }}</td>
                                <td class="text-center">
                                    <span class="badge bg-success fs-6">
                                        {{ __('finance.up-to-off', ['pct' => $tier->max_discount_perc]) }}
                                    </span>
                                </td>
                                <td class="text-center text-success fw-bold">
                                    ${{ number_format(780 * (1 - $tier->max_discount_perc/100), 2) }}
                                    <small class="text-muted">
                                        ({{ __('finance.min-colon') }} ${{ number_format(600 * (1 + $priceList->margin_min_perc/100), 2) }})
                                    </small>
                                </td>
                                <td class="text-center" style="white-space:nowrap;">
                                    <button type="button"
                                            class="btn btn-sm btn-outline-primary me-1"
                                            onclick="editTier({{ $tier->id }}, {{ $tier->min_qty }}, {{ $tier->max_qty ?? 'null' }}, {{ $tier->max_discount_perc }})"
                                            title="{{ __('finance.edit') }}">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <form action="{{ route('finance.price-lists.price-lists.tiers.destroy', [$priceList, $tier]) }}"
                                          method="POST" class="d-inline"
                                          onsubmit="return confirm('{{ __('finance.remove-tier-confirm') }}')">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-outline-danger">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="4" class="text-center text-muted py-4">
                                    {!! __('finance.no-tiers-configured') !!}
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- Simulador --}}
            <div class="card">
                <div class="card-header py-2" style="background:#3d0f5e; color:#fff;">
                    <h6 class="mb-0"><i class="fas fa-calculator me-2"></i>{{ __('finance.price-simulator-all') }}</h6>
                </div>
                <div class="card-body">
                    {{-- Inputs base --}}
                    <div class="row g-3 align-items-end mb-3">
                        <div class="col-md-4">
                            <label class="form-label small fw-semibold">{{ __('finance.cost-label') }}</label>
                            <div class="input-group input-group-sm">
                                <span class="input-group-text">$</span>
                                <input type="number" id="simCost" class="form-control"
                                       value="600" oninput="simulateAll()">
                            </div>
                            <small class="text-muted">{{ __('finance.purchase-cost') }}</small>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-semibold">{{ __('finance.gen-price-label') }}</label>
                            <div class="input-group input-group-sm">
                                <span class="input-group-text">$</span>
                                <input type="number" id="simGenPrice" class="form-control"
                                       value="780" oninput="simulateAll()">
                            </div>
                            <small class="text-muted">{{ __('finance.base-price-discounts') }}</small>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-semibold">{{ __('finance.min-protection-pct') }}</label>
                            <div class="input-group input-group-sm">
                                <input type="number" id="simMinMargin" class="form-control"
                                       value="{{ $priceList->min_protection_percent ?? $priceList->margin_min_perc }}"
                                       oninput="simulateAll()">
                                <span class="input-group-text bg-danger text-white">%</span>
                            </div>
                            <small class="text-danger">{{ __('finance.no-price-below') }}</small>
                        </div>
                    </div>

                    {{-- Tabla de tiers --}}
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered align-middle mb-0" style="font-size:0.82rem;">
                            <thead>
                                <tr style="background:#3d0f5e; color:#fff;">
                                    <th class="text-center">{{ __('finance.tier') }}</th>
                                    <th class="text-center">{{ __('finance.qty-range') }}</th>
                                    <th class="text-center">{{ __('finance.max-disc-pct') }}</th>
                                    <th class="text-end">{{ __('finance.gen-price') }}</th>
                                    <th class="text-end">{{ __('finance.min-price') }}</th>
                                    <th class="text-center">{{ __('finance.discount-pct') }}</th>
                                    <th class="text-end">{{ __('finance.final-price') }}</th>
                                    <th class="text-center">{{ __('finance.margin') }}</th>
                                    <th class="text-center">{{ __('finance.valid') }}</th>
                                    <th class="text-center">{{ __('finance.use') }}</th>
                                </tr>
                            </thead>
                            <tbody id="simTiersTable">
                                <tr><td colspan="10" class="text-center text-muted py-3">{{ __('finance.loading') }}</td></tr>
                            </tbody>
                        </table>
                    </div>

                    <div id="simAlert" class="mt-2 small d-none"></div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Modal Add Tier --}}
<div class="modal fade" id="modalAddTier" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header py-2" style="background:#3d0f5e; color:#fff;">
                <h5 class="modal-title" id="tierModalTitle">
                    <i class="fas fa-plus me-2"></i>{{ __('finance.add-volume-tier') }}
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('finance.price-lists.price-lists.tiers.store', $priceList) }}"
                  method="POST" id="formTier">
                @csrf
                <input type="hidden" name="_method" id="tierMethod" value="POST">
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold small">{{ __('finance.min-quantity-req') }}</label>
                            <div class="input-group input-group-sm">
                                <input type="number" name="min_qty" id="tierMinQty"
                                       class="form-control" min="1" required>
                                <span class="input-group-text bg-light">{{ __('finance.pcs') }}</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold small">{{ __('finance.max-quantity') }}</label>
                            <div class="input-group input-group-sm">
                                <input type="number" name="max_qty" id="tierMaxQty"
                                       class="form-control" min="1">
                                <span class="input-group-text bg-light">{{ __('finance.pcs') }}</span>
                            </div>
                            <small class="text-muted">{{ __('finance.leave-empty-no-limit') }}</small>
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-semibold small">{{ __('finance.max-discount-allowed-pct-req') }}</label>
                            <div class="input-group input-group-sm">
                                <input type="number" name="max_discount_perc" id="tierDiscount"
                                       class="form-control" min="0" max="100" step="0.01" required
                                       oninput="updateTierPreview()">
                                <span class="input-group-text bg-light">%</span>
                            </div>
                            <small class="text-muted">{{ __('finance.seller-can-offer') }}</small>
                        </div>

                        {{-- Referencia: Target Margin y Min Protection de la lista --}}
                        <div class="col-12">
                            <div class="alert alert-light border py-2 small mb-0" id="tierPreviewBox">
                                <div class="row text-center g-2">
                                    <div class="col-4">
                                        <small class="text-muted d-block">{{ __('finance.target-margin') }}</small>
                                        <span class="badge bg-primary">{{ $priceList->target_margin_percent ?? 0 }}%</span>
                                    </div>
                                    <div class="col-4">
                                        <small class="text-muted d-block">{{ __('finance.min-prot') }}</small>
                                        <span class="badge bg-danger">{{ $priceList->min_protection_percent ?? 0 }}%</span>
                                    </div>
                                    <div class="col-4">
                                        <small class="text-muted d-block">{{ __('finance.min-qty-applied') }}</small>
                                        <span class="badge bg-secondary" id="tierPreviewMinQty">—</span>
                                    </div>
                                </div>
                                <hr class="my-2">
                                <div class="row text-center g-2" id="tierPreviewCalc" style="display:none!important;">
                                    <div class="col-3">
                                        <small class="text-muted d-block">{{ __('finance.gen-price-ref') }}</small>
                                        <strong id="tierPreviewGen" class="text-muted">—</strong>
                                    </div>
                                    <div class="col-3">
                                        <small class="text-muted d-block">{{ __('finance.discount-applied') }}</small>
                                        <strong id="tierPreviewDisc" class="text-primary">—</strong>
                                    </div>
                                    <div class="col-3">
                                        <small class="text-muted d-block">{{ __('finance.final-price') }}</small>
                                        <strong id="tierPreviewFinal" class="text-success">—</strong>
                                    </div>
                                    <div class="col-3">
                                        <small class="text-muted d-block">{{ __('finance.vs-target') }}</small>
                                        <strong id="tierPreviewVsTarget">—</strong>
                                    </div>
                                </div>
                                <div id="tierPreviewAlert" class="mt-2 d-none"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer py-2">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{{ __('finance.cancel') }}</button>
                    <button type="submit" class="btn btn-primary btn-sm">
                        <i class="fas fa-save me-1"></i>{{ __('finance.save-tier') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
var AppUrl      = '{{ url('') }}';
var ListId      = {{ $priceList->id }};
var minQtyReq   = {{ $priceList->min_qty_required }};
var marginMin   = {{ $priceList->margin_min_perc }};
@php
$tiersJson = $tiers->map(function($t) {
    return [
        'id'                => $t->id,
        'min_qty'           => $t->min_qty,
        'max_qty'           => $t->max_qty,
        'max_discount_perc' => $t->max_discount_perc,
    ];
})->values()->toJson();
@endphp
var tiers = {!! $tiersJson !!};

function editTier(id, minQty, maxQty, discount) {
    document.getElementById('formTier').action = AppUrl + '/finance/price-lists/' + ListId + '/tiers/' + id;
    document.getElementById('tierMethod').value  = 'PUT';
    document.getElementById('tierMinQty').value  = minQty;
    document.getElementById('tierMaxQty').value  = maxQty || '';
    document.getElementById('tierDiscount').value = discount;
    document.getElementById('tierModalTitle').innerHTML = '<i class="fas fa-edit me-2"></i>{{ __('finance.edit-tier') }}';
    bootstrap.Modal.getOrCreateInstance(document.getElementById('modalAddTier')).show();
}

document.getElementById('modalAddTier').addEventListener('hidden.bs.modal', function() {
    document.getElementById('formTier').action = '{{ route("finance.price-lists.price-lists.tiers.store", $priceList) }}';
    document.getElementById('tierMethod').value = 'POST';
    document.getElementById('tierMinQty').value = '';
    document.getElementById('tierMaxQty').value = '';
    document.getElementById('tierDiscount').value = '';
    document.getElementById('tierModalTitle').innerHTML = '<i class="fas fa-plus me-2"></i>{{ __('finance.add-volume-tier') }}';
});

// ── Simulador ─────────────────────────────────────────────────────────
function updateTierPreview() {
    var disc      = parseFloat(document.getElementById('tierDiscount').value) || 0;
    var genPrice  = parseFloat(document.getElementById('simGenPrice').value) || 0;
    var cost      = parseFloat(document.getElementById('simCost').value) || 0;
    var minMargin = {{ (float)($priceList->min_protection_percent ?? $priceList->margin_min_perc) }};
    var target    = {{ (float)($priceList->target_margin_percent ?? 0) }};
    var minQty    = document.getElementById('tierMinQty') ? document.getElementById('tierMinQty').value : '—';

    document.getElementById('tierPreviewMinQty').textContent = minQty ? minQty + ' {{ __('finance.pcs') }}' : '—';

    if (genPrice > 0 && disc > 0) {
        var finalPrice = genPrice * (1 - disc / 100);
        var minPrice   = cost > 0 ? cost * (1 + minMargin / 100) : 0;
        var margin     = cost > 0 ? ((finalPrice - cost) / cost * 100) : 0;
        var vsTarget   = margin - target;

        document.getElementById('tierPreviewGen').textContent   = '$' + genPrice.toFixed(2);
        document.getElementById('tierPreviewDisc').textContent  = disc.toFixed(2) + '%';
        document.getElementById('tierPreviewFinal').textContent = '$' + finalPrice.toFixed(2);
        document.getElementById('tierPreviewVsTarget').innerHTML = vsTarget >= 0
            ? '<span class="text-success">+' + vsTarget.toFixed(1) + '% ✓</span>'
            : '<span class="text-danger">' + vsTarget.toFixed(1) + '% ⚠</span>';

        document.getElementById('tierPreviewCalc').style.removeProperty('display');

        var alertEl = document.getElementById('tierPreviewAlert');
        if (finalPrice < minPrice) {
            alertEl.innerHTML = '<div class="alert alert-danger py-1 mb-0 small"><i class="fas fa-lock me-1"></i>{{ __('finance.js-price-below-protection', ['price' => "' + finalPrice.toFixed(2) + '", 'min' => "' + minPrice.toFixed(2) + '"]) }}</div>';
            alertEl.classList.remove('d-none');
        } else if (margin < target) {
            alertEl.innerHTML = '<div class="alert alert-warning py-1 mb-0 small"><i class="fas fa-exclamation-triangle me-1"></i>{{ __('finance.js-margin-below-target', ['margin' => "' + margin.toFixed(1) + '", 'target' => "' + target.toFixed(1) + '"]) }}</div>';
            alertEl.classList.remove('d-none');
        } else {
            alertEl.classList.add('d-none');
        }
    } else {
        document.getElementById('tierPreviewCalc').style.display = 'none';
    }
}

// Actualizar preview cuando cambia Min Qty
document.addEventListener('DOMContentLoaded', function() {
    var minQtyInput = document.getElementById('tierMinQty');
    if (minQtyInput) minQtyInput.addEventListener('input', updateTierPreview);
});

function syncMinMargin(val) {
    var el = document.getElementById('marginMinInput');
    if (el) el.value = val;
    simulate();
}

function syncMinProtection(val) {
    var el = document.getElementById('minProtectionInput');
    if (el) el.value = val;
    simulate();
}

function simulateAll() {
    var genPrice  = parseFloat(document.getElementById('simGenPrice').value) || 0;
    var cost      = parseFloat(document.getElementById('simCost').value) || 0;
    var minMargin = parseFloat(document.getElementById('simMinMargin').value) || 0;
    var minPrice  = cost > 0 ? cost * (1 + minMargin / 100) : 0;

    @php
    $tiersData = $tiers->map(fn($t) => [
        'id'       => $t->id,
        'min_qty'  => $t->min_qty,
        'max_qty'  => $t->max_qty,
        'max_disc' => (float)$t->max_discount_perc,
        'label'    => $t->rangeLabel(),
    ])->values()->toArray();
    @endphp
    var tiers = @json($tiersData);

    if (!tiers.length) {
        document.getElementById('simTiersTable').innerHTML =
            '<tr><td colspan="10" class="text-center text-muted py-3">{{ __('finance.js-no-tiers-defined') }}</td></tr>';
        return;
    }

    var rows = '';
    tiers.forEach(function(tier, idx) {
        var maxDisc    = tier.max_disc;
        var finalPrice = genPrice > 0 ? genPrice * (1 - maxDisc / 100) : 0;
        var margin     = cost > 0 && finalPrice > 0 ? ((finalPrice - cost) / cost * 100) : 0;
        var valid      = finalPrice >= minPrice && finalPrice > 0;
        var discInput  = '<div class="input-group input-group-sm">'
            + '<input type="number" class="form-control text-center tier-disc-input" '
            + 'id="tierDisc_' + tier.id + '" '
            + 'value="' + maxDisc.toFixed(2) + '" '
            + 'min="0" max="' + maxDisc + '" step="0.01" '
            + 'oninput="recalcTierRow(' + tier.id + ', ' + maxDisc + ')">'
            + '<span class="input-group-text bg-light px-1">%</span>'
            + '</div>';

        var validBadge = valid
            ? '<span class="badge bg-success"><i class="fas fa-check"></i></span>'
            : '<span class="badge bg-danger"><i class="fas fa-lock"></i></span>';

        var marginBadge = cost > 0 && finalPrice > 0
            ? (margin >= 30
                ? '<span class="badge bg-success">' + margin.toFixed(1) + '%</span>'
                : (margin >= 15
                    ? '<span class="badge bg-warning text-dark">' + margin.toFixed(1) + '%</span>'
                    : '<span class="badge bg-danger">' + margin.toFixed(1) + '%</span>'))
            : '—';

        var useBtn = '<button type="button" class="btn btn-sm btn-outline-primary py-0 px-2"'
            + ' onclick="useTierInModal(' + tier.id + ', ' + tier.min_qty + ', ' + (tier.max_qty || 'null') + ')"'
            + ' title="{{ __('finance.load-in-edit-modal') }}">'
            + '<i class="fas fa-arrow-up"></i></button>';

        rows += '<tr id="tierRow_' + tier.id + '"'
            + (valid ? '' : ' class="table-danger"') + '>'
            + '<td class="text-center fw-semibold">' + (idx + 1) + '</td>'
            + '<td class="text-center">' + tier.label + '</td>'
            + '<td class="text-center"><span class="badge bg-secondary">' + maxDisc + '%</span></td>'
            + '<td class="text-end">$' + genPrice.toFixed(2) + '</td>'
            + '<td class="text-end text-danger fw-semibold">$' + minPrice.toFixed(2) + '</td>'
            + '<td id="tierDiscCell_' + tier.id + '">' + discInput + '</td>'
            + '<td class="text-end fw-bold" id="tierFinal_' + tier.id + '">$' + finalPrice.toFixed(2) + '</td>'
            + '<td class="text-center" id="tierMargin_' + tier.id + '">' + marginBadge + '</td>'
            + '<td class="text-center" id="tierValid_' + tier.id + '">' + validBadge + '</td>'
            + '<td class="text-center">' + useBtn + '</td>'
            + '</tr>';
    });

    document.getElementById('simTiersTable').innerHTML = rows;
}

function recalcTierRow(tierId, maxDisc) {
    var genPrice  = parseFloat(document.getElementById('simGenPrice').value) || 0;
    var cost      = parseFloat(document.getElementById('simCost').value) || 0;
    var minMargin = parseFloat(document.getElementById('simMinMargin').value) || 0;
    var minPrice  = cost > 0 ? cost * (1 + minMargin / 100) : 0;
    var discEl    = document.getElementById('tierDisc_' + tierId);
    var disc      = parseFloat(discEl.value) || 0;

    // Validar que no exceda el máximo del tier
    if (disc > maxDisc) {
        disc = maxDisc;
        discEl.value = maxDisc.toFixed(2);
        discEl.classList.add('is-invalid');
    } else {
        discEl.classList.remove('is-invalid');
    }

    var finalPrice = genPrice > 0 ? genPrice * (1 - disc / 100) : 0;
    var margin     = cost > 0 && finalPrice > 0 ? ((finalPrice - cost) / cost * 100) : 0;
    var valid      = finalPrice >= minPrice && finalPrice > 0;
    var row        = document.getElementById('tierRow_' + tierId);

    var finalEl = document.getElementById('tierFinal_' + tierId);
    if (finalEl) finalEl.textContent = '$' + finalPrice.toFixed(2);

    var marginEl = document.getElementById('tierMargin_' + tierId);
    if (marginEl) {
        marginEl.innerHTML = cost > 0 && finalPrice > 0
            ? (margin >= 30
                ? '<span class="badge bg-success">' + margin.toFixed(1) + '%</span>'
                : (margin >= 15
                    ? '<span class="badge bg-warning text-dark">' + margin.toFixed(1) + '%</span>'
                    : '<span class="badge bg-danger">' + margin.toFixed(1) + '%</span>'))
            : '—';
    }

    var validEl = document.getElementById('tierValid_' + tierId);
    if (validEl) validEl.innerHTML = valid
        ? '<span class="badge bg-success"><i class="fas fa-check"></i></span>'
        : '<span class="badge bg-danger"><i class="fas fa-lock"></i></span>';

    if (row) {
        row.className = valid ? '' : 'table-danger';
    }
}

function useTierInModal(tierId, minQty, maxQty) {
    var discEl = document.getElementById('tierDisc_' + tierId);
    var disc   = discEl ? parseFloat(discEl.value) || 0 : 0;

    // Pre-llenar el modal Edit Tier
    var modalMinQty  = document.querySelector('#modalEditTier [name="min_qty"]');
    var modalMaxQty  = document.querySelector('#modalEditTier [name="max_qty"]');
    var modalDisc    = document.querySelector('#modalEditTier [name="max_discount_perc"]');

    if (modalMinQty) modalMinQty.value = minQty;
    if (modalMaxQty) modalMaxQty.value = maxQty || '';
    if (modalDisc)   modalDisc.value   = disc;

    // Abrir modal de edición — buscar el botón de editar para ese tier
    var editBtn = document.querySelector('[onclick*="openEditTier(' + tierId + ')"]');
    if (editBtn) {
        editBtn.click();
    } else {
        // Abrir modal directamente
        var modal = document.getElementById('modalEditTier');
        if (modal) bootstrap.Modal.getOrCreateInstance(modal).show();
    }
}

document.addEventListener('DOMContentLoaded', function() {
    simulateAll();
    // Inicializar tooltips
    var tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
    tooltips.forEach(function(el) { new bootstrap.Tooltip(el); });
});

function updatePreview() {
    // El simulador ya hace el preview — no se necesita función adicional
}
</script>

@endsection