<!-- Delete Bill Confirmation Modal -->
<div class="modal fade" id="deleteBillModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content shadow-lg border-danger border-2">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-triangle"></i> Delete Bill - Confirmation Required
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body p-3">
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-circle"></i> 
                    <strong>Warning:</strong> This action will permanently delete the bill and all related data. This cannot be undone!
                </div>

                <!-- Bill Information -->
                <div class="card mb-3">
                    <div class="card-header bg-light">
                        <h6 class="mb-0"><i class="fas fa-file-invoice"></i> Bill Information</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <p class="mb-1"><strong>Invoice Number:</strong> <span id="delBillInvoiceNo" class="text-primary"></span></p>
                                <p class="mb-1"><strong>Customer:</strong> <span id="delBillCustomerName"></span></p>
                                <p class="mb-0"><strong>Date:</strong> <span id="delBillDate"></span></p>
                            </div>
                            <div class="col-md-6">
                                <p class="mb-1"><strong>Total Amount:</strong> <span id="delBillTotalAmount" class="text-success"></span></p>
                                <p class="mb-1"><strong>Paid Amount:</strong> <span id="delBillPaidAmount" class="text-info"></span></p>
                                <p class="mb-0"><strong>Status:</strong> <span id="delBillStatus" class="badge"></span></p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Bill Items -->
                <div class="card mb-3">
                    <div class="card-header bg-light">
                        <h6 class="mb-0"><i class="fas fa-boxes"></i> Bill Items (<span id="delBillItemCount">0</span>)</h6>
                    </div>
                    <div class="card-body p-2">
                        <div class="table-responsive" style="max-height: 200px; overflow-y: auto;">
                            <table class="table table-sm table-hover mb-0">
                                <thead class="bg-light">
                                    <tr>
                                        <th>Product</th>
                                        <th class="text-right">Qty</th>
                                        <th class="text-right">Rate</th>
                                        <th class="text-right">Amount</th>
                                    </tr>
                                </thead>
                                <tbody id="delBillItemsList">
                                    <tr>
                                        <td colspan="4" class="text-center text-muted">Loading...</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Customer Account Impact -->
                <div class="card mb-3">
                    <div class="card-header bg-light">
                        <h6 class="mb-0"><i class="fas fa-user-circle"></i> Customer Account Impact</h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-sm mb-0">
                                <thead>
                                    <tr>
                                        <th>Transaction Type</th>
                                        <th>Date</th>
                                        <th class="text-right">Amount</th>
                                        <th>Description</th>
                                    </tr>
                                </thead>
                                <tbody id="delBillAccountTransactions">
                                    <tr>
                                        <td colspan="4" class="text-center text-muted">Loading...</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Loyalty Points Impact -->
                <div class="card mb-3" id="delBillLoyaltyCard" style="display: none;">
                    <div class="card-header bg-light">
                        <h6 class="mb-0"><i class="fas fa-star"></i> Loyalty Points Impact</h6>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-warning mb-2">
                            <i class="fas fa-info-circle"></i> The following loyalty points will be reversed:
                        </div>
                        <div class="table-responsive">
                            <table class="table table-sm mb-0">
                                <thead>
                                    <tr>
                                        <th>Type</th>
                                        <th class="text-right">Points</th>
                                        <th>Reference</th>
                                    </tr>
                                </thead>
                                <tbody id="delBillLoyaltyTransactions">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Summary of What Will Be Deleted -->
                <div class="card border-danger">
                    <div class="card-header bg-danger text-white">
                        <h6 class="mb-0"><i class="fas fa-trash-alt"></i> What Will Be Deleted</h6>
                    </div>
                    <div class="card-body">
                        <ul class="mb-0">
                            <li>Sale record and <strong id="delItemsCount">0</strong> sale items</li>
                            <li><strong id="delAccountCount">0</strong> customer account transactions (debit/credit)</li>
                            <li><strong id="delLoyaltyCount">0</strong> loyalty points transactions</li>
                            <li>GST details (if any)</li>
                            <li>Customer balance will be adjusted by <strong id="delBalanceAdjustment">₹0.00</strong></li>
                            <li>Customer loyalty points will be adjusted by <strong id="delPointsAdjustment">0</strong> points</li>
                        </ul>
                    </div>
                </div>

                <!-- Confirmation Input -->
                <div class="form-group mt-3 mb-0">
                    <label class="font-weight-bold text-danger">
                        Type "DELETE" to confirm deletion:
                    </label>
                    <input type="text" id="deleteConfirmInput" class="form-control" placeholder="Type DELETE to confirm" autocomplete="off">
                    <small class="text-muted">This is a security measure to prevent accidental deletions.</small>
                </div>

                <input type="hidden" id="deleteBillId" value="">
            </div>
            <div class="modal-footer bg-light">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    <i class="fas fa-times"></i> Cancel
                </button>
                <button type="button" class="btn btn-danger" id="btnConfirmDeleteBill" disabled>
                    <i class="fas fa-trash-alt"></i> Delete Bill Permanently
                </button>
            </div>
        </div>
    </div>
</div>
