{{-- New-Unity ERP | purchases/orders/create.blade.php | v1.3 | 26/07/2026 --}}
{{-- v1.3 — Botón "Agregar Producto" deshabilitado sin proveedor (tooltip). --}}
{{--         Revertir select al cancelar modal de cambio de proveedor. --}}
{{--         Guarda en openProductSearch() si no hay proveedor seleccionado. --}}
{{-- v1.2 — Rediseño completo: panel proveedor con AJAX, dirección de entrega --}}
{{--         pre-llenada desde BillingContributor, layout tipo PO profesional. --}}
{{-- v1.1 — Modal con filtros Group/Category/Brand. FG excluido. --}}
{{-- v1.0 — Formulario inicial. --}}
@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-file-invoice me-2 text-primary"></i>
                @if($fromRfq ?? null)
                    {{ __('purchases.new-po-from-rfq', ['num' => $fromRfq->rfq_number]) }}
                @else
                    {{ __('purchases.new-po-title') }}
                @endif
            </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.orders.index') }}">{{ __('purchases.purchase-orders') }}</a></li>
                <li class="breadcrumb-item active">{{ __('purchases.crumb-new') }}</li>
            </ol></nav>
        </div>
        <a href="{{ route('purchases.orders.index') }}" class="btn btn-secondary btn-sm">
            <i class="fas fa-arrow-left me-1"></i>{{ __('purchases.back') }}
        </a>
    </div>

    @if($fromRfq ?? null)
    <div class="alert alert-success alert-dismissible fade show py-2 mb-3 small">
        <i class="fas fa-check-circle me-2"></i>
        {!! __('purchases.rfq-awarded-po-note', ['num' => $fromRfq->rfq_number, 'supplier' => $fromRfq->awardedSupplier?->commercial_name]) !!}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    <form action="{{ route('purchases.orders.store') }}" method="POST" id="formPO">
        @csrf
        @if($fromRfq ?? null)
            <input type="hidden" name="rfq_id" value="{{ $fromRfq->id }}">
        @endif

        <div class="row g-3">

            {{-- ════════════════════════════════════════════════ --}}
            {{-- LEFT COLUMN                                      --}}
            {{-- ════════════════════════════════════════════════ --}}
            <div class="col-md-8">

                {{-- ── Panel superior: Empresa ↔ PO Info ── --}}
                <div class="card mb-3">
                    <div class="card-body p-0">
                        <div class="row g-0">

                            {{-- Empresa emisora --}}
                            <div class="col-md-6 p-3 border-end">
                                <div class="d-flex align-items-center gap-2 mb-2">
                                    <i class="fad fa-building text-primary fa-lg"></i>
                                    <strong class="text-primary" style="font-size:13px;">
                                        {{ $company->name ?? config('app.name') }}
                                    </strong>
                                </div>
                                <div class="small text-muted">
                                    <div>{{ __('purchases.rfc') }}: <strong class="text-dark">{{ $company->rfc ?? '—' }}</strong></div>
                                    <div>{{ $company->street ?? '' }}
                                        @if($company->exterior), {{ $company->exterior }}@endif
                                    </div>
                                    <div>{{ $company->colony ?? '' }}, {{ $company->city ?? '' }}</div>
                                    <div>{{ $company->state ?? '' }} CP {{ $company->postal_code ?? '' }}</div>
                                </div>
                            </div>

                            {{-- PO Info --}}
                            <div class="col-md-6 p-3">
                                <div class="row g-2">
                                    <div class="col-6">
                                        <label class="form-label fw-semibold small mb-1">{{ __('purchases.po-number') }}</label>
                                        <input type="text" class="form-control form-control-sm bg-light"
                                               value="{{ $nextNumber }}" readonly>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label fw-semibold small mb-1">{{ __('purchases.currency') }} *</label>
                                        <select name="currency" class="form-select form-select-sm">
                                            <option value="MXN" @selected(old('currency', ($fromRfq ?? null)?->currency ?? 'MXN') === 'MXN')>MXN</option>
                                            <option value="USD" @selected(old('currency', ($fromRfq ?? null)?->currency) === 'USD')>USD</option>
                                            <option value="EUR" @selected(old('currency', ($fromRfq ?? null)?->currency) === 'EUR')>EUR</option>
                                        </select>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label fw-semibold small mb-1">{{ __('purchases.expected-date') }}</label>
                                        <input type="date" name="expected_date" class="form-control form-control-sm"
                                               value="{{ old('expected_date') }}">
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label fw-semibold small mb-1">{{ __('purchases.payment-terms') }}</label>
                                        <input type="text" name="payment_terms" class="form-control form-control-sm"
                                               placeholder="{{ __('purchases.ph-eg-30days-simple') }}"
                                               value="{{ old('payment_terms', ($fromRfq ?? null)?->awardedQuote?->payment_terms) }}">
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label fw-semibold small mb-1">{{ __('purchases.supplier-reference') }}</label>
                                        <input type="text" name="supplier_reference" class="form-control form-control-sm"
                                               placeholder="{{ __('purchases.ph-supplier-order-num') }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ── Proveedor ── --}}
                <div class="card mb-3">
                    <div class="card-header py-2" style="background:#3d0f5e; color:#fff;">
                        <h6 class="mb-0"><i class="fas fa-truck me-2"></i>{{ __('purchases.supplier') }}</h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-8">
                                <label class="form-label fw-semibold small mb-1">{{ __('purchases.supplier') }} *</label>
                                <select name="supplier_id" id="supplierId" class="form-select" required
                                        onchange="onSupplierChange()">
                                    <option value="">{{ __('purchases.select-supplier-opt') }}</option>
                                    @foreach($suppliers as $s)
                                        <option value="{{ $s->id }}"
                                            @selected(old('supplier_id', ($fromRfq ?? null)?->awarded_supplier_id) == $s->id)>
                                            {{ $s->commercial_name ?? $s->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4 d-flex align-items-end">
                                <button type="button" class="btn btn-sm btn-outline-primary w-100"
                                        onclick="$('#modalQuickSupplier').modal('show')">
                                    <i class="fas fa-plus me-1"></i>{{ __('purchases.new-supplier') }}
                                </button>
                            </div>
                        </div>

                        {{-- Panel datos del proveedor (carga por AJAX) --}}
                        <div id="supplierPanel" class="mt-3 p-3 bg-light rounded d-none">
                            <div class="row g-2 small">
                                <div class="col-md-4">
                                    <span class="text-muted d-block" style="font-size:10px;">{{ __('purchases.rfc') }}</span>
                                    <strong id="spRfc">—</strong>
                                </div>
                                <div class="col-md-4">
                                    <span class="text-muted d-block" style="font-size:10px;">{{ __('purchases.phone') }}</span>
                                    <span id="spPhone">—</span>
                                </div>
                                <div class="col-md-4">
                                    <span class="text-muted d-block" style="font-size:10px;">{{ __('purchases.credit-days-short') }}</span>
                                    <span id="spCredit">—</span>
                                </div>
                                <div class="col-md-6">
                                    <span class="text-muted d-block" style="font-size:10px;">{{ __('purchases.address') }}</span>
                                    <span id="spAddress">—</span>
                                </div>
                                <div class="col-md-6">
                                    <span class="text-muted d-block" style="font-size:10px;">
                                        <i class="fas fa-user me-1"></i>{{ __('purchases.attention-to') }}
                                    </span>
                                    <strong id="spContact">—</strong>
                                    <span id="spContactEmail" class="text-muted d-block" style="font-size:10px;"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ── Productos ── --}}
                <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-boxes me-2"></i>{{ __('purchases.products-title') }}</h6>
                        <span id="btnAddProductWrapper"
                              data-bs-toggle="tooltip"
                              data-bs-placement="left"
                              title="{{ __('purchases.js-select-supplier-first') }}">
                            <button type="button" id="btnAddProduct"
                                    class="btn btn-sm" disabled
                                    style="background:#000; color:#fff; pointer-events:none;"
                                    onclick="openProductSearch()">
                                <i class="fas fa-search me-1"></i>{{ __('purchases.add-product') }}
                            </button>
                        </span>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-sm align-middle mb-0" style="font-size:0.82rem;">
                                <thead class="table-light">
                                    <tr>
                                        <th class="ps-3" style="min-width:220px;">{{ __('purchases.product') }}</th>
                                        <th style="width:90px;">{{ __('purchases.qty') }}</th>
                                        <th style="width:70px;">{{ __('purchases.unit') }}</th>
                                        <th style="width:110px;">{{ __('purchases.unit-cost') }}</th>
                                        <th style="width:70px;">{{ __('purchases.iva-pct-col') }}</th>
                                        <th style="width:110px;" class="text-end">{{ __('purchases.total-col') }}</th>
                                        <th style="width:40px;"></th>
                                    </tr>
                                </thead>
                                <tbody id="poItemsBody">
                                    @if(($fromRfq ?? null) && ($rfqItems ?? collect())->isNotEmpty())
                                        @foreach($rfqItems as $i => $qi)
                                        <tr id="po_row_{{ $i }}">
                                            <td class="ps-2">
                                                <input type="hidden" name="items[{{ $i }}][product_id]" value="{{ $qi->product_id }}">
                                                <span class="fw-semibold small">{{ $qi->product?->product_name }}</span>
                                                <br><small class="text-muted">{{ __('purchases.sku-label') }} {{ $qi->product?->sku }}</small>
                                            </td>
                                            <td>
                                                <input type="number" name="items[{{ $i }}][quantity]"
                                                       class="form-control form-control-sm"
                                                       value="{{ $qi->rfqItem?->quantity ?? 1 }}"
                                                       min="0.01" step="0.01" style="width:80px;"
                                                       oninput="recalcRow({{ $i }})">
                                            </td>
                                            <td>
                                                <input type="text" name="items[{{ $i }}][unit]"
                                                       class="form-control form-control-sm text-center"
                                                       value="{{ $qi->product?->unity ?? 'H87' }}"
                                                       style="width:60px;">
                                            </td>
                                            <td>
                                                <input type="number" name="items[{{ $i }}][unit_cost]"
                                                       class="form-control form-control-sm"
                                                       value="{{ $qi->effectiveCost() }}"
                                                       min="0" step="0.01" style="width:95px;"
                                                       readonly title="{{ __('purchases.price-locked-rfq') }}">
                                            </td>
                                            <td>
                                                <input type="number" name="items[{{ $i }}][iva_perc]"
                                                       class="form-control form-control-sm"
                                                       value="{{ $qi->iva_perc ?? 16 }}"
                                                       min="0" max="100" style="width:60px;"
                                                       oninput="recalcRow({{ $i }})">
                                            </td>
                                            <td class="text-end fw-bold" id="row_total_{{ $i }}">
                                                ${{ number_format($qi->total_cost, 2) }}
                                            </td>
                                            <td></td>
                                        </tr>
                                        @endforeach
                                    @endif
                                </tbody>
                                <tfoot class="table-light">
                                    <tr>
                                        <td colspan="5" class="text-end fw-bold small">{{ __('purchases.total-colon') }}</td>
                                        <td class="text-end fw-bold text-success" id="poGrandTotal">$0.00</td>
                                        <td></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        <div id="noItemsMsg" class="{{ (($fromRfq ?? null) && ($rfqItems ?? collect())->isNotEmpty()) ? 'd-none' : '' }} text-center text-muted py-4">
                            <i class="fad fa-box-open fa-2x d-block mb-2 opacity-25"></i>
                            {!! __('purchases.no-products-added-po', ['btn' => '<strong>'.__('purchases.add-product').'</strong>']) !!}
                        </div>
                    </div>
                </div>


            </div>

            {{-- ════════════════════════════════════════════════ --}}
            {{-- RIGHT COLUMN                                     --}}
            {{-- ════════════════════════════════════════════════ --}}
            <div class="col-md-4">

                {{-- Summary --}}
                <div class="card mb-3">
                    <div class="card-header py-2" style="background:#3d0f5e; color:#fff;">
                        <h6 class="mb-0"><i class="fas fa-calculator me-2"></i>{{ __('purchases.summary') }}</h6>
                    </div>
                    <div class="card-body">
                        <div class="d-flex justify-content-between mb-2 small">
                            <span class="text-muted">{{ __('purchases.items-lbl') }}</span>
                            <strong id="summaryItems">0</strong>
                        </div>
                        <div class="d-flex justify-content-between mb-2 small">
                            <span class="text-muted">{{ __('purchases.subtotal-lbl') }}</span>
                            <strong id="summarySubtotal">$0.00</strong>
                        </div>
                        <div class="d-flex justify-content-between mb-2 small">
                            <span class="text-muted">{{ __('purchases.taxes-iva-lbl') }}</span>
                            <strong id="summaryTaxes">$0.00</strong>
                        </div>
                        <hr class="my-2">
                        <div class="d-flex justify-content-between">
                            <span class="fw-bold">{{ __('purchases.total-colon') }}</span>
                            <strong class="text-success fs-5" id="summaryTotal">$0.00</strong>
                        </div>
                    </div>
                </div>

                {{-- Delivery & Notes --}}
                <div class="card mb-3">
                    <div class="card-header py-2" style="background:#3d0f5e; color:#fff;">
                        <h6 class="mb-0"><i class="fas fa-map-marker-alt me-2"></i>{{ __('purchases.delivery-notes') }}</h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label fw-semibold small mb-1">
                                {{ __('purchases.delivery-address') }}
                                <small class="text-muted ms-1">{{ __('purchases.prefilled-company') }}</small>
                            </label>
                            <textarea name="delivery_address" id="deliveryAddress"
                                      class="form-control" rows="3">{{ old('delivery_address', $companyAddress) }}</textarea>
                        </div>
                        <div>
                            <label class="form-label fw-semibold small mb-1">{{ __('purchases.notes') }}</label>
                            <textarea name="notes" class="form-control" rows="3"
                                      placeholder="{{ __('purchases.ph-order-notes') }}">{{ old('notes') }}</textarea>
                        </div>
                    </div>
                </div>

            </div>
        </div>

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

    </form>

    {{-- ── Modal búsqueda de productos ── --}}
    <div class="modal fade" id="modalSearchPOProduct" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header py-2" style="background:#3d0f5e; color:#fff;">
                    <h5 class="modal-title">
                        <i class="fas fa-search me-2"></i>{{ __('purchases.select-product-modal') }}
                        <small class="ms-2 opacity-75" style="font-size:0.72rem;">{{ __('purchases.tr-rm-sv-hint') }}</small>
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-2 mb-3">
                        <div class="col-md-3">
                            <select id="poGroupSelect" class="form-select form-select-sm"
                                    onchange="poLoadCategories()">
                                <option value="">{{ __('purchases.group-placeholder') }}</option>
                                @foreach($groups as $g)
                                    <option value="{{ $g->id }}">{{ $g->es_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select id="poCategorySelect" class="form-select form-select-sm"
                                    onchange="poLoadBrands()">
                                <option value="">{{ __('purchases.category-placeholder') }}</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select id="poBrandSelect" class="form-select form-select-sm">
                                <option value="">{{ __('purchases.brand-placeholder') }}</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <button type="button" class="btn btn-success btn-sm w-100"
                                    onclick="poFilterProducts()">
                                <i class="fas fa-filter me-1"></i>{{ __('purchases.filter') }}
                            </button>
                        </div>
                    </div>
                    <div class="input-group input-group-sm mb-3">
                        <input type="text" id="poProductSearch" class="form-control"
                               placeholder="{{ __('purchases.ph-search-name-sku') }}"
                               onkeypress="if(event.key==='Enter') poSearchByText()">
                        <button class="btn btn-outline-primary" onclick="poSearchByText()">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                    <div class="table-responsive" style="max-height:380px; overflow-y:auto;">
                        <table class="table table-sm table-hover align-middle">
                            <thead class="table-light sticky-top">
                                <tr>
                                    <th>{{ __('purchases.product') }}</th>
                                    <th class="text-center">{{ __('purchases.type') }}</th>
                                    <th class="text-end">{{ __('purchases.unit-cost') }}</th>
                                    <th class="text-center">{{ __('purchases.iva-col') }}</th>
                                    <th class="text-end">{{ __('purchases.col-total-cost') }}</th>
                                    <th class="text-center">{{ __('purchases.col-action') }}</th>
                                </tr>
                            </thead>
                            <tbody id="poProductRows">
                                <tr><td colspan="6" class="text-center text-muted py-4">
                                    {{ __('purchases.select-filters-search-hint') }}
                                </td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Modal Quick Add Supplier ── --}}
    <div class="modal fade" id="modalQuickSupplier" 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"><i class="fas fa-plus me-2"></i>{{ __('purchases.quick-add-supplier') }}</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <form id="formQuickSupplier">
                    @csrf
                    <div class="modal-body">
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label fw-semibold small">{{ __('purchases.legal-name') }} *</label>
                                <input type="text" name="name" class="form-control" required
                                       placeholder="{{ __('purchases.ph-company-legal') }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold small">{{ __('purchases.commercial-name') }}</label>
                                <input type="text" name="commercial_name" class="form-control"
                                       placeholder="{{ __('purchases.ph-trade-name') }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold small">{{ __('purchases.rfc') }}</label>
                                <input type="text" name="rfc" class="form-control"
                                       placeholder="{{ __('purchases.rfc') }}" style="text-transform:uppercase;">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold small">{{ __('purchases.phone') }}</label>
                                <input type="text" name="phone" class="form-control" placeholder="{{ __('purchases.phone') }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold small">{{ __('purchases.email') }}</label>
                                <input type="email" name="email" class="form-control" placeholder="{{ __('purchases.email') }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold small">{{ __('purchases.role') }} *</label>
                                <select name="supplier_role" class="form-select" required>
                                    <option value="finished_goods">{{ __('purchases.role-finished-goods') }}</option>
                                    <option value="raw_material">{{ __('purchases.role-raw-material') }}</option>
                                    <option value="services">{{ __('purchases.role-services') }}</option>
                                    <option value="indirect">{{ __('purchases.role-indirect-mro') }}</option>
                                    <option value="fixed_asset">{{ __('purchases.role-fixed-asset') }}</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold small">{{ __('purchases.type') }} *</label>
                                <select name="type" class="form-select" required>
                                    <option value="nacional">{{ __('purchases.type-domestic') }}</option>
                                    <option value="extranjero">{{ __('purchases.type-foreign') }}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer py-2">
                        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{{ __('purchases.cancel') }}</button>
                        <button type="button" class="btn btn-primary btn-sm" id="btnSaveQuickSupplier">
                            <i class="fas fa-save me-1"></i>{{ __('purchases.save-select') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Modal: confirmar limpiar productos al cambiar proveedor --}}
    <div class="modal fade" id="modalClearProducts" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header py-2" style="background:#3d0f5e; color:#fff;">
                    <h6 class="modal-title mb-0">
                        <i class="fas fa-exclamation-triangle me-2"></i>{{ __('purchases.change-supplier') }}
                    </h6>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body small">
                    {{ __('purchases.change-supplier-msg') }}
                </div>
                <div class="modal-footer py-2">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{{ __('purchases.cancel') }}</button>
                    <button type="button" class="btn btn-warning btn-sm" id="btnConfirmClearProducts">
                        <i class="fas fa-check me-1"></i>{{ __('purchases.yes-clear-list') }}
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>

<script>
var AppUrl = '{{ url('') }}';
var poIdx  = {{ ($fromRfq ?? null) ? ($rfqItems ?? collect())->count() : 0 }};
var _prevSupplierId      = '{{ old('supplier_id', ($fromRfq ?? null)?->awarded_supplier_id ?? '') }}';
var _pendingNewSupplierId = null;

// ── Habilitar / deshabilitar botón "Agregar Producto" ────────────────────
function toggleAddProductBtn(enabled) {
    var btn     = document.getElementById('btnAddProduct');
    var wrapper = document.getElementById('btnAddProductWrapper');
    if (!btn) return;
    btn.disabled            = !enabled;
    btn.style.pointerEvents = enabled ? '' : 'none';
    var tt = wrapper ? bootstrap.Tooltip.getInstance(wrapper) : null;
    if (tt) { enabled ? tt.disable() : tt.enable(); }
}

// ── Formato dinero ────────────────────────────────────────────────────────
function fmtMoney(n) {
    return '$' + parseFloat(n).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

document.addEventListener('DOMContentLoaded', function() {
    recalcAll();

    // Tooltip en wrapper del botón Agregar Producto
    var wrapper = document.getElementById('btnAddProductWrapper');
    if (wrapper) new bootstrap.Tooltip(wrapper, { trigger: 'hover' });

    // Si viene pre-seleccionado (RFQ), cargar datos del proveedor y habilitar botón
    var preSelected = document.getElementById('supplierId').value;
    if (preSelected) {
        loadSupplierInfo(preSelected);
        toggleAddProductBtn(true);
    }

    // Confirmar limpiar productos
    document.getElementById('btnConfirmClearProducts').addEventListener('click', function() {
        document.getElementById('poItemsBody').innerHTML = '';
        recalcSummary();
        var newId = _pendingNewSupplierId || document.getElementById('supplierId').value;
        _pendingNewSupplierId = null; // limpiar ANTES de hide() para que hidden.bs.modal no revierta
        if (newId) {
            loadSupplierInfo(newId);  // loadSupplierInfo actualiza _prevSupplierId
            toggleAddProductBtn(true);
        }
        bootstrap.Modal.getInstance(document.getElementById('modalClearProducts')).hide();
    });

    // Al cerrar el modal sin confirmar → revertir el select al proveedor anterior
    document.getElementById('modalClearProducts').addEventListener('hidden.bs.modal', function() {
        if (_pendingNewSupplierId !== null) {
            document.getElementById('supplierId').value = _prevSupplierId;
            _pendingNewSupplierId = null;
        }
    });

    // Quick Add Supplier
    document.getElementById('btnSaveQuickSupplier').addEventListener('click', function() {
        var form = document.getElementById('formQuickSupplier');
        var data = new FormData(form);
        data.append('status', 'active');
        data.append('currency', 'MXN');

        fetch(AppUrl + '/purchases/suppliers', {
            method: 'POST',
            body: data,
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(r => r.json())
        .then(res => {
            if (res.success) {
                // Agregar al dropdown y seleccionar
                var opt = new Option(res.supplier.commercial_name || res.supplier.name, res.supplier.id, true, true);
                document.getElementById('supplierId').add(opt);
                document.getElementById('supplierId').value = res.supplier.id;
                loadSupplierInfo(res.supplier.id);
                bootstrap.Modal.getInstance(document.getElementById('modalQuickSupplier')).hide();
                form.reset();
                showNotification('{{ __('purchases.js-supplier-created') }}', 'success');
            } else {
                showNotification(res.message || '{{ __('purchases.js-error-saving-supplier') }}', 'error');
            }
        })
        .catch(() => showNotification('{{ __('purchases.js-error-saving-supplier') }}', 'error'));
    });
});

// ── Supplier change ────────────────────────────────────────────────────────
window.onSupplierChange = function() {
    var newId = document.getElementById('supplierId').value;
    if (document.querySelectorAll('#poItemsBody tr').length > 0 && _prevSupplierId && _prevSupplierId !== newId) {
        // Hay productos → pedir confirmación antes de limpiar
        _pendingNewSupplierId = newId;
        bootstrap.Modal.getOrCreateInstance(document.getElementById('modalClearProducts')).show();
    } else {
        _prevSupplierId = newId;
        if (newId) {
            loadSupplierInfo(newId);
            toggleAddProductBtn(true);
        } else {
            toggleAddProductBtn(false);
        }
    }
};

// ── Cargar info del proveedor por AJAX ───────────────────────────────────
function loadSupplierInfo(id) {
    fetch(AppUrl + '/purchases/suppliers/' + id + '/info')
    .then(r => r.json())
    .then(s => {
        document.getElementById('spRfc').textContent      = s.rfc || '—';
        document.getElementById('spPhone').textContent    = s.phone || '—';
        document.getElementById('spCredit').textContent   = (s.credit_days || 0) + ' {{ __('purchases.js-days') }}';

        var addr = '';
        if (s.main_address) {
            var a = s.main_address;
            addr = [a.street, a.exterior_number, a.neighborhood, a.city, a.state].filter(Boolean).join(', ');
        }
        document.getElementById('spAddress').textContent  = addr || '—';
        document.getElementById('spContact').textContent  = s.main_contact?.name || '—';
        document.getElementById('spContactEmail').textContent = s.main_contact?.email || '';

        // Pre-llenar payment terms si está vacío
        var ptField = document.querySelector('[name="payment_terms"]');
        if (ptField && !ptField.value && s.credit_days) {
            ptField.value = s.credit_days + ' {{ __('purchases.js-days-net') }}';
        }

        document.getElementById('supplierPanel').classList.remove('d-none');
        _prevSupplierId = id;
    })
    .catch(() => document.getElementById('supplierPanel').classList.add('d-none'));
}

// ── Recalcular fila ────────────────────────────────────────────────────────
window.recalcRow = function(idx) {
    var qty  = parseFloat(document.querySelector('[name="items['+idx+'][quantity]"]')?.value) || 0;
    var cost = parseFloat(document.querySelector('[name="items['+idx+'][unit_cost]"]')?.value) || 0;
    var iva  = parseFloat(document.querySelector('[name="items['+idx+'][iva_perc]"]')?.value) || 0;
    var sub  = qty * cost;
    var tax  = sub * (iva / 100);
    var total = sub + tax;
    var el = document.getElementById('row_total_' + idx);
    if (el) el.textContent = fmtMoney(total);
    recalcSummary();
};

function recalcAll() {
    document.querySelectorAll('[id^="row_total_"]').forEach(function(el) {
        recalcRow(el.id.replace('row_total_', ''));
    });
    recalcSummary();
}

function recalcSummary() {
    var rows = document.querySelectorAll('#poItemsBody tr');
    var subtotal = 0, taxes = 0, total = 0;
    rows.forEach(function(row) {
        var idx = row.id?.replace('po_row_', '');
        if (!idx) return;
        var qty  = parseFloat(row.querySelector('[name="items['+idx+'][quantity]"]')?.value) || 0;
        var cost = parseFloat(row.querySelector('[name="items['+idx+'][unit_cost]"]')?.value) || 0;
        var iva  = parseFloat(row.querySelector('[name="items['+idx+'][iva_perc]"]')?.value) || 0;
        var sub  = qty * cost;
        var tax  = sub * (iva / 100);
        subtotal += sub; taxes += tax; total += sub + tax;
    });
    document.getElementById('summaryItems').textContent    = rows.length;
    document.getElementById('summarySubtotal').textContent = fmtMoney(subtotal);
    document.getElementById('summaryTaxes').textContent    = fmtMoney(taxes);
    document.getElementById('summaryTotal').textContent    = fmtMoney(total);
    document.getElementById('poGrandTotal').textContent    = fmtMoney(total);
    var noMsg = document.getElementById('noItemsMsg');
    if (noMsg) noMsg.classList.toggle('d-none', rows.length > 0);
}

window.removePoRow = function(idx) {
    var row = document.getElementById('po_row_' + idx);
    if (row) row.remove();
    recalcSummary();
};

// ── Modal búsqueda productos ──────────────────────────────────────────────
window.openProductSearch = function() {
    if (!document.getElementById('supplierId').value) {
        showNotification('{{ __('purchases.js-select-supplier-first') }}', 'warning');
        return;
    }
    document.getElementById('poProductRows').innerHTML =
        '<tr><td colspan="6" class="text-center text-muted py-4">{{ __('purchases.js-select-or-search') }}</td></tr>';
    document.getElementById('poProductSearch').value = '';
    document.getElementById('poGroupSelect').value = '';
    document.getElementById('poCategorySelect').innerHTML = '<option value="">{{ __('purchases.category-placeholder') }}</option>';
    document.getElementById('poBrandSelect').innerHTML = '<option value="">{{ __('purchases.brand-placeholder') }}</option>';
    bootstrap.Modal.getOrCreateInstance(document.getElementById('modalSearchPOProduct')).show();
};

window.poLoadCategories = function() {
    var gId = document.getElementById('poGroupSelect').value;
    document.getElementById('poCategorySelect').innerHTML = '<option value="">{{ __('purchases.category-placeholder') }}</option>';
    document.getElementById('poBrandSelect').innerHTML = '<option value="">{{ __('purchases.brand-placeholder') }}</option>';
    if (!gId) return;
    $.ajax({ url: AppUrl + '/invoices/getCategories', data: { idGroup: gId }, success: function(d) {
        $.each(d.categories, function(i, c) {
            $('#poCategorySelect').append('<option value="'+c.id+'">'+c.name+'</option>');
        });
    }});
};

window.poLoadBrands = function() {
    var cId = document.getElementById('poCategorySelect').value;
    document.getElementById('poBrandSelect').innerHTML = '<option value="">{{ __('purchases.brand-placeholder') }}</option>';
    if (!cId) return;
    $.ajax({ url: AppUrl + '/invoices/getBrands', data: { categoryId: cId }, success: function(d) {
        $.each(d.brands, function(i, b) {
            $('#poBrandSelect').append('<option value="'+b.id+'">'+b.name+'</option>');
        });
    }});
};

window.poFilterProducts = function() {
    var supplierId = document.getElementById('supplierId').value;
    $('#poProductRows').html('<tr><td colspan="6" class="text-center py-3"><i class="fas fa-spinner fa-spin"></i></td></tr>');
    fetch(AppUrl + '/purchases/orders/ajax/search-products'
        + '?supplier_id=' + supplierId
        + '&group_id='    + document.getElementById('poGroupSelect').value
        + '&category_id=' + document.getElementById('poCategorySelect').value
        + '&brand_id='    + document.getElementById('poBrandSelect').value)
    .then(r => r.json())
    .then(products => renderPOProductRows(products));
};

window.poSearchByText = function() {
    var term = document.getElementById('poProductSearch').value.trim();
    if (!term) return;
    var supplierId = document.getElementById('supplierId').value;
    $('#poProductRows').html('<tr><td colspan="6" class="text-center py-3"><i class="fas fa-spinner fa-spin"></i></td></tr>');
    fetch(AppUrl + '/purchases/orders/ajax/search-products?search=' + encodeURIComponent(term) + '&supplier_id=' + supplierId)
    .then(r => r.json())
    .then(products => renderPOProductRows(products));
};

function renderPOProductRows(products) {
    if (!products.length) {
        document.getElementById('poProductRows').innerHTML =
            '<tr><td colspan="6" class="text-center text-muted py-4">{{ __('purchases.js-no-active-cost') }}</td></tr>';
        return;
    }
    var rows = '';
    products.forEach(function(p) {
        var typeColor = p.material_type === 'TR' ? 'info' : (p.material_type === 'RM' ? 'warning' : 'secondary');
        rows += '<tr>'
            + '<td class="small fw-semibold">' + p.product_name
            + '<br><small class="text-muted">' + (p.sku || '') + '</small></td>'
            + '<td class="text-center"><span class="badge bg-'+typeColor+' small">' + (p.material_type || '') + '</span></td>'
            + '<td class="text-end small">$' + parseFloat(p.unit_cost).toFixed(2) + '</td>'
            + '<td class="text-center small">' + parseFloat(p.iva_perc).toFixed(0) + '%</td>'
            + '<td class="text-end small fw-bold">$' + parseFloat(p.total_cost).toFixed(2) + '</td>'
            + '<td class="text-center"><button type="button" class="btn btn-success btn-sm"'
            + ' onclick="addPOProduct(this)" data-product=\'' + JSON.stringify(p).replace(/'/g, '&#39;') + '\'>'
            + '<i class="fas fa-plus me-1"></i>{{ __('purchases.js-add') }}</button></td>'
            + '</tr>';
    });
    document.getElementById('poProductRows').innerHTML = rows;
}

window.addPOProduct = function(btn) {
    var p   = JSON.parse(btn.getAttribute('data-product'));
    var idx = poIdx++;
    var row = '<tr id="po_row_' + idx + '">'
        + '<td class="ps-2">'
        +   '<input type="hidden" name="items[' + idx + '][product_id]" value="' + p.id + '">'
        +   '<span class="fw-semibold small">' + p.product_name + '</span>'
        +   '<br><small class="text-muted">{{ __('purchases.sku-label') }} ' + (p.sku || '—') + '</small>'
        + '</td>'
        + '<td><input type="number" name="items[' + idx + '][quantity]" class="form-control form-control-sm" value="1" min="0.01" step="0.01" style="width:80px;" oninput="recalcRow(' + idx + ')"></td>'
        + '<td><input type="text" name="items[' + idx + '][unit]" class="form-control form-control-sm text-center" value="' + (p.unity || 'H87') + '" style="width:60px;"></td>'
        + '<td><input type="number" name="items[' + idx + '][unit_cost]" class="form-control form-control-sm" value="' + parseFloat(p.unit_cost).toFixed(2) + '" min="0" step="0.01" style="width:95px;" readonly></td>'
        + '<td><input type="number" name="items[' + idx + '][iva_perc]" class="form-control form-control-sm" value="' + parseFloat(p.iva_perc).toFixed(0) + '" min="0" max="100" style="width:60px;" oninput="recalcRow(' + idx + ')"></td>'
        + '<td class="text-end fw-bold" id="row_total_' + idx + '">$0.00</td>'
        + '<td><button type="button" class="btn btn-sm btn-outline-danger" onclick="removePoRow(' + idx + ')"><i class="fas fa-times"></i></button></td>'
        + '</tr>';

    document.getElementById('poItemsBody').insertAdjacentHTML('beforeend', row);
    bootstrap.Modal.getInstance(document.getElementById('modalSearchPOProduct')).hide();
    recalcRow(idx);
};
</script>

@endsection