<!-- Hold Bills Modal -->
<div class="modal fade" id="holdBillsModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content shadow-lg border-0">
            <div class="modal-header bg-gradient-primary text-white py-2">
                <h6 class="modal-title mb-0">
                    <i class="fas fa-pause-circle"></i> <span data-translate="holdBillsTitle">Hold Bills</span>
                </h6>
                <button type="button" class="close text-white" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body p-3" style="max-height: 70vh; overflow-y: auto;">
                <div class="alert alert-info">
                    <i class="fas fa-info-circle"></i> <span data-translate="holdBillsInfo">Click on any hold bill to resume editing. Hold bills are saved temporarily and can be resumed later.</span>
                </div>

                <!-- Hold Bills List -->
                <div id="holdBillsListContainer">
                    <div class="text-center py-5">
                        <i class="fas fa-spinner fa-spin fa-3x text-primary"></i>
                        <p class="mt-3">Loading hold bills...</p>
                    </div>
                </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> <span data-translate="close">Close</span>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Hold Bill Input Modal (for saving with note) -->
<div class="modal fade" id="holdBillInputModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-md" 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-pause-circle"></i> <span data-translate="holdBillTitle">Hold Current Bill</span>
                </h6>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body p-3">
                <div class="alert alert-warning">
                    <i class="fas fa-info-circle"></i> <span data-translate="holdBillWarning">Current cart will be saved. You can resume it later from Hold Bills list.</span>
                </div>

                <!-- Bill Summary -->
                <div class="card bg-light mb-3">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-6">
                                <small class="text-muted">Total Items:</small><br>
                                <strong id="holdSummaryItems">0</strong>
                            </div>
                            <div class="col-6 text-right">
                                <small class="text-muted">Grand Total:</small><br>
                                <strong class="text-success" id="holdSummaryTotal">₹0.00</strong>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Note Input -->
                <div class="form-group mb-3">
                    <label class="font-weight-bold">
                        <i class="fas fa-sticky-note text-warning"></i> <span data-translate="noteOptional">Note (Optional)</span>
                    </label>
                    <textarea class="form-control" id="holdBillNote" rows="3" 
                              placeholder="Add a note to identify this bill later..."></textarea>
                </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> <span data-translate="cancel">Cancel</span>
                </button>
                <button type="button" class="btn btn-sm btn-warning" id="btnConfirmHoldBill">
                    <i class="fas fa-save"></i> <span data-translate="saveBill">Hold Bill</span>
                </button>
            </div>
        </div>
    </div>
</div>
