<div class="purchase-container">
    <form id="purchaseForm">
        <!-- Section A: Header -->
        <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="purchaseVoucherId" class="badge badge-info" style="font-size: 1.2em;"></span></div>
                    <div>تاریخ: <input type="date" id="purchaseDate" class="form-control btn-sm" style="width: 150px;"></div>
                </div>
            </div>
            <div class="card-body">
                <div class="form-grid-2">
                    <div class="form-group">
                        <label class="form-label">زمیندار (Zamidar)</label>
                        <select id="purchaseParty" class="form-control select2" required></select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">گاڑی / بلٹی نمبر</label>
                        <input type="text" class="form-control" id="vehicleNo" placeholder="مثلاً: ٹریکٹر، ٹرک #">
                    </div>
                </div>
            </div>
        </div>

        <!-- Section B: Item Details (Multi-Item Grid) -->
        <div class="card">
            <div class="card-header d-flex justify-between">
                <h3 class="card-title">مال کی تفصیل (Item Details)</h3>
                <button type="button" class="btn btn-primary btn-sm" id="addItemRow">
                    <i class="fas fa-plus"></i> مزید جنس شامل کریں
                </button>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table m-0" id="itemsTable">
                        <thead>
                            <tr>
                                <th style="width: 65px;">لاٹ #</th>
                                <th style="min-width: 180px;">جنس (Item)</th>
                                <th style="min-width: 85px;">پیکنگ</th>
                                <th style="min-width: 75px;">تعداد</th>
                                <th style="min-width: 90px;">وزن (Gross)</th>
                                <th style="min-width: 100px;">تارا / کٹوتی</th>
                                <th style="min-width: 100px;">صاف وزن</th>
                                <th style="min-width: 140px;">ریٹ کی بنیاد</th>
                                <th style="min-width: 90px;">ریٹ</th>
                                <th style="min-width: 140px;">کل رقم</th>
                                <th></th>
                            </tr>
                        </thead>






                        <tbody id="itemsBody">
                            <!-- Rows added dynamically via JS -->
                        </tbody>
                        <tfoot>
                            <tr style="background: var(--card-bg-alt); font-weight: bold;">
                                <td colspan="8" class="text-right">مجموعی رقم (Gross Amount):</td>
                                <td><span id="overallGrossAmount">0.00</span></td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                <!-- Calculation Summary Helper (Global for all items) -->
                <div class="item-calculation-summary mt-3 p-3" style="background: #f8f9fa; border-top: 1px solid #ddd;">
                    <div class="d-flex justify-between" style="font-size: 0.9em; color: #555;">
                        <div>مجموعی وزن (Total Weight): <span id="summaryTotalWeight" class="fw-bold">0.00</span> KG</div>
                        <div>مجموعی بوریاں (Total Bags): <span id="summaryTotalBori" class="fw-bold">0</span></div>
                        <div class="fw-bold text-primary">کل قابل ادائیگی (Total Payable): <span id="summaryGrossAmount">0.00</span></div>
                    </div>
                </div>
            </div>
        </div>


        <!-- Section C: Kharchay (Deductions) -->
        <div class="card">
            <div class="card-header d-flex justify-between">
                <h3 class="card-title">خرچے / اضافہ (Expenses / Additions)</h3>
                <button type="button" class="btn btn-outline btn-sm" id="addKharchaRow">
                    <i class="fas fa-plus"></i> مزید خرچہ شامل کریں
                </button>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table m-0" id="kharchaTable">
                        <thead>
                            <tr>
                                <th style="width: 50%;">خرچے کی تفصیل</th>
                                <th style="width: 40%;">
                                    رقم (RS)
                                    <select id="kharchaGlobalType" class="table-form-control" style="width: 70px; display: inline-block; margin-right: 15px; height: 32px; font-weight: bold; border-color: var(--accent);">
                                        <option value="+">+</option>
                                        <option value="-">-</option>
                                    </select>
                                </th>
                                <th style="width: 10%;"></th>
                            </tr>
                        </thead>
                        <tbody id="kharchaBody">
                            <tr>
                                <td><input type="text" class="table-form-control" value="مزدوری" readonly></td>
                                <td><input type="number" class="table-form-control kharcha-val" value="" 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 kharcha-val" value="" 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 kharcha-val" value="" step="any"></td>
                                <td></td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr style="background: var(--card-bg-alt);">
                                <td class="text-right fw-bold">کل خرچہ:</td>
                                <td class="fw-bold"><span id="totalKharchay">0.00</span></td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>

        <!-- Section D: Footer & Actions -->
        <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 class="mt-1"><small class="text-muted" id="bal_purchasePaymentAccount"></small></div>
                </div>
                <div class="form-group">
                    <label class="form-label text-sm">ادا کردہ رقم</label>
                    <input type="number" id="amountPaid" class="form-control" value="" 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="netPayable">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>
