@php
    $supplierOptions = $purchaseSupplierOptions ?? $supplierOptions ?? collect();
    $productOptions = $purchaseProductOptions ?? $productOptions ?? collect();
@endphp
<div class="modal fade" id="modalNewPurchase" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <form class="modal-content" method="POST" enctype="multipart/form-data" action="{{ route('purchases.store') }}" id="formNewPurchase">
            @csrf
            <div class="modal-header">
                <div>
                    <h5 class="modal-title mb-0">Nueva compra</h5>
                    <div class="small text-secondary">Agregue cada producto por separado. Costo y P.V.P. van según cómo ingresa (empaque o unidad).</div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="purchase-section">
                    <div class="purchase-section__title">Datos de la compra</div>
                    <div class="row g-3">
                        <div class="col-md-5">
                            <label class="form-label">Proveedor</label>
                            <div
                                class="searchable"
                                data-name="supplier_id"
                                data-required="1"
                                data-placeholder="Escriba para buscar proveedor…"
                                data-options="{{ json_encode($supplierOptions) }}"
                            ></div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Documento</label>
                            <input class="form-control" name="document_number">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Fecha</label>
                            <input class="form-control" type="date" name="purchase_date" value="{{ date('Y-m-d') }}" required>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Documento adjunto</label>
                            <input class="form-control" type="file" name="document">
                        </div>
                    </div>
                </div>

                <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
                    <div class="purchase-section__title mb-0 d-inline-flex align-items-center gap-2">
                        Productos
                        <x-help-tip text="Cada tarjeta es un producto. Unidades/Empaque define cuántas unidades trae la caja o pack. Costo y P.V.P. se interpretan según Empaques o Unidades." />
                    </div>
                    <button class="btn btn-sm btn-outline-primary" type="button" id="btnAddPurchaseLine">
                        <i class="bi bi-plus-lg"></i> Agregar producto
                    </button>
                </div>

                <div id="purchaseLines" class="purchase-lines"></div>

                <template id="purchaseLineTemplate">
                    <div class="purchase-line is-open" data-line="__INDEX__">
                        <div class="purchase-line__head">
                            <button class="purchase-line__toggle" type="button" aria-expanded="true">
                                <i class="bi bi-chevron-down purchase-line__chevron" aria-hidden="true"></i>
                                <span class="purchase-line__badge">Producto <span class="purchase-line__num">__NUM__</span></span>
                                <span class="purchase-line__summary text-secondary small text-truncate">Sin producto</span>
                            </button>
                            <button class="btn btn-sm btn-outline-danger purchase-line__remove" type="button" title="Quitar producto">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                        <div class="purchase-line__body">
                            <div class="purchase-line__block">
                                <div class="purchase-line__block-title">1. Producto</div>
                                <div
                                    class="searchable purchase-product"
                                    data-name="items[__INDEX__][product_id]"
                                    data-placeholder="Buscar producto…"
                                ></div>
                            </div>

                            <div class="purchase-line__block">
                                <div class="purchase-line__block-title">2. Empaque</div>
                                <div class="row g-2">
                                    <div class="col-sm-4">
                                        <label class="form-label">Unidades/Empaque</label>
                                        <input class="form-control purchase-per-pack" type="number" min="1" step="1" name="items[__INDEX__][units_per_pack]" value="1">
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="form-label">Tipo empaque</label>
                                        <input class="form-control purchase-pack-name" name="items[__INDEX__][pack_name]" list="purchase_pack_presets___INDEX__" placeholder="Caja, Six-pack…">
                                        <datalist id="purchase_pack_presets___INDEX__">
                                            <option value="Caja"></option>
                                            <option value="Six-pack"></option>
                                            <option value="12-pack"></option>
                                            <option value="Pack"></option>
                                        </datalist>
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="form-label">Ingresar como</label>
                                        <select class="form-select purchase-entry-mode" name="items[__INDEX__][entry_mode]">
                                            <option value="packs">Empaques / cajas</option>
                                            <option value="base">Unidades sueltas</option>
                                        </select>
                                        <input type="hidden" class="purchase-cost-mode" name="items[__INDEX__][cost_mode]" value="pack">
                                    </div>
                                </div>
                            </div>

                            <div class="purchase-line__block">
                                <div class="purchase-line__block-title">3. Cantidad, costo y P.V.P.</div>
                                <div class="row g-2">
                                    <div class="col-sm-4">
                                        <label class="form-label purchase-qty-label">Cantidad</label>
                                        <input class="form-control purchase-qty" type="number" step="0.0001" min="0.0001" name="items[__INDEX__][quantity]" required>
                                        <div class="form-text purchase-qty-hint">Si elige empaques, esta cantidad es de cajas/packs.</div>
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="form-label purchase-cost-label">Costo</label>
                                        <input class="form-control purchase-cost" type="number" step="0.0001" min="0" name="items[__INDEX__][unit_cost]">
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="form-label purchase-pvp-label">P.V.P.</label>
                                        <input class="form-control purchase-pvp" type="number" step="0.0001" min="0" name="items[__INDEX__][reference_sale_price]" placeholder="Precio de venta">
                                    </div>
                                </div>
                                <div class="purchase-preview mt-2">Seleccione un producto</div>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Cancelar</button>
                <button class="btn btn-primary" type="submit">Guardar compra</button>
            </div>
        </form>
    </div>
</div>

<style>
.purchase-section { margin-bottom: 1.25rem; }
.purchase-section__title {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted, #6c7a89);
    margin-bottom: .75rem;
}
.purchase-lines { display: flex; flex-direction: column; gap: .75rem; }
.purchase-line {
    border: 1px solid var(--card-border, #E7ECF2);
    border-radius: 1rem;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.purchase-line__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .55rem .75rem .55rem .55rem;
    background: linear-gradient(180deg, #F7F9FC 0%, #EEF2F7 100%);
    border-bottom: 1px solid transparent;
}
.purchase-line.is-open .purchase-line__head {
    border-bottom-color: var(--card-border, #E7ECF2);
}
.purchase-line__toggle {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    flex: 1;
    border: 0;
    background: transparent;
    text-align: left;
    padding: .35rem .45rem;
    border-radius: .65rem;
    color: inherit;
}
.purchase-line__toggle:hover { background: rgba(13, 110, 253, .06); }
.purchase-line__chevron {
    color: var(--brand-blue-500, #0d6efd);
    transition: transform .18s ease;
    flex-shrink: 0;
}
.purchase-line:not(.is-open) .purchase-line__chevron { transform: rotate(-90deg); }
.purchase-line__badge {
    font-weight: 700;
    font-size: .92rem;
    color: var(--brand-blue-500, #0d6efd);
    flex-shrink: 0;
}
.purchase-line__summary {
    min-width: 0;
    max-width: 100%;
}
.purchase-line.is-open .purchase-line__summary { display: none; }
.purchase-line__body { display: none; }
.purchase-line.is-open .purchase-line__body { display: block; }
.purchase-line__block {
    padding: .9rem 1rem;
    border-bottom: 1px dashed #E7ECF2;
}
.purchase-line__block:last-child { border-bottom: 0; }
.purchase-line__block-title {
    font-size: .75rem;
    font-weight: 700;
    color: #5b6b7c;
    margin-bottom: .55rem;
}
.purchase-preview {
    background: #F5F8FB;
    border: 1px solid #E7ECF2;
    border-radius: .65rem;
    padding: .55rem .75rem;
    font-size: .84rem;
    color: #5b6b7c;
}
</style>

<script>
(() => {
    const productOptions = @json($productOptions);
    const linesEl = document.getElementById('purchaseLines');
    const template = document.getElementById('purchaseLineTemplate');
    if (!linesEl || !template || linesEl.dataset.ready === '1') return;
    linesEl.dataset.ready = '1';
    let lineSeq = 0;

    function packLabel(per, name) {
        const n = (name || '').trim();
        if (n) return n;
        if (per === 6) return 'Six-pack';
        if (per === 12) return '12-pack';
        if (per === 24) return 'Caja';
        return 'empaque';
    }

    function setLineOpen(row, open) {
        row.classList.toggle('is-open', !!open);
        const toggle = row.querySelector('.purchase-line__toggle');
        if (toggle) toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
    }

    function collapseOthers(exceptRow) {
        linesEl.querySelectorAll('.purchase-line').forEach((row) => {
            if (row !== exceptRow) setLineOpen(row, false);
        });
    }

    function refreshLine(row) {
        const per = Math.max(1, parseInt(row.querySelector('.purchase-per-pack')?.value || '1', 10) || 1);
        const name = packLabel(per, row.querySelector('.purchase-pack-name')?.value);
        const mode = row.querySelector('.purchase-entry-mode')?.value || 'packs';
        const q = parseFloat(row.querySelector('.purchase-qty')?.value) || 0;
        const c = parseFloat(row.querySelector('.purchase-cost')?.value) || 0;
        const pvp = parseFloat(row.querySelector('.purchase-pvp')?.value) || 0;
        const unitLabel = row.dataset.unitLabel || 'und';
        const costModeEl = row.querySelector('.purchase-cost-mode');
        if (costModeEl) costModeEl.value = mode === 'packs' ? 'pack' : 'base';

        const qtyLabel = row.querySelector('.purchase-qty-label');
        const costLabel = row.querySelector('.purchase-cost-label');
        const pvpLabel = row.querySelector('.purchase-pvp-label');
        const qtyHint = row.querySelector('.purchase-qty-hint');
        if (qtyLabel) qtyLabel.textContent = mode === 'packs' ? `Cantidad de ${name}` : `Cantidad de ${unitLabel}`;
        if (costLabel) costLabel.textContent = mode === 'packs' ? `Costo del ${name}` : `Costo por ${unitLabel}`;
        if (pvpLabel) pvpLabel.textContent = mode === 'packs' ? `P.V.P. del ${name}` : `P.V.P. por ${unitLabel}`;
        if (qtyHint) {
            qtyHint.textContent = mode === 'packs'
                ? `Ej.: 300 = 300 ${name}s → ${300 * per} ${unitLabel}s en inventario`
                : `Cantidad en ${unitLabel}s sueltas`;
        }

        const base = mode === 'packs' ? q * per : q;
        const unitCost = (mode === 'packs' && per > 1) ? (c / per) : c;
        const unitPvp = (mode === 'packs' && per > 1) ? (pvp / per) : pvp;
        const lineTotal = (mode === 'packs' ? q * c : base * unitCost);
        const preview = row.querySelector('.purchase-preview');
        const summary = row.querySelector('.purchase-line__summary');
        const productInput = row.querySelector('.purchase-product .searchable-input');
        const productLabel = (productInput?.value || '').trim();
        const hasProduct = !!row.querySelector('[name$="[product_id]"]')?.value;

        if (preview) {
            if (!hasProduct) {
                preview.textContent = 'Seleccione un producto para ver el cálculo';
            } else if (q <= 0) {
                preview.textContent = 'Indique la cantidad a comprar';
            } else if (mode === 'packs') {
                preview.innerHTML =
                    `Se guardará: <strong>${q} ${name}${q === 1 ? '' : 's'}</strong>`
                    + ` = <strong>${base.toFixed(0)} ${unitLabel}s</strong> en inventario`
                    + ` · costo/${name} <strong>$${c.toFixed(2)}</strong>`
                    + (pvp > 0 ? ` · P.V.P./${name} <strong>$${pvp.toFixed(2)}</strong>` : '')
                    + ` · línea <strong>$${lineTotal.toFixed(2)}</strong>`;
            } else {
                preview.innerHTML =
                    `Se guardará: <strong>${base.toFixed(2)} ${unitLabel}s</strong>`
                    + ` · costo/${unitLabel} <strong>$${unitCost.toFixed(4)}</strong>`
                    + (pvp > 0 ? ` · P.V.P./${unitLabel} <strong>$${unitPvp.toFixed(4)}</strong>` : '')
                    + ` · línea <strong>$${lineTotal.toFixed(2)}</strong>`;
            }
        }

        if (summary) {
            if (!hasProduct) {
                summary.textContent = 'Sin producto';
            } else {
                const bits = [productLabel || 'Producto'];
                if (q > 0) {
                    bits.push(mode === 'packs'
                        ? `${q} ${name} → ${base.toFixed(0)} ${unitLabel}`
                        : `${base.toFixed(0)} ${unitLabel}`);
                }
                if (c > 0) bits.push(`$${Number(c).toFixed(2)}`);
                summary.textContent = bits.join(' · ');
            }
        }
    }

    function bindLine(row) {
        row.querySelector('.purchase-line__toggle')?.addEventListener('click', () => {
            const willOpen = !row.classList.contains('is-open');
            setLineOpen(row, willOpen);
        });
        row.addEventListener('searchable:change', (e) => {
            const opt = e.detail?.option;
            if (!opt) return;
            const per = Math.max(1, parseInt(opt.units_per_pack || '1', 10));
            row.dataset.unitLabel = opt.unit_label || 'und';
            row.querySelector('.purchase-per-pack').value = per;
            row.querySelector('.purchase-pack-name').value = opt.pack_name || '';
            row.querySelector('.purchase-entry-mode').value = per > 1 ? 'packs' : 'base';
            refreshLine(row);
        });
        row.querySelectorAll('.purchase-per-pack, .purchase-pack-name, .purchase-entry-mode, .purchase-qty, .purchase-cost, .purchase-pvp')
            .forEach((el) => {
                el.addEventListener('input', () => refreshLine(row));
                el.addEventListener('change', () => refreshLine(row));
            });
        row.querySelector('.purchase-line__remove')?.addEventListener('click', (e) => {
            e.stopPropagation();
            if (linesEl.querySelectorAll('.purchase-line').length <= 1) return;
            const wasOpen = row.classList.contains('is-open');
            row.remove();
            renumberLines();
            if (wasOpen) {
                const last = linesEl.querySelector('.purchase-line:last-child');
                if (last) setLineOpen(last, true);
            }
        });
        refreshLine(row);
    }

    function renumberLines() {
        linesEl.querySelectorAll('.purchase-line').forEach((row, idx) => {
            row.querySelector('.purchase-line__num').textContent = String(idx + 1);
            const productRoot = row.querySelector('.purchase-product');
            if (productRoot) {
                productRoot.dataset.required = idx === 0 ? '1' : '0';
                const hidden = productRoot.querySelector('input[type="hidden"]');
                if (hidden) hidden.required = idx === 0;
            }
            const qty = row.querySelector('.purchase-qty');
            const cost = row.querySelector('.purchase-cost');
            if (qty) qty.required = idx === 0;
            if (cost) cost.required = idx === 0;
        });
        linesEl.querySelectorAll('.purchase-line__remove').forEach((btn) => {
            btn.disabled = linesEl.querySelectorAll('.purchase-line').length <= 1;
        });
    }

    function addLine({ collapsePrevious = true } = {}) {
        if (collapsePrevious) collapseOthers(null);
        const index = lineSeq++;
        const html = template.innerHTML
            .replaceAll('__INDEX__', String(index))
            .replaceAll('__NUM__', String(linesEl.querySelectorAll('.purchase-line').length + 1));
        const wrap = document.createElement('div');
        wrap.innerHTML = html.trim();
        const row = wrap.firstElementChild;
        const productRoot = row.querySelector('.purchase-product');
        if (productRoot) {
            productRoot.setAttribute('data-options', JSON.stringify(productOptions));
            if (linesEl.querySelectorAll('.purchase-line').length === 0) {
                productRoot.dataset.required = '1';
            }
        }
        linesEl.appendChild(row);
        if (window.SearchableSelect) window.SearchableSelect.init(row);
        bindLine(row);
        setLineOpen(row, true);
        renumberLines();
        row.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        return row;
    }

    document.getElementById('btnAddPurchaseLine')?.addEventListener('click', () => addLine({ collapsePrevious: true }));

    document.getElementById('formNewPurchase')?.addEventListener('submit', function () {
        this.querySelectorAll('.purchase-line').forEach((row) => {
            const productId = row.querySelector('[name$="[product_id]"]')?.value;
            if (!productId) {
                row.querySelectorAll('[name]').forEach((el) => el.removeAttribute('name'));
            }
        });
    });

    document.getElementById('modalNewPurchase')?.addEventListener('shown.bs.modal', () => {
        if (!linesEl.querySelector('.purchase-line')) addLine({ collapsePrevious: false });
        renumberLines();
    });

    // Primera línea al cargar
    addLine({ collapsePrevious: false });
})();
</script>