{{-- New-Unity ERP | purchases/costs/edit.blade.php | v2.1 | 26/07/2026 --}}
{{-- v2.1 — Tabla comparativa y header del form muestran razón social (name) del proveedor. --}}
{{-- v2.0 — FG redirige desde controller. 4 secciones: producto (product_number), tabla comparativa --}}
{{--         de todos los proveedores (🥇 mejor precio, ✏️ editando, ⚠️ expirado), form, historial. --}}
{{-- v1.0 — Vista inicial de edición de costo. --}}
@extends('layouts.vertical')

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

    {{-- Page Header --}}
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h1 class="h4 mb-0"><i class="fad fa-tags me-2 text-primary"></i>{{ __('purchases.edit-product-cost') }}</h1>
            <nav><ol class="breadcrumb mb-0 small">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">{{ __('purchases.erp') }}</a></li>
                <li class="breadcrumb-item"><a href="{{ route('purchases.costs.index') }}">{{ __('purchases.product-costs') }}</a></li>
                <li class="breadcrumb-item active">{{ __('purchases.edit') }}</li>
            </ol></nav>
        </div>
        <a href="{{ route('purchases.costs.index') }}" class="btn btn-sm btn-secondary">
            <i class="fas fa-arrow-left me-1"></i>{{ __('purchases.back') }}
        </a>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show py-2 mb-3">
            {{ session('success') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
    @if(session('warning'))
        <div class="alert alert-warning alert-dismissible fade show py-2 mb-3">
            {{ session('warning') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show py-2 mb-3">
            <ul class="mb-0 small">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    {{-- ═══════════════════════════════════════════════════════════════════════ --}}
    {{-- SECCIÓN 1 — Producto --}}
    {{-- ═══════════════════════════════════════════════════════════════════════ --}}
    <div class="card mb-3">
        <div class="card-header py-2" style="background:#3d0f5e; color:#fff;">
            <h6 class="mb-0"><i class="fas fa-box me-2"></i>{{ __('purchases.product') }}</h6>
        </div>
        <div class="card-body py-2">
            <div class="row g-2 align-items-center">
                <div class="col-auto">
                    <small class="text-muted d-block">{{ __('purchases.col-part') }}</small>
                    <a href="{{ route('products.show', $cost->product_id) }}"
                       class="fw-bold text-primary text-decoration-none"
                       title="{{ __('purchases.view-product-title') }}" target="_blank">
                        {{ $product->product_number ?? $product->id ?? '—' }}
                    </a>
                </div>
                <div class="col-md-4">
                    <small class="text-muted d-block">{{ __('purchases.product-name-lbl') }}</small>
                    <strong>{{ $product->product_name }}</strong>
                </div>
                <div class="col-md-2">
                    <small class="text-muted d-block">{{ __('purchases.col-sku') }}</small>
                    <span class="text-primary fw-semibold">{{ $product->sku ?? '—' }}</span>
                </div>
                <div class="col-md-2">
                    <small class="text-muted d-block">{{ __('purchases.ean-barcode') }}</small>
                    <span class="small font-monospace">{{ $product->barcode ?? '—' }}</span>
                </div>
                <div class="col-auto">
                    <small class="text-muted d-block">{{ __('purchases.type') }}</small>
                    <span class="badge bg-secondary">{{ $product->material_type ?? '—' }}</span>
                </div>
                <div class="col-md-2">
                    <small class="text-muted d-block">{{ __('purchases.avg-cost') }}</small>
                    <span class="text-primary fw-bold">${{ number_format($cost->avg_cost, 4) }}</span>
                </div>
                <div class="col-md-2">
                    <small class="text-muted d-block">{{ __('purchases.last-purchase') }}</small>
                    <span>{{ $cost->last_purchase_cost > 0 ? '$'.number_format($cost->last_purchase_cost, 4) : '—' }}</span>
                </div>
            </div>
        </div>
    </div>

    {{-- ═══════════════════════════════════════════════════════════════════════ --}}
    {{-- SECCIÓN 2 — Todos los proveedores de este producto --}}
    {{-- ═══════════════════════════════════════════════════════════════════════ --}}
    @php
        $allCosts = collect([$cost])->merge($otherCosts)->sort(function ($a, $b) {
            if ($a->isActive() !== $b->isActive()) {
                return $b->isActive() ? 1 : -1; // activos primero
            }
            return $a->cost <=> $b->cost; // costo ASC dentro del grupo
        })->values();
        $bestActiveId = $allCosts->filter(fn($c) => $c->isActive())->first()?->id;
    @endphp
    <div class="card mb-3">
        <div class="card-header py-2 d-flex justify-content-between align-items-center">
            <h6 class="mb-0">
                <i class="fas fa-truck me-2"></i>{{ __('purchases.suppliers-comparison') }}
                <span class="badge bg-secondary ms-1">{{ $allCosts->count() }}</span>
            </h6>
            @can('costs.create')
            <a href="{{ route('purchases.costs.create', ['product_id' => $cost->product_id]) }}"
               class="btn btn-success btn-sm">
                <i class="fas fa-plus me-1"></i>{{ __('purchases.new-cost') }}
            </a>
            @endcan
        </div>
        <div class="table-responsive">
            <table class="table table-sm align-middle mb-0" style="font-size:0.82rem;">
                <thead>
                    <tr style="border-bottom:2px solid #dee2e6;">
                        <th class="ps-3" style="min-width:180px;">{{ __('purchases.supplier') }}</th>
                        <th class="text-end" style="width:110px;">{{ __('purchases.col-list-cost') }}</th>
                        <th class="text-center" style="width:70px;">{{ __('purchases.col-curr') }}</th>
                        <th class="text-center" style="width:60px;">{{ __('purchases.col-iva') }}</th>
                        <th class="text-end" style="width:120px;">{{ __('purchases.col-total-cost') }}</th>
                        <th class="text-center" style="width:100px;">{{ __('purchases.valid-until') }}</th>
                        <th class="text-center" style="width:100px;">{{ __('purchases.col-status') }}</th>
                        <th class="text-center" style="width:110px;">{{ __('purchases.actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                @foreach($allCosts as $c)
                    @php $isEditing = ($c->id === $cost->id); @endphp
                    <tr class="{{ $isEditing ? 'table-primary' : (!$c->isActive() ? 'opacity-75' : '') }}">
                        <td class="ps-3" style="max-width:200px;">
                            <span class="fw-semibold d-block text-truncate"
                                  title="{{ $c->supplier?->name ?? $c->supplier?->commercial_name ?? __('purchases.generic-all-suppliers') }}">
                                {{ $c->supplier?->name ?? $c->supplier?->commercial_name ?? __('purchases.generic-all-suppliers') }}
                            </span>
                            @if($bestActiveId && $c->id === $bestActiveId)
                                <span class="badge bg-warning text-dark" style="font-size:8px;">&#x1F947; {{ __('purchases.best-price') }}</span>
                            @endif
                        </td>
                        <td class="text-end fw-semibold">${{ number_format($c->cost, 2) }}</td>
                        <td class="text-center text-muted small">{{ $c->currency }}</td>
                        <td class="text-center text-muted small">{{ number_format($c->iva_perc, 0) }}%</td>
                        <td class="text-end fw-bold text-success">${{ number_format($c->total_cost, 2) }}</td>
                        <td class="text-center text-muted small">{{ $c->valid_to?->format('d/m/Y') ?? '—' }}</td>
                        <td class="text-center">
                            @if($c->isActive())
                                <span class="badge bg-success" style="font-size:9px;">{{ __('purchases.js-current') }}</span>
                            @else
                                <span class="badge bg-danger" style="font-size:9px;">&#x26A0; {{ __('purchases.js-expired') }}</span>
                            @endif
                        </td>
                        <td class="text-center">
                            @if($isEditing)
                                <span class="badge bg-primary" style="font-size:9px;">&#x270F; {{ __('purchases.currently-editing') }}</span>
                            @else
                                @can('costs.edit')
                                <a href="{{ route('purchases.costs.edit', $c->id) }}"
                                   class="btn btn-outline-primary btn-sm" style="font-size:11px; padding:2px 8px;">
                                    <i class="fas fa-edit me-1"></i>{{ __('purchases.edit') }}
                                </a>
                                @endcan
                            @endif
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>

    {{-- ═══════════════════════════════════════════════════════════════════════ --}}
    {{-- SECCIÓN 3 + SECCIÓN 4 — Formulario de edición + Historial --}}
    {{-- ═══════════════════════════════════════════════════════════════════════ --}}
    <div class="row g-3">
        <div class="col-md-8">

            <form action="{{ route('purchases.costs.update', $cost) }}" method="POST" id="formCost">
                @csrf @method('PUT')

                {{-- Cost & Taxes --}}
                <div class="card mb-3">
                    <div class="card-header bg-primary text-white py-2">
                        <h6 class="mb-0">
                            <i class="fas fa-dollar-sign me-2"></i>{{ __('purchases.cost-taxes') }}
                            <span class="fw-normal ms-1 opacity-75" style="font-size:0.85rem;">
                                — {{ $cost->supplier?->name ?? $cost->supplier?->commercial_name ?? __('purchases.generic-all-suppliers') }}
                            </span>
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-3">
                                <label class="form-label fw-semibold">{{ __('purchases.currency') }} <span class="text-danger">*</span></label>
                                <select name="currency" class="form-select" id="currency">
                                    <option value="MXN" @selected(old('currency',$cost->currency)=='MXN')>MXN</option>
                                    <option value="USD" @selected(old('currency',$cost->currency)=='USD')>USD</option>
                                    <option value="EUR" @selected(old('currency',$cost->currency)=='EUR')>EUR</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.col-list-cost') }} <span class="text-danger">*</span>
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-list-cost-reason') }}"></i>
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input type="number" name="cost" id="cost" class="form-control"
                                           value="{{ old('cost', $cost->cost) }}"
                                           min="0" step="0.0001" required
                                           oninput="calculateTotals()"
                                           data-previous="{{ $cost->cost }}">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label fw-semibold">{{ __('purchases.iva-perc') }}</label>
                                <div class="input-group">
                                    <input type="number" name="iva_perc" id="iva_perc" class="form-control"
                                           value="{{ old('iva_perc', $cost->iva_perc) }}"
                                           min="0" max="100" step="0.01"
                                           oninput="calculateTotals()">
                                    <span class="input-group-text">%</span>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label fw-semibold">{{ __('purchases.ieps-perc') }}</label>
                                <div class="input-group">
                                    <input type="number" name="ieps_perc" id="ieps_perc" class="form-control"
                                           value="{{ old('ieps_perc', $cost->ieps_perc) }}"
                                           min="0" max="200" step="0.01"
                                           oninput="calculateTotals()">
                                    <span class="input-group-text">%</span>
                                </div>
                            </div>
                        </div>

                        {{-- Totales calculados --}}
                        <div class="row g-2 mt-2 p-3 bg-light rounded">
                            <div class="col-md-3 text-center">
                                <small class="text-muted d-block">{{ __('purchases.iva-amount') }}</small>
                                <strong id="ivaAmount" class="text-primary">$0.00</strong>
                            </div>
                            <div class="col-md-3 text-center">
                                <small class="text-muted d-block">{{ __('purchases.ieps-amount') }}</small>
                                <strong id="iepsAmount" class="text-warning">$0.00</strong>
                            </div>
                            <div class="col-md-3 text-center">
                                <small class="text-muted d-block">{{ __('purchases.col-total-cost') }}</small>
                                <strong id="totalCost" class="text-success fs-5">$0.00</strong>
                            </div>
                            <div class="col-md-3 text-center">
                                <small class="text-muted d-block">{{ __('purchases.vs-previous') }}</small>
                                <strong id="priceChange" class="text-muted">—</strong>
                            </div>
                        </div>

                        {{-- Motivo (aparece si el precio sube) --}}
                        <div id="reasonSection" class="mt-3 d-none">
                            <div class="alert alert-warning py-2 mb-2">
                                <i class="fas fa-exclamation-triangle me-1"></i>
                                <strong>{{ __('purchases.price-increase-detected') }}</strong> {{ __('purchases.reason-required') }}
                            </div>
                            <label class="form-label fw-semibold">
                                {{ __('purchases.reason-for-increase') }} <span class="text-danger">*</span>
                            </label>
                            <textarea name="change_reason" id="change_reason" class="form-control @error('change_reason') is-invalid @enderror"
                                      rows="3" placeholder="{{ __('purchases.ph-increase-reason') }}">{{ old('change_reason') }}</textarea>
                            @error('change_reason')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            <input type="hidden" name="price_increased" id="price_increased" value="0">
                        </div>
                        @if($errors->has('change_reason'))
                        <div class="mt-3">
                            <div class="alert alert-warning py-2 mb-2">
                                <i class="fas fa-exclamation-triangle me-1"></i>
                                <strong>{{ __('purchases.price-increase-detected') }}</strong> {{ __('purchases.reason-required') }}
                            </div>
                            <label class="form-label fw-semibold">
                                {{ __('purchases.reason-for-increase') }} <span class="text-danger">*</span>
                            </label>
                            <textarea name="change_reason" class="form-control is-invalid"
                                      rows="3">{{ old('change_reason') }}</textarea>
                            <div class="invalid-feedback">{{ $errors->first('change_reason') }}</div>
                            <input type="hidden" name="price_increased" value="1">
                        </div>
                        @endif

                    </div>
                </div>

                {{-- Validity & Notes --}}
                <div class="card mb-3">
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">{{ __('purchases.valid-from') }}</label>
                                <input type="date" name="valid_from" class="form-control"
                                       value="{{ old('valid_from', $cost->valid_from?->toDateString()) }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">{{ __('purchases.valid-until') }}</label>
                                <input type="date" name="valid_to" class="form-control"
                                       value="{{ old('valid_to', $cost->valid_to?->toDateString()) }}">
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-semibold">{{ __('purchases.notes') }}</label>
                                <textarea name="notes" class="form-control" rows="2">{{ old('notes', $cost->notes) }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="d-flex justify-content-between mb-4">
                    <a href="{{ route('purchases.costs.index') }}" class="btn btn-secondary">
                        <i class="fas fa-times me-1"></i>{{ __('purchases.cancel') }}
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-1"></i>{{ __('purchases.save-changes') }}
                    </button>
                </div>
            </form>

        </div>

        {{-- SECCIÓN 4 — Historial de precios --}}
        <div class="col-md-4">
            <div class="card">
                <div class="card-header py-2 bg-light">
                    <h6 class="mb-0"><i class="fas fa-history me-2"></i>{{ __('purchases.price-history') }}</h6>
                </div>
                <div class="card-body p-0" style="max-height:500px; overflow-y:auto;">
                    @forelse($cost->history as $h)
                    <div class="d-flex align-items-start p-3 border-bottom">
                        <div class="me-2 mt-1">
                            <span class="badge {{ $h->directionBadge() }} rounded-pill" style="font-size:10px;">
                                {{ $h->directionLabel() }}
                            </span>
                        </div>
                        <div class="flex-grow-1">
                            <div class="small">
                                <span class="text-muted">${{ number_format($h->cost_previous, 4) }}</span>
                                <i class="fas fa-arrow-right mx-1 text-muted" style="font-size:9px;"></i>
                                <strong>${{ number_format($h->cost_new, 4) }} {{ $h->currency }}</strong>
                            </div>
                            <div class="small text-muted">{{ $h->costTypeLabel() }} · {{ $h->sourceLabel() }}</div>
                            @if($h->change_reason)
                                <div class="small text-warning mt-1">
                                    <i class="fas fa-comment me-1"></i>{{ $h->change_reason }}
                                </div>
                            @endif
                            <div style="font-size:10px;" class="text-muted mt-1">
                                {{ $h->user?->name ?? __('purchases.system') }} — {{ $h->created_at->format('d-m-Y H:i') }}
                            </div>
                        </div>
                    </div>
                    @empty
                    <p class="text-muted small p-3 mb-0">{{ __('purchases.no-price-history') }}</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

@section('scripts')
@parent
<script>
document.addEventListener('DOMContentLoaded', function() {

    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function(el) {
        new bootstrap.Tooltip(el, { trigger: 'hover' });
    });

    var previousCost = parseFloat(document.getElementById('cost').dataset.previous) || 0;

    window.calculateTotals = function() {
        var cost     = parseFloat(document.getElementById('cost').value) || 0;
        var ivaperc  = parseFloat(document.getElementById('iva_perc').value) || 0;
        var iepsPerc = parseFloat(document.getElementById('ieps_perc').value) || 0;

        var ivaAmt  = cost * (ivaperc / 100);
        var iepsAmt = cost * (iepsPerc / 100);
        var total   = cost + ivaAmt + iepsAmt;
        var diff    = cost - previousCost;

        document.getElementById('ivaAmount').textContent  = '$' + ivaAmt.toFixed(2);
        document.getElementById('iepsAmount').textContent = '$' + iepsAmt.toFixed(2);
        document.getElementById('totalCost').textContent  = '$' + total.toFixed(2);

        var changeEl       = document.getElementById('priceChange');
        var reasonSection  = document.getElementById('reasonSection');
        var priceIncreased = document.getElementById('price_increased');

        if (cost > previousCost) {
            changeEl.textContent = '▲ +$' + diff.toFixed(4);
            changeEl.className = 'text-danger fw-bold';
            reasonSection.classList.remove('d-none');
            priceIncreased.value = '1';
        } else if (cost < previousCost) {
            changeEl.textContent = '▼ -$' + Math.abs(diff).toFixed(4);
            changeEl.className = 'text-success fw-bold';
            reasonSection.classList.add('d-none');
            priceIncreased.value = '0';
        } else {
            changeEl.textContent = '{{ __('purchases.js-no-change') }}';
            changeEl.className = 'text-muted';
            reasonSection.classList.add('d-none');
            priceIncreased.value = '0';
        }
    };

    document.getElementById('currency').addEventListener('change', calculateTotals);
    calculateTotals();
});
</script>
@endsection