<!-- Loyalty Points Management Modal -->
<div class="modal fade" id="loyaltyPointsModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content shadow-lg border-0">
            <div class="modal-header bg-gradient-warning text-dark py-2">
                <h6 class="modal-title mb-0">
                    <i class="fas fa-star"></i> <span data-translate="customerLoyaltyManagement">Customer Loyalty Points Management</span>
                </h6>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body p-3">
                <!-- Customer Info -->
                <div class="alert alert-info mb-3">
                    <div class="row">
                        <div class="col-md-6">
                            <strong data-translate="customer">Customer:</strong> <span id="loyaltyCustomerName">-</span><br>
                            <small><span data-translate="code">Code</span>: <span id="loyaltyCustomerCode">-</span></small>
                        </div>
                        <div class="col-md-6 text-right">
                            <h4 class="mb-0">
                                <i class="fas fa-star text-warning"></i> 
                                <span id="loyaltyCurrentPoints" class="text-success">0</span> <span data-translate="points">Points</span>
                            </h4>
                            <small class="text-muted" data-translate="currentBalance">Current Balance</small>
                        </div>
                    </div>
                </div>

                <!-- Points Summary -->
                <div class="row mb-3">
                    <div class="col-md-4">
                        <div class="card border-success">
                            <div class="card-body p-2 text-center">
                                <small class="text-muted" data-translate="totalEarned">Total Earned</small>
                                <h5 class="mb-0 text-success" id="loyaltyTotalEarned">0</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card border-danger">
                            <div class="card-body p-2 text-center">
                                <small class="text-muted" data-translate="totalRedeemed">Total Redeemed</small>
                                <h5 class="mb-0 text-danger" id="loyaltyTotalRedeemed">0</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card border-info">
                            <div class="card-body p-2 text-center">
                                <small class="text-muted" data-translate="redemptionValue">Redemption Value</small>
                                <h5 class="mb-0 text-info" id="loyaltyRedemptionValue">₹0</h5>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="row mb-3">
                    <div class="col-md-6">
                        <button type="button" class="btn btn-danger btn-block" id="btnRedeemPoints">
                            <i class="fas fa-gift"></i> <span data-translate="redeemPoints">Redeem Points</span>
                        </button>
                    </div>
                    <div class="col-md-6">
                        <button type="button" class="btn btn-info btn-block" id="btnAdjustPoints">
                            <i class="fas fa-edit"></i> <span data-translate="adjustPoints">Adjust Points</span>
                        </button>
                    </div>
                </div>

                <!-- Transaction Form (Hidden by default) -->
                <div id="pointsTransactionForm" style="display:none;" class="mb-3">
                    <div class="card bg-light">
                        <div class="card-body">
                            <h6 id="transactionFormTitle" data-translate="transaction">Transaction</h6>
                            <div class="row">
                                <div class="col-md-6 mb-2">
                                    <label class="small font-weight-bold" data-translate="points">Points</label>
                                    <input type="number" id="transactionPoints" class="form-control" 
                                           placeholder="0" step="1" min="1">
                                </div>
                                <div class="col-md-6 mb-2">
                                    <label class="small font-weight-bold"><span data-translate="value">Value</span> (₹)</label>
                                    <input type="text" id="transactionValue" class="form-control" readonly>
                                </div>
                                <div class="col-md-12 mb-2">
                                    <label class="small font-weight-bold" data-translate="notesLabel">Notes</label>
                                    <textarea id="transactionNotes" class="form-control" rows="2" placeholder="Enter notes..." data-translate="enterNotes"></textarea>
                                </div>
                            </div>
                            <div class="text-right">
                                <button type="button" class="btn btn-sm btn-secondary" id="btnCancelTransaction">
                                    Cancel
                                </button>
                                <button type="button" class="btn btn-sm btn-primary" id="btnConfirmTransaction">
                                    Confirm
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Transaction History -->
                <h6 class="border-bottom pb-2">Recent Transactions</h6>
                <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
                    <table class="table table-sm table-hover">
                        <thead class="thead-light sticky-top">
                            <tr>
                                <th>Date</th>
                                <th>Type</th>
                                <th class="text-right">Points</th>
                                <th>Reference</th>
                                <th class="text-right">Balance</th>
                            </tr>
                        </thead>
                        <tbody id="loyaltyTransactionList">
                            <tr>
                                <td colspan="5" class="text-center text-muted">
                                    <i class="fas fa-spinner fa-spin"></i> Loading...
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer py-2 bg-light">
                <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">
                    <i class="fas fa-times"></i> Close
                </button>
            </div>
        </div>
    </div>
</div>
