<div class="sale-container">
    <form id="saleForm">
        <!-- Section A: Header & Lot Mapping -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">پکی پرچی (بکری) — معلومات</h3>
                <div class="voucher-id-header d-flex gap-4 align-center">
                    <div>پرچی نمبر: <span id="saleVoucherId" class="badge badge-success" style="font-size: 1.2em;"></span></div>
                    <div>تاریخ: <input type="date" id="saleDate" class="form-control btn-sm" style="width: 150px;"></div>
                    <div>ڈیو ڈیٹ: <input type="date" id="saleDueDate" class="form-control btn-sm" style="width: 150px;"></div>
                </div>
            </div>
            <div class="card-body">
                <div class="form-grid-3">
                    <div class="form-group">
                        <label class="form-label">خریدار (Khareedar)</label>
                        <select id="saleParty" class="form-control select2" required></select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">حوالہ / ضمانت (Reference)</label>
                        <input type="text" id="saleHavala" class="form-control" placeholder="حوالہ یا ضمانتی کا نام...">
                    </div>
                    <!-- Lot field removed from here, moving to dynamic table -->
                </div>
            </div>
        </div>

        <!-- Section B: Sale Details (Multi-Lot Grid) -->
        <div class="card">
            <div class="card-header d-flex justify-between">
                <h3 class="card-title">فروخت کی تفصیل (Sale Details)</h3>
                <button type="button" class="btn btn-primary btn-sm" id="addSaleItemRow">
                    <i class="fas fa-plus"></i> مزید لاٹ شامل کریں
                </button>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table m-0" id="saleItemsTable">
                        <thead>
                            <tr>
                                <th style="width: 20%;">لاٹ (Lot)</th>
                                <th style="width: 12%;">دستیاب وزن</th>
                                <th style="width: 12%;">فروخت وزن</th>
                                <th style="width: 8%;">کٹوتی (KG)</th>
                                <th style="width: 12%;">ریٹ کی بنیاد</th>
                                <th style="width: 12%;">ریٹ</th>
                                <th style="width: 20%;">کل رقم</th>
                                <th style="width: 4%;"></th>
                            </tr>
                        </thead>
                        <tbody id="saleItemsBody">
                            <!-- Rows added dynamically via JS -->
                        </tbody>
                        <tfoot>
                            <tr style="background: var(--card-bg-alt); font-weight: bold;">
                                <td colspan="6" class="text-right">مجموعی رقم (Gross Amount):</td>
                                <td>
                                    <input type="text" class="form-control fw-bold table-form-control-num" id="saleGrossAmount" value="0.00" readonly style="font-size: 1.5em; height: 50px; background: #fff;">
                                </td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
                
                <!-- Lot Info Alert (Moved here from header) -->
                <div id="lotInfoAlert" class="alert-box m-3" style="display:none;">
                    <div class="d-flex justify-between align-center">
                        <div class="fw-bold">
                            <i class="fas fa-info-circle"></i> 
                            یہ مال زمیندار <span id="alertZamidar" class="text-danger">---</span> کا ہے | 
                            جنس: <span id="alertItem">---</span> | 
                            <span id="alertWeightLabel">دستیاب وزن</span>: <span id="alertWeight">0.00</span> KG
                        </div>
                        <div id="alertSoldBadge" style="display:none;">
                            <span style="background:#dc3545; color:#fff; padding:3px 10px; border-radius:4px; font-size:0.85em;">مکمل فروخت</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Section C: Kharchay (Additions) -->
        <div class="card">
            <div class="card-header d-flex justify-between">
                <h3 class="card-title d-flex align-items-center" style="gap: 15px;">
                    <span>دیگر اخراجات / کمیشن (Extras)</span>
                    <div class="toggle-group" id="globalKharchaToggle" style="width: 100px; height: 32px; font-size: 1.2em;">
                        <button type="button" class="toggle-btn active" data-value="plus">+</button>
                        <button type="button" class="toggle-btn" data-value="minus">-</button>
                    </div>
                    <input type="hidden" id="globalKharchaType" value="plus">
                </h3>
                <button type="button" class="btn btn-outline btn-sm" id="addSaleKharchaRow">
                    <i class="fas fa-plus"></i> مزید خرچہ شامل کریں
                </button>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table m-0">
                        <thead>
                            <tr>
                                <th style="width: 50%;">خرچے کی تفصیل</th>
                                <th style="width: 20%;">کمیشن %</th>
                                <th style="width: 20%;">رقم (RS)</th>
                                <th style="width: 10%;"></th>
                            </tr>
                        </thead>
                        <tbody id="saleKharchaBody">
                            <tr>
                                <td><input type="text" class="table-form-control" value="مزدوری" readonly></td>
                                <td></td>
                                <td><input type="number" class="table-form-control sale-kharcha-val" value="0" step="any"></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td><input type="text" class="table-form-control" value="کمیشن (%)" readonly></td>
                                <td><input type="number" class="table-form-control sale-comm-pct" value="2.0" step="any"></td>
                                <td><input type="number" class="table-form-control" id="commRs" value="0" readonly></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td><input type="text" class="table-form-control" value="ٹورا" readonly></td>
                                <td></td>
                                <td><input type="number" class="table-form-control sale-kharcha-val" value="0" step="any"></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td><input type="text" class="table-form-control" value="مارکیٹ فیس" readonly></td>
                                <td></td>
                                <td><input type="number" class="table-form-control sale-kharcha-val" value="0" step="any"></td>
                                <td></td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr style="background: var(--card-bg-alt);">
                                <td colspan="2" class="text-right fw-bold">کل اخراجات:</td>
                                <td class="fw-bold"><span id="totalSaleKharchay">0.00</span></td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>

        <!-- Section D: Footer -->
        <div class="payment-settlement-block mb-4">
            <div class="text-sm fw-bold mb-2">ادائیگی کی تفصیل (Payment Details)</div>
            <div class="form-grid-3">
                <div class="form-group">
                    <label class="form-label text-sm">ادائیگی کا طریقہ</label>
                    <select id="paymentMethod" class="form-control select2-sm"></select>
                </div>
                <div class="form-group">
                    <label class="form-label text-sm">وصول کردہ رقم</label>
                    <input type="number" id="amountReceived" class="form-control" value="0" step="any">
                </div>
                <div class="form-group">
                    <label class="form-label text-sm">بقایا کھاتہ</label>
                    <input type="text" id="remainingBalance" class="form-control" value="0.00" readonly>
                </div>
            </div>
        </div>

        <div class="voucher-footer">
            <div class="footer-amount-row d-flex justify-between align-center">
                <div class="footer-amount-label">خالص قابل وصول رقم:</div>
                <div class="footer-amount-value" id="netReceivable">0.00 <small>روپے</small></div>
            </div>
            
            <div class="form-actions-buttons d-flex gap-2">
                <button type="submit" class="btn btn-accent btn-lg" style="min-width: 150px;">
                    <i class="fas fa-save"></i> محفوظ کریں
                </button>
                <button type="button" class="btn btn-outline btn-lg" onclick="window.print()">
                    <i class="fas fa-print"></i> پرنٹ
                </button>
            </div>
        </div>
    </form>
</div>
