

<div class="card">
    <div class="card-header border-light d-flex align-items-center gap-2">
        <i class="ti ti-list-details fs-18 text-primary"></i>
        <h5 class="card-title mb-0">Purchase Items</h5>
        <span class="badge bg-soft-primary text-primary ms-2">{{ form.lines.length }} lines</span>
    </div>

    <div class="table-responsive">
        <table class="table table-sm table-bordered align-middle mb-0 purchase-line-table">
            <thead class="bg-light bg-opacity-25 text-uppercase fs-xxs">
                <tr>
                    <th style="width: 32px;">#</th>
                    <th>Item</th>
                    <th style="width: 140px;">Country of Origin</th>
                    <th style="width: 90px;">Pcs</th>
                    <th style="width: 100px;">Carat</th>
                    <th style="width: 170px;">Barcode</th>
                    <th style="width: 130px;">Lot Code</th>
                    
                    <th style="width: 110px;">Price</th>
                    <th style="width: 110px;">Selling Price</th>
                    
                    <th style="width: 110px;" class="text-end">Line Total</th>
                    <th style="width: 40px;"></th>
                </tr>
            </thead>

            <tbody>
                <template v-for="(line, li) in form.lines">

                    
                    <tr :key="'l-' + li" class="line-parent" :class="{ 'table-warning': line._highlight }">

                        <td class="text-muted small">
    <div class="d-flex align-items-center gap-1">
        <button v-if="line.rows.length > 1" type="button"
                class="btn btn-sm btn-link p-0 text-muted lh-1"
                @click="toggleExpand(li)"
                :title="line._expanded ? 'Collapse rows' : 'Expand rows'">
            <i class="ti fs-16"
               :class="line._expanded ? 'ti-chevron-down' : 'ti-chevron-right'"></i>
        </button>
        <span>{{ li + 1 }}</span>
    </div>
</td>

                        <td>
                            <div class="d-flex align-items-center justify-content-between gap-2">
                                <div>
                                    <div class="fw-semibold">{{ line.title }}</div>
                                    <small class="text-muted">{{ categoryName(line.category_id) }}</small>
                                </div>
                                <button type="button"
                                        class="btn btn-icon btn-sm flex-shrink-0"
                                        :class="line.website_enabled ? 'btn-soft-info' : 'btn-default'"
                                        @click="line.website_enabled = !line.website_enabled"
                                        :title="line.website_enabled ? 'Listed on website — click to unlist' : 'Not listed — click to list on website'">
                                    <i class="ti fs-16" :class="line.website_enabled ? 'ti-world' : 'ti-world-off'"></i>
                                </button>
                            </div>
                        </td>

                        <td class="small">{{ countryOfOriginName(line.country_of_origin_id) }}</td>

                        
                        <template v-if="line.rows.length === 1">
                            <td>
                                <input type="number" min="0" class="form-control form-control-sm"
                                       v-model.number="line.rows[0].qty">
                            </td>
                            <td>
                                <input type="number" step="0.001" min="0" class="form-control form-control-sm"
                                       v-model.number="line.rows[0].carat_weight"
                                       placeholder="ct">
                            </td>
                            <td>
                                <input type="text" class="form-control form-control-sm"
                                       v-model="line.rows[0].barcode"
                                       placeholder="optional">
                            </td>
                            <td>
                                <input type="text" class="form-control form-control-sm bg-light" readonly
                                       :placeholder="!form.supplier_id ? 'pick supplier first' : (line.rows[0]._lotCode || '—')">
                            </td>
                            
                            <td>
                                <input type="number" step="0.01" min="0" class="form-control form-control-sm"
                                       v-model.number="line.rows[0].price">
                            </td>
                            <td>
                                <input type="number" step="0.01" min="0" class="form-control form-control-sm"
                                       v-model.number="line.rows[0].website_price" placeholder="optional">
                            </td>
                            
                            <td class="text-end fw-semibold">{{ formatMoney(rowNet(line.rows[0])) }}</td>
                            <td class="text-center">
                                <button type="button" class="btn btn-sm btn-soft-danger" @click="removeLine(li)">
                                    <i class="ti ti-x"></i>
                                </button>
                            </td>
                        </template>

                        
                        <template v-else>
                            <td colspan="7" class="bg-light bg-opacity-25"
    style="cursor: pointer;"
    @click="toggleExpand(li)">
                                <div class="d-flex flex-wrap gap-3 small">
                                    <span><span class="text-muted">Total pieces:</span>
                                        <strong>{{ totalPieces(line) }}</strong></span>
                                    <span><span class="text-muted">Inventory rows:</span>
                                        <strong>{{ line.rows.length }}</strong></span>
                                    <span><span class="text-muted">Line total:</span>
                                        <strong>{{ formatMoney(lineNet(line)) }}</strong></span>
                                </div>
                            </td>
                            <td class="text-center">
                                <button type="button" class="btn btn-sm btn-soft-danger" @click="removeLine(li)">
                                    <i class="ti ti-x"></i>
                                </button>
                            </td>
                        </template>

                    </tr>

                    
                    <template v-if="line.rows.length > 1 && line._expanded">
                        <tr v-for="(row, ri) in line.rows"
                            :key="'l-' + li + '-r-' + ri"
                            class="line-child"
                            :class="{ 'table-active': row._focused }">

                            <td class="text-muted small bg-light bg-opacity-25"></td>

                            <td class="ps-4 small text-muted bg-light bg-opacity-25">
                                <i class="ti ti-corner-down-right me-1"></i>
                                Pcs #{{ ri + 1 }}
                                <span v-if="row._product" class="badge badge-soft-success ms-1" :title="row._product.title">
                                    {{ row._product.sku }}
                                </span>
                                <span v-else class="badge badge-soft-secondary ms-1">New</span>
                            </td>

                            <td class="bg-light bg-opacity-25"></td>

                            <td>
                                <input type="number" min="0" class="form-control form-control-sm"
                                       v-model.number="row.qty">
                            </td>
                            <td>
                                <input type="number" step="0.001" min="0" class="form-control form-control-sm"
                                       v-model.number="row.carat_weight"
                                       placeholder="ct">
                            </td>
                            <td>
                                <input type="text" class="form-control form-control-sm"
                                       :ref="'rowBarcode_' + li + '_' + ri"
                                       v-model="row.barcode"
                                       placeholder="scan/type"
                                       @keydown.enter.prevent="focusNextRow(li, ri)">
                            </td>
                            <td>
                                <input type="text" class="form-control form-control-sm bg-light" readonly
                                       :placeholder="!form.supplier_id ? 'pick supplier first' : (row._lotCode || '—')">
                            </td>
                            
                            <td>
                                <input type="number" step="0.01" min="0" class="form-control form-control-sm"
                                       v-model.number="row.price">
                            </td>
                            <td>
                                <input type="number" step="0.01" min="0" class="form-control form-control-sm"
                                       v-model.number="row.website_price" placeholder="optional">
                            </td>
                            
                            <td class="text-end small fw-semibold">{{ formatMoney(rowNet(row)) }}</td>
                            <td></td>
                        </tr>
                    </template>

                </template>

                <tr v-if="form.lines.length === 0">
                    <td colspan="11" class="text-center text-muted py-4">
                        <i class="ti ti-package fs-22 d-block mb-1 text-muted"></i>
                        Add an item above to begin.
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<?php /**PATH F:\VScode LIve ftp\paces\resources\views/purchases/_partials/_line_table.blade.php ENDPATH**/ ?>