<div class="purchase-list-container">
    <div class="page-header d-flex justify-between align-center mb-4">
        <h2 class="page-title">کچی پرچی (آمد) — ہسٹری</h2>
        <a href="#purchase" class="btn btn-accent">
            <i class="fas fa-plus"></i> نئی آمد (Purchase)
        </a>
    </div>

    <div class="row mb-4" id="purchaseStatsContainer" style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;">
        <div class="card" style="background: linear-gradient(135deg, rgba(46, 204, 113, 0.08), rgba(255, 255, 255, 1)); border: 1px solid var(--border); margin-bottom: 0;">
            <div class="card-body" style="padding: 16px;">
                <div style="font-size: 0.95em; color: var(--text-muted); margin-bottom: 8px; font-weight: 500;">مجموعی خریداری (Total Purchase)</div>
                <div id="cbDashboardTotalPurchaseAmount" style="font-size: 1.8em; font-weight: 800; color: #2ecc71;">0.00</div>
            </div>
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-body">
            <div class="form-grid-4">
                <div class="form-group">
                    <label class="form-label">تاریخ سے تلاش کریں</label>
                    <input type="date" id="filterDate" class="form-control">
                </div>
                <div class="form-group">
                    <label class="form-label">زمیندار کا نام</label>
                    <input type="text" id="filterParty" class="form-control" placeholder="نام لکھیں...">
                </div>
                <div class="form-group">
                    <label class="form-label">جنس (Item)</label>
                    <select id="filterItem" class="form-control select2">
                        <option value="">تمام اجناس...</option>
                    </select>
                </div>
                <div class="form-group d-flex align-end">
                    <button id="btnSearch" class="btn btn-primary w-100">
                        <i class="fas fa-search"></i> فلٹر کریں
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table" id="purchaseTable">
                    <thead>
                        <tr>
                            <th>پرچی #</th>
                            <th style="min-width: 100px;">لاٹ #</th>
                            <th>تاریخ</th>
                            <th>زمیندار</th>
                            <th>جنس</th>
                            <th>وزن (KG)</th>
                            <th>کل رقم</th>
                            <th class="text-center">ایکشن</th>
                        </tr>
                    </thead>

                    <tbody id="purchaseListBody">
                        <!-- Data will be loaded here via AJAX -->
                        <tr>
                            <td colspan="8" class="text-center p-4">لوڈنگ...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer d-flex justify-between align-center">
            <div class="text-sm text-muted" id="paginationInfo"></div>
            <div class="pagination-buttons d-flex gap-2" id="paginationControls">
                <!-- Pagination will be injected here -->
            </div>
        </div>
    </div>
</div>

<style>
    .action-btns {
        display: flex;
        gap: 0.5rem;
        justify-content: center;
    }
    .btn-icon {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: 6px;
    }
</style>
