{{-- New-Unity ERP | finance/price-lists/tiers.blade.php | v1.2 | 04/07/2026 --}}
{{-- v1.2 — Removido page-info que rompía el layout. --}}
{{-- v1.1 — Page Info agregado (descartado). --}}
{{-- v1.0 — Configuración de tiers de descuento por volumen para lista MAY. --}}
@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">
                        <div class="mb-3">
                            <label class="form-label fw-semibold small">{{ __('finance.pricing-model-req') }}</label>
                            <select name="pricing_model" class="form-select form-select-sm">
                                <option value="fixed" @selected($priceList->pricing_model === 'fixed')>
                                    {{ __('finance.fixed-option') }}
                                </option>
                                <option value="volume_discount" @selected($priceList->pricing_model === 'volume_discount')>
                                    {{ __('finance.volume-discount-option') }}
                                </option>
                            </select>
                        </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"
                                       class="form-control" min="0" max="100" step="0.01"
                                       value="{{ $priceList->margin_min_perc }}">
                                <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') }}</h6>
                </div>
                <div class="card-body">
                    <div class="row g-3 align-items-end">
                        <div class="col-md-3">
                            <label class="form-label small fw-semibold">{{ __('finance.gen-price') }}</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="simulate()">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small fw-semibold">{{ __('finance.cost-word') }}</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="simulate()">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small fw-semibold">{{ __('finance.quantity') }}</label>
                            <input type="number" id="simQty" class="form-control form-control-sm"
                                   value="500" oninput="simulate()">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small fw-semibold">{{ __('finance.discount-pct') }}</label>
                            <div class="input-group input-group-sm">
                                <input type="number" id="simDiscount" class="form-control"
                                       value="0" min="0" max="100" step="0.01" oninput="simulate()">
                                <span class="input-group-text">%</span>
                            </div>
                        </div>
                    </div>
                    <div id="simResult" class="mt-3 p-3 rounded" style="background:#f8f9fa;">
                        <div class="row text-center">
                            <div class="col-md-3">
                                <small class="text-muted d-block">{{ __('finance.tier-applied') }}</small>
                                <strong id="simTier">—</strong>
                            </div>
                            <div class="col-md-3">
                                <small class="text-muted d-block">{{ __('finance.max-allowed-disc') }}</small>
                                <strong id="simMaxDisc" class="text-info">—</strong>
                            </div>
                            <div class="col-md-3">
                                <small class="text-muted d-block">{{ __('finance.min-price') }}</small>
                                <strong id="simMinPrice" class="text-warning">—</strong>
                            </div>
                            <div class="col-md-3">
                                <small class="text-muted d-block">{{ __('finance.final-price') }}</small>
                                <strong id="simFinalPrice" class="text-success fs-5">—</strong>
                            </div>
                        </div>
                        <div id="simAlert" class="mt-2 small d-none"></div>
                    </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>
                                <span class="input-group-text bg-light">%</span>
                            </div>
                            <small class="text-muted">{{ __('finance.seller-can-offer') }}</small>
                        </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 simulate() {
    var genPrice = parseFloat(document.getElementById('simGenPrice').value) || 0;
    var cost     = parseFloat(document.getElementById('simCost').value) || 0;
    var qty      = parseFloat(document.getElementById('simQty').value) || 0;
    var discount = parseFloat(document.getElementById('simDiscount').value) || 0;

    // Buscar tier aplicable
    var tier = null;
    if (qty >= minQtyReq) {
        tier = tiers.find(function(t) {
            return qty >= t.min_qty && (t.max_qty === null || qty <= t.max_qty);
        });
    }

    var minPrice = cost > 0 ? cost * (1 + marginMin/100) : 0;
    var maxDisc  = tier ? tier.max_discount_perc : 0;
    var finalPrice = genPrice * (1 - discount/100);

    document.getElementById('simTier').textContent    = tier ? tier.min_qty + '-' + (tier.max_qty || '∞') + ' {{ __('finance.pcs') }}' : qty < minQtyReq ? '{{ __('finance.js-below-min-qty') }}' : '{{ __('finance.js-no-tier') }}';
    document.getElementById('simMaxDisc').textContent = tier ? '{{ __('finance.js-up-to') }}' + maxDisc + '%' : '—';
    document.getElementById('simMinPrice').textContent = minPrice > 0 ? '$' + minPrice.toLocaleString('es-MX', {minimumFractionDigits:2}) : '—';
    document.getElementById('simFinalPrice').textContent = finalPrice > 0 ? '$' + finalPrice.toLocaleString('es-MX', {minimumFractionDigits:2}) : '—';

    var alert = document.getElementById('simAlert');
    alert.className = 'mt-2 small';

    if (qty < minQtyReq && qty > 0) {
        alert.className += ' alert alert-warning py-1';
        alert.textContent = '⚠ {{ __('finance.js-qty-below-min', ['qty' => "' + minQtyReq + '"]) }}';
    } else if (discount > maxDisc && tier) {
        alert.className += ' alert alert-danger py-1';
        alert.textContent = '❌ {{ __('finance.js-disc-exceeds', ['disc' => "' + discount + '", 'max' => "' + maxDisc + '"]) }}';
    } else if (finalPrice < minPrice && minPrice > 0) {
        alert.className += ' alert alert-danger py-1';
        alert.textContent = '❌ {{ __('finance.js-price-below-margin', ['price' => "' + finalPrice.toFixed(2) + '", 'margin' => "' + marginMin + '", 'min' => "' + minPrice.toFixed(2) + '"]) }}';
    } else if (tier && discount <= maxDisc && finalPrice >= minPrice) {
        alert.className += ' alert alert-success py-1';
        alert.textContent = '✅ {{ __('finance.js-valid-price', ['margin' => "' + (((finalPrice - cost)/cost)*100).toFixed(1) + '"]) }}';
    } else {
        alert.classList.add('d-none');
    }
}

document.addEventListener('DOMContentLoaded', simulate);
</script>

@endsection